fix(authentication,messageView): auth empty state

* authentication, update auth empty state * messageView, add pageTitle prop
RedHatInsights · Apr 17, 2020 · d279d34 · d279d34
1 parent 5192152
commit d279d34
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 31 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -1,8 +1,8 @@
 {
   "curiosity-auth": {
     "pending": "Authenticating...",
-    "authorizedTitle": "Unauthorized",
-    "authorizedCopy": "You do not have permission to access reporting. Contact your administrator."
+    "authorizedTitle": "You do not have access to {{appName}}.",
+    "authorizedCopy": "Contact your organization administrator(s) for more information."
   },
   "curiosity-graph": {
     "cardHeading": "CPU usage",

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -61,7 +61,8 @@ exports[`Authorization Component should render a non-connected component error:
   <MessageView
     icon={[Function]}
     message="t(curiosity-auth.authorizedCopy, ...)"
-    title="t(curiosity-auth.authorizedTitle, ...)"
+    pageTitle={null}
+    title="t(curiosity-auth.authorizedTitle, [object Object])"
   >
     <PageLayout>
       <PageHeader
@@ -73,7 +74,7 @@ exports[`Authorization Component should render a non-connected component error:
             widget-type="InsightsPageHeader"
           >
             <PageHeaderTitle
-              title="t(curiosity-auth.authorizedTitle, ...)"
+              title="Subscription Watch"
             >
               <Title
                 className=""
@@ -85,7 +86,7 @@ exports[`Authorization Component should render a non-connected component error:
                   widget-type="InsightsPageHeaderTitle"
                 >
                    
-                  t(curiosity-auth.authorizedTitle, ...)
+                  Subscription Watch
                    
                 </h1>
               </Title>
@@ -107,10 +108,20 @@ exports[`Authorization Component should render a non-connected component error:
             <div
               className="pf-c-empty-state fadein"
             >
+              <Title
+                headingLevel="h2"
+                size="lg"
+              >
+                <h2
+                  className="pf-c-title pf-m-lg"
+                >
+                  t(curiosity-auth.authorizedTitle, [object Object])
+                </h2>
+              </Title>
               <EmptyStateIcon
                 icon={[Function]}
               >
-                <BanIcon
+                <LockIcon
                   aria-hidden="true"
                   className="pf-c-empty-state__icon"
                   color="currentColor"
@@ -130,15 +141,15 @@ exports[`Authorization Component should render a non-connected component error:
                         "verticalAlign": "-0.125em",
                       }
                     }
-                    viewBox="0 0 512 512"
+                    viewBox="0 0 448 512"
                     width="1em"
                   >
                     <path
-                      d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+                      d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
                       transform=""
                     />
                   </svg>
-                </BanIcon>
+                </LockIcon>
               </EmptyStateIcon>
               <EmptyStateBody>
                 <div
@@ -160,7 +171,8 @@ exports[`Authorization Component should render a non-connected component pending
 <MessageView
   icon={[Function]}
   message="t(curiosity-auth.pending, ...)"
-  title=" "
+  pageTitle=" "
+  title={null}
 />
 `;
 
@@ -175,7 +187,7 @@ exports[`Authorization Component should return a message on 401 error: 401 error
         widget-type="InsightsPageHeader"
       >
         <PageHeaderTitle
-          title="t(curiosity-auth.authorizedTitle, ...)"
+          title="Subscription Watch"
         >
           <Title
             className=""
@@ -187,7 +199,7 @@ exports[`Authorization Component should return a message on 401 error: 401 error
               widget-type="InsightsPageHeaderTitle"
             >
                
-              t(curiosity-auth.authorizedTitle, ...)
+              Subscription Watch
                
             </h1>
           </Title>
@@ -209,10 +221,20 @@ exports[`Authorization Component should return a message on 401 error: 401 error
         <div
           className="pf-c-empty-state fadein"
         >
+          <Title
+            headingLevel="h2"
+            size="lg"
+          >
+            <h2
+              className="pf-c-title pf-m-lg"
+            >
+              t(curiosity-auth.authorizedTitle, [object Object])
+            </h2>
+          </Title>
           <EmptyStateIcon
             icon={[Function]}
           >
-            <BanIcon
+            <LockIcon
               aria-hidden="true"
               className="pf-c-empty-state__icon"
               color="currentColor"
@@ -232,15 +254,15 @@ exports[`Authorization Component should return a message on 401 error: 401 error
                     "verticalAlign": "-0.125em",
                   }
                 }
-                viewBox="0 0 512 512"
+                viewBox="0 0 448 512"
                 width="1em"
               >
                 <path
-                  d="M256 8C119.034 8 8 119.033 8 256s111.034 248 248 248 248-111.034 248-248S392.967 8 256 8zm130.108 117.892c65.448 65.448 70 165.481 20.677 235.637L150.47 105.216c70.204-49.356 170.226-44.735 235.638 20.676zM125.892 386.108c-65.448-65.448-70-165.481-20.677-235.637L361.53 406.784c-70.203 49.356-170.226 44.736-235.638-20.676z"
+                  d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"
                   transform=""
                 />
               </svg>
-            </BanIcon>
+            </LockIcon>
           </EmptyStateIcon>
           <EmptyStateBody>
             <div

diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { BanIcon, BinocularsIcon } from '@patternfly/react-icons';
+import { BinocularsIcon, LockIcon } from '@patternfly/react-icons';
 import { connectRouterTranslate, reduxActions } from '../../redux';
 import { helpers } from '../../common';
 import { Redirect, routerHelpers, routerTypes } from '../router/router';
@@ -55,7 +55,7 @@ class Authentication extends Component {
     }
 
     if (session.pending) {
-      return <MessageView title="&nbsp;" message={t('curiosity-auth.pending', '...')} icon={BinocularsIcon} />;
+      return <MessageView pageTitle="&nbsp;" message={t('curiosity-auth.pending', '...')} icon={BinocularsIcon} />;
     }
 
     if (session.errorStatus === 403 || session.errorStatus === 418) {
@@ -67,9 +67,9 @@ class Authentication extends Component {
 
     return (
       <MessageView
-        title={t('curiosity-auth.authorizedTitle', '...')}
+        title={t('curiosity-auth.authorizedTitle', { appName: helpers.UI_DISPLAY_NAME })}
         message={t('curiosity-auth.authorizedCopy', '...')}
-        icon={BanIcon}
+        icon={LockIcon}
       />
     );
   }

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -14,6 +14,10 @@ exports[`I18n Component should generate a predictable pot output snapshot: pot o
 msgstr \\"\\"
 \\"Content-Type: text/plain; charset=UTF-8\\\\n\\"
 
+#: src/components/authentication/authentication.js:70
+msgid \\"curiosity-auth.authorizedTitle\\"
+msgstr \\"\\"
+
 #: src/components/openshiftView/openshiftView.js:90
 msgid \\"curiosity-graph.cardHeading\\"
 msgstr \\"\\"
@@ -127,11 +131,6 @@ msgctxt \\"...\\"
 msgid \\"curiosity-auth.authorizedCopy\\"
 msgstr \\"\\"
 
-#: src/components/authentication/authentication.js:70
-msgctxt \\"...\\"
-msgid \\"curiosity-auth.authorizedTitle\\"
-msgstr \\"\\"
-
 #: src/components/authentication/authentication.js:58
 msgctxt \\"...\\"
 msgid \\"curiosity-auth.pending\\"

diff --git a/src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap b/src/components/messageView/__tests__/__snapshots__/messageView.test.js.snap
@@ -15,12 +15,18 @@ exports[`MessageView Component should have fallback conditions for all props: fa
 exports[`MessageView Component should render a non-connected component: non-connected 1`] = `
 <PageLayout>
   <PageHeader>
-    lorem
+    Subscription Watch
   </PageHeader>
   <EmptyState
     className="fadein"
     variant="full"
   >
+    <Title
+      headingLevel="h2"
+      size="lg"
+    >
+      lorem
+    </Title>
     <EmptyStateIcon
       icon={[Function]}
     />

diff --git a/src/components/messageView/messageView.js b/src/components/messageView/messageView.js
@@ -1,22 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EmptyState as PfEmptyState, EmptyStateBody, EmptyStateIcon, EmptyStateVariant } from '@patternfly/react-core';
+import {
+  EmptyState as PfEmptyState,
+  EmptyStateBody,
+  EmptyStateIcon,
+  EmptyStateVariant,
+  Title
+} from '@patternfly/react-core';
 import { PageLayout, PageHeader } from '../pageLayout/pageLayout';
 import { helpers } from '../../common';
 
 /**
- * FixMe: Patternfly EmptyStateIcon PropType is not intuitive
- * Requires the use of a function proptype?!?
+ * FixMe: Patternfly EmptyStateIcon PropType registers as function?
  */
 /**
  * Render a message view.
  *
  * @returns {Node}
  */
-const MessageView = ({ icon, message, title }) => (
+const MessageView = ({ icon, message, pageTitle, title }) => (
   <PageLayout>
-    <PageHeader>{title || helpers.UI_DISPLAY_CONFIG_NAME}</PageHeader>
+    <PageHeader>{pageTitle || helpers.UI_DISPLAY_NAME}</PageHeader>
     <PfEmptyState variant={EmptyStateVariant.full} className="fadein">
+      {title && (
+        <Title headingLevel="h2" size="lg">
+          {title}
+        </Title>
+      )}
       {icon && <EmptyStateIcon icon={icon} />}
       {message && <EmptyStateBody>{message}</EmptyStateBody>}
     </PfEmptyState>
@@ -31,6 +41,7 @@ const MessageView = ({ icon, message, title }) => (
 MessageView.propTypes = {
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   message: PropTypes.string,
+  pageTitle: PropTypes.string,
   title: PropTypes.string
 };
 
@@ -42,6 +53,7 @@ MessageView.propTypes = {
 MessageView.defaultProps = {
   icon: null,
   message: null,
+  pageTitle: null,
   title: null
 };