refactor(button,icon,spinner): discovery-149 pf4 replacements (#165)

* contextIcon, expand for warning, error, info, user * createScanDialog, pf4 spinner * mergeReportsDialog, pf4 icon, spinner * pageLayout, pf4 user icon * scanDownload, pf4 button * scanJobsList, pf4 button for downloads * tooltip, pf4 icon
quipucords · Sep 20, 2022 · 21846cc · 21846cc
1 parent 18ad1cf
commit 21846cc
Show file tree

Hide file tree

Showing 14 changed files with 305 additions and 83 deletions.
diff --git a/src/components/contextIcon/__tests__/__snapshots__/contextIcon.test.js.snap b/src/components/contextIcon/__tests__/__snapshots__/contextIcon.test.js.snap
@@ -45,6 +45,14 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
 />
 `;
 
+exports[`ContextIcon Component should export, and handle icon variants: icon variant, error 1`] = `
+<ErrorCircleOIcon
+  color="#c9190b"
+  noVerticalAlign={false}
+  size="sm"
+/>
+`;
+
 exports[`ContextIcon Component should export, and handle icon variants: icon variant, failed 1`] = `
 <ErrorCircleOIcon
   color="#c9190b"
@@ -61,6 +69,14 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
 />
 `;
 
+exports[`ContextIcon Component should export, and handle icon variants: icon variant, info 1`] = `
+<InfoCircleIcon
+  color="currentColor"
+  noVerticalAlign={false}
+  size="sm"
+/>
+`;
+
 exports[`ContextIcon Component should export, and handle icon variants: icon variant, network 1`] = `
 <PficonNetworkRangeIcon
   color="currentColor"
@@ -167,6 +183,14 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
 />
 `;
 
+exports[`ContextIcon Component should export, and handle icon variants: icon variant, user 1`] = `
+<UserIcon
+  color="currentColor"
+  noVerticalAlign={false}
+  size="sm"
+/>
+`;
+
 exports[`ContextIcon Component should export, and handle icon variants: icon variant, vcenter 1`] = `
 <PficonVcenterIcon
   color="currentColor"
@@ -175,17 +199,27 @@ exports[`ContextIcon Component should export, and handle icon variants: icon var
 />
 `;
 
+exports[`ContextIcon Component should export, and handle icon variants: icon variant, warning 1`] = `
+<ExclamationTriangleIcon
+  color="#f0ab00"
+  noVerticalAlign={false}
+  size="sm"
+/>
+`;
+
 exports[`ContextIcon Component should export, and handle icon variants: variants 1`] = `
 Object {
   "canceled": "failed",
   "cancelled": "failed",
   "completed": "success",
   "created": "pending",
   "download": "download",
+  "error": "failed",
   "failed": "failed",
   "idCard": "idCard",
+  "info": "info",
   "network": "network",
-  "paused": "paused",
+  "paused": "warning",
   "pencil": "pencil",
   "pending": "pending",
   "running": "pending",
@@ -196,7 +230,9 @@ Object {
   "trash": "trash",
   "unknown": "unknown",
   "unreachable": "unreachable",
+  "user": "user",
   "vcenter": "vcenter",
+  "warning": "warning",
 }
 `;
 

diff --git a/src/components/contextIcon/contextIcon.js b/src/components/contextIcon/contextIcon.js
@@ -3,20 +3,22 @@ import PropTypes from 'prop-types';
 import { Spinner } from '@patternfly/react-core';
 import {
   CheckCircleIcon,
+  ClipboardCheckIcon,
+  CrosshairsIcon,
   DisconnectedIcon,
   DownloadIcon,
   ErrorCircleOIcon,
   ExclamationTriangleIcon,
   IdCardIcon,
+  InfoCircleIcon,
   PencilAltIcon,
   PficonNetworkRangeIcon,
   PficonSatelliteIcon,
   PficonVcenterIcon,
   TrashIcon,
   UnknownIcon,
-  IconSize,
-  ClipboardCheckIcon,
-  CrosshairsIcon
+  UserIcon,
+  IconSize
 } from '@patternfly/react-icons';
 import {
   global_Color_dark_100 as gray,
@@ -40,21 +42,26 @@ const ContextIconColors = {
 /**
  * Context icon variants
  *
- * @type {{running: string, canceled: string, paused: string, unreachable: string, success: string, created: string,
- *     pending: string, cancelled: string, completed: string, failed: string}}
+ * @type {{paused: string, unreachable: string, sources: string, created: string, idCard: string, pending: string,
+ *     completed: string, failed: string, error: string, pencil: string, network: string, trash: string, unknown: string,
+ *     running: string, canceled: string, download: string, scans: string, success: string, cancelled: string,
+ *     warning: string, vcenter: string, satellite: string, user: string, info: string}}
  */
 const ContextIconVariant = {
   completed: 'success',
   success: 'success',
+  error: 'failed',
   failed: 'failed',
   canceled: 'failed',
   cancelled: 'failed',
   created: 'pending',
   pending: 'pending',
   running: 'pending',
-  paused: 'paused',
+  paused: 'warning',
+  warning: 'warning',
   download: 'download',
   idCard: 'idCard',
+  info: 'info',
   network: 'network',
   pencil: 'pencil',
   satellite: 'satellite',
@@ -63,6 +70,7 @@ const ContextIconVariant = {
   trash: 'trash',
   unknown: 'unknown',
   unreachable: 'unreachable',
+  user: 'user',
   vcenter: 'vcenter'
 };
 
@@ -106,9 +114,11 @@ const ContextIcon = ({ symbol, ...props }) => {
       return <ErrorCircleOIcon {...{ ...{ color: red.value }, ...props }} />;
     case ContextIconVariant.idCard:
       return <IdCardIcon {...{ ...{ color: gray.value }, ...props }} />;
+    case ContextIconVariant.info:
+      return <InfoCircleIcon {...props} />;
     case ContextIconVariant.network:
       return <PficonNetworkRangeIcon {...props} />;
-    case ContextIconVariant.paused:
+    case ContextIconVariant.warning:
       return <ExclamationTriangleIcon {...{ ...{ color: yellow.value }, ...props }} />;
     case ContextIconVariant.pencil:
       return <PencilAltIcon {...props} />;
@@ -134,6 +144,8 @@ const ContextIcon = ({ symbol, ...props }) => {
       return <TrashIcon {...props} />;
     case ContextIconVariant.unreachable:
       return <DisconnectedIcon {...{ ...{ color: red.value }, ...props }} />;
+    case ContextIconVariant.user:
+      return <UserIcon {...props} />;
     case ContextIconVariant.vcenter:
       return <PficonVcenterIcon {...props} />;
     case ContextIconVariant.unknown:

diff --git a/src/components/createScanDialog/__tests__/__snapshots__/createScanDialog.test.js.snap b/src/components/createScanDialog/__tests__/__snapshots__/createScanDialog.test.js.snap
@@ -88,6 +88,108 @@ exports[`CreateScanDialog Component should handle multiple error responses: name
 </div>
 `;
 
+exports[`CreateScanDialog Component should render a component, pending: pending 1`] = `
+<div
+  class="pf-c-backdrop"
+>
+  <div
+    class="pf-l-bullseye"
+  >
+    <div
+      aria-describedby="pf-modal-part-3"
+      aria-label="t(modal.aria-label-default)"
+      aria-labelledby="pf-modal-part-1"
+      aria-modal="true"
+      class="pf-c-modal-box pf-m-align-top"
+      data-ouia-component-id="OUIA-Generated-Modal-2"
+      data-ouia-component-type="PF4/ModalContent"
+      data-ouia-safe="true"
+      id="pf-modal-part-1"
+      role="dialog"
+      style="--pf-c-modal-box--m-align-top--spacer: 5%;"
+    >
+      <button
+        aria-disabled="false"
+        aria-label="Close"
+        class="pf-c-button pf-m-plain"
+        data-ouia-component-id="OUIA-Generated-Modal-2-ModalBoxCloseButton"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align: -0.125em;"
+          viewBox="0 0 352 512"
+          width="1em"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+      </button>
+      <header
+        class="pf-c-modal-box__header"
+      >
+        <h4
+          class="pf-c-title pf-m-md"
+          data-ouia-component-id="OUIA-Generated-Title-2"
+          data-ouia-component-type="PF4/Title"
+          data-ouia-safe="true"
+        >
+          Scan
+        </h4>
+      </header>
+      <div
+        class="pf-c-modal-box__body"
+        id="pf-modal-part-3"
+      >
+        <form
+          class="form-horizontal"
+        >
+          <div
+            class="pf-c-empty-state quipucords-empty-state"
+          >
+            <div
+              class="pf-c-empty-state__content"
+            >
+              <span
+                aria-hidden="true"
+                aria-label="Contents"
+                aria-valuetext="Loading..."
+                class="pf-c-spinner pf-m-xl pf-c-empty-state__icon"
+                role="progressbar"
+              >
+                <span
+                  class="pf-c-spinner__clipper"
+                />
+                <span
+                  class="pf-c-spinner__lead-ball"
+                />
+                <span
+                  class="pf-c-spinner__tail-ball"
+                />
+              </span>
+              <h3
+                class="pf-c-title pf-m-lg"
+                data-ouia-component-id="OUIA-Generated-Title-3"
+                data-ouia-component-type="PF4/Title"
+                data-ouia-safe="true"
+              >
+                Scan updating...
+              </h3>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`CreateScanDialog Component should render a connected component with default props: connected 1`] = `<Connect(CreateScanDialog) />`;
 
 exports[`CreateScanDialog Component should render a non-connected component: non-connected 1`] = `

diff --git a/src/components/createScanDialog/__tests__/createScanDialog.test.js b/src/components/createScanDialog/__tests__/createScanDialog.test.js
@@ -43,6 +43,17 @@ describe('CreateScanDialog Component', () => {
     expect(component.render()).toMatchSnapshot('empty');
   });
 
+  it('should render a component, pending', () => {
+    const props = {
+      pending: true,
+      show: true,
+      sources: [{ name: 'test name' }]
+    };
+
+    const component = mount(<CreateScanDialog {...props} />);
+    expect(component.render()).toMatchSnapshot('pending');
+  });
+
   it('should handle multiple error responses', () => {
     const props = {
       show: true,

diff --git a/src/components/createScanDialog/createScanDialog.js b/src/components/createScanDialog/createScanDialog.js
@@ -1,7 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, AlertVariant, Button, ButtonVariant, Title } from '@patternfly/react-core';
-import { FieldLevelHelp, Form, Spinner } from 'patternfly-react';
+import {
+  Alert,
+  AlertVariant,
+  Button,
+  ButtonVariant,
+  EmptyState,
+  EmptyStateIcon,
+  Spinner,
+  Title
+} from '@patternfly/react-core';
+import { FieldLevelHelp, Form } from 'patternfly-react';
 import { Modal } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import { FormState } from '../formState/formState';
@@ -373,10 +382,10 @@ class CreateScanDialog extends React.Component {
           >
             <Form horizontal onSubmit={handleOnSubmit}>
               {pending && (
-                <React.Fragment>
-                  <Spinner loading size="lg" className="blank-slate-pf-icon" />
-                  <div className="text-center">Scan updating...</div>
-                </React.Fragment>
+                <EmptyState className="quipucords-empty-state">
+                  <EmptyStateIcon icon={Spinner} />
+                  <Title headingLevel="h3">Scan updating...</Title>
+                </EmptyState>
               )}
               {!pending && this.renderErrorMessage(options)}
               {!pending && this.renderNameSources(options)}

diff --git a/src/components/mergeReportsDialog/__tests__/__snapshots__/mergeReportsDialog.test.js.snap b/src/components/mergeReportsDialog/__tests__/__snapshots__/mergeReportsDialog.test.js.snap
@@ -38,12 +38,37 @@ exports[`MergeReportsDialog Component should render a component, pending: pendin
       >
         <div>
           <div
-            class="blank-slate-pf-icon spinner spinner-lg"
-          />
-          <div
-            class="text-center"
+            class="pf-c-empty-state quipucords-empty-state"
           >
-            Merging reports...
+            <div
+              class="pf-c-empty-state__content"
+            >
+              <span
+                aria-hidden="true"
+                aria-label="Contents"
+                aria-valuetext="Loading..."
+                class="pf-c-spinner pf-m-xl pf-c-empty-state__icon"
+                role="progressbar"
+              >
+                <span
+                  class="pf-c-spinner__clipper"
+                />
+                <span
+                  class="pf-c-spinner__lead-ball"
+                />
+                <span
+                  class="pf-c-spinner__tail-ball"
+                />
+              </span>
+              <h3
+                class="pf-c-title pf-m-lg"
+                data-ouia-component-id="OUIA-Generated-Title-3"
+                data-ouia-component-type="PF4/Title"
+                data-ouia-safe="true"
+              >
+                Merging reports...
+              </h3>
+            </div>
           </div>
         </div>
       </div>
@@ -122,10 +147,19 @@ exports[`MergeReportsDialog Component should render a non-connected component, f
             <span
               class="merge-reports-icon"
             >
-              <span
+              <svg
                 aria-hidden="true"
-                class="pficon pficon-error-circle-o"
-              />
+                fill="#c9190b"
+                height="1em"
+                role="img"
+                style="vertical-align: -0.125em;"
+                viewBox="0 0 1024 1024"
+                width="1em"
+              >
+                <path
+                  d="M409.5,319 C406.699326,316.168774 402.882413,314.575614 398.9,314.575614 C394.917587,314.575614 391.100674,316.168774 388.3,319 L319,388.3 C316.168774,391.100674 314.575614,394.917587 314.575614,398.9 C314.575614,402.882413 316.168774,406.699326 319,409.5 L421.5,512 L319,614.5 C316.168774,617.300674 314.575614,621.117587 314.575614,625.1 C314.575614,629.082413 316.168774,632.899326 319,635.7 L388.3,705 C391.100674,707.831226 394.917587,709.424386 398.9,709.424386 C402.882413,709.424386 406.699326,707.831226 409.5,705 L512,602.5 L614.5,705 C620.367618,710.877435 629.877455,710.922082 635.8,705.1 L705.1,635.8 C707.926508,632.970191 709.505822,629.128746 709.48721,625.129169 C709.468267,621.129592 707.852954,617.303145 705,614.5 L602.5,512 L705,409.5 C707.821142,406.720523 709.417879,402.93109 709.436648,398.97079 C709.455417,395.01049 707.89467,391.206092 705.1,388.4 L635.8,319 C629.932382,313.122565 620.422545,313.077918 614.5,318.9 L512,421.5 L409.5,319 Z M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 Z M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z"
+                />
+              </svg>
             </span>
             <span>
               <h3