From 0ff6683022373f65b278632ceaa1fbdff5116a5d Mon Sep 17 00:00:00 2001
From: CD Cabrera <ccabrera@redhat.com>
Date: Mon, 16 Nov 2020 17:04:54 -0500
Subject: [PATCH] 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
---
 .../__snapshots__/inventoryList.test.js.snap  | 24 +++++--------
 src/components/inventoryList/inventoryList.js | 34 +++++++++++++------
 src/styles/_inventory-list.scss               |  6 ++++
 3 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
index 3e828027b..d6c2dcc1d 100644
--- 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
index c8053cebc..d923c8b56 100644
--- a/src/components/inventoryList/inventoryList.js
+++ b/src/components/inventoryList/inventoryList.js
@@ -159,7 +159,8 @@ class InventoryList extends React.Component {
       perPageDefault,
       productId,
       query,
-      viewId
+      viewId,
+      fulfilled
     } = this.props;
 
     if (isDisabled) {
@@ -167,10 +168,18 @@ class InventoryList extends React.Component {
     }
 
     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
index 8d217a4a2..02909ba83 100644
--- 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 {