feat(tourView,i18n): issues/133 empty state tour

* tourView, apply empty state display, add translation * i18n, tour view string replacements for en-us * images & styling, tourView subscriptions svg
RedHatInsights · Nov 19, 2019 · 8574c1c · 8574c1c
1 parent edc6169
commit 8574c1c
Show file tree

Hide file tree

Showing 9 changed files with 251 additions and 16 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -14,5 +14,12 @@
     "rhelLegendHypervisorLabel": "Hypervisors",
     "rhelLegendSocketsLabel": "Physical systems",
     "rhelLegendThresholdLabel": "Subscription threshold"
+  },
+  "curiosity-tour": {
+    "emptyStateIconAlt": "{{appName}} logo",
+    "emptyStateTitle": "{{appName}} is an early access beta",
+    "emptyStateDescription": "{{appName}} helps you understand your total subscription usage and capacity over time. Take a quick tour to learn more.",
+    "emptyStateButton": "Take a tour",
+    "emptyStateLink": "Learn more"
   }
 }
diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -46,23 +46,23 @@ msgstr \\"\\"
 msgid \\"curiosity-graph.tooltipNoData\\"
 msgstr \\"\\"
 
-#: src/components/tourView/tourView.js:44
+#: src/components/tourView/tourView.js:50
 msgid \\"curiosity-tour.emptyStateButton\\"
 msgstr \\"\\"
 
-#: src/components/tourView/tourView.js:41
+#: src/components/tourView/tourView.js:47
 msgid \\"curiosity-tour.emptyStateDescription\\"
 msgstr \\"\\"
 
-#: src/components/tourView/tourView.js:31
+#: src/components/tourView/tourView.js:37
 msgid \\"curiosity-tour.emptyStateIconAlt\\"
 msgstr \\"\\"
 
-#: src/components/tourView/tourView.js:52
+#: src/components/tourView/tourView.js:58
 msgid \\"curiosity-tour.emptyStateLink\\"
 msgstr \\"\\"
 
-#: src/components/tourView/tourView.js:36
+#: src/components/tourView/tourView.js:42
 msgid \\"curiosity-tour.emptyStateTitle\\"
 msgstr \\"\\"
 

diff --git a/src/components/tourView/__tests__/__snapshots__/tourView.test.js.snap b/src/components/tourView/__tests__/__snapshots__/tourView.test.js.snap
@@ -8,8 +8,44 @@ exports[`TourView Component should have a fallback title: title 1`] = `
     />
   </PageHeader>
   <PageSection>
-    Subscription watch
-     helps you understand your total subscription usage and capacity over time.
+    <EmptyState
+      variant="full"
+    >
+      <img
+        alt={
+          Object {
+            "appName": "Subscription Watch",
+          }
+        }
+        aria-hidden={true}
+        className="curiosity-emptystate-img-icon"
+        src="subscriptions.svg"
+      />
+      <Title
+        headingLevel="h5"
+        size="lg"
+      >
+        <Component />
+      </Title>
+      <EmptyStateBody>
+        <Component />
+      </EmptyStateBody>
+      <Component
+        variant="primary"
+      >
+        t('curiosity-tour.emptyStateButton')
+      </Component>
+      <EmptyStateSecondaryActions>
+        <Component
+          component="a"
+          href="https://access.redhat.com/products/subscription-central"
+          target="_blank"
+          variant="link"
+        >
+          t('curiosity-tour.emptyStateLink')
+        </Component>
+      </EmptyStateSecondaryActions>
+    </EmptyState>
   </PageSection>
 </Fragment>
 `;
