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

* chore: bump paragon version

* chore: update snapshot test - alt moved from sr-only to aria-label

package-lock.json

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

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

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}

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

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

@@ -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
+              <span
-                aria-hidden="true"
+                class="pgn__icon btn-icon__icon"
-                fill="none"
-                focusable="false"
-                height="24"
-                role="img"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
               >
-                <path
+                <svg
-                  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"
+                  aria-hidden="true"
-                  fill="currentColor"
+                  fill="none"
-                />
+                  focusable="false"
-              </svg>
+                  height="24"
-            </span>
+                  role="img"
-            <span
+                  viewBox="0 0 24 24"
-              class="sr-only"
+                  width="24"
-            >
+                  xmlns="http://www.w3.org/2000/svg"
-              submit search
+                >
+                  <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>

src/taxonomy/manage-orgs/ManageOrgsModal.jsx

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

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(list.length).toBe(4);
-    expect(getByText('org2')).toBeInTheDocument();
+    expect(getByRole('option', { name: 'org2' })).toBeInTheDocument();
-    expect(getByText('org3')).toBeInTheDocument();
+    expect(getByRole('option', { name: 'org3' })).toBeInTheDocument();
-    expect(getByText('org4')).toBeInTheDocument();
+    expect(getByRole('option', { name: 'org4' })).toBeInTheDocument();
-    expect(getByText('org5')).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

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;