fix(inventoryList): issues/403 adjust for expanded guestsList (#460)

* graphCard, remove default minHeight prop * inventoryList, autoUpdate prop * minHeight, flip autoUpdate, inner container height for reset
RedHatInsights · Oct 13, 2020 · 22cf693 · 22cf693
1 parent 51e4b41
commit 22cf693
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 12 deletions.
diff --git a/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap b/src/components/graphCard/__tests__/__snapshots__/graphCard.test.js.snap
@@ -71,6 +71,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
 >
   <MinHeight
     autoUpdate={false}
+    key="headerMinHeight"
     minHeight={0}
   >
     <CardHeader>
@@ -123,6 +124,7 @@ exports[`GraphCard Component should render a non-connected component: non-connec
   </MinHeight>
   <MinHeight
     autoUpdate={false}
+    key="bodyMinHeight"
     minHeight={0}
   >
     <CardBody>
@@ -198,6 +200,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
 >
   <MinHeight
     autoUpdate={false}
+    key="headerMinHeight"
     minHeight={0}
   >
     <CardHeader>
@@ -250,6 +253,7 @@ exports[`GraphCard Component should render multiple states: error with 403 statu
   </MinHeight>
   <MinHeight
     autoUpdate={false}
+    key="bodyMinHeight"
     minHeight={0}
   >
     <CardBody>
@@ -321,6 +325,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
 >
   <MinHeight
     autoUpdate={false}
+    key="headerMinHeight"
     minHeight={0}
   >
     <CardHeader>
@@ -373,6 +378,7 @@ exports[`GraphCard Component should render multiple states: error with 500 statu
   </MinHeight>
   <MinHeight
     autoUpdate={false}
+    key="bodyMinHeight"
     minHeight={0}
   >
     <CardBody>
@@ -444,6 +450,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
 >
   <MinHeight
     autoUpdate={false}
+    key="headerMinHeight"
     minHeight={0}
   >
     <CardHeader>
@@ -496,6 +503,7 @@ exports[`GraphCard Component should render multiple states: fulfilled 1`] = `
   </MinHeight>
   <MinHeight
     autoUpdate={false}
+    key="bodyMinHeight"
     minHeight={0}
   >
     <CardBody>
@@ -567,6 +575,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
 >
   <MinHeight
     autoUpdate={false}
+    key="headerMinHeight"
     minHeight={0}
   >
     <CardHeader>
@@ -619,6 +628,7 @@ exports[`GraphCard Component should render multiple states: pending 1`] = `
   </MinHeight>
   <MinHeight
     autoUpdate={false}
+    key="bodyMinHeight"
     minHeight={0}
   >
     <CardBody>

diff --git a/src/components/graphCard/graphCard.js b/src/components/graphCard/graphCard.js
@@ -181,7 +181,7 @@ class GraphCard extends React.Component {
 
     return (
       <Card className="curiosity-usage-graph">
-        <MinHeight autoUpdate={false}>
+        <MinHeight key="headerMinHeight">
           <CardHeader>
             <CardTitle>
               <Title headingLevel="h2" size="lg">
@@ -200,7 +200,7 @@ class GraphCard extends React.Component {
             </CardActions>
           </CardHeader>
         </MinHeight>
-        <MinHeight autoUpdate={false}>
+        <MinHeight key="bodyMinHeight">
           <CardBody>
             <div className={(error && 'blur') || 'fadein'}>
               {pending && <Loader variant="graph" />}

diff --git a/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap b/src/components/inventoryList/__tests__/__snapshots__/inventoryList.test.js.snap
@@ -152,7 +152,7 @@ exports[`InventoryList Component should handle variations in data: filtered data
     </CardHeader>
   </MinHeight>
   <MinHeight
-    autoUpdate={true}
+    autoUpdate={false}
     key="bodyMinHeight-10"
     minHeight={0}
   >
@@ -249,7 +249,7 @@ exports[`InventoryList Component should handle variations in data: variable data
     </CardHeader>
   </MinHeight>
   <MinHeight
-    autoUpdate={true}
+    autoUpdate={false}
     key="bodyMinHeight-10"
     minHeight={0}
   >
@@ -349,7 +349,7 @@ exports[`InventoryList Component should render a non-connected component: non-co
     </CardHeader>
   </MinHeight>
   <MinHeight
-    autoUpdate={true}
+    autoUpdate={false}
     key="bodyMinHeight-10"
     minHeight={0}
   >

diff --git a/src/components/inventoryList/inventoryList.js b/src/components/inventoryList/inventoryList.js
@@ -165,7 +165,7 @@ class InventoryList extends React.Component {
 
     return (
       <Card className="curiosity-inventory-card">
-        <MinHeight key="headerMinHeight">
+        <MinHeight key="headerMinHeight" autoUpdate>
           <CardHeader>
             <CardTitle>
               <Title headingLevel="h2" size="lg">
@@ -202,7 +202,7 @@ class InventoryList extends React.Component {
             </div>
           </CardBody>
         </MinHeight>
-        <MinHeight key="footerMinHeight">
+        <MinHeight key="footerMinHeight" autoUpdate>
           <CardFooter className={(error && 'blur') || ''}>
             <TableToolbar isFooter>
               <Pagination

diff --git a/src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap b/src/components/minHeight/__tests__/__snapshots__/minHeight.test.js.snap
@@ -8,6 +8,8 @@ exports[`MinHeight Component should render a non-connected component: non-connec
     }
   }
 >
-  lorem ipsum
+  <div>
+    lorem ipsum
+  </div>
 </div>
 `;
diff --git a/src/components/minHeight/__tests__/minHeight.test.js b/src/components/minHeight/__tests__/minHeight.test.js
@@ -11,7 +11,9 @@ describe('MinHeight Component', () => {
   });
 
   it('should set minHeight in relation to contents and props', () => {
-    const props = {};
+    const props = {
+      autoUpdate: true
+    };
     const component = shallow(<MinHeight {...props}>lorem ipsum</MinHeight>);
 
     expect(component.instance().setMinHeight).toBeDefined();

diff --git a/src/components/minHeight/minHeight.js b/src/components/minHeight/minHeight.js
@@ -11,6 +11,8 @@ import { helpers } from '../../common';
 class MinHeight extends React.Component {
   containerRef = React.createRef();
 
+  innerContainerRef = React.createRef();
+
   updatedMinHeight = 0;
 
   updatedContainerWidth = 0;
@@ -58,9 +60,10 @@ class MinHeight extends React.Component {
     const { updatedMinHeight } = this;
     const { minHeight: overrideMinHeight } = this.props;
     const { current: domElement = {} } = this.containerRef;
+    const { current: innerDomElement = {} } = this.innerContainerRef;
 
     if (resetMinHeight && domElement.style) {
-      domElement.style.minHeight = 0;
+      domElement.style.minHeight = innerDomElement?.clientHeight || 0;
     }
 
     const clientHeight = domElement?.clientHeight || 0;
@@ -102,7 +105,7 @@ class MinHeight extends React.Component {
 
     return (
       <div ref={this.containerRef} style={{ minHeight: updatedMinHeight }}>
-        {children}
+        <div ref={this.innerContainerRef}>{children}</div>
       </div>
     );
   }
@@ -125,7 +128,7 @@ MinHeight.propTypes = {
  * @type {{minHeight: number, autoUpdate: boolean}}
  */
 MinHeight.defaultProps = {
-  autoUpdate: true,
+  autoUpdate: false,
   minHeight: 0
 };
-Original file line number
+Diff line change
@@ Expand Up @@
         }
       }
     >
-      lorem ipsum
+      <div>
+        lorem ipsum
+      </div>
     </div>
     `;