@@ -22,8 +58,94 @@ exports[`TourView Component should render a non-connected component: non-connect
     />
   </PageHeader>
   <PageSection>
-    Subscription watch
-     helps you understand your total subscription usage and capacity over time.
+    <EmptyState
+      variant="full"
+    >
+      <img
+        alt={
+          Object {
+            "appName": "Subscription Watch",
+          }
+        }
+        aria-hidden={true}
+        className="curiosity-emptystate-img-icon"
+        src="subscriptions.svg"
+      />
+      <Title
+        headingLevel="h5"
+        size="lg"
+      >
+        <Component />
+      </Title>
+      <EmptyStateBody>
+        <Component />
+      </EmptyStateBody>
+      <Component
+        variant="primary"
+      >
+        t('curiosity-tour.emptyStateButton')
+      </Component>
+      <EmptyStateSecondaryActions>
+        <Component
+          component="a"
+          href="https://access.redhat.com/products/subscription-central"
+          target="_blank"
+          variant="link"
+        >
+          t('curiosity-tour.emptyStateLink')
+        </Component>
+      </EmptyStateSecondaryActions>
+    </EmptyState>
+  </PageSection>
+</Fragment>
+`;
+
+exports[`TourView Component should render a translated component: translated 1`] = `
+<Fragment>
+  <PageHeader>
+    <PageHeaderTitle
+      title="Lorem ipsum"
+    />
+  </PageHeader>
+  <PageSection>
+    <EmptyState
+      variant="full"
+    >
+      <img
+        alt={
+          Object {
+            "appName": "Subscription Watch",
+          }
+        }
+        aria-hidden={true}
+        className="curiosity-emptystate-img-icon"
+        src="subscriptions.svg"
+      />
+      <Title
+        headingLevel="h5"
+        size="lg"
+      >
+        <Component />
+      </Title>
+      <EmptyStateBody>
+        <Component />
+      </EmptyStateBody>
+      <Component
+        variant="primary"
+      >
+        t('curiosity-tour.emptyStateButton')
+      </Component>
+      <EmptyStateSecondaryActions>
+        <Component
+          component="a"
+          href="https://access.redhat.com/products/subscription-central"
+          target="_blank"
+          variant="link"
+        >
+          t('curiosity-tour.emptyStateLink')
+        </Component>
+      </EmptyStateSecondaryActions>
+    </EmptyState>
   </PageSection>
 </Fragment>
 `;
diff --git a/src/components/tourView/__tests__/tourView.test.js b/src/components/tourView/__tests__/tourView.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { TourView } from '../tourView';
+import { TranslatedTourView, TourView } from '../tourView';
 
 describe('TourView Component', () => {
   it('should render a non-connected component', () => {
@@ -16,6 +16,19 @@ describe('TourView Component', () => {
     expect(component).toMatchSnapshot('non-connected');
   });
 
+  it('should render a translated component', () => {
+    const props = {
+      routeDetail: {
+        routeItem: {
+          title: 'Lorem ipsum'
+        }
+      }
+    };
+
+    const component = shallow(<TranslatedTourView {...props} />);
+    expect(component).toMatchSnapshot('translated');
+  });
+
   it('should have a fallback title', () => {
     const props = {};
 

diff --git a/src/components/tourView/tourView.js b/src/components/tourView/tourView.js
@@ -1,18 +1,64 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { PageHeader, PageHeaderTitle } from '@redhat-cloud-services/frontend-components';
-import { PageSection } from '@patternfly/react-core';
+import {
+  Button,
+  EmptyState,
+  EmptyStateVariant,
+  EmptyStateBody,
+  EmptyStateSecondaryActions,
+  PageSection,
+  Title
+} from '@patternfly/react-core';
 import { helpers } from '../../common';
+import { translateComponent } from '../i18n/i18n';
+import subscriptionsSvg from '../../images/subscriptions.svg';
 
-const TourView = ({ routeDetail }) => (
+/**
+ * FixMe: Patternfly EmptyStateIcon can't pass a basic image
+ * Requires the use of function based component syntax
+ */
+/**
+ * FixMe: Patternfly EmptyStateBody and Title appear to throw an error on translate string replacement
+ * Wrap with a fragment to pass.
+ */
+const TourView = ({ routeDetail, t }) => (
   <React.Fragment>
     <PageHeader>
       <PageHeaderTitle
         title={(routeDetail.routeItem && routeDetail.routeItem.title) || helpers.UI_DISPLAY_START_NAME}
       />
     </PageHeader>
     <PageSection>
-      {helpers.UI_DISPLAY_START_NAME} helps you understand your total subscription usage and capacity over time.
+      <EmptyState variant={EmptyStateVariant.full}>
+        <img
+          src={subscriptionsSvg}
+          className="curiosity-emptystate-img-icon"
+          alt={t('curiosity-tour.emptyStateIconAlt', { appName: helpers.UI_DISPLAY_CONFIG_NAME })}
+          aria-hidden
+        />
+        <Title headingLevel="h5" size="lg">
+          <React.Fragment>
+            {t('curiosity-tour.emptyStateTitle', { appName: helpers.UI_DISPLAY_CONFIG_NAME })}
+          </React.Fragment>
+        </Title>
+        <EmptyStateBody>
+          <React.Fragment>
+            {t('curiosity-tour.emptyStateDescription', { appName: helpers.UI_DISPLAY_START_NAME })}
+          </React.Fragment>
+        </EmptyStateBody>
+        <Button variant="primary">{t('curiosity-tour.emptyStateButton')}</Button>
+        <EmptyStateSecondaryActions>
+          <Button
+            component="a"
+            variant="link"
+            target="_blank"
+            href="https://access.redhat.com/products/subscription-central"
+          >
+            {t('curiosity-tour.emptyStateLink')}
+          </Button>
+        </EmptyStateSecondaryActions>
+      </EmptyState>
     </PageSection>
   </React.Fragment>
 );
@@ -22,11 +68,15 @@ TourView.propTypes = {
     routeItem: PropTypes.shape({
       title: PropTypes.string
     })
-  })
+  }),
+  t: PropTypes.func
 };
 
 TourView.defaultProps = {
-  routeDetail: {}
+  routeDetail: {},
+  t: helpers.noopTranslate
 };
 
-export { TourView as default, TourView };
+const TranslatedTourView = translateComponent(TourView);
+
+export { TranslatedTourView as default, TranslatedTourView, TourView };
diff --git a/src/images/subscriptions.svg b/src/images/subscriptions.svg
diff --git a/src/styles/_tour.scss b/src/styles/_tour.scss
@@ -0,0 +1,5 @@
+.curiosity {
+  .curiosity-emptystate-img-icon {
+    height: 100px;
+  }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -8,3 +8,4 @@
 @import 'app';
 @import 'common';
 @import 'usage-graph';
+@import 'tour';
diff --git a/tests/__snapshots__/dist.test.js.snap b/tests/__snapshots__/dist.test.js.snap
@@ -23,5 +23,6 @@ Array [
   "./build/static/media/pfbg_768*jpg",
   "./build/static/media/pfbg_768@2x*jpg",
   "./build/static/media/pfbg_992@2x*jpg",
+  "./build/static/media/subscriptions*svg",
 ]
 `;