feat(authentication): issues/373 use platform not authorized (#402)

RedHatInsights · Sep 3, 2020 · bd8ccc0 · bd8ccc0
1 parent 07cccd6
commit bd8ccc0
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 77 deletions.
diff --git a/public/locales/en-US.json b/public/locales/en-US.json
@@ -1,8 +1,6 @@
 {
   "curiosity-auth": {
     "pending": "Authenticating...",
-    "authorizedTitle": "You do not have access to {{appName}}.",
-    "authorizedCopy": "Contact your organization administrator for more information.",
     "maintenanceCopy": "We are currently undergoing scheduled maintenance and will be back shortly. Thank you for your patience."
   },
   "curiosity-graph": {

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -59,10 +59,10 @@ exports[`Authentication Component should render a non-connected component error:
   t={[Function]}
 >
   <MessageView
-    icon={[Function]}
-    message="t(curiosity-auth.authorizedCopy, ...)"
+    icon={null}
+    message={null}
     pageTitle={null}
-    title="t(curiosity-auth.authorizedTitle, [object Object])"
+    title={null}
   >
     <PageLayout>
       <PageHeader
@@ -117,68 +117,92 @@ exports[`Authentication Component should render a non-connected component error:
                 className=""
               >
                  
-                <EmptyState
-                  className="fadein"
-                  variant="full"
+                <NotAuthorized
+                  serviceName="Subscription Watch"
                 >
-                  <div
-                    className="pf-c-empty-state fadein"
+                  <EmptyState
+                    className="ins-c-not-authorized"
+                    variant="full"
                   >
                     <div
-                      className="pf-c-empty-state__content"
+                      className="pf-c-empty-state ins-c-not-authorized"
                     >
-                      <EmptyStateIcon
-                        icon={[Function]}
+                      <div
+                        className="pf-c-empty-state__content"
                       >
-                        <LockIcon
-                          aria-hidden="true"
-                          className="pf-c-empty-state__icon"
-                          color="currentColor"
-                          noVerticalAlign={false}
-                          size="sm"
+                        <EmptyStateIcon
+                          icon={[Function]}
                         >
-                          <svg
+                          <LockIcon
                             aria-hidden="true"
-                            aria-labelledby={null}
                             className="pf-c-empty-state__icon"
-                            fill="currentColor"
-                            height="1em"
-                            role="img"
-                            style={
-                              Object {
-                                "verticalAlign": "-0.125em",
-                              }
-                            }
-                            viewBox="0 0 448 512"
-                            width="1em"
+                            color="currentColor"
+                            noVerticalAlign={false}
+                            size="sm"
                           >
-                            <path
-                              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>
-                        </LockIcon>
-                      </EmptyStateIcon>
-                      <Title
-                        headingLevel="h2"
-                        size="lg"
-                      >
-                        <h2
-                          className="pf-c-title pf-m-lg"
+                            <svg
+                              aria-hidden="true"
+                              aria-labelledby={null}
+                              className="pf-c-empty-state__icon"
+                              fill="currentColor"
+                              height="1em"
+                              role="img"
+                              style={
+                                Object {
+                                  "verticalAlign": "-0.125em",
+                                }
+                              }
+                              viewBox="0 0 448 512"
+                              width="1em"
+                            >
+                              <path
+                                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>
+                          </LockIcon>
+                        </EmptyStateIcon>
+                        <Title
+                          headingLevel="h5"
+                          size="lg"
                         >
-                          t(curiosity-auth.authorizedTitle, [object Object])
-                        </h2>
-                      </Title>
-                      <EmptyStateBody>
-                        <div
-                          className="pf-c-empty-state__body"
+                          <h5
+                            className="pf-c-title pf-m-lg"
+                          >
+                             You do not have access to 
+                            Subscription Watch
+                          </h5>
+                        </Title>
+                        <EmptyStateBody>
+                          <div
+                            className="pf-c-empty-state__body"
+                          >
+                            Contact your organization administrator(s) for more information.
+                          </div>
+                        </EmptyStateBody>
+                        <Button
+                          component="a"
+                          href="."
+                          variant="primary"
                         >
-                          t(curiosity-auth.authorizedCopy, ...)
-                        </div>
-                      </EmptyStateBody>
+                          <a
+                            aria-disabled={false}
+                            aria-label={null}
+                            className="pf-c-button pf-m-primary"
+                            data-ouia-component-id={0}
+                            data-ouia-component-type="PF4/Button"
+                            data-ouia-safe={true}
+                            disabled={null}
+                            href="."
+                            type={null}
+                          >
+                            Go to landing page
+                          </a>
+                        </Button>
+                      </div>
                     </div>
-                  </div>
-                </EmptyState>
+                  </EmptyState>
+                </NotAuthorized>
                  
               </section>
             </Section>
@@ -201,22 +225,30 @@ exports[`Authentication Component should render a non-connected component pendin
 
 exports[`Authentication Component should return a message on 401 error: 401 error 1`] = `
 <MessageView
-  icon={[Function]}
-  message="t(curiosity-auth.authorizedCopy, ...)"
+  icon={null}
+  message={null}
   pageTitle={null}
-  title="t(curiosity-auth.authorizedTitle, [object Object])"
-/>
+  title={null}
+>
+  <NotAuthorized
+    serviceName="Subscription Watch"
+  />
+</MessageView>
 `;
 
 exports[`Authentication Component should return a redirect on 418 error: 418 error 1`] = `"418 redirect"`;
 
 exports[`Authentication Component should return a redirect on a specific 403 error and error code: 403 error 1`] = `
 <MessageView
-  icon={[Function]}
-  message="t(curiosity-auth.authorizedCopy, ...)"
+  icon={null}
+  message={null}
   pageTitle={null}
-  title="t(curiosity-auth.authorizedTitle, [object Object])"
-/>
+  title={null}
+>
+  <NotAuthorized
+    serviceName="Subscription Watch"
+  />
+</MessageView>
 `;
 
 exports[`Authentication Component should return a redirect on a specific 403 error and error code: 403 redirect error 1`] = `"403 redirect"`;
diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { BinocularsIcon, LockIcon } from '@patternfly/react-icons';
+import { BinocularsIcon } from '@patternfly/react-icons';
 import { Maintenance } from '@redhat-cloud-services/frontend-components/components/cjs/Maintenance';
+import { NotAuthorized } from '@redhat-cloud-services/frontend-components/components/cjs/NotAuthorized';
 import { connectRouter, reduxActions, reduxSelectors } from '../../redux';
 import { rhsmApiTypes } from '../../types';
 import { helpers } from '../../common';
@@ -80,11 +81,9 @@ class Authentication extends Component {
     }
 
     return (
-      <MessageView
-        title={t('curiosity-auth.authorizedTitle', { appName: helpers.UI_DISPLAY_NAME })}
-        message={t('curiosity-auth.authorizedCopy', '...')}
-        icon={LockIcon}
-      />
+      <MessageView>
+        <NotAuthorized serviceName={helpers.UI_DISPLAY_NAME} />
+      </MessageView>
     );
   }
 }

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -33,14 +33,6 @@ Array [
         "key": "curiosity-auth.pending",
         "match": "t('curiosity-auth.pending', '...')",
       },
-      Object {
-        "key": "curiosity-auth.authorizedTitle",
-        "match": "t('curiosity-auth.authorizedTitle', { appName: helpers.UI_DISPLAY_NAME })",
-      },
-      Object {
-        "key": "curiosity-auth.authorizedCopy",
-        "match": "t('curiosity-auth.authorizedCopy', '...')",
-      },
     ],
   },
   Object {