feat(productViewMissing): ent-3753 missing product view (#630)

* i18n, missing product view strings, product titles * pageLayout, allow additional classNames * productViewMissing, display products and nav * routerConfig, fallback root route, add nav filter prop, isSearchable * routerHelpers, basePath, consistency with baseName * styling, add product view styling for missing view, clean up
RedHatInsights · Apr 28, 2021 · cf49ba0 · cf49ba0
1 parent a98608a
commit cf49ba0
Show file tree

Hide file tree

Showing 26 changed files with 643 additions and 62 deletions.
diff --git a/config/cspell.config.json b/config/cspell.config.json
@@ -17,6 +17,7 @@
     "flyout",
     "generatedid",
     "HHmmss",
+    "hoverable",
     "ibmpower",
     "ibmz",
     "ipsum",

diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -171,12 +171,22 @@
   "curiosity-view": {
     "title": "{{appName}}",
     "subtitle": "Monitor your usage based on your subscription terms. <0>Learn more about {{appName}} reporting</0>",
+    "description": "Monitor your usage based on your subscription terms.",
     "title_OpenShift Container Platform": "OpenShift Container Platform",
     "subtitle_OpenShift Container Platform": "Monitor your OpenShift Container Platform usage for both Annual and On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
+    "description_OpenShift Container Platform": "Monitor your OpenShift Container Platform usage for both Annual and On-Demand subscriptions.",
     "title_OpenShift-dedicated-metrics": "OpenShift Dedicated",
     "subtitle_OpenShift-dedicated-metrics": "Monitor your OpenShift Dedicated usage for On-Demand subscriptions. <0>Learn more about {{appName}} reporting</0>",
+    "description_OpenShift-dedicated-metrics": "Monitor your OpenShift Dedicated usage for On-Demand subscriptions.",
     "title_RHEL": "Red Hat Enterprise Linux",
     "subtitle_RHEL": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets. <0>Learn more about {{appName}} reporting</0>",
-    "title_Satellite": "Red Hat Satellite"
+    "description_RHEL": "Monitor your Red Hat Enterprise Linux usage by physical, virtual, and public cloud sockets.",
+    "title_RHEL for ARM": "Red Hat Enterprise Linux for ARM",
+    "title_RHEL for IBM Power": "Red Hat Enterprise Linux for IBM Power",
+    "title_RHEL for IBM z": "Red Hat Enterprise Linux for IBM z",
+    "title_RHEL for x86": "Red Hat Enterprise Linux for x86",
+    "title_Satellite": "Red Hat Satellite",
+    "title_Satellite Capsule": "Red Hat Satellite Capsule",
+    "title_Satellite Server": "Red Hat Satellite Server"
   }
 }
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -66,7 +66,9 @@ exports[`Authentication Component should render a non-connected component error:
     pageTitle={null}
     title={null}
   >
-    <PageLayout>
+    <PageLayout
+      className=""
+    >
       <PageHeader
         includeTour={false}
         key=".0"
@@ -125,15 +127,15 @@ exports[`Authentication Component should render a non-connected component error:
         </PageHeader>
       </PageHeader>
       <PageSection
-        className="curiosity"
+        className="curiosity "
         padding={
           Object {
             "default": "noPadding",
           }
         }
       >
         <section
-          className="pf-c-page__main-section pf-m-no-padding curiosity"
+          className="pf-c-page__main-section pf-m-no-padding curiosity "
         >
           <PageSection
             className=""

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -257,6 +257,23 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/components/productView/productViewMissing.js",
+    "keys": Array [
+      Object {
+        "key": "curiosity-view.title",
+        "match": "t(\`curiosity-view.title\`, { appName: helpers.UI_DISPLAY_NAME })",
+      },
+      Object {
+        "key": "curiosity-view.title",
+        "match": "t('curiosity-view.title', { appName: helpers.UI_DISPLAY_NAME, context: product.pathParameter })",
+      },
+      Object {
+        "key": "curiosity-view.description",
+        "match": "t('curiosity-view.description', { appName: helpers.UI_DISPLAY_NAME, context: product.productParameter })",
+      },
+    ],
+  },
   Object {
     "file": "./src/components/productView/productViewOpenShiftContainer.js",
     "keys": Array [

diff --git a/src/components/loader/__tests__/__snapshots__/loader.test.js.snap b/src/components/loader/__tests__/__snapshots__/loader.test.js.snap
@@ -78,7 +78,9 @@ exports[`Loader Component should handle variant loader components: variant: tabl
 `;
 
 exports[`Loader Component should handle variant loader components: variant: title 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={false}
     productLabel={null}

diff --git a/src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap b/src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`MessageView Component should have fallback conditions for all props: fallback display 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={false}
     productLabel={null}
@@ -21,7 +23,9 @@ exports[`MessageView Component should have fallback conditions for all props: fa
 `;
 
 exports[`MessageView Component should render a non-connected component: non-connected 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={false}
     productLabel={null}
@@ -54,7 +58,9 @@ exports[`MessageView Component should render a non-connected component: non-conn
 `;
 
 exports[`MessageView Component should render children when provided: children display 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={false}
     productLabel={null}

diff --git a/src/components/optinView/__tests__/__snapshots__/optinView.test.js.snap b/src/components/optinView/__tests__/__snapshots__/optinView.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OptinView Component should render a non-connected component: non-connected 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <Card>
     <Flex>
       <Flex
@@ -244,7 +246,9 @@ exports[`OptinView Component should render an API state driven view: fulfilled v
 `;
 
 exports[`OptinView Component should render an API state driven view: initial view 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <Card>
     <Flex>
       <Flex

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
@@ -1,17 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PageLayout Component should render a basic component: basic 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageSection
-    className="curiosity"
+    className="curiosity "
     padding={
       Object {
         "default": "noPadding",
       }
     }
   >
     <section
-      className="pf-c-page__main-section pf-m-no-padding curiosity"
+      className="pf-c-page__main-section pf-m-no-padding curiosity "
     >
       <span
         className="test"
@@ -25,7 +27,9 @@ exports[`PageLayout Component should render a basic component: basic 1`] = `
 `;
 
 exports[`PageLayout Component should render header and section children: multiple children 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={false}
     key=".1"
@@ -84,15 +88,15 @@ exports[`PageLayout Component should render header and section children: multipl
     </PageHeader>
   </PageHeader>
   <PageSection
-    className="curiosity"
+    className="curiosity "
     padding={
       Object {
         "default": "noPadding",
       }
     }
   >
     <section
-      className="pf-c-page__main-section pf-m-no-padding curiosity"
+      className="pf-c-page__main-section pf-m-no-padding curiosity "
     >
       <PageSection
         className=""

diff --git a/src/components/pageLayout/pageLayout.js b/src/components/pageLayout/pageLayout.js
@@ -16,14 +16,15 @@ import { PageToolbar } from './pageToolbar';
  *
  * @param {object} props
  * @param {Node} props.children
+ * @param {string} props.className
  * @returns {Node}
  */
-const PageLayout = ({ children }) => (
+const PageLayout = ({ children, className }) => (
   <React.Fragment>
     {React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === PageHeader)}
     {React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === PageMessages)}
     {React.Children.toArray(children).filter(child => React.isValidElement(child) && child.type === PageToolbar)}
-    <Main padding={{ default: 'noPadding' }} className="curiosity">
+    <Main padding={{ default: 'noPadding' }} className={`curiosity ${className}`}>
       {React.Children.toArray(children).filter(
         child => child.type !== PageHeader && child.type !== PageMessages && child.type !== PageToolbar
       )}
@@ -34,15 +35,20 @@ const PageLayout = ({ children }) => (
 /**
  * Prop types.
  *
- * @type {{children: Node}}
+ * @type {{children: Node, className: string}}
  */
 PageLayout.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string
 };
 
 /**
  * Default props.
+ *
+ * @type {{className: string}}
  */
-PageLayout.defaultProps = {};
+PageLayout.defaultProps = {
+  className: ''
+};
 
 export { PageLayout as default, PageLayout, PageColumns, PageHeader, PageMessages, PageSection, PageToolbar };
diff --git a/src/components/productView/__tests__/__snapshots__/productView.test.js.snap b/src/components/productView/__tests__/__snapshots__/productView.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProductView Component should allow custom product views: custom graphCard, descriptions 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={true}
     productLabel="lorem ipsum product label"
@@ -132,7 +134,9 @@ exports[`ProductView Component should allow custom product views: custom graphCa
 `;
 
 exports[`ProductView Component should allow custom product views: custom toolbar, toolbarGraph 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={true}
     productLabel="lorem ipsum product label"
@@ -207,7 +211,9 @@ exports[`ProductView Component should allow custom product views: custom toolbar
 `;
 
 exports[`ProductView Component should allow custom product views: custom toolbar, toolbarProduct 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={true}
     productLabel="lorem ipsum product label"
@@ -282,7 +288,9 @@ exports[`ProductView Component should allow custom product views: custom toolbar
 `;
 
 exports[`ProductView Component should render a non-connected component: non-connected 1`] = `
-<PageLayout>
+<PageLayout
+  className=""
+>
   <PageHeader
     includeTour={true}
     productLabel="lorem ipsum product label"