Add status component

kubevirt · Apr 26, 2019 · 0e37733 · 0e37733
1 parent c6a2f32
commit 0e37733
Show file tree

Hide file tree

Showing 25 changed files with 511 additions and 241 deletions.
diff --git a/sass/_components.scss b/sass/_components.scss
@@ -8,14 +8,12 @@
 @import './components/Form/dropdown';
 @import './components/Form/form-group';
 @import './components/Form/list-form-factory';
-@import './components/HostStatus/host-status';
 @import './components/Table/editable-table-actions';
 @import './components/Table/editable-table';
 @import './components/TemplateSource/template-source';
 @import './components/VmConsoles/desktop-viewer-selector';
 @import './components/VmDetails/boot-order';
 @import './components/VmDetails/vm-details';
-@import './components/VmStatus/vm-status';
 @import './components/Wizard/create-vm-wizard';
 @import './components/Wizard/wizard';
 @import './components/ConfigurationSummary/configuration-summary';
@@ -35,6 +33,7 @@
 @import './components/CreateBaremetalHostDialog/create-baremetal-host-dialog';
 @import './components/StorageOverview/data-resiliency';
 @import './components/StorageOverview/top-consumer';
+@import './components/Status/status';
 
 /*
   TODO: these styles should be backported to the corresponding PF-React package

diff --git a/sass/components/HostStatus/host-status.scss b/sass/components/HostStatus/host-status.scss
diff --git a/sass/components/Status/status.scss b/sass/components/Status/status.scss
@@ -0,0 +1,8 @@
+.kubevirt-status__icon {
+  margin-right: 5px;
+}
+
+.kubevirt-status__button {
+  padding: 0;
+  margin: 0;
+}
diff --git a/sass/components/VmStatus/vm-status.scss b/sass/components/VmStatus/vm-status.scss
diff --git a/src/components/BareMetalHosts/StatusComponents.js b/src/components/BareMetalHosts/StatusComponents.js
@@ -1,19 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Popover } from '@patternfly/react-core';
-import { Icon } from 'patternfly-react';
 
-export const IconAndText = ({ icon, text }) => (
-  <React.Fragment>
-    <Icon type="pf" name={icon} className="kubevirt-host-status__icon" />
-    {text}
-  </React.Fragment>
-);
-
-IconAndText.propTypes = {
-  icon: PropTypes.string.isRequired,
-  text: PropTypes.string.isRequired,
-};
+import { Status, OverlayStatus } from '../Status/Status';
 
 // Generic status component as a fallback
 export const GenericStatus = ({ status, text, errorMessage }) => text;
@@ -29,38 +18,48 @@ GenericStatus.defaultProps = {
 };
 
 // Generic success status component
-export const GenericSuccess = ({ status, text, errorMessage }) => <IconAndText icon="ok" text={text} />;
+export const GenericSuccess = ({ status, text, errorMessage }) => <Status icon="ok">{text}</Status>;
 
 GenericSuccess.propTypes = GenericStatus.propTypes;
 GenericSuccess.defaultProps = GenericStatus.defaultProps;
 
+const ErrorOverlay = ({ errorMessage }) => (
+  <Popover position="right" size="regular" title="Errors">
+    <div>{errorMessage}</div>
+  </Popover>
+);
+
+ErrorOverlay.propTypes = {
+  errorMessage: PropTypes.string,
+};
+
+ErrorOverlay.defaultProps = {
+  errorMessage: null,
+};
+
 // Generic error status component
 // If the errorMessage property isn't empty its contents are
 // shown in a Popover.
 export const GenericError = ({ status, text, errorMessage }) =>
   errorMessage ? (
-    <Popover position="right" size="regular" headerContent={<div>Errors</div>} bodyContent={errorMessage}>
-      <IconAndText icon="error-circle-o" text={text} />
-    </Popover>
+    <OverlayStatus icon="error-circle-o" text={text} overlay={<ErrorOverlay errorMessage={errorMessage} />} />
   ) : (
-    <IconAndText icon="error-circle-o" text={text} />
+    <Status icon="error-circle-o">{text}</Status>
   );
 
 GenericError.propTypes = GenericStatus.propTypes;
 GenericError.defaultProps = GenericStatus.defaultProps;
 
 // Generic progress status component
-export const GenericProgress = ({ status, text, errorMessage }) => <IconAndText icon="in-progress" text={text} />;
+export const GenericProgress = ({ status, text, errorMessage }) => <Status icon="in-progress">{text}</Status>;
 
 GenericProgress.propTypes = GenericStatus.propTypes;
 GenericProgress.defaultProps = GenericStatus.defaultProps;
 
 // Validation Error component
 // (TODO) Add details for validation errors in Popover component
 export const ValidationError = ({ status, text, errorMessage }) => (
-  <Popover position="right" size="regular" headerContent={<div>Errors</div>} bodyContent={errorMessage}>
-    <IconAndText icon="error-circle-o" text={text} />
-  </Popover>
+  <OverlayStatus icon="error-circle-o" text={text} overlay={<ErrorOverlay errorMessage={errorMessage} />} />
 );
 
 ValidationError.propTypes = {
@@ -71,6 +70,6 @@ ValidationError.propTypes = {
 
 export const AddDiscoveredHostLink = host => (
   <a>
-    <IconAndText icon="add-circle-o" text="Add host" />
+    <Status icon="add-circle-o">Add host</Status>
   </a>
 );
diff --git a/src/components/BareMetalHosts/tests/__snapshots__/StatusComponents.test.js.snap b/src/components/BareMetalHosts/tests/__snapshots__/StatusComponents.test.js.snap
@@ -2,96 +2,60 @@
 
 exports[`<AddDiscoveredHostLink /> renders a link to add discovered host 1`] = `
 <a>
-  <IconAndText
+  <Status
     icon="add-circle-o"
-    text="Add host"
-  />
+  >
+    Add host
+  </Status>
 </a>
 `;
 
 exports[`<GenericError /> renders an error message 1`] = `
-<IconAndText
+<Status
   icon="error-circle-o"
-  text="Registration Error"
-/>
+>
+  Registration Error
+</Status>
 `;
 
 exports[`<GenericError /> with details renders an error message with details 1`] = `
-<Popover
-  appendTo={[Function]}
-  aria-label=""
-  bodyContent="some error details"
-  className={null}
-  closeBtnAriaLabel="Close"
-  enableFlip={true}
-  headerContent={
-    <div>
-      Errors
-    </div>
+<OverlayStatus
+  icon="error-circle-o"
+  overlay={
+    <ErrorOverlay
+      errorMessage="some error details"
+    />
   }
-  hideOnOutsideClick={true}
-  isVisible={null}
-  onHidden={[Function]}
-  onHide={[Function]}
-  onMount={[Function]}
-  onShow={[Function]}
-  onShown={[Function]}
-  position="right"
-  shouldClose={[Function]}
-  size="regular"
-  zIndex={9999}
->
-  <IconAndText
-    icon="error-circle-o"
-    text="Registration Error"
-  />
-</Popover>
+  text="Registration Error"
+/>
 `;
 
 exports[`<GenericProgress /> renders a progress message 1`] = `
-<IconAndText
+<Status
   icon="in-progress"
-  text="Provisioning"
-/>
+>
+  Provisioning
+</Status>
 `;
 
 exports[`<GenericStatus /> renders a generic status string 1`] = `"Provisioned"`;
 
 exports[`<GenericSuccess /> renders a success message 1`] = `
-<IconAndText
+<Status
   icon="ok"
-  text="Provisioned"
-/>
+>
+  Provisioned
+</Status>
 `;
 
 exports[`<ValidationError /> renders a validation error 1`] = `
-<Popover
-  appendTo={[Function]}
-  aria-label=""
-  bodyContent="some validation errors"
-  className={null}
-  closeBtnAriaLabel="Close"
-  enableFlip={true}
-  headerContent={
-    <div>
-      Errors
-    </div>
+<OverlayStatus
+  icon="error-circle-o"
+  overlay={
+    <ErrorOverlay
+      errorMessage="some validation errors"
+    />
   }
-  hideOnOutsideClick={true}
-  isVisible={null}
-  onHidden={[Function]}
-  onHide={[Function]}
-  onMount={[Function]}
-  onShow={[Function]}
-  onShown={[Function]}
-  position="right"
-  shouldClose={[Function]}
-  size="regular"
-  zIndex={9999}
->
-  <IconAndText
-    icon="error-circle-o"
-    text="Validation Error(s)"
-  />
-</Popover>
+  text="Validation Error(s)"
+/>
 `;
diff --git a/src/components/Details/VmDetails/tests/__snapshots__/VmDetails.test.js.snap b/src/components/Details/VmDetails/tests/__snapshots__/VmDetails.test.js.snap
@@ -62,7 +62,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -251,7 +251,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -450,7 +450,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -655,7 +655,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-on-running"
+              class="pficon pficon-on-running kubevirt-status__icon"
             />
             Running
           </div>
@@ -862,7 +862,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -1037,7 +1037,7 @@ exports[`<VmDetails /> renders correctly as overview 1`] = `
         <div>
           <span
             aria-hidden="true"
-            class="kubevirt-vm-status__icon pficon pficon-on-running"
+            class="pficon pficon-on-running kubevirt-status__icon"
           />
           Running
         </div>
@@ -1243,7 +1243,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -1430,7 +1430,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -1629,7 +1629,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -1818,7 +1818,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>
@@ -2021,7 +2021,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-on-running"
+              class="pficon pficon-on-running kubevirt-status__icon"
             />
             Running
           </div>
@@ -2228,7 +2228,7 @@ Array [
           <div>
             <span
               aria-hidden="true"
-              class="kubevirt-vm-status__icon pficon pficon-off"
+              class="pficon pficon-off kubevirt-status__icon"
             />
             Off
           </div>