From 1f58aac6e5449f60889a755c387fc20ee94d0617 Mon Sep 17 00:00:00 2001 From: Braden MacDonald Date: Mon, 1 Apr 2024 17:16:50 -0700 Subject: [PATCH] chore: bump paragon version --- package-lock.json | 8 ++--- package.json | 2 +- .../ContentTagsDropDownSelector.jsx | 2 +- .../generic/table-components/FilterStatus.jsx | 8 ++++- .../videos-page/VideosPage.test.jsx | 2 +- src/taxonomy/manage-orgs/ManageOrgsModal.jsx | 21 ++++++++---- .../manage-orgs/ManageOrgsModal.test.jsx | 33 ++++++++++++------- src/taxonomy/manage-orgs/messages.js | 5 +++ 8 files changed, 54 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 85899f669d..4487c41e74 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36,7 +36,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", @@ -5053,9 +5053,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", diff --git a/package.json b/package.json index 8b4080ece2..4c3c3b514b 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,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", diff --git a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx index 39620bfc2d..4960e30912 100644 --- a/src/content-tags-drawer/ContentTagsDropDownSelector.jsx +++ b/src/content-tags-drawer/ContentTagsDropDownSelector.jsx @@ -283,7 +283,7 @@ const ContentTagsDropDownSelector = ({ clickAndEnterHandler(tagData.value)} - tabIndex="-1" + tabIndex={-1} /> )} diff --git a/src/files-and-videos/generic/table-components/FilterStatus.jsx b/src/files-and-videos/generic/table-components/FilterStatus.jsx index 0acf0c84a4..e967e07944 100644 --- a/src/files-and-videos/generic/table-components/FilterStatus.jsx +++ b/src/files-and-videos/generic/table-components/FilterStatus.jsx @@ -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 = ({ removeFilter(value, setFilter, setAllFilters, state)} > {name} diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx index 21327140d2..6740b3328f 100644 --- a/src/files-and-videos/videos-page/VideosPage.test.jsx +++ b/src/files-and-videos/videos-page/VideosPage.test.jsx @@ -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(); diff --git a/src/taxonomy/manage-orgs/ManageOrgsModal.jsx b/src/taxonomy/manage-orgs/ManageOrgsModal.jsx index 6c2ace49e2..f8c95a61b9 100644 --- a/src/taxonomy/manage-orgs/ManageOrgsModal.jsx +++ b/src/taxonomy/manage-orgs/ManageOrgsModal.jsx @@ -170,31 +170,38 @@ const ManageOrgsModal = ({
- +
{intl.formatMessage(messages.bodyText)}
-
{intl.formatMessage(messages.currentAssignments)}
+ +
{intl.formatMessage(messages.currentAssignments)}
+
{selectedOrgs.length ? selectedOrgs.map((org) => ( setSelectedOrgs(selectedOrgs.filter((o) => o !== org))} - disabled={allOrgs} + iconAfterAlt={intl.formatMessage(messages.removeOrg, { org })} + onIconAfterClick={() => setSelectedOrgs(selOrgs => (selOrgs || []).filter((o) => o !== org))} + disabled={!!allOrgs} > {org} )) : {intl.formatMessage(messages.noOrganizationAssigned)} }
- + {intl.formatMessage(messages.addOrganizations)} 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 = ({ {intl.formatMessage(messages.cancelButton)} - diff --git a/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx b/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx index 01f7a7bf77..05f87e91ea 100644 --- a/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx +++ b/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx @@ -118,27 +118,36 @@ describe('', () => { queryAllByTestId, getByTestId, getByText, + getByRole, + queryByRole, } = render(); + // 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('', () => { it('can assign all orgs to taxonomies from the dialog', async () => { const onClose = jest.fn(); - const { getByRole, getByTestId, getByText } = render(); + const { getByRole, getByText } = render(); 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('', () => { it('can assign no orgs to taxonomies from the dialog', async () => { const onClose = jest.fn(); - const { getByRole, getByTestId, getByText } = render(); + const { getByRole, getByText } = render(); await checkDialogRender(getByText); @@ -185,7 +194,7 @@ describe('', () => { // 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 diff --git a/src/taxonomy/manage-orgs/messages.js b/src/taxonomy/manage-orgs/messages.js index 3bfeafe585..855ceca0b5 100644 --- a/src/taxonomy/manage-orgs/messages.js +++ b/src/taxonomy/manage-orgs/messages.js @@ -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 remvoe a specific organization from a taxonomy', + }, }); export default messages;