chore: bump paragon version

openedx · Apr 12, 2024 · 1db067a · 1db067a
1 parent 2641aec
commit 1db067a
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git 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 = ({
           <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}

diff --git 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
@@ -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) => (
@@ -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>

diff --git a/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx b/src/taxonomy/manage-orgs/ManageOrgsModal.test.jsx
@@ -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

diff --git 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 remove a specific organization from a taxonomy',
+  },
 });
 
 export default messages;