refactor(scans): discovery-148 pf4 empty-state (#117)

* locale, align empty-state strings * scans, jobsList, sourceList, pf4 empty-state
quipucords · Sep 7, 2022 · 8150baa · 8150baa
1 parent baa5a28
commit 8150baa
Show file tree

Hide file tree

Showing 10 changed files with 380 additions and 171 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -26,16 +26,23 @@
     "refreshed_load": "Refreshed {{refresh}}"
   },
   "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_description_scans": "Select a Source to scan from the Sources page.",
     "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}}",
+    "empty-state_label_source-navigate": "Go to Sources",
+    "empty-state_title": "Welcome to {{name}}",
+    "empty-state_title_scans": "No scans exist yet",
     "error_authentication": "Login error",
+    "error_credentials": "Credentials error",
+    "error_scan-jobs": "Scan jobs error",
+    "error_scans": "Scans error",
     "error-message_authentication": "{{message}} Please <0>login</0> to continue.",
+    "error-message_credentials": "Error retrieving credentials: {{message}}",
+    "error-message_scan-jobs": "Error retrieving scan jobs: {{message}}",
+    "error-message_scans": "Error retrieving scans: {{message}}",
     "loading": "Loading...",
     "loading_authentication": "Logging in...",
     "loading_credentials": "Loading credentials..."

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -189,13 +189,84 @@ Array [
       },
     ],
   },
+  Object {
+    "file": "./src/components/scans/scanJobsList.js",
+    "keys": Array [
+      Object {
+        "key": "view.loading",
+        "match": "t('view.loading')",
+      },
+      Object {
+        "key": "view.error",
+        "match": "t('view.error', { context: 'scan-jobs' })",
+      },
+      Object {
+        "key": "view.error-message",
+        "match": "t('view.error-message', { context: ['scan-jobs'], message: errorMessage })",
+      },
+    ],
+  },
   Object {
     "file": "./src/components/scans/scans.js",
     "keys": Array [
       Object {
         "key": "view.loading",
         "match": "t('view.loading', { context: 'scans' })",
       },
+      Object {
+        "key": "view.empty-state",
+        "match": "t('view.empty-state', { context: ['filter', 'title'] })",
+      },
+      Object {
+        "key": "view.empty-state",
+        "match": "t('view.empty-state', { context: ['filter', 'description'] })",
+      },
+      Object {
+        "key": "view.empty-state",
+        "match": "t('view.empty-state', { context: ['label', 'clear'] })",
+      },
+      Object {
+        "key": "view.error",
+        "match": "t('view.error', { context: 'scans' })",
+      },
+      Object {
+        "key": "view.error-message",
+        "match": "t('view.error-message', { context: ['scans'], message: errorMessage })",
+      },
+    ],
+  },
+  Object {
+    "file": "./src/components/scans/scansEmptyState.js",
+    "keys": Array [
+      Object {
+        "key": "view.empty-state",
+        "match": "t('view.empty-state', { context: ['title', 'scans'] })",
+      },
+      Object {
+        "key": "view.empty-state",
+        "match": "t('view.empty-state', { context: ['description', 'scans'] })",
+      },
+      Object {
+        "key": "view.empty-state",
+        "match": "t('view.empty-state', { context: ['label', 'source-navigate'] })",
+      },
+    ],
+  },
+  Object {
+    "file": "./src/components/scans/scanSourceList.js",
+    "keys": Array [
+      Object {
+        "key": "view.loading",
+        "match": "t('view.loading')",
+      },
+      Object {
+        "key": "view.error",
+        "match": "t('view.error', { context: 'scan-jobs' })",
+      },
+      Object {
+        "key": "view.error-message",
+        "match": "t('view.error-message', { context: ['scan-jobs'], message: errorMessage })",
+      },
     ],
   },
   Object {
@@ -292,6 +363,54 @@ Array [
     "file": "./src/components/mergeReportsDialog/mergeReportsDialog.js",
     "key": "form-dialog.label",
   },
+  Object {
+    "file": "./src/components/scans/scanJobsList.js",
+    "key": "view.error",
+  },
+  Object {
+    "file": "./src/components/scans/scanJobsList.js",
+    "key": "view.error-message",
+  },
+  Object {
+    "file": "./src/components/scans/scans.js",
+    "key": "view.empty-state",
+  },
+  Object {
+    "file": "./src/components/scans/scans.js",
+    "key": "view.empty-state",
+  },
+  Object {
+    "file": "./src/components/scans/scans.js",
+    "key": "view.empty-state",
+  },
+  Object {
+    "file": "./src/components/scans/scans.js",
+    "key": "view.error",
+  },
+  Object {
+    "file": "./src/components/scans/scans.js",
+    "key": "view.error-message",
+  },
+  Object {
+    "file": "./src/components/scans/scansEmptyState.js",
+    "key": "view.empty-state",
+  },
+  Object {
+    "file": "./src/components/scans/scansEmptyState.js",
+    "key": "view.empty-state",
+  },
+  Object {
+    "file": "./src/components/scans/scansEmptyState.js",
+    "key": "view.empty-state",
+  },
+  Object {
+    "file": "./src/components/scans/scanSourceList.js",
+    "key": "view.error",
+  },
+  Object {
+    "file": "./src/components/scans/scanSourceList.js",
+    "key": "view.error-message",
+  },
 ]
 `;
 

diff --git a/src/components/scans/__tests__/__snapshots__/scanJobsList.test.js.snap b/src/components/scans/__tests__/__snapshots__/scanJobsList.test.js.snap
@@ -8,42 +8,30 @@ exports[`ScanJobsList Component should render a connected component: connected 1
 
 exports[`ScanJobsList Component should render a non-connected component error: error 1`] = `
 <EmptyState
-  className=""
+  className="quipucords-empty-state__alert"
 >
-  <EmptyStateIcon
-    className=""
-    name="error-circle-o"
-    type="pf"
-  />
-  <EmptyStateTitle
-    className=""
-  >
-    Error retrieving scan jobs
-  </EmptyStateTitle>
-  <EmptyStateInfo
-    className=""
+  <Alert
+    isInline={true}
+    isPlain={true}
+    title="t(view.error, {\\"context\\":\\"scan-jobs\\"})"
+    variant="danger"
   >
-    Lorem Ipsum.
-  </EmptyStateInfo>
+    t(view.error-message, {"context":"scan-jobs","message":"Lorem Ipsum."})
+  </Alert>
 </EmptyState>
 `;
 
 exports[`ScanJobsList Component should render a non-connected component pending: pending 1`] = `
 <EmptyState
-  className=""
+  className="quipucords-empty-state"
+  variant="large"
 >
   <Spinner
-    className="blank-slate-pf-icon"
-    inline={false}
-    inverse={false}
-    loading={true}
+    isSVG={true}
     size="sm"
   />
-  <EmptyStateTitle
-    className=""
-  >
-    Loading...
-  </EmptyStateTitle>
+   
+  t(view.loading)
 </EmptyState>
 `;
 

diff --git a/src/components/scans/__tests__/__snapshots__/scanSourceList.test.js.snap b/src/components/scans/__tests__/__snapshots__/scanSourceList.test.js.snap
@@ -119,42 +119,30 @@ exports[`ScanSourceList Component should render a connected component: connected
 
 exports[`ScanSourceList Component should render a non-connected component error: error 1`] = `
 <EmptyState
-  className=""
+  className="quipucords-empty-state__alert"
 >
-  <EmptyStateIcon
-    className=""
-    name="error-circle-o"
-    type="pf"
-  />
-  <EmptyStateTitle
-    className=""
-  >
-    Error retrieving scan jobs
-  </EmptyStateTitle>
-  <EmptyStateInfo
-    className=""
+  <Alert
+    isInline={true}
+    isPlain={true}
+    title="t(view.error, {\\"context\\":\\"scan-jobs\\"})"
+    variant="danger"
   >
-    Lorem Ipsum.
-  </EmptyStateInfo>
+    t(view.error-message, {"context":"scan-jobs","message":"Lorem Ipsum."})
+  </Alert>
 </EmptyState>
 `;
 
 exports[`ScanSourceList Component should render a non-connected component pending: pending 1`] = `
 <EmptyState
-  className=""
+  className="quipucords-empty-state"
+  variant="large"
 >
   <Spinner
-    className="blank-slate-pf-icon"
-    inline={false}
-    inverse={false}
-    loading={true}
+    isSVG={true}
     size="sm"
   />
-  <EmptyStateTitle
-    className=""
-  >
-    Loading...
-  </EmptyStateTitle>
+   
+  t(view.loading)
 </EmptyState>
 `;
 

diff --git a/src/components/scans/__tests__/__snapshots__/scans.test.js.snap b/src/components/scans/__tests__/__snapshots__/scans.test.js.snap
@@ -4,52 +4,45 @@ exports[`Scans Component should render a connected component with default props:
 
 exports[`Scans Component should render a non-connected component error: error 1`] = `
 <EmptyState
-  className=""
+  className="quipucords-empty-state__alert"
 >
   <Alert
-    className=""
-    onDismiss={null}
-    type="error"
+    title="t(view.error, {\\"context\\":\\"scans\\"})"
+    variant="danger"
   >
-    <span>
-      Error retrieving scans: 
-    </span>
+    t(view.error-message, {"context":"scans","message":null})
   </Alert>
 </EmptyState>
 `;
 
 exports[`Scans Component should render a non-connected component pending: pending 1`] = `
-<div
-  className="quipucords-view-container"
+<Modal
+  aria-label={null}
+  backdrop={false}
+  className={null}
+  disableFocusTrap={true}
+  footer={null}
+  header={null}
+  isOpen={true}
+  position="top"
+  positionOffset="5%"
+  showClose={false}
+  t={[Function]}
+  variant="medium"
 >
-  <Modal
-    aria-label={null}
-    backdrop={false}
-    className={null}
-    disableFocusTrap={true}
-    footer={null}
-    header={null}
-    isOpen={true}
-    position="top"
-    positionOffset="5%"
-    showClose={false}
-    t={[Function]}
-    variant="medium"
+  <Spinner
+    className="blank-slate-pf-icon"
+    inline={false}
+    inverse={false}
+    loading={true}
+    size="lg"
+  />
+  <div
+    className="text-center"
   >
-    <Spinner
-      className="blank-slate-pf-icon"
-      inline={false}
-      inverse={false}
-      loading={true}
-      size="lg"
-    />
-    <div
-      className="text-center"
-    >
-      t(view.loading, {"context":"scans"})
-    </div>
-  </Modal>
-</div>
+    t(view.loading, {"context":"scans"})
+  </div>
+</Modal>
 `;
 
 exports[`Scans Component should render a non-connected component with empty state: empty state 1`] = `<withRouter(Connect(ScansEmptyState)) />`;