refactor(modal): discovery-149 apply pf4 wrapper

* authentication, apply pf4 modal * createCredentialDialog, pf4 modal, buttons * createScanDialog, pf4 modal, buttons DEV createScanDialog
quipucords · Jun 30, 2022 · 5ea7ee1 · 5ea7ee1
1 parent 81865f4
commit 5ea7ee1
Show file tree

Hide file tree

Showing 11 changed files with 258 additions and 251 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -9,7 +9,20 @@
     "ui-version": "UI Version",
     "username": "Username"
   },
+  "form-dialog": {
+    "label_cancel": "Cancel",
+    "label_close": "Close",
+    "label_submit": "Submit",
+    "label_submit_confirmation": "Confirm",
+    "label_submit_create-credential": "Save",
+    "label_submit_create-scan": "Scan",
+    "label_submit_merge-reports": "Merge"
+  },
   "modal": {
     "aria-label-default": "Application modal"
+  },
+  "view": {
+    "loading": "Loading...",
+    "loading_credentials": "Loading credentials..."
   }
 }
diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -183,43 +183,25 @@ exports[`Authentication Component should render a non-connected component error:
 
 exports[`Authentication Component should render a non-connected component pending: non-connected pending 1`] = `
 <Modal
-  animation={false}
-  autoFocus={true}
+  aria-label={null}
   backdrop={false}
-  bsClass="modal"
-  bsSize="lg"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={true}
+  disableFocusTrap={true}
+  footer={null}
+  header={null}
+  isOpen={true}
+  position="top"
+  positionOffset="5%"
+  showClose={false}
+  t={[Function]}
+  variant="medium"
 >
-  <ModalBody
-    bsClass="modal-body"
-    componentClass="div"
+  <div
+    className="spinner spinner-xl"
+  />
+  <div
+    className="text-center"
   >
-    <div
-      className="spinner spinner-xl"
-    />
-    <div
-      className="text-center"
-    >
-      Logging in...
-    </div>
-  </ModalBody>
+    Logging in...
+  </div>
 </Modal>
 `;
diff --git a/src/components/authentication/authentication.js b/src/components/authentication/authentication.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Alert, EmptyState, Modal } from 'patternfly-react';
+import { Alert, EmptyState } from 'patternfly-react';
+import { Modal, ModalVariant } from '../modal/modal';
 import { reduxActions } from '../../redux';
 import helpers from '../../common/helpers';
 import { PageLayout } from '../pageLayout/pageLayout';
@@ -24,11 +25,9 @@ class Authentication extends React.Component {
 
     if (session.pending) {
       return (
-        <Modal bsSize="lg" backdrop={false} show animation={false}>
-          <Modal.Body>
-            <div className="spinner spinner-xl" />
-            <div className="text-center">Logging in...</div>
-          </Modal.Body>
+        <Modal variant={ModalVariant.medium} backdrop={false} isOpen disableFocusTrap>
+          <div className="spinner spinner-xl" />
+          <div className="text-center">Logging in...</div>
         </Modal>
       );
     }

diff --git a/src/components/confirmationModal/confirmationModal.js b/src/components/confirmationModal/confirmationModal.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MessageDialog, Icon } from 'patternfly-react';
+import { Alert, AlertVariant, Button, ButtonVariant, Title } from '@patternfly/react-core';
+import { Modal } from '../modal/modal';
 import { connect, store, reduxTypes } from '../../redux';
-import helpers from '../../common/helpers';
+import { translate } from '../i18n/i18n';
 
 const ConfirmationModal = ({
   show,
@@ -13,7 +14,8 @@ const ConfirmationModal = ({
   confirmButtonText,
   cancelButtonText,
   onConfirm,
-  onCancel
+  onCancel,
+  t
 }) => {
   const cancel = () => {
     if (onCancel) {
@@ -25,19 +27,43 @@ const ConfirmationModal = ({
     }
   };
 
+  const setActions = () => {
+    const actions = [];
+
+    if (onConfirm) {
+      actions.push(
+        <Button key="submit" onClick={onConfirm}>
+          {confirmButtonText || t('form-dialog.label', { context: ['submit', 'confirmation'] })}
+        </Button>
+      );
+    }
+
+    actions.push(
+      <Button key="cancel" variant={ButtonVariant.secondary} onClick={cancel}>
+        {cancelButtonText || t('form-dialog.label', { context: 'cancel' })}
+      </Button>
+    );
+
+    return actions;
+  };
+
   return (
-    <MessageDialog
-      primaryAction={onConfirm}
-      secondaryAction={cancel}
-      onHide={cancel}
-      icon={icon}
-      show={show}
-      title={title}
-      primaryActionButtonContent={confirmButtonText}
-      secondaryActionButtonContent={cancelButtonText}
-      primaryContent={<p>{heading}</p>}
-      secondaryContent={<p>{body}</p>}
-    />
+    <Modal
+      className="quipucords-modal__confirmation"
+      isOpen={show}
+      backdrop={false}
+      showClose
+      onClose={cancel}
+      actions={setActions()}
+      header={
+        <Title headingLevel="h4">{title || t('form-dialog.label', { context: ['submit', 'confirmation'] })}</Title>
+      }
+      disableFocusTrap
+    >
+      <Alert isInline isPlain variant={icon} title={heading}>
+        {body && <p>{body}</p>}
+      </Alert>
+    </Modal>
   );
 };
 
@@ -50,18 +76,20 @@ ConfirmationModal.propTypes = {
   confirmButtonText: PropTypes.string,
   cancelButtonText: PropTypes.string,
   onConfirm: PropTypes.func,
-  onCancel: PropTypes.func
+  onCancel: PropTypes.func,
+  t: PropTypes.func
 };
 
 ConfirmationModal.defaultProps = {
-  title: 'Confirm',
+  title: null,
   heading: null,
   body: null,
-  icon: <Icon type="pf" name="warning-triangle-o" />,
-  confirmButtonText: 'Confirm',
-  cancelButtonText: '',
-  onConfirm: helpers.noop,
-  onCancel: null
+  icon: AlertVariant.warning,
+  confirmButtonText: null,
+  cancelButtonText: null,
+  onConfirm: null,
+  onCancel: null,
+  t: translate
 };
 
 const mapStateToProps = state => ({ ...state.confirmationModal });

diff --git a/...onents/createCredentialDialog/__tests__/__snapshots__/createCredentialDialog.test.js.snap b/...onents/createCredentialDialog/__tests__/__snapshots__/createCredentialDialog.test.js.snap
@@ -2,47 +2,28 @@
 
 exports[`CreateCredentialDialog Component should render a connected component: connected 1`] = `
 <div
-  role="dialog"
+  class="pf-c-backdrop"
 >
   <div
-    class="fade modal-backdrop in"
-  />
-  <div
-    class="fade in modal"
-    role="dialog"
-    style="display: block; padding-right: 0px;"
-    tabindex="-1"
+    class="pf-l-bullseye"
   >
     <div
-      class="modal-dialog"
+      aria-describedby="pf-modal-part-2"
+      aria-label="t(modal.aria-label-default)"
+      aria-labelledby="pf-modal-part-0"
+      aria-modal="true"
+      class="pf-c-modal-box pf-m-align-top pf-m-md"
+      data-ouia-component-id="OUIA-Generated-Modal-medium-1"
+      data-ouia-component-type="PF4/ModalContent"
+      data-ouia-safe="true"
+      id="pf-modal-part-0"
+      role="dialog"
+      style="--pf-c-modal-box--m-align-top--spacer: 5%;"
     >
       <div
-        class="modal-content"
-        role="document"
+        class="pf-c-modal-box__body"
+        id="pf-modal-part-2"
       >
-        <div
-          class="modal-header"
-        >
-          <button
-            aria-hidden="true"
-            aria-label="Close"
-            class="close btn btn-default"
-            type="button"
-          >
-            <span
-              aria-hidden="true"
-              class="pficon pficon-close"
-            />
-          </button>
-          <h4
-            class="modal-title"
-          >
-            Add Credential
-          </h4>
-        </div>
-        <div
-          class="modal-body"
-        />
         <div
           class="container-fluid"
         >
@@ -191,23 +172,6 @@ exports[`CreateCredentialDialog Component should render a connected component: c
             </div>
           </form>
         </div>
-        <div
-          class="modal-footer"
-        >
-          <button
-            class="btn-cancel btn btn-default"
-            type="button"
-          >
-            Cancel
-          </button>
-          <button
-            class="btn btn-primary"
-            disabled=""
-            type="button"
-          >
-            Save
-          </button>
-        </div>
       </div>
     </div>
   </div>

diff --git a/src/components/createCredentialDialog/createCredentialDialog.js b/src/components/createCredentialDialog/createCredentialDialog.js
@@ -1,10 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal, Alert, Button, Icon, Form, Grid } from 'patternfly-react';
+import { Button, ButtonVariant, Title } from '@patternfly/react-core';
+import { Alert, Form, Grid } from 'patternfly-react';
+import { Modal } from '../modal/modal';
 import { connect, reduxActions, reduxTypes, store } from '../../redux';
 import { helpers } from '../../common/helpers';
 import { authDictionary, dictionary } from '../../constants/dictionaryConstants';
 import DropdownSelect from '../dropdownSelect/dropdownSelect';
+import { translate } from '../i18n/i18n';
 
 class CreateCredentialDialog extends React.Component {
   static renderFormLabel(label) {
@@ -396,7 +399,7 @@ class CreateCredentialDialog extends React.Component {
   }
 
   render() {
-    const { show, edit } = this.props;
+    const { show, edit, t } = this.props;
     const {
       credentialType,
       credentialName,
@@ -406,16 +409,22 @@ class CreateCredentialDialog extends React.Component {
       usernameError,
       sshKeyDisabled
     } = this.state;
-
+    //
     return (
-      <Modal show={show} onHide={this.onCancel}>
-        <Modal.Header>
-          <Button className="close" onClick={this.onCancel} aria-hidden="true" aria-label="Close">
-            <Icon type="pf" name="close" />
+      <Modal
+        isOpen={show}
+        showClose
+        onClose={this.onCancel}
+        header={<Title headingLevel="h4">{edit ? `View Credential - ${credentialName}` : 'Add Credential'}</Title>}
+        actions={[
+          <Button key="save" onClick={this.onSave} isDisabled={!this.validateForm()}>
+            {t('form-dialog.label', { context: ['submit', 'create-credential'] })}
+          </Button>,
+          <Button key="cancel" variant={ButtonVariant.link} autoFocus={edit} onClick={this.onCancel}>
+            {t('form-dialog.label', { context: 'cancel' })}
           </Button>
-          <Modal.Title>{edit ? `View Credential - ${credentialName}` : 'Add Credential'}</Modal.Title>
-        </Modal.Header>
-        <Modal.Body />
+        ]}
+      >
         <Grid fluid>
           {this.renderErrorMessage()}
           <Form horizontal>
@@ -474,14 +483,6 @@ class CreateCredentialDialog extends React.Component {
             {this.renderNetworkForm()}
           </Form>
         </Grid>
-        <Modal.Footer>
-          <Button bsStyle="default" className="btn-cancel" autoFocus={edit} onClick={this.onCancel}>
-            Cancel
-          </Button>
-          <Button bsStyle="primary" onClick={this.onSave} disabled={!this.validateForm()}>
-            Save
-          </Button>
-        </Modal.Footer>
       </Modal>
     );
   }
@@ -499,6 +500,7 @@ CreateCredentialDialog.propTypes = {
   fulfilled: PropTypes.bool,
   error: PropTypes.bool,
   errorMessage: PropTypes.string,
+  t: PropTypes.func,
   viewOptions: PropTypes.object
 };
 
@@ -514,6 +516,7 @@ CreateCredentialDialog.defaultProps = {
   fulfilled: false,
   error: false,
   errorMessage: null,
+  t: translate,
   viewOptions: {}
 };