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 #76

Closed
wants to merge 3 commits into from
Closed

refactor: migrate off paragon modal deprecated component #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d02024c
refactor: migrate off paragon modal deprecated component
Oct 11, 2022
f07907a
refactor: remooved div and p tag
Oct 18, 2022
d0a1891
refactor: removed div and p tag
Oct 18, 2022
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 @@ -7,11 +7,12 @@ import {
Button,
Card,
Navbar,
Modal,
Dropdown,
SearchField,
Form,
Pagination,
ModalDialog,
ActionRow,
} from '@edx/paragon';
import { v4 as uuid4 } from 'uuid';
import { faPlus, faSync } from '@fortawesome/free-solid-svg-icons';
Expand Down Expand Up @@ -79,7 +80,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 @@ -103,25 +104,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 @@ -274,7 +279,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 @@ -425,16 +430,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