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

Commit

Permalink
refactor: migrate off paragon modal deprecated component
Browse files Browse the repository at this point in the history
  • Loading branch information
@arbrandes
mashal-m authored and arbrandes committed Oct 18, 2022
1 parent c47c652 commit f231c3d
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 114 deletions.
67 changes: 36 additions & 31 deletions src/library-authoring/author-library/LibraryAuthoringPage.jsx
View file
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
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

0 comments on commit f231c3d

Please sign in to comment.