Skip to content

Commit

Permalink
Bump Paragon to v22.2.1, fix some bugs that turned up (#933)
Browse files Browse the repository at this point in the history 
* chore: bump paragon version

* chore: update snapshot test - alt moved from sr-only to aria-label
  • Loading branch information
@bradenmacdonald
bradenmacdonald authored Apr 12, 2024
1 parent 63e220e commit 2fda48f
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 46 deletions.
8 changes: 4 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
"@openedx-plugins/course-app-teams": "file:plugins/course-apps/teams",
"@openedx-plugins/course-app-wiki": "file:plugins/course-apps/wiki",
"@openedx-plugins/course-app-xpert_unit_summary": "file:plugins/course-apps/xpert_unit_summary",
"@openedx/paragon": "^21.5.7",
"@openedx/paragon": "^22.2.1",
"@reduxjs/toolkit": "1.9.7",
"@tanstack/react-query": "4.36.1",
"broadcast-channel": "^7.0.0",
Expand Down
8 changes: 7 additions & 1 deletion src/files-and-videos/generic/table-components/FilterStatus.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
import {
DataTableContext, Button, Row, Chip,
} from '@openedx/paragon';
Expand All @@ -10,6 +10,7 @@ import { getFilters, removeFilter } from './utils';
const FilterStatus = ({
className, variant, size, clearFiltersText, buttonClassName,
}) => {
const intl = useIntl();
const {
state, setAllFilters, setFilter, RowStatusComponent, columns,
} = useContext(DataTableContext);
Expand All @@ -29,6 +30,11 @@ const FilterStatus = ({
<Chip
key={value}
iconAfter={Close}
iconAfterAlt={intl.formatMessage({
id: 'pgn.DataTable.FilterStatus.removeFilter',
defaultMessage: 'Remove this filter',
description: 'Remove one of the applied filters.',
})}
onIconAfterClick={() => removeFilter(value, setFilter, setAllFilters, state)}
>
{name}
Expand Down
2 changes: 1 addition & 1 deletion src/files-and-videos/videos-page/VideosPage.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -421,7 +421,7 @@ describe('Videos page', () => {
fireEvent.click(screen.getByText(messages.applySortButton.defaultMessage));
});

const imageFilterChip = screen.getByTestId('icon-after');
const imageFilterChip = screen.getByRole('button', { name: 'Remove this filter' });
fireEvent.click(imageFilterChip);

expect(screen.queryByText(videoMessages.transcribedCheckboxLabel.defaultMessage)).toBeNull();
Expand Down
42 changes: 21 additions & 21 deletions src/studio-home/tabs-section/courses-tab/courses-filters/__snapshots__/index.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,32 +36,32 @@ exports[`CoursesFilters snapshot 1`] = `
value=""
/>
<button
class="btn"
aria-label="submit search"
class="btn-icon btn-icon-primary btn-icon-sm pgn__searchfield__iconbutton-submit"
type="submit"
>
<span
class="pgn__icon"
class="btn-icon__icon-container"
>
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
<span
class="pgn__icon btn-icon__icon"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
fill="currentColor"
/>
</svg>
</span>
<span
class="sr-only"
>
submit search
<svg
aria-hidden="true"
fill="none"
focusable="false"
height="24"
role="img"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
fill="currentColor"
/>
</svg>
</span>
</span>
</button>
</form>
Expand Down
19 changes: 13 additions & 6 deletions src/taxonomy/manage-orgs/ManageOrgsModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,31 +170,38 @@ const ManageOrgsModal = ({
<hr className="mx-4" />

<ModalDialog.Body>
<Form.Label>
<Form.Group>
<Stack>
<div className="pb-5">{intl.formatMessage(messages.bodyText)}</div>
<div>{intl.formatMessage(messages.currentAssignments)}</div>
<Form.Label>
<div>{intl.formatMessage(messages.currentAssignments)}</div>
</Form.Label>
<div className="col-9 d-inline-box overflow-auto">
{selectedOrgs.length ? selectedOrgs.map((org) => (
<Chip
key={org}
iconAfter={Close}
onIconAfterClick={() => setSelectedOrgs(selectedOrgs.filter((o) => o !== org))}
iconAfterAlt={intl.formatMessage(messages.removeOrg, { org })}
onIconAfterClick={() => setSelectedOrgs(selOrgs => (selOrgs || []).filter((o) => o !== org))}
disabled={!!allOrgs}
>
{org}
</Chip>
)) : <span className="text-muted">{intl.formatMessage(messages.noOrganizationAssigned)}</span> }
</div>
</Stack>
</Form.Label>
</Form.Group>
<Form.Group>
<Form.Label>
{intl.formatMessage(messages.addOrganizations)}
</Form.Label>
<Form.Autosuggest
placeholder={intl.formatMessage(messages.searchOrganizations)}
onSelected={(org) => setSelectedOrgs([...selectedOrgs, org])}
onChange={({ selectionValue }) => {
if (selectionValue) {
setSelectedOrgs([...selectedOrgs, selectionValue]);
}
}}
disabled={allOrgs}
>
{organizationListData ? organizationListData.filter(o => !selectedOrgs?.includes(o)).map((org) => (
Expand All @@ -214,7 +221,7 @@ const ManageOrgsModal = ({
<ModalDialog.CloseButton onClick={onClose} variant="tertiary">
{intl.formatMessage(messages.cancelButton)}
</ModalDialog.CloseButton>
<Button variant="primary" onClick={confirmSave} data-testid="save-button">
<Button variant="primary" onClick={confirmSave}>
{intl.formatMessage(messages.saveButton)}
</Button>
</ActionRow>
Expand Down
33 changes: 21 additions & 12 deletions src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,27 +118,36 @@ describe('<ManageOrgsModal />', () => {
queryAllByTestId,
getByTestId,
getByText,
getByRole,
queryByRole,
} = render(<RootWrapper onClose={onClose} />);

// First, org1 and org2 are already added
await checkDialogRender(getByText);

// Remove org2
fireEvent.click(getByText('org2').nextSibling);
fireEvent.click(getByRole('button', { name: 'Remove org2' }));

expect(getByRole('button', { name: 'Remove org1' })).toBeInTheDocument();
expect(queryByRole('button', { name: 'Remove org2' })).not.toBeInTheDocument();

const input = getByTestId('autosuggest-iconbutton');
fireEvent.click(input);

// We get the following options in the dropdown list:
const list = queryAllByTestId('autosuggest-optionitem');
expect(list.length).toBe(4); // Show org3, org4, org5
expect(getByText('org2')).toBeInTheDocument();
expect(getByText('org3')).toBeInTheDocument();
expect(getByText('org4')).toBeInTheDocument();
expect(getByText('org5')).toBeInTheDocument();
expect(list.length).toBe(4);
expect(getByRole('option', { name: 'org2' })).toBeInTheDocument();
expect(getByRole('option', { name: 'org3' })).toBeInTheDocument();
expect(getByRole('option', { name: 'org4' })).toBeInTheDocument();
expect(getByRole('option', { name: 'org5' })).toBeInTheDocument();

// Select org3
fireEvent.click(list[1]);
fireEvent.click(getByRole('option', { name: 'org3' }));
expect(getByRole('button', { name: 'Remove org1' })).toBeInTheDocument();
expect(getByRole('button', { name: 'Remove org3' })).toBeInTheDocument();

fireEvent.click(getByTestId('save-button'));
fireEvent.click(getByRole('button', { name: 'Save' }));

await waitFor(() => {
expect(mockUseManageOrgsMutate).toHaveBeenCalledWith({
Expand All @@ -154,14 +163,14 @@ describe('<ManageOrgsModal />', () => {

it('can assign all orgs to taxonomies from the dialog', async () => {
const onClose = jest.fn();
const { getByRole, getByTestId, getByText } = render(<RootWrapper onClose={onClose} />);
const { getByRole, getByText } = render(<RootWrapper onClose={onClose} />);

await checkDialogRender(getByText);

const checkbox = getByRole('checkbox', { name: 'Assign to all organizations' });
fireEvent.click(checkbox);

fireEvent.click(getByTestId('save-button'));
fireEvent.click(getByRole('button', { name: 'Save' }));

await waitFor(() => {
expect(mockUseManageOrgsMutate).toHaveBeenCalledWith({
Expand All @@ -176,7 +185,7 @@ describe('<ManageOrgsModal />', () => {

it('can assign no orgs to taxonomies from the dialog', async () => {
const onClose = jest.fn();
const { getByRole, getByTestId, getByText } = render(<RootWrapper onClose={onClose} />);
const { getByRole, getByText } = render(<RootWrapper onClose={onClose} />);

await checkDialogRender(getByText);

Expand All @@ -185,7 +194,7 @@ describe('<ManageOrgsModal />', () => {
// Remove org2
fireEvent.click(getByText('org2').nextSibling);

fireEvent.click(getByTestId('save-button'));
fireEvent.click(getByRole('button', { name: 'Save' }));

await waitFor(() => {
// Check confirm modal is open
Expand Down
5 changes: 5 additions & 0 deletions src/taxonomy/manage-orgs/messages.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ const messages = defineMessages({
id: 'course-authoring.taxonomy-manage-orgs.toast.assign-orgs-success',
defaultMessage: 'Assigned organizations updated',
},
removeOrg: {
id: 'course-authoring.taxonomy-manage-orgs.remove-org',
defaultMessage: 'Remove {org}',
description: 'button to remove a specific organization from a taxonomy',
},
});

export default messages;

0 comments on commit 2fda48f

Please sign in to comment.