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 1 commit
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
62 changes: 36 additions & 26 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,34 @@ 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={(
>

<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages['library.detail.block.delete.modal.title'])}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
<div>
<p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need the <div> and the <p> here? my assumption would be that the <div> was needed before because the body wasn't a component, but now that we have <ModalDialog.Body> it might be redundant.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved

{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.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 +284,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 +435,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
201 changes: 112 additions & 89 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,121 @@ 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>
{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))}
<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)}
>
{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'])}

<ModalDialog.Header>
<ModalDialog.Title>
{intl.formatMessage(messages['library.access.modal.remove_admin.title'])}
</ModalDialog.Title>
</ModalDialog.Header>
<ModalDialog.Body>
<div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same as previous comment about probably not needing this <div>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved

<p>
{intl.formatMessage(
messages['library.access.modal.remove_admin.body'],
{ library: library.title, email: user.email },
)}
</p>
</div>
</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>
)}
{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>
<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.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>
<div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another <div> we probably don't need

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Resolved

<p>
{intl.formatMessage(
messages['library.access.modal.remove.body'],
{ library: library.title, email: user.email },
)}
</p>
</div>
</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>
</>
)}
{(!((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>
{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>
)}
</Row>
</Col>
)}
</Row>
</Card.Body>
Expand Down