fix(inventoryTabs): allow any child component (#721)

RedHatInsights · Jul 26, 2021 · ae64e86 · ae64e86
1 parent 8bad6e8
commit ae64e86
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 7 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -66,6 +66,7 @@
     "cardHeading": "Current systems",
     "tabHeading": "Inventory listing",
     "tabHeading_plural": "Inventory listings",
+    "tabSubHeading": "Tab {{count}}",
     "tabHosts": "Current systems",
     "tabHosts_noInstances_OpenShift-dedicated-metrics": "Current instances",
     "tabHosts_OpenShift-dedicated-metrics": "{{count}} instance",

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -145,6 +145,10 @@ Array [
   Object {
     "file": "./src/components/inventoryTabs/inventoryTabs.js",
     "keys": Array [
+      Object {
+        "key": "curiosity-inventory.tabSubHeading",
+        "match": "t('curiosity-inventory.tabSubHeading', { count: index })",
+      },
       Object {
         "key": "curiosity-inventory.tabHeading",
         "match": "t('curiosity-inventory.tabHeading', { count: updatedChildren.length })",

diff --git a/src/components/inventoryTabs/__tests__/__snapshots__/inventoryTabs.test.js.snap b/src/components/inventoryTabs/__tests__/__snapshots__/inventoryTabs.test.js.snap
@@ -19,7 +19,7 @@ exports[`InventoryTabs Component should render a non-connected component: non-co
     className="sr-only"
     headingLevel="h2"
   >
-    t(curiosity-inventory.tabHeading, {"count":2})
+    t(curiosity-inventory.tabHeading, {"count":3})
   </Title>
   <Tabs
     activeTab={0}
@@ -39,6 +39,11 @@ exports[`InventoryTabs Component should render a non-connected component: non-co
           "content": "amet",
           "title": "sit",
         },
+        Object {
+          "active": false,
+          "content": <GenericComponent />,
+          "title": "t(curiosity-inventory.tabSubHeading, {\\"count\\":2})",
+        },
       ]
     }
   />

diff --git a/src/components/inventoryTabs/__tests__/inventoryTabs.test.js b/src/components/inventoryTabs/__tests__/inventoryTabs.test.js
@@ -15,6 +15,12 @@ describe('InventoryTabs Component', () => {
   });
 
   it('should render a non-connected component', () => {
+    const GenericComponent = () => (
+      <div>
+        <strong>world</strong>
+      </div>
+    );
+
     const props = {
       productId: 'lorem',
       children: [
@@ -23,7 +29,8 @@ describe('InventoryTabs Component', () => {
         </InventoryTab>,
         <InventoryTab key="sit" title="sit">
           amet
-        </InventoryTab>
+        </InventoryTab>,
+        <GenericComponent key="hello" />
       ]
     };
 

diff --git a/src/components/inventoryTabs/inventoryTabs.js b/src/components/inventoryTabs/inventoryTabs.js
@@ -45,11 +45,15 @@ class InventoryTabs extends React.Component {
       return null;
     }
 
-    const updatedChildren = React.Children.toArray(children).map(({ props = {} }) => ({
-      active: props.active || false,
-      content: props.children,
-      title: props.title
-    }));
+    const updatedChildren = React.Children.toArray(children).map((child, index) => {
+      const { props = {} } = child;
+
+      return {
+        active: props.active || false,
+        content: props.children || child,
+        title: props.title || t('curiosity-inventory.tabSubHeading', { count: index })
+      };
+    });
 
     return (
       <React.Fragment>