fix(inventoryList): issues/492 set minHeight on first, last page (#507)

* inventoryList, refresh minHeight for first, last inventory page * styling, reduce inventory label size, aid in paging
RedHatInsights · Dec 2, 2020 · 0ff6683 · 0ff6683
1 parent 3f8e5f8
commit 0ff6683
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 26 deletions.
diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
@@ -126,10 +126,9 @@ exports[`InventoryList Component should handle variations in data: filtered data
   className="curiosity-inventory-card"
 >
   <MinHeight
-    autoUpdate={true}
     key="headerMinHeight"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardHeader>
@@ -156,7 +155,7 @@ exports[`InventoryList Component should handle variations in data: filtered data
   <MinHeight
     key="bodyMinHeight-10"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardBody>
@@ -204,10 +203,9 @@ exports[`InventoryList Component should handle variations in data: filtered data
     </CardBody>
   </MinHeight>
   <MinHeight
-    autoUpdate={true}
     key="footerMinHeight"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardFooter
@@ -235,10 +233,9 @@ exports[`InventoryList Component should handle variations in data: variable data
   className="curiosity-inventory-card"
 >
   <MinHeight
-    autoUpdate={true}
     key="headerMinHeight"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardHeader>
@@ -265,7 +262,7 @@ exports[`InventoryList Component should handle variations in data: variable data
   <MinHeight
     key="bodyMinHeight-10"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardBody>
@@ -309,10 +306,9 @@ exports[`InventoryList Component should handle variations in data: variable data
     </CardBody>
   </MinHeight>
   <MinHeight
-    autoUpdate={true}
     key="footerMinHeight"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardFooter
@@ -340,10 +336,9 @@ exports[`InventoryList Component should render a non-connected component: non-co
   className="curiosity-inventory-card"
 >
   <MinHeight
-    autoUpdate={true}
     key="headerMinHeight"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardHeader>
@@ -370,7 +365,7 @@ exports[`InventoryList Component should render a non-connected component: non-co
   <MinHeight
     key="bodyMinHeight-10"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardBody>
@@ -392,10 +387,9 @@ exports[`InventoryList Component should render a non-connected component: non-co
     </CardBody>
   </MinHeight>
   <MinHeight
-    autoUpdate={true}
     key="footerMinHeight"
     minHeight={0}
-    updateOnContent={false}
+    updateOnContent={true}
     updateOnResize={true}
   >
     <CardFooter

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -159,18 +159,27 @@ class InventoryList extends React.Component {
       perPageDefault,
       productId,
       query,
-      viewId
+      viewId,
+      fulfilled
     } = this.props;
 
     if (isDisabled) {
       return null;
     }
 
     const updatedPerPage = query?.[RHSM_API_QUERY_TYPES.LIMIT] || perPageDefault;
+    const updatedPage = query[RHSM_API_QUERY_TYPES.OFFSET] / query[RHSM_API_QUERY_TYPES.LIMIT] + 1 || 1;
+    const isLastPage = updatedPage === Math.ceil(itemCount / updatedPerPage);
+
+    // Set an updated key to force refresh minHeight
+    const minHeightContentRefreshKey =
+      (fulfilled === true && itemCount < updatedPerPage && `bodyMinHeight-${updatedPerPage}-resize`) ||
+      (fulfilled === true && isLastPage && `bodyMinHeight-${updatedPerPage}-resize`) ||
+      `bodyMinHeight-${updatedPerPage}`;
 
     return (
       <Card className="curiosity-inventory-card">
-        <MinHeight key="headerMinHeight" autoUpdate>
+        <MinHeight key="headerMinHeight" updateOnContent>
           <CardHeader>
             <CardTitle>
               <Title headingLevel="h2" size="lg">
@@ -189,7 +198,7 @@ class InventoryList extends React.Component {
             </CardActions>
           </CardHeader>
         </MinHeight>
-        <MinHeight key={`bodyMinHeight-${updatedPerPage}`}>
+        <MinHeight key={minHeightContentRefreshKey} updateOnContent>
           <CardBody>
             <div className={(error && 'blur') || 'fadein'}>
               {pending && (
@@ -209,7 +218,7 @@ class InventoryList extends React.Component {
             </div>
           </CardBody>
         </MinHeight>
-        <MinHeight key="footerMinHeight" autoUpdate>
+        <MinHeight key="footerMinHeight" updateOnContent>
           <CardFooter className={(error && 'blur') || ''}>
             <TableToolbar isFooter>
               <Pagination
@@ -232,12 +241,14 @@ class InventoryList extends React.Component {
  * Prop types.
  *
  * @type {{productId: string, listData: Array, session: object, pending: boolean, query: object,
- *     getHostsInventory: Function, error: boolean, cardTitle: string, itemCount: number, viewId: string,
- *     filterInventoryData: Array, filterGuestsData: Array, perPageDefault: number, isDisabled: boolean}}
+ *     fulfilled: boolean, getHostsInventory: Function, error: boolean, cardTitle: string, itemCount: number,
+ *     viewId: string, filterInventoryData: Array, filterGuestsData: Array, perPageDefault: number,
+ *     isDisabled: boolean}}
  */
 InventoryList.propTypes = {
-  error: PropTypes.bool,
   cardTitle: PropTypes.string,
+  error: PropTypes.bool,
+  fulfilled: PropTypes.bool,
   filterGuestsData: PropTypes.array,
   filterInventoryData: PropTypes.arrayOf(
     PropTypes.shape({
@@ -273,13 +284,14 @@ InventoryList.propTypes = {
 /**
  * Default props.
  *
- * @type {{viewId: string, filterInventoryData: Array, listData: Array, session: object, filterGuestsData: Array,
- *     pending: boolean, getHostsInventory: Function, perPageDefault: number, isDisabled: boolean, error: boolean,
- *     cardTitle: null, itemCount: number}}
+ * @type {{listData: Array, session: object, pending: boolean, fulfilled: boolean, getHostsInventory: Function,
+ *     error: boolean, cardTitle: null, itemCount: number, viewId: string, filterInventoryData: Array,
+ *     filterGuestsData: Array, perPageDefault: number, isDisabled: boolean}}
  */
 InventoryList.defaultProps = {
-  error: false,
   cardTitle: null,
+  error: false,
+  fulfilled: false,
   filterGuestsData: [],
   filterInventoryData: [],
   getHostsInventory: helpers.noop,

diff --git a/src/styles/_inventory-list.scss b/src/styles/_inventory-list.scss
@@ -47,6 +47,12 @@
     &.pf-c-table.pf-m-compact tr:not(.pf-c-table__expandable-row) > :first-child {
       padding-left: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
     }
+
+    .pf-c-label {
+      padding-top: 1px;
+      padding-bottom: 1px;
+      font-size: 0.9em;
+    }
   }
 
   .curiosity-guests-list {