fix(SystemPolicyCards): RHICOMPL-1213 same height on all cards

sets the height to 100% to fill the cell in a grid through newly accessible prop.
Hyperkid123 · Jan 8, 2021 · c304d72 · c304d72
1 parent 14ee8a0
commit c304d72
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 6 deletions.
diff --git a/packages/inventory-compliance/src/SystemPolicyCard.js b/packages/inventory-compliance/src/SystemPolicyCard.js
@@ -58,11 +58,11 @@ class SystemPolicyCard extends React.Component {
         const {
             policy, rulesFailed, compliant, lastScanned, score, ssgVersion, supported
         } = this.state.policy;
-        const { cardTitle, cardSubTitle } = this.state;
+        const { cardTitle, cardSubTitle, style } = this.state;
         const passedPercentage = this.fixedPercentage(score);
         const FormattedRelativeCmp = FormattedRelativeTime || FormattedRelative || Fragment;
 
-        return <Card>
+        return <Card style={ style }>
             <CardBody>
                 <TextContent className='margin-bottom-md'>
                     <Text className='margin-bottom-top-none'
@@ -133,7 +133,8 @@ SystemPolicyCard.propTypes = {
         policyType: PropTypes.string,
         compliant: PropTypes.bool,
         ssgVersion: PropTypes.string,
-        supported: PropTypes.bool
+        supported: PropTypes.bool,
+        style: PropTypes.object
     })
 };
 

diff --git a/packages/inventory-compliance/src/SystemPolicyCards.js b/packages/inventory-compliance/src/SystemPolicyCards.js
@@ -10,7 +10,7 @@ class SystemPolicyCards extends React.Component {
         return policies.filter((policy) => (policy.rulesFailed + policy.rulesPassed) > 0).map(
             (policy, i) =>
                 <GridItem sm={ 12 } md={ 12 } lg={ 6 } xl={ 4 } key={ i }>
-                    <SystemPolicyCard policy={ policy } />
+                    <SystemPolicyCard policy={ policy } style={{ height: '100%' }} />
                 </GridItem>
         );
     }

diff --git a/packages/inventory-compliance/src/__snapshots__/SystemPolicyCards.test.js.snap b/packages/inventory-compliance/src/__snapshots__/SystemPolicyCards.test.js.snap
@@ -63,14 +63,30 @@ exports[`SystemPolicyCards component should render loading state 1`] = `
                   "supported": true,
                 }
               }
+              style={
+                Object {
+                  "height": "100%",
+                }
+              }
             >
-              <Card>
+              <Card
+                style={
+                  Object {
+                    "height": "100%",
+                  }
+                }
+              >
                 <article
                   className="pf-c-card"
                   data-ouia-component-id="OUIA-Generated-Card-1"
                   data-ouia-component-type="PF4/Card"
                   data-ouia-safe={true}
                   id=""
+                  style={
+                    Object {
+                      "height": "100%",
+                    }
+                  }
                 >
                   <CardBody>
                     <div
@@ -554,14 +570,30 @@ exports[`SystemPolicyCards component should render real table 1`] = `
                   "supported": true,
                 }
               }
+              style={
+                Object {
+                  "height": "100%",
+                }
+              }
             >
-              <Card>
+              <Card
+                style={
+                  Object {
+                    "height": "100%",
+                  }
+                }
+              >
                 <article
                   className="pf-c-card"
                   data-ouia-component-id="OUIA-Generated-Card-5"
                   data-ouia-component-type="PF4/Card"
                   data-ouia-safe={true}
                   id=""
+                  style={
+                    Object {
+                      "height": "100%",
+                    }
+                  }
                 >
                   <CardBody>
                     <div