refactor(credentials): discovery-152, pf4 dropdown (quipucords#130)

* credentials, pf4 button, addCredentialType * credentialsEmptyState, addCredentialType * locale, cred strings
jenny-s51 · Jul 29, 2022 · d62cbe0 · d62cbe0
1 parent baeb556
commit d62cbe0
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 96 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -35,6 +35,7 @@
     "label_add-credential": "Add a credential",
     "label_cancel": "Cancel",
     "label_close": "Close",
+    "label_delete": "Delete",
     "label_no": "No",
     "label_option_disableSsl": "Disable SSL",
     "label_option_SSLv23": "SSLv23",

diff --git a/src/components/addSourceWizard/addSourceWizardStepTwo.js b/src/components/addSourceWizard/addSourceWizardStepTwo.js
@@ -71,6 +71,7 @@ class AddSourceWizardStepTwo extends React.Component {
     getCredentials();
   }
 
+  // ToDo: future, exported hook from addCredentialType can be leveraged here
   onAddCredential = () => {
     const { type } = this.props;
 

diff --git a/src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap b/src/components/credentials/__tests__/__snapshots__/credentialsEmptyState.test.js.snap
@@ -38,63 +38,50 @@ exports[`CredentialsEmptyState Component should render a basic component 1`] = `
       class="pf-c-empty-state__primary"
     >
       <div
-        class="dropdown btn-group btn-group-lg btn-group-primary"
+        class="quipucords-select quipucords-select__inline"
       >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          class="dropdown-toggle btn btn-lg btn-primary"
-          id="createCredentialButton"
-          role="button"
-          type="button"
-        >
-          Add Credential 
-          <span
-            class="caret"
-          />
-        </button>
-        <ul
-          aria-labelledby="createCredentialButton"
-          class="dropdown-menu dropdown-menu-right"
-          role="menu"
-        >
-          <li
-            class=""
-            role="presentation"
+        <div>
+          <div
+            class="pf-c-dropdown"
+            data-ouia-component-id="OUIA-Generated-Dropdown-1"
+            data-ouia-component-type="PF4/Dropdown"
+            data-ouia-safe="true"
           >
-            <a
-              href="#"
-              role="menuitem"
-              tabindex="-1"
+            <button
+              aria-expanded="false"
+              aria-haspopup="true"
+              class="pf-c-dropdown__toggle pf-m-primary"
+              data-ouia-component-id="OUIA-Generated-DropdownToggle-1"
+              data-ouia-component-type="PF4/DropdownToggle"
+              data-ouia-safe="true"
+              id="pf-dropdown-toggle-id-1"
+              type="button"
             >
-              Network Credential
-            </a>
-          </li>
-          <li
-            class=""
-            role="presentation"
-          >
-            <a
-              href="#"
-              role="menuitem"
-              tabindex="-1"
-            >
-              Satellite Credential
-            </a>
-          </li>
-          <li
-            class=""
-            role="presentation"
-          >
-            <a
-              href="#"
-              role="menuitem"
-              tabindex="-1"
-            >
-              VCenter Credential
-            </a>
-          </li>
-        </ul>
+              <span
+                class="pf-c-dropdown__toggle-text"
+              >
+                t(form-dialog.label_placeholder, {"context":"add-credential"})
+              </span>
+              <span
+                class="pf-c-dropdown__toggle-icon"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  style="vertical-align: -0.125em;"
+                  viewBox="0 0 320 512"
+                  width="1em"
+                >
+                  <path
+                    d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                  />
+                </svg>
+              </span>
+            </button>
+          </div>
+        </div>
       </div>
     </div>
     <div

diff --git a/src/components/credentials/credentials.js b/src/components/credentials/credentials.js
@@ -17,8 +17,13 @@ import {
   TitleSizes
 } from '@patternfly/react-core';
 import { SearchIcon } from '@patternfly/react-icons';
-import { Button as ButtonPf3, DropdownButton, Form, ListView, MenuItem } from 'patternfly-react';
+import { Form, ListView } from 'patternfly-react';
 import { Modal, ModalVariant } from '../modal/modal';
+import {
+  AddCredentialType,
+  ButtonVariant as CredentialButtonVariant,
+  SelectPosition
+} from '../addCredentialType/addCredentialType';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import helpers from '../../common/helpers';
 import ViewToolbar from '../viewToolbar/viewToolbar';
@@ -93,13 +98,6 @@ class Credentials extends React.Component {
     }
   }
 
-  onAddCredential = credentialType => {
-    store.dispatch({
-      type: reduxTypes.credentials.CREATE_CREDENTIAL_SHOW,
-      credentialType
-    });
-  };
-
   onDeleteCredentials = () => {
     const { viewOptions } = this.props;
 
@@ -205,27 +203,22 @@ class Credentials extends React.Component {
   }
 
   renderCredentialActions() {
-    const { viewOptions } = this.props;
+    const { t, viewOptions } = this.props;
 
     return (
       <div className="form-group">
-        <DropdownButton bsStyle="primary" title="Add" pullRight id="createCredentialButton">
-          <MenuItem eventKey="1" onClick={() => this.onAddCredential('network')}>
-            Network Credential
-          </MenuItem>
-          <MenuItem eventKey="2" onClick={() => this.onAddCredential('satellite')}>
-            Satellite Credential
-          </MenuItem>
-          <MenuItem eventKey="2" onClick={() => this.onAddCredential('vcenter')}>
-            VCenter Credential
-          </MenuItem>
-        </DropdownButton>
-        <ButtonPf3
-          disabled={!viewOptions.selectedItems || viewOptions.selectedItems.length === 0}
+        <AddCredentialType
+          buttonVariant={CredentialButtonVariant.primary}
+          position={SelectPosition.right}
+          placeholder={t('form-dialog.label', { context: 'add' })}
+        />{' '}
+        <Button
+          variant={ButtonVariant.secondary}
+          isDisabled={!viewOptions.selectedItems || viewOptions.selectedItems.length === 0}
           onClick={this.onDeleteCredentials}
         >
-          Delete
-        </ButtonPf3>
+          {t('form-dialog.label', { context: 'delete' })}
+        </Button>
       </div>
     );
   }
@@ -324,7 +317,7 @@ class Credentials extends React.Component {
     return (
       <React.Fragment>
         {this.renderPendingMessage()}
-        <CredentialsEmptyState onAddCredential={this.onAddCredential} onAddSource={this.onAddSource} />,
+        <CredentialsEmptyState onAddSource={this.onAddSource} />,
       </React.Fragment>
     );
   }
@@ -363,8 +356,7 @@ const mapDispatchToProps = dispatch => ({
 
 const mapStateToProps = state => ({
   ...state.credentials.view,
-  viewOptions: state.viewOptions[reduxTypes.view.CREDENTIALS_VIEW],
-  update: state.credentials.update
+  viewOptions: state.viewOptions[reduxTypes.view.CREDENTIALS_VIEW]
 });
 
 const ConnectedCredentials = connect(mapStateToProps, mapDispatchToProps)(Credentials);

diff --git a/src/components/credentials/credentialsEmptyState.js b/src/components/credentials/credentialsEmptyState.js
@@ -12,29 +12,29 @@ import {
   Title
 } from '@patternfly/react-core';
 import { AddCircleOIcon } from '@patternfly/react-icons';
-import { DropdownButton, MenuItem } from 'patternfly-react';
+import { AddCredentialType, ButtonVariant as CredentialButtonVariant } from '../addCredentialType/addCredentialType';
 import helpers from '../../common/helpers';
 import { translate } from '../i18n/i18n';
 
-const CredentialsEmptyState = ({ onAddCredential, onAddSource, t, uiSentenceStartName, uiShortName }) => (
+/**
+ * Display an empty state for Credentials.
+ *
+ * @param {object} props
+ * @param {Function} props.onAddSource
+ * @param {Function} props.t
+ * @param {string} props.uiSentenceStartName
+ * @param {string} props.uiShortName
+ * @returns {React.ReactNode}
+ */
+const CredentialsEmptyState = ({ onAddSource, t, uiSentenceStartName, uiShortName }) => (
   <EmptyState className="quipucords-empty-state" variant={EmptyStateVariant.large}>
     <EmptyStateIcon icon={AddCircleOIcon} />
     <Title headingLevel="h1">{t('view.empty-state', { context: 'title', name: uiShortName })}</Title>
     <EmptyStateBody>
       {t('view.empty-state', { context: ['description', 'credentials'], name: uiSentenceStartName })}
     </EmptyStateBody>
     <EmptyStatePrimary>
-      <DropdownButton bsStyle="primary" bsSize="large" title="Add Credential" pullRight id="createCredentialButton">
-        <MenuItem eventKey="1" onClick={() => onAddCredential('network')}>
-          Network Credential
-        </MenuItem>
-        <MenuItem eventKey="2" onClick={() => onAddCredential('satellite')}>
-          Satellite Credential
-        </MenuItem>
-        <MenuItem eventKey="2" onClick={() => onAddCredential('vcenter')}>
-          VCenter Credential
-        </MenuItem>
-      </DropdownButton>
+      <AddCredentialType buttonVariant={CredentialButtonVariant.primary} />
     </EmptyStatePrimary>
     <EmptyStateSecondaryActions>
       <Button variant={ButtonVariant.link} onClick={onAddSource}>
@@ -44,16 +44,24 @@ const CredentialsEmptyState = ({ onAddCredential, onAddSource, t, uiSentenceStar
   </EmptyState>
 );
 
+/**
+ * Prop types
+ *
+ * @type {{uiShortName: string, t: Function, uiSentenceStartName: string, onAddSource: Function}}
+ */
 CredentialsEmptyState.propTypes = {
-  onAddCredential: PropTypes.func,
   onAddSource: PropTypes.func,
   t: PropTypes.func,
   uiSentenceStartName: PropTypes.string,
   uiShortName: PropTypes.string
 };
 
+/**
+ * Default props
+ *
+ * @type {{uiShortName: string, t: translate, uiSentenceStartName: string, onAddSource: Function}}
+ */
 CredentialsEmptyState.defaultProps = {
-  onAddCredential: helpers.noop,
   onAddSource: helpers.noop,
   t: translate,
   uiSentenceStartName: helpers.UI_SENTENCE_START_NAME,

diff --git a/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap b/src/components/i18n/__tests__/__snapshots__/i18n.test.js.snap
@@ -257,6 +257,14 @@ Array [
   Object {
     "file": "./src/components/credentials/credentials.js",
     "keys": Array [
+      Object {
+        "key": "form-dialog.label",
+        "match": "t('form-dialog.label', { context: 'add' })",
+      },
+      Object {
+        "key": "form-dialog.label",
+        "match": "t('form-dialog.label', { context: 'delete' })",
+      },
       Object {
         "key": "view.loading",
         "match": "t('view.loading', { context: 'credentials' })",