Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bump Paragon to v22.2.1, fix some bugs that turned up (#933)

Browse Source 
* chore: bump paragon version

* chore: update snapshot test - alt moved from sr-only to aria-label
This commit is contained in:
Braden MacDonald
2024-04-12 11:05:56 -07:00
committed by GitHub
parent 63e220ee3e
commit 2fda48fa5f
8 changed files with 73 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@@ -37,7 +37,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",
@@ -4860,9 +4860,9 @@
}
},
"node_modules/@openedx/paragon": {
"version": "21.13.1",
"resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-21.13.1.tgz",
"integrity": "sha512-sLL+Z3ZWIRM6x+OrKZV0S7/SQpEcSeRcDm7E3FzhsnAWudsJCTELvSW+84uy/8dwV7mJhttsBPqQEtNafbCyYA==",
"version": "22.2.1",
"resolved": "https://registry.npmjs.org/@openedx/paragon/-/paragon-22.2.1.tgz",
"integrity": "sha512-Dd7PzvHwNnUokqbFkuOpugJZ9dHaUBOcYwqAA2aMoN7tgi4xEZWsfDFyP1+se2UPuR7NvNGammEesLAwGQ0Ylw==",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",

2
package.json
View File

@@ -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",

8
src/files-and-videos/generic/table-components/FilterStatus.jsx
View File

@@ -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';
@@ -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);
@@ -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}

2
src/files-and-videos/videos-page/VideosPage.test.jsx
View File

@@ -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();

42
src/studio-home/tabs-section/courses-tab/courses-filters/__snapshots__/index.test.jsx.snap
View File

@@ -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>

19
src/taxonomy/manage-orgs/ManageOrgsModal.jsx
View File

@@ -170,16 +170,19 @@ 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}
@@ -187,14 +190,18 @@ const ManageOrgsModal = ({
)) : <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) => (
@@ -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>

33
src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx
View File

@@ -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({
@@ -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({
@@ -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);
@@ -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

5
src/taxonomy/manage-orgs/messages.js
View File

@@ -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;