Andal.LND/frontend-app-gradebook
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate off paragon modal derpecation

Browse Source
This commit is contained in:
mashal-m
2022-10-06 18:17:08 +05:00
committed by Adolfo R. Brandes
parent c95f2d6b22
commit 9b2436991b
3 changed files with 215 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

244
src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
View File

@@ -1,17 +1,59 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
<Modal
body={
exports[`EditModal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
<ModalDialog
closeLabel="Close"
hasCloseButton={true}
isBlocking={false}
isFullscreenOnMobile={true}
isFullscreenScroll={false}
isOpen={true}
onClose={[MockFunction this.closeAssignmentModal]}
size="xl"
variant="default"
>
<ModalDialogHeader
as="div"
>
<ModalDialogTitle
as="h2"
>
<FormattedMessage
defaultMessage="Edit Grades"
description="Edit Modal title"
id="gradebook.GradesView.EditModal.title"
/>
</ModalDialogTitle>
</ModalDialogHeader>
<ModalDialogBody
as="div"
>
<div>
<ModalHeaders />
<Alert
<ForwardRef
closeLabel="Dismiss"
dismissible={false}
onClose={[Function]}
show={true}
stacked={false}
transition={
Object {
"$$typeof": Symbol(react.forward_ref),
"defaultProps": Object {
"appear": false,
"in": false,
"mountOnEnter": false,
"timeout": 300,
"unmountOnExit": false,
},
"displayName": "Fade",
"render": [Function],
}
}
variant="danger"
>
Weve been trying to contact you regarding...
</Alert>
</ForwardRef>
<OverrideTable />
<div>
<FormattedMessage
@@ -28,10 +70,48 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
/>
</div>
</div>
}
buttons={
Array [
<Button
</ModalDialogBody>
<ModalDialogFooter
as="div"
>
<ActionRow
as="div"
isStacked={false}
>
<ForwardRef
as={
Object {
"$$typeof": Symbol(react.forward_ref),
"Deprecated": [Function],
"defaultProps": Object {
"active": false,
"children": undefined,
"className": undefined,
"disabled": false,
"iconAfter": undefined,
"iconBefore": undefined,
"variant": "primary",
},
"propTypes": Object {
"children": [Function],
"className": [Function],
"iconAfter": [Function],
"iconBefore": [Function],
},
"render": [Function],
}
}
variant="tertiary"
>
<FormattedMessage
defaultMessage="Cancel"
description="Edit Modal close button text"
id="gradebook.GradesView.EditModal.closeText"
/>
</ForwardRef>
<ForwardRef
active={false}
disabled={false}
onClick={[MockFunction this.handleAdjustedGradeClick]}
variant="primary"
>
@@ -40,40 +120,66 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is and empty and
description="Edit Modal Save button label"
id="gradebook.GradesView.EditModal.saveGrade"
/>
</Button>,
]
}
closeText={
<FormattedMessage
defaultMessage="Cancel"
description="Edit Modal close button text"
id="gradebook.GradesView.EditModal.closeText"
/>
}
onClose={[MockFunction this.closeAssignmentModal]}
open={true}
title={
<FormattedMessage
defaultMessage="Edit Grades"
description="Edit Modal title"
id="gradebook.GradesView.EditModal.title"
/>
}
/>
</ForwardRef>
</ActionRow>
</ModalDialogFooter>
</ModalDialog>
`;
exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
<Modal
body={
exports[`EditModal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
<ModalDialog
closeLabel="Close"
hasCloseButton={true}
isBlocking={false}
isFullscreenOnMobile={true}
isFullscreenScroll={false}
isOpen={true}
onClose={[MockFunction this.closeAssignmentModal]}
size="xl"
variant="default"
>
<ModalDialogHeader
as="div"
>
<ModalDialogTitle
as="h2"
>
<FormattedMessage
defaultMessage="Edit Grades"
description="Edit Modal title"
id="gradebook.GradesView.EditModal.title"
/>
</ModalDialogTitle>
</ModalDialogHeader>
<ModalDialogBody
as="div"
>
<div>
<ModalHeaders />
<Alert
<ForwardRef
closeLabel="Dismiss"
dismissible={false}
onClose={[Function]}
show={false}
stacked={false}
transition={
Object {
"$$typeof": Symbol(react.forward_ref),
"defaultProps": Object {
"appear": false,
"in": false,
"mountOnEnter": false,
"timeout": 300,
"unmountOnExit": false,
},
"displayName": "Fade",
"render": [Function],
}
}
variant="danger"
>
</Alert>
</ForwardRef>
<OverrideTable />
<div>
<FormattedMessage
@@ -90,10 +196,48 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
/>
</div>
</div>
}
buttons={
Array [
<Button
</ModalDialogBody>
<ModalDialogFooter
as="div"
>
<ActionRow
as="div"
isStacked={false}
>
<ForwardRef
as={
Object {
"$$typeof": Symbol(react.forward_ref),
"Deprecated": [Function],
"defaultProps": Object {
"active": false,
"children": undefined,
"className": undefined,
"disabled": false,
"iconAfter": undefined,
"iconBefore": undefined,
"variant": "primary",
},
"propTypes": Object {
"children": [Function],
"className": [Function],
"iconAfter": [Function],
"iconBefore": [Function],
},
"render": [Function],
}
}
variant="tertiary"
>
<FormattedMessage
defaultMessage="Cancel"
description="Edit Modal close button text"
id="gradebook.GradesView.EditModal.closeText"
/>
</ForwardRef>
<ForwardRef
active={false}
disabled={false}
onClick={[MockFunction this.handleAdjustedGradeClick]}
variant="primary"
>
@@ -102,24 +246,8 @@ exports[`EditMoal Component snapshots gradeOverrideHistoryError is empty and ope
description="Edit Modal Save button label"
id="gradebook.GradesView.EditModal.saveGrade"
/>
</Button>,
]
}
closeText={
<FormattedMessage
defaultMessage="Cancel"
description="Edit Modal close button text"
id="gradebook.GradesView.EditModal.closeText"
/>
}
onClose={[MockFunction this.closeAssignmentModal]}
open={false}
title={
<FormattedMessage
defaultMessage="Edit Grades"
description="Edit Modal title"
id="gradebook.GradesView.EditModal.title"
/>
}
/>
</ForwardRef>
</ActionRow>
</ModalDialogFooter>
</ModalDialog>
`;

42
src/components/GradesView/EditModal/index.jsx
View File

@@ -5,8 +5,9 @@ import { connect } from 'react-redux';
import {
Button,
Modal,
Alert,
ModalDialog,
ActionRow,
} from '@edx/paragon';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
@@ -46,11 +47,20 @@ export class EditModal extends React.Component {
render() {
return (
<Modal
open={this.props.open}
title={<FormattedMessage {...messages.title} />}
closeText={<FormattedMessage {...messages.closeText} />}
body={(
<ModalDialog
isOpen
onClose={this.closeAssignmentModal}
size="xl"
hasCloseButton
isFullscreenOnMobile
>
<ModalDialog.Header>
<ModalDialog.Title>
<FormattedMessage {...messages.title} />
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
<div>
<ModalHeaders />
<Alert
@@ -64,14 +74,18 @@ export class EditModal extends React.Component {
<div><FormattedMessage {...messages.visibility} /></div>
<div><FormattedMessage {...messages.saveVisibility} /></div>
</div>
)}
buttons={[
<Button variant="primary" onClick={this.handleAdjustedGradeClick}>
<FormattedMessage {...messages.saveGrade} />
</Button>,
]}
onClose={this.closeAssignmentModal}
/>
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="tertiary">
<FormattedMessage {...messages.closeText} />
</ModalDialog.CloseButton>
<Button variant="primary" onClick={this.handleAdjustedGradeClick}>
<FormattedMessage {...messages.saveGrade} />
</Button>
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
);
}
}

8
src/components/GradesView/EditModal/test.jsx
View File

@@ -10,14 +10,8 @@ import {
mapDispatchToProps,
mapStateToProps,
} from '.';
jest.mock('./OverrideTable', () => 'OverrideTable');
jest.mock('./ModalHeaders', () => 'ModalHeaders');
jest.mock('@edx/paragon', () => ({
Button: () => 'Button',
Modal: () => 'Modal',
Alert: () => 'Alert',
}));
jest.mock('data/actions', () => ({
__esModule: true,
default: {
@@ -44,7 +38,7 @@ jest.mock('data/selectors', () => ({
},
},
}));
describe('EditMoal', () => {
describe('EditModal', () => {
let props;
beforeEach(() => {
props = {