Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: migrate off paragon modal deprecated migration #872

Merged
merged 10 commits into from
Feb 8, 2024
Merged

refactor: migrate off paragon modal deprecated migration #872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8741e1d
refactor: migrate off paragon modal deprecated migration
Oct 14, 2022
431c55f
refactor: migrate off paragon modal deprecated migration
Oct 14, 2022
0b0f928
Merge branch 'master' of https://github.com/openedx/frontend-app-admi…
Nov 16, 2022
297dcee
refactor: resolve conflicts
Nov 25, 2022
e89f772
refactor: fixed the requested changes
Jun 2, 2023
473c88d
Merge branch 'master' of https://github.com/openedx/frontend-app-admi…
Jul 27, 2023
45ef0d9
Merge branch 'master' into mashal-m/paragon-modal-deprecation
abdullahwaheed Aug 2, 2023
a73ac20
Merge branch 'master' into mashal-m/paragon-modal-deprecation
Mashal-m Aug 2, 2023
42b9c4c
Merge branch 'master' of https://github.com/openedx/frontend-app-admi…
Sep 18, 2023
37a8719
Merge branch 'master' into mashal-m/paragon-modal-deprecation
feanil Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/components/CodeAssignmentModal/CodeAssignmentModal.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,6 @@ const CodeAssignmentModalWrapper = (props) => (
</MemoryRouter>
);
/* eslint-enable react/prop-types */

describe('CodeAssignmentModal component', () => {
it('displays a modal', () => {
render(<CodeAssignmentModalWrapper />);
Expand Down
78 changes: 41 additions & 37 deletions src/components/CodeAssignmentModal/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import PropTypes from 'prop-types';
import { reduxForm, SubmissionError } from 'redux-form';
import {
Button, Modal, Form, Spinner,
Button, Icon, ModalDialog, ActionRow, Form,

Check failure on line 5 in src/components/CodeAssignmentModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Icon' is defined but never used
} from '@edx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

Expand Down Expand Up @@ -40,7 +40,6 @@
super(props);

this.errorMessageRef = React.createRef();
this.modalRef = React.createRef();

this.state = {
mode: MODAL_TYPES.assign,
Expand All @@ -54,14 +53,6 @@
this.getNumberOfSelectedCodes = this.getNumberOfSelectedCodes.bind(this);
}

componentDidMount() {
const { current: { firstFocusableElement } } = this.modalRef;

if (firstFocusableElement) {
firstFocusableElement.focus();
}
}

componentDidUpdate(prevProps) {
const {
submitFailed,
Expand Down Expand Up @@ -376,7 +367,7 @@
>
Notify learners by email
</Form.Checkbox>
{ notify && (
{notify && (
<EmailTemplateForm
emailTemplateType={MODAL_TYPES.assign}
fields={getAssignmentModalFields(formatMessage)}
Expand Down Expand Up @@ -405,33 +396,46 @@
} = 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" />}

Check failure on line 426 in src/components/CodeAssignmentModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

Expected indentation of 16 space characters but found 14

Check failure on line 426 in src/components/CodeAssignmentModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Spinner' is not defined

Check failure on line 426 in src/components/CodeAssignmentModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Spinner' is not defined
{`Assign ${isBulkAssign ? 'Codes' : 'Code'}`}
</>
</Button>,
<SaveTemplateButton
key="save-assign-template-btn"
templateType={MODAL_TYPES.assign}
setMode={this.setMode}
handleSubmit={handleSubmit}
/>,
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/CodeReminderModal/CodeReminderModal.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
76 changes: 42 additions & 34 deletions src/components/CodeReminderModal/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,

Check failure on line 5 in src/components/CodeReminderModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Icon' is defined but never used
} from '@edx/paragon';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

import SaveTemplateButton from '../../containers/SaveTemplateButton';
Expand All @@ -28,7 +30,6 @@
super(props);

this.errorMessageRef = React.createRef();
this.modalRef = React.createRef();

this.state = {
mode: REMIND_MODE,
Expand All @@ -39,14 +40,6 @@
this.getNumberOfSelectedCodes = this.getNumberOfSelectedCodes.bind(this);
}

componentDidMount() {
const { current: { firstFocusableElement } } = this.modalRef;

if (firstFocusableElement) {
firstFocusableElement.focus();
}
}

componentDidUpdate(prevProps) {
const {
submitFailed,
Expand Down Expand Up @@ -217,31 +210,46 @@
} = this.state;

return (
<Modal
Mashal-m marked this conversation as resolved.
Show resolved Hide resolved
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" />}

Check failure on line 240 in src/components/CodeReminderModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Spinner' is not defined

Check failure on line 240 in src/components/CodeReminderModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Spinner' is not defined
Remind
</>
</Button>,
<SaveTemplateButton
key="save-remind-template-btn"
templateType={REMIND_MODE}
setMode={this.setMode}
handleSubmit={handleSubmit}
/>,
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
);
}
}
Expand Down
85 changes: 45 additions & 40 deletions src/components/CodeRevokeModal/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import PropTypes from 'prop-types';
import { Field, reduxForm, SubmissionError } from 'redux-form';
import {
Button, Modal, Spinner,
Button, Icon, ModalDialog, ActionRow,

Check failure on line 5 in src/components/CodeRevokeModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Icon' is defined but never used
} from '@edx/paragon';
import { Info } from '@edx/paragon/icons';

Expand Down Expand Up @@ -30,7 +30,6 @@
super(props);

this.errorMessageRef = React.createRef();
this.modalRef = React.createRef();

this.state = {
mode: MODAL_TYPES.revoke,
Expand All @@ -42,14 +41,6 @@
this.handleModalSubmit = this.handleModalSubmit.bind(this);
}

componentDidMount() {
const { current: { firstFocusableElement } } = this.modalRef;

if (firstFocusableElement) {
firstFocusableElement.focus();
}
}

componentDidUpdate(prevProps) {
const {
submitFailed,
Expand Down Expand Up @@ -177,11 +168,11 @@
<>
{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>}
Expand Down Expand Up @@ -228,32 +219,46 @@
} = 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" />}

Check failure on line 248 in src/components/CodeRevokeModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Spinner' is not defined

Check failure on line 248 in src/components/CodeRevokeModal/index.jsx

View workflow job for this annotation

GitHub Actions / tests 

'Spinner' is not defined
Revoke
</>
</Button>,
<SaveTemplateButton
key="save-revoke-template-btn"
templateType={MODAL_TYPES.revoke}
setMode={this.setMode}
handleSubmit={handleSubmit}
disabled={doNotEmail}
/>,
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
);
}
}
Expand Down
Loading
Loading