refactor(credentials): discovery-154, pf4 table (#160)

* locale, table strings
* apiConstants, expand for credentials
* confirmationModal, useConfirmation hook
* createCredentialDialog, redux state
* credentialsListItem, replaced with tableCells
* credentials, emptyState, hook refactor, viewId
* credentialsContext, lifecycle for credentials
* credentialsTableCells, consolidate components
* sourcesTableCells, align strings
* redux, credentialsReducer, actions, constants
* services, unused credential service calls
* styling, list overflow

public/locales/en.json

@@ -10,6 +10,9 @@
     "username": "Username"
   },
   "form-dialog": {
+    "confirmation_body": "{{context}}",
+    "confirmation_heading": "Are you sure you want to do this action?",
+    "confirmation_title": "Confirmation",
     "confirmation_body_add-source": "{{context}}",
     "confirmation_body_add-source_edit": "{{context}}",
     "confirmation_heading_add-source": "Are you sure you want to cancel adding this source?",
@@ -20,6 +23,10 @@
     "confirmation_body_add-source_exit_edit": "The wizard is in a pending state and will continue updating this source.",
     "confirmation_heading_add-source_exit": "Are you sure you want to exit this wizard?",
     "confirmation_title_add-source_exit": "Exit Wizard",
+    "confirmation_heading_delete-credential": " Are you sure you want to delete the credential <0>{{name}}</0>?",
+    "confirmation_heading_delete-credential_other": " Are you sure you want to delete the following credentials?",
+    "confirmation_title_delete-credential": "Delete Credential",
+    "confirmation_title_delete-credential_other": "Delete Credentials",
     "confirmation_title_delete-source": "Delete Source",
     "confirmation_heading_delete-source": "Are you sure you want to delete the source <0>{{name}}</0>?",
     "empty-state_description_add-source": "{{context}}",
@@ -37,6 +44,7 @@
     "label_add-credential": "Add a credential",
     "label_cancel": "Cancel",
     "label_close": "Close",
+    "label_confirm": "Confirm",
     "label_delete": "Delete",
     "label_no": "No",
     "label_option_disableSsl": "Disable SSL",
@@ -75,6 +83,7 @@
     "refreshed_load": "Refreshed {{refresh}}"
   },
   "table": {
+    "header_auth-type": "Authorization type",
     "header_credentials": "Credentials",
     "header_description": "Description",
     "header_failed": "Failed systems",
@@ -99,10 +108,17 @@
     "label_action_scan_paused": "Resume scan",
     "label_action_scan_pending": "Cancel scan",
     "label_add": "Add",
+    "label_auth_cell": "Username and password",
+    "label_auth_cell_sshKey": "SSH Key",
+    "label_auth_tooltip": "Authorization type",
     "label_delete": "Delete",
     "label_edit": "Edit",
     "label_merge-reports": "Merge reports",
+    "label_network": "Network",
+    "label_satellite": "Satellite",
     "label_scan": "Scan",
+    "label_source": "Source",
+    "label_source_other": "Sources",
     "label_status": "{{context}}",
     "label_status_scans": "Scan created",
     "label_status_completed": "Last completed",
@@ -147,6 +163,8 @@
     "label_status_tooltip_success_sources_other": "{{count}} Successful Authentications",
     "label_status_tooltip_unreachable": "{{count}} Unreachable System",
     "label_status_tooltip_unreachable_other": "{{count}} Unreachable Systems",
+    "label_vcenter": "VCenter",
+    "label_view": "View",
     "tooltip_merge-reports": "Merge selected scan results into a single report"
   },
   "toast-notifications": {
@@ -155,6 +173,10 @@
     "description_add-source_hidden_edit": "Source {{name}} was updated",
     "description_add-source_hidden_error": "{{message}}",
     "description_add-source_hidden_error_edit": "{{message}}",
+    "description_deleted-credential": "Deleted credential {{name}}",
+    "description_deleted-credential_other": "Deleted credentials {{name}} and more",
+    "description_deleted-credential_error": "Error removing credential {{name}}. {{message}}",
+    "description_deleted-credential_error_other": "Error removing credentials {{name}} and more. {{message}}",
     "description_deleted-source": "Deleted source {{name}}.",
     "description_error": "Application error",
     "description_scan-report_canceled": "Scan <0>{{name}}</0> stopped",
@@ -168,6 +190,8 @@
     "title_add-source_hidden_edit": "Success updating source",
     "title_add-source_hidden_error": "Error creating source",
     "title_add-source_hidden_error_edit": "Error updating source",
+    "title_deleted-credential": "Success deleting credential",
+    "title_deleted-credential_other": "Success deleting credentials",
     "title_deleted-source": "Success deleting source",
     "title_error": "Error",
     "title_warning": "Warning"

src/components/confirmationModal/__tests__/__snapshots__/confirmationModal.test.js.snap

@@ -21,8 +21,40 @@ exports[`Confirmation Modal Component should allow custom content: custom 1`] =
       role="dialog"
       style="--pf-c-modal-box--m-align-top--spacer: 5%;"
     >
-      <div>
-        lorem ipsum
+      <div
+        aria-label="Warning Alert"
+        class="pf-c-alert pf-m-inline pf-m-plain pf-m-warning"
+        data-ouia-component-id="OUIA-Generated-Alert-warning-2"
+        data-ouia-component-type="PF4/Alert"
+        data-ouia-safe="true"
+      >
+        <div
+          class="pf-c-alert__icon"
+        >
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 576 512"
+            width="1em"
+          >
+            <path
+              d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
+        </div>
+        <h4
+          class="pf-c-alert__title"
+        >
+          <span
+            class="pf-u-screen-reader"
+          >
+            Warning alert:
+          </span>
+          t(form-dialog.confirmation, {"context":"heading"})
+        </h4>
       </div>
     </div>
   </div>
@@ -66,13 +98,12 @@ exports[`Confirmation Modal Component should allow passed children, or specific
       >
         Warning alert:
       </span>
+      t(form-dialog.confirmation, {"context":"heading"})
     </h4>
     <div
       class="pf-c-alert__description"
     >
-      <p>
-        Dolor sit
-      </p>
+      Dolor sit
     </div>
   </div>
 </div>
@@ -83,8 +114,40 @@ exports[`Confirmation Modal Component should allow passed children, or specific
   class="pf-c-modal-box__body"
   id="pf-modal-part-4"
 >
-  <div>
-    hello world
+  <div
+    aria-label="Warning Alert"
+    class="pf-c-alert pf-m-inline pf-m-plain pf-m-warning"
+    data-ouia-component-id="OUIA-Generated-Alert-warning-1"
+    data-ouia-component-type="PF4/Alert"
+    data-ouia-safe="true"
+  >
+    <div
+      class="pf-c-alert__icon"
+    >
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 576 512"
+        width="1em"
+      >
+        <path
+          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-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>
+    </div>
+    <h4
+      class="pf-c-alert__title"
+    >
+      <span
+        class="pf-u-screen-reader"
+      >
+        Warning alert:
+      </span>
+      t(form-dialog.confirmation, {"context":"heading"})
+    </h4>
   </div>
 </div>
 `;
@@ -128,11 +191,6 @@ exports[`Confirmation Modal Component should allow passed children, or specific
       </span>
       Lorem ipsum
     </h4>
-    <div
-      class="pf-c-alert__description"
-    >
-      <p />
-    </div>
   </div>
 </div>
 `;
@@ -233,9 +291,7 @@ exports[`Confirmation Modal Component should display a confirmation modal: show
           <div
             class="pf-c-alert__description"
           >
-            <p>
-              Test body
-            </p>
+            Test body
           </div>
         </div>
       </div>

src/components/confirmationModal/confirmationModal.js

@@ -70,24 +70,26 @@ const ConfirmationModal = ({
     if (onConfirm) {
       actions.push(
         <Button key="submit" onClick={onConfirm}>
-          {confirmButtonText || t('form-dialog.label', { context: ['submit', 'confirmation'] })}
+          {confirmButtonText || t('form-dialog.label', { context: ['confirm'] })}
         </Button>
       );
     }
 
     actions.push(
       <Button key="cancel" variant={ButtonVariant.secondary} onClick={cancel}>
-        {cancelButtonText || t('form-dialog.label', { context: 'cancel' })}
+        {cancelButtonText || t('form-dialog.label', { context: ['cancel'] })}
       </Button>
     );
 
     return actions;
   };
 
+  const updatedHeading = heading || t('form-dialog.confirmation', { context: ['heading'] });
+
   const updatedChildren =
-    body || heading ? (
-      <Alert isInline isPlain variant={icon || undefined} title={heading}>
-        <p>{body}</p>
+    body || updatedHeading ? (
+      <Alert isInline isPlain variant={icon || undefined} title={updatedHeading}>
+        {body}
       </Alert>
     ) : (
       children
@@ -100,9 +102,7 @@ const ConfirmationModal = ({
       className="quipucords-modal__confirmation"
       disableFocusTrap
       header={
-        title && (
-          <Title headingLevel="h4">{title || t('form-dialog.label', { context: ['submit', 'confirmation'] })}</Title>
-        )
+        title && <Title headingLevel="h4">{title || t('form-dialog.confirmation', { context: ['title'] })}</Title>
       }
       isContentOnly={isContentOnly}
       isOpen={show}

src/components/createCredentialDialog/__tests__/createCredentialDialog.test.js

@@ -12,7 +12,7 @@ describe('CreateCredentialDialog Component', () => {
   const generateEmptyStore = (obj = {}) => configureMockStore()(obj);
 
   it('should render a connected component', () => {
-    const store = generateEmptyStore({ credentials: { update: { show: true } }, viewOptions: {} });
+    const store = generateEmptyStore({ credentials: { dialog: { show: true } }, viewOptions: {} });
 
     const component = mount(
       <Provider store={store}>

src/components/createCredentialDialog/createCredentialDialog.js

@@ -535,13 +535,13 @@ CreateCredentialDialog.defaultProps = {
 };
 
 const mapDispatchToProps = dispatch => ({
-  getCredentials: queryObj => dispatch(reduxActions.credentials.getCredentials(queryObj)),
+  getCredentials: queryObj => dispatch(reduxActions.credentials.getCredentials(null, queryObj)),
   addCredential: data => dispatch(reduxActions.credentials.addCredential(data)),
   updateCredential: (id, data) => dispatch(reduxActions.credentials.updateCredential(id, data))
 });
 
 const mapStateToProps = state => ({
-  ...state.credentials.update,
+  ...state.credentials.dialog,
   viewOptions: state.viewOptions[reduxTypes.view.CREDENTIALS_VIEW]
 });