Merge pull request #872 from openedx/mashal-m/paragon-modal-deprecation

refactor: migrate off paragon modal deprecated migration
openedx · Feb 8, 2024 · 1b3c6f7 · 1b3c6f7
2 parents 2193013 + 37a8719
commit 1b3c6f7
Show file tree

Hide file tree

Showing 9 changed files with 172 additions and 151 deletions.
diff --git a/src/components/CodeAssignmentModal/CodeAssignmentModal.test.jsx b/src/components/CodeAssignmentModal/CodeAssignmentModal.test.jsx
@@ -139,7 +139,6 @@ const CodeAssignmentModalWrapper = (props) => (
   </MemoryRouter>
 );
 /* eslint-enable react/prop-types */
-
 describe('CodeAssignmentModal component', () => {
   it('displays a modal', () => {
     render(<CodeAssignmentModalWrapper />);

diff --git a/src/components/CodeAssignmentModal/index.jsx b/src/components/CodeAssignmentModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Modal, Form, Spinner,
+  Button, Icon, ModalDialog, ActionRow, Form,
 } from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -40,7 +40,6 @@ export class BaseCodeAssignmentModal extends React.Component {
     super(props);
 
     this.errorMessageRef = React.createRef();
-    this.modalRef = React.createRef();
 
     this.state = {
       mode: MODAL_TYPES.assign,
@@ -54,14 +53,6 @@ export class BaseCodeAssignmentModal extends React.Component {
     this.getNumberOfSelectedCodes = this.getNumberOfSelectedCodes.bind(this);
   }
 
-  componentDidMount() {
-    const { current: { firstFocusableElement } } = this.modalRef;
-
-    if (firstFocusableElement) {
-      firstFocusableElement.focus();
-    }
-  }
-
   componentDidUpdate(prevProps) {
     const {
       submitFailed,
@@ -376,7 +367,7 @@ export class BaseCodeAssignmentModal extends React.Component {
           >
             Notify learners by email
           </Form.Checkbox>
-          { notify && (
+          {notify && (
             <EmailTemplateForm
               emailTemplateType={MODAL_TYPES.assign}
               fields={getAssignmentModalFields(formatMessage)}
@@ -405,33 +396,46 @@ export class BaseCodeAssignmentModal extends React.Component {
     } = this.state;
 
     return (
-      <Modal
-        ref={this.modalRef}
-        dialogClassName="code-assignment"
-        title={this.renderTitle()}
-        body={this.renderBody()}
-        buttons={[
-          <Button
-            key="assign-submit-btn"
-            disabled={submitting}
-            onClick={handleSubmit(this.handleModalSubmit)}
-            data-testid={SUBMIT_BUTTON_TEST_ID}
-          >
-            <>
-              {mode === MODAL_TYPES.assign && submitting && <Spinner animation="border" className="mr-2" variant="light" size="sm" />}
-              {`Assign ${isBulkAssign ? 'Codes' : 'Code'}`}
-            </>
-          </Button>,
-          <SaveTemplateButton
-            key="save-assign-template-btn"
-            templateType={MODAL_TYPES.assign}
-            setMode={this.setMode}
-            handleSubmit={handleSubmit}
-          />,
-        ]}
+      <ModalDialog
+        isOpen
+        size="lg"
         onClose={onClose}
-        open
-      />
+        className="code-assignment"
+        hasCloseButton
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {this.renderTitle()}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          {this.renderBody()}
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              Cancel
+            </ModalDialog.CloseButton>
+            <Button
+              key="assign-submit-btn"
+              disabled={submitting}
+              onClick={handleSubmit(this.handleModalSubmit)}
+              data-testid={SUBMIT_BUTTON_TEST_ID}
+            >
+              <>
+              {mode === MODAL_TYPES.assign && submitting && <Spinner animation="border" className="mr-2" variant="light" size="sm" />}
+                {`Assign ${isBulkAssign ? 'Codes' : 'Code'}`}
+              </>
+            </Button>,
+            <SaveTemplateButton
+              key="save-assign-template-btn"
+              templateType={MODAL_TYPES.assign}
+              setMode={this.setMode}
+              handleSubmit={handleSubmit}
+            />,
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     );
   }
 }

diff --git a/src/components/CodeReminderModal/CodeReminderModal.test.jsx b/src/components/CodeReminderModal/CodeReminderModal.test.jsx
@@ -135,10 +135,10 @@ const CodeReminderModalWrapper = (props) => (
   </MemoryRouter>
 );
 /* eslint-enable react/prop-types */
-
 describe('CodeReminderModal component', () => {
   it('displays a modal', () => {
     render(<CodeReminderModalWrapper />);
+
     expect(screen.getByText(initialProps.title)).toBeInTheDocument();
   });
   it('displays an error', () => {

diff --git a/src/components/CodeReminderModal/index.jsx b/src/components/CodeReminderModal/index.jsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { reduxForm, SubmissionError } from 'redux-form';
-import { Button, Modal, Spinner } from '@edx/paragon';
+import {
+  Button, Icon, ModalDialog, ActionRow,
+} from '@edx/paragon';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
 import SaveTemplateButton from '../../containers/SaveTemplateButton';
@@ -28,7 +30,6 @@ export class BaseCodeReminderModal extends React.Component {
     super(props);
 
     this.errorMessageRef = React.createRef();
-    this.modalRef = React.createRef();
 
     this.state = {
       mode: REMIND_MODE,
@@ -39,14 +40,6 @@ export class BaseCodeReminderModal extends React.Component {
     this.getNumberOfSelectedCodes = this.getNumberOfSelectedCodes.bind(this);
   }
 
-  componentDidMount() {
-    const { current: { firstFocusableElement } } = this.modalRef;
-
-    if (firstFocusableElement) {
-      firstFocusableElement.focus();
-    }
-  }
-
   componentDidUpdate(prevProps) {
     const {
       submitFailed,
@@ -217,31 +210,46 @@ export class BaseCodeReminderModal extends React.Component {
     } = this.state;
 
     return (
-      <Modal
-        ref={this.modalRef}
-        dialogClassName="code-reminder"
-        title={this.renderTitle()}
-        body={this.renderBody()}
-        buttons={[
-          <Button
-            key="remind-submit-btn"
-            disabled={submitting}
-            className="code-remind-save-btn"
-            onClick={handleSubmit(this.handleModalSubmit)}
-          >
-            {mode === REMIND_MODE && submitting && <Spinner animation="border" variant="primary" size="sm" />}
-            Remind
-          </Button>,
-          <SaveTemplateButton
-            key="save-remind-template-btn"
-            templateType={REMIND_MODE}
-            setMode={this.setMode}
-            handleSubmit={handleSubmit}
-          />,
-        ]}
+      <ModalDialog
+        isOpen
+        size="lg"
         onClose={onClose}
-        open
-      />
+        className="code-reminder"
+        hasCloseButton
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {this.renderTitle()}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          {this.renderBody()}
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              Cancel
+            </ModalDialog.CloseButton>
+            <Button
+              key="remind-submit-btn"
+              disabled={submitting}
+              className="code-remind-save-btn"
+              onClick={handleSubmit(this.handleModalSubmit)}
+            >
+              <>
+                {mode === REMIND_MODE && submitting && <Spinner animation="border" variant="primary" size="sm" />}
+                Remind
+              </>
+            </Button>,
+            <SaveTemplateButton
+              key="save-remind-template-btn"
+              templateType={REMIND_MODE}
+              setMode={this.setMode}
+              handleSubmit={handleSubmit}
+            />,
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     );
   }
 }

diff --git a/src/components/CodeRevokeModal/index.jsx b/src/components/CodeRevokeModal/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Field, reduxForm, SubmissionError } from 'redux-form';
 import {
-  Button, Modal, Spinner,
+  Button, Icon, ModalDialog, ActionRow,
 } from '@edx/paragon';
 import { Info } from '@edx/paragon/icons';
 
@@ -30,7 +30,6 @@ class CodeRevokeModal extends React.Component {
     super(props);
 
     this.errorMessageRef = React.createRef();
-    this.modalRef = React.createRef();
 
     this.state = {
       mode: MODAL_TYPES.revoke,
@@ -42,14 +41,6 @@ class CodeRevokeModal extends React.Component {
     this.handleModalSubmit = this.handleModalSubmit.bind(this);
   }
 
-  componentDidMount() {
-    const { current: { firstFocusableElement } } = this.modalRef;
-
-    if (firstFocusableElement) {
-      firstFocusableElement.focus();
-    }
-  }
-
   componentDidUpdate(prevProps) {
     const {
       submitFailed,
@@ -177,11 +168,11 @@ class CodeRevokeModal extends React.Component {
       <>
         {submitFailed
           && (
-          <ModalError
-            title={ERROR_MESSAGE_TITLES[mode]}
-            errors={error}
-            ref={this.errorMessageRef}
-          />
+            <ModalError
+              title={ERROR_MESSAGE_TITLES[mode]}
+              errors={error}
+              ref={this.errorMessageRef}
+            />
           )}
         <div className="assignment-details mb-4">
           {(isBulkRevoke && data.selectedCodes.length > 0) && <p className="bulk-selected-codes">{displaySelectedCodes(data.selectedCodes.length)}</p>}
@@ -228,32 +219,46 @@ class CodeRevokeModal extends React.Component {
     } = this.state;
 
     return (
-      <Modal
-        ref={this.modalRef}
-        dialogClassName="code-revoke"
-        title={this.renderTitle()}
-        body={this.renderBody()}
-        buttons={[
-          <Button
-            key="revoke-submit-btn"
-            disabled={submitting}
-            className="code-revoke-save-btn"
-            onClick={handleSubmit(this.handleModalSubmit)}
-          >
-            {mode === MODAL_TYPES.revoke && submitting && <Spinner animation="border" className="mr-2" variant="primary" size="sm" />}
-            Revoke
-          </Button>,
-          <SaveTemplateButton
-            key="save-revoke-template-btn"
-            templateType={MODAL_TYPES.revoke}
-            setMode={this.setMode}
-            handleSubmit={handleSubmit}
-            disabled={doNotEmail}
-          />,
-        ]}
+      <ModalDialog
+        isOpen
         onClose={onClose}
-        open
-      />
+        className="code-revoke"
+        hasCloseButton
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            {this.renderTitle()}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          {this.renderBody()}
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="link">
+              Close
+            </ModalDialog.CloseButton>
+            <Button
+              key="revoke-submit-btn"
+              disabled={submitting}
+              className="code-revoke-save-btn"
+              onClick={handleSubmit(this.handleModalSubmit)}
+            >
+              <>
+                {mode === MODAL_TYPES.revoke && submitting && <Spinner animation="border" className="mr-2" variant="primary" size="sm" />}
+                Revoke
+              </>
+            </Button>,
+            <SaveTemplateButton
+              key="save-revoke-template-btn"
+              templateType={MODAL_TYPES.revoke}
+              setMode={this.setMode}
+              handleSubmit={handleSubmit}
+              disabled={doNotEmail}
+            />,
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
     );
   }
 }