refactor(credentials): discovery-148 pf4 empty-state (#116)

* locale, align empty-state strings * authentication, align with credentials * credentials, credentialsEmptyState, pf4 empty-state
quipucords · Sep 20, 2022 · e2a17f2 · e2a17f2
1 parent ce28975
commit e2a17f2
Show file tree

Hide file tree

Showing 12 changed files with 356 additions and 215 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -22,10 +22,18 @@
     "aria-label-default": "Application modal"
   },
   "view": {
+    "empty-state_title": "Welcome to {{name}}",
+    "empty-state_description_credentials": "Credentials contain authentication information needed to scan a source. A credential includes a username and a password or SSH key. {{name}} uses SSH to connect to servers on the network and uses credentials to access those servers.",
+    "empty-state_filter_description": "The active filters are hiding all items.",
+    "empty-state_filter_title": "No Results Match the Filter Criteria",
+    "empty-state_label_clear": "Clear Filters",
+    "empty-state_label_source": "Add Source",
+    "error_credentials": "Credentials error",
+    "error-message_credentials": "Error retrieving credentials: {{message}}",
+    "error_authentication": "Login error",
+    "error-message_authentication": "{{message}} Please <0>login</0> to continue.",
     "loading": "Loading...",
-    "loading_credentials": "Loading credentials...",
-    "login_error": "Login error",
-    "login-message_error": "Please <0>login</0> to continue.",
-    "login_pending": "Logging in..."
+    "loading_authentication": "Logging in...",
+    "loading_credentials": "Loading credentials..."
   }
 }
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -32,76 +32,68 @@ exports[`Authentication Component should render a non-connected component author
 `;
 
 exports[`Authentication Component should render a non-connected component error: non-connected error 1`] = `
-<div
-  aria-live="polite"
-  className="pf-c-modal-box__body"
-  id="pf-modal-part-2"
+<Alert
+  title="t(view.error, {\\"context\\":\\"authentication\\"})"
+  variant="danger"
 >
-  <Alert
-    title="t(view.login, {\\"context\\":\\"error\\"})"
-    variant="danger"
+  <div
+    aria-label="Danger Alert"
+    className="pf-c-alert pf-m-danger"
+    data-ouia-component-id="OUIA-Generated-Alert-danger-1"
+    data-ouia-component-type="PF4/Alert"
+    data-ouia-safe={true}
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
   >
-    <div
-      aria-label="Danger Alert"
-      className="pf-c-alert pf-m-danger"
-      data-ouia-component-id="OUIA-Generated-Alert-danger-1"
-      data-ouia-component-type="PF4/Alert"
-      data-ouia-safe={true}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
+    <AlertIcon
+      variant="danger"
     >
-      <AlertIcon
-        variant="danger"
+      <div
+        className="pf-c-alert__icon"
       >
-        <div
-          className="pf-c-alert__icon"
+        <ExclamationCircleIcon
+          color="currentColor"
+          noVerticalAlign={false}
+          size="sm"
         >
-          <ExclamationCircleIcon
-            color="currentColor"
-            noVerticalAlign={false}
-            size="sm"
-          >
-            <svg
-              aria-hidden={true}
-              aria-labelledby={null}
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style={
-                Object {
-                  "verticalAlign": "-0.125em",
-                }
+          <svg
+            aria-hidden={true}
+            aria-labelledby={null}
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style={
+              Object {
+                "verticalAlign": "-0.125em",
               }
-              viewBox="0 0 512 512"
-              width="1em"
-            >
-              <path
-                d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-              />
-            </svg>
-          </ExclamationCircleIcon>
-        </div>
-      </AlertIcon>
-      <h4
-        className="pf-c-alert__title"
-      >
-        <span
-          className="pf-u-screen-reader"
-        >
-          Danger alert:
-        </span>
-        t(view.login, {"context":"error"})
-      </h4>
-      <div
-        className="pf-c-alert__description"
-      >
-        Authentication credentials were not provided
-        .
-        t(view.login-message, {"context":"error"}, [object Object])
+            }
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+            />
+          </svg>
+        </ExclamationCircleIcon>
       </div>
+    </AlertIcon>
+    <h4
+      className="pf-c-alert__title"
+    >
+      <span
+        className="pf-u-screen-reader"
+      >
+        Danger alert:
+      </span>
+      t(view.error, {"context":"authentication"})
+    </h4>
+    <div
+      className="pf-c-alert__description"
+    >
+      t(view.error-message, {"context":"authentication","message":"Authentication credentials were not provided."}, [object Object])
     </div>
-  </Alert>
-</div>
+  </div>
+</Alert>
 `;
 
 exports[`Authentication Component should render a non-connected component pending: non-connected pending 1`] = `
@@ -123,7 +115,7 @@ exports[`Authentication Component should render a non-connected component pendin
     className="spinner spinner-xl"
   />
   <Bullseye>
-    t(view.login, {"context":"pending"})
+    t(view.loading, {"context":"authentication"})
   </Bullseye>
 </Modal>
 `;
diff --git a/src/components/authentication/__tests__/authentication.test.js b/src/components/authentication/__tests__/authentication.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
 import { shallow, mount } from 'enzyme';
+import { Alert } from '@patternfly/react-core';
 import { ConnectedAuthentication, Authentication } from '../authentication';
 
 describe('Authentication Component', () => {
@@ -37,7 +38,7 @@ describe('Authentication Component', () => {
       </Authentication>
     );
 
-    expect(component.find('.pf-c-modal-box__body')).toMatchSnapshot('non-connected error');
+    expect(component.find(Alert)).toMatchSnapshot('non-connected error');
   });
 
   it('should render a non-connected component pending', () => {

diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Alert, AlertVariant, Button, Bullseye } from '@patternfly/react-core';
+import { Alert, AlertVariant, Button, Bullseye, EmptyState } from '@patternfly/react-core';
 import { Modal, ModalVariant } from '../modal/modal';
-import { ConfirmationModal, ConfirmationVariant } from '../confirmationModal/confirmationModal';
 import { reduxActions } from '../../redux';
 import helpers from '../../common/helpers';
 import { PageLayout } from '../pageLayout/pageLayout';
@@ -32,23 +31,26 @@ class Authentication extends React.Component {
       return (
         <Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
           <div className="spinner spinner-xl" />
-          <Bullseye>{t('view.login', { context: 'pending' })}</Bullseye>
+          <Bullseye>{t('view.loading', { context: 'authentication' })}</Bullseye>
         </Modal>
       );
     }
 
     return (
       <PageLayout>
-        <ConfirmationModal icon={ConfirmationVariant.danger} show isContentOnly isClose={false} isActions={false}>
-          <Alert variant={AlertVariant.danger} title={t('view.login', { context: 'error' })}>
-            {session.errorMessage.replace(/\.$/, '')}
-            {session.errorMessage && '.'}
+        <EmptyState className="quipucords-empty-state__alert">
+          <Alert variant={AlertVariant.danger} title={t('view.error', { context: 'authentication' })}>
             {!session.authorized &&
-              t('view.login-message', { context: 'error' }, [
-                <Button isInline component="a" variant="link" href="/login" />
-              ])}
+              t(
+                'view.error-message',
+                {
+                  context: 'authentication',
+                  message: `${session.errorMessage.replace(/\.$/, '')}${session.errorMessage && '.'}` || undefined
+                },
+                [<Button isInline component="a" variant="link" href="/login" />]
+              )}
           </Alert>
-        </ConfirmationModal>
+        </EmptyState>
       </PageLayout>
     );
   }