Skip to content
This repository has been archived by the owner on Jul 18, 2024. It is now read-only.

refactor: migrate off paragon modal deprecated component #79

Merged
merged 1 commit into from
Oct 18, 2022
Merged

refactor: migrate off paragon modal deprecated component #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
67 changes: 36 additions & 31 deletions src/library-authoring/author-library/LibraryAuthoringPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,12 @@ import {
IconButton,
Card,
Navbar,
Modal,
Dropdown,
SearchField,
Form,
Pagination,
ModalDialog,
ActionRow,
} from '@edx/paragon';
import { Edit } from '@edx/paragon/icons';
import { v4 as uuid4 } from 'uuid';
Expand Down Expand Up @@ -85,7 +86,7 @@ export const BlockPreviewBase = ({
<Navbar className="border">
<Navbar.Brand>{block.display_name}</Navbar.Brand>
<Navbar.Collapse className="justify-content-end">
{ library.allow_lti && (
{library.allow_lti && (
<>
<Button disabled={isLtiUrlGenerating} size="lg" className="mr-1" onClick={() => { props.fetchBlockLtiUrl({ blockId: block.id }); }}>
<FontAwesomeIcon icon={faClipboard} className="pr-1" />
Expand All @@ -109,25 +110,29 @@ export const BlockPreviewBase = ({
</Button>
</Navbar.Collapse>
</Navbar>
<Modal
open={showDeleteModal}
title={intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
<ModalDialog
isOpen={showDeleteModal}
onClose={() => setShowDeleteModal(false)}
body={(
<div>
<p>
{intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
</p>
</div>
)}
buttons={[
<Button
onClick={() => props.deleteLibraryBlock({ blockId: block.id })}
>
{intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
</Button>,
]}
/>
>
<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
{intl.formatMessage(messages['library.detail.block.delete.modal.body'])}
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="link">
Close
</ModalDialog.CloseButton>
<Button onClick={() => props.deleteLibraryBlock({ blockId: block.id })} variant="primary">
{intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
</Button>
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
{showPreviews && (
<Card>
<Card.Body>
Expand Down Expand Up @@ -280,7 +285,7 @@ const ButtonTogglesBase = ({
</Button>
<Button variant="primary" className="ml-1" onClick={() => setShowPreviews(!showPreviews)} size="lg">
<FontAwesomeIcon icon={faSync} className="pr-1" />
{ intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews']) }
{intl.formatMessage(showPreviews ? messages['library.detail.hide_previews'] : messages['library.detail.show_previews'])}
</Button>
</>
);
Expand Down Expand Up @@ -499,16 +504,16 @@ export const LibraryAuthoringPageBase = ({
: null}
<Col xs={12} className="text-center py-3 add-buttons-container">
{library.type !== LIBRARY_TYPES.COMPLEX && (
<Button
variant="success"
size="lg"
disabled={sending}
onClick={() => addBlock(library.type)}
className="cta-button"
>
<FontAwesomeIcon icon={faPlus} className="pr-1" />
{intl.formatMessage(messages[`library.detail.add_${library.type}`])}
</Button>
<Button
variant="success"
size="lg"
disabled={sending}
onClick={() => addBlock(library.type)}
className="cta-button"
>
<FontAwesomeIcon icon={faPlus} className="pr-1" />
{intl.formatMessage(messages[`library.detail.add_${library.type}`])}
</Button>
)}
{library.type === LIBRARY_TYPES.COMPLEX && (
<Row>
Expand Down
181 changes: 98 additions & 83 deletions src/library-authoring/library-access/UserAccessWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
Component for displaying and modifying a user's access level for a library.
*/
import {
ActionRow,
Badge,
Button, Card, Col, Modal, Row,
Button, Card, Col, ModalDialog, Row,
} from '@edx/paragon';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
Expand Down Expand Up @@ -40,99 +41,113 @@ export const UserAccessWidget = ({
</span>
</Col>
{isAdmin && (
<Col xs={12} md={6}>
<Row>
{(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
<Col xs={12} className="text-center text-md-right">
<small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
</Col>
)}
{user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
<Col xs={10} className="text-left text-md-right">
<Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
{intl.formatMessage(messages['library.access.remove_admin'])}
</Button>
<Modal
open={showDeprivModal}
title={intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
onClose={() => setShowDeprivModal(false)}
body={(
<div>
<p>
<Col xs={12} md={6}>
<Row>
{(user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked && (
<Col xs={12} className="text-center text-md-right">
<small>{intl.formatMessage(messages['library.access.info.admin_unlock'])}</small>
</Col>
)}
{user.access_level === LIBRARY_ACCESS.ADMIN && multipleAdmins && (
<Col xs={10} className="text-left text-md-right">
<Button size="lg" variant="secondary" onClick={() => setShowDeprivModal(true)}>
{intl.formatMessage(messages['library.access.remove_admin'])}
</Button>
<ModalDialog
isOpen={showDeprivModal}
onClose={() => setShowDeprivModal(false)}
>

<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
{intl.formatMessage(
messages['library.access.modal.remove_admin.body'],
{ library: library.title, email: user.email },
)}
</p>
</div>
)}
buttons={[
<Button
onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
>
{intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
</Button>,
]}
/>
</Col>
)}
{user.access_level === LIBRARY_ACCESS.READ && (
<Col xs={10} className="text-left text-md-right">
<Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
{intl.formatMessage(messages['library.access.add_author'])}
</Button>
</Col>
)}
{user.access_level === LIBRARY_ACCESS.AUTHOR && (
<>
<Col xs={5} className="text-left text-md-right pl-md-1">
<Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
{intl.formatMessage(messages['library.access.remove_author'])}
</Button>
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="link">
Close
</ModalDialog.CloseButton>
<Button
onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR).then(setShowDeprivModal(false))}
>
{intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
</Button>,
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
</Col>
<Col xs={5} className="text-left text-md-right pl-md-1">
<Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
{intl.formatMessage(messages['library.access.add_admin'])}
)}
{user.access_level === LIBRARY_ACCESS.READ && (
<Col xs={10} className="text-left text-md-right">
<Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.AUTHOR)}>
{intl.formatMessage(messages['library.access.add_author'])}
</Button>
</Col>
</>
)}
{(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
<Col xs={2} className="text-right text-md-center">
<Button
size="lg"
variant="danger"
onClick={() => setShowRemoveModal(true)}
aria-label={
intl.formatMessage(messages['library.access.remove_user'])
}
>
<FontAwesomeIcon icon={faTrash} />
</Button>
<Modal
open={showRemoveModal}
title={intl.formatMessage(messages['library.access.modal.remove.title'])}
onClose={() => setShowRemoveModal(false)}
body={(
<div>
<p>
)}
{user.access_level === LIBRARY_ACCESS.AUTHOR && (
<>
<Col xs={5} className="text-left text-md-right pl-md-1">
<Button size="lg" variant="secondary" onClick={() => setAccessLevel(LIBRARY_ACCESS.READ)}>
{intl.formatMessage(messages['library.access.remove_author'])}
</Button>
</Col>
<Col xs={5} className="text-left text-md-right pl-md-1">
<Button size="lg" variant="primary" onClick={() => setAccessLevel(LIBRARY_ACCESS.ADMIN)}>
{intl.formatMessage(messages['library.access.add_admin'])}
</Button>
</Col>
</>
)}
{(!((user.access_level === LIBRARY_ACCESS.ADMIN) && adminLocked)) && (
<Col xs={2} className="text-right text-md-center">
<Button
size="lg"
variant="danger"
onClick={() => setShowRemoveModal(true)}
aria-label={
intl.formatMessage(messages['library.access.remove_user'])
}
>
<FontAwesomeIcon icon={faTrash} />
</Button>
<ModalDialog
isOpen={showRemoveModal}
onClose={() => setShowRemoveModal(false)}
>

<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages['library.access.modal.remove.title'])}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
{intl.formatMessage(
messages['library.access.modal.remove.body'],
{ library: library.title, email: user.email },
)}
</p>
</div>
)}
buttons={[
<Button onClick={() => removeAccess()}>
{intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
</Button>,
]}
/>
</Col>
)}
</Row>
</Col>
</ModalDialog.Body>
<ModalDialog.Footer>
<ActionRow>
<ModalDialog.CloseButton variant="link">
Close
</ModalDialog.CloseButton>
<Button onClick={() => removeAccess()}>
{intl.formatMessage(commonMessages['library.common.forms.button.yes'])}
</Button>,
</ActionRow>
</ModalDialog.Footer>
</ModalDialog>
</Col>
)}
</Row>
</Col>
)}
</Row>
</Card.Body>
Expand Down