From 392066aa6fc6b3e0e020d0b944a515a1a95c78d9 Mon Sep 17 00:00:00 2001
From: Brayan Ceron <brayan.ceron@edunext.co>
Date: Wed, 3 Jun 2026 16:18:45 -0500
Subject: [PATCH 1/7] feat: add tag management permissions

---
 src/authz/constants.ts                        |  2 ++
 src/authz/permissionHelpers.ts                |  7 ++++++
 .../ContentTagsCollapsible.jsx                |  2 +-
 .../ContentTagsDrawerHelper.jsx               | 10 +++++++-
 .../tags-sidebar-controls/TagsSidebarBody.tsx | 23 +++++++++++--------
 .../tags-sidebar-controls/index.tsx           |  5 ++--
 .../outline-sidebar/OutlineAlignSidebar.tsx   |  4 ++++
 .../info-sidebar/CourseInfoSidebar.tsx        |  5 ++--
 src/course-unit/legacy-sidebar/index.tsx      |  5 +++-
 src/generic/sidebar/AlignSidebar.tsx          |  6 ++++-
 10 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/authz/constants.ts b/src/authz/constants.ts
index 5944c910d9..e3a2a0a380 100644
--- a/src/authz/constants.ts
+++ b/src/authz/constants.ts
@@ -50,4 +50,6 @@ export const COURSE_PERMISSIONS = {
   IMPORT_COURSE: 'courses.import_course',
   EXPORT_COURSE: 'courses.export_course',
   EXPORT_TAGS: 'courses.export_tags',
+
+  MANAGE_TAGS: 'courses.manage_tags',
 };
diff --git a/src/authz/permissionHelpers.ts b/src/authz/permissionHelpers.ts
index c8f301b5d1..2965cee22a 100644
--- a/src/authz/permissionHelpers.ts
+++ b/src/authz/permissionHelpers.ts
@@ -131,6 +131,13 @@ export const getImportExportPermissions = (courseId: string) => ({
   },
 });
 
+export const getTagsPermissions = (courseId: string) => ({
+  canManageTags: {
+    action: COURSE_PERMISSIONS.MANAGE_TAGS,
+    scope: courseId,
+  },
+});
+
 export const getFilesPermissions = (courseId: string) => ({
   canViewFiles: {
     action: COURSE_PERMISSIONS.VIEW_FILES,
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.jsx
index 51f960fdbf..7714493230 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.jsx
@@ -419,7 +419,7 @@ const ContentTagsCollapsible = ({
             )}
 
           <div className="d-flex taxonomy-tags-selector-menu">
-            {isEditMode && (
+            {isEditMode && canTagObject && (
               <Select
                 onBlur={handleOnBlur}
                 styles={{
diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
index bb7480fcde..5d315ec860 100644
--- a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
@@ -110,7 +110,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
           otherTaxonomiesList.push({
             canChangeTaxonomy: false,
             canDeleteTaxonomy: false,
-            canTagObject: false,
+            canTagObject: contentTaxonomyTags.canTagObject,
             contentTags: contentTaxonomyTags.tags,
             enabled: true,
             exportId: contentTaxonomyTags.exportId,
@@ -342,6 +342,14 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
           ...fetchedTags,
           ...globalStagedContentTags[taxonomyId],
         ];
+      } else if (mergedOtherTaxonomies[taxonomyId]) {
+        const stagedLineages = globalStagedContentTags[taxonomyId].map((t) => t.lineage.slice(0, -1)).flat();
+        const fetchedTags = mergedOtherTaxonomies[taxonomyId].contentTags.filter((t) => !stagedLineages.includes(t.value));
+
+        mergedOtherTaxonomies[taxonomyId].contentTags = [
+          ...fetchedTags,
+          ...globalStagedContentTags[taxonomyId],
+        ];
       }
     });
 
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx
index 4cbfcb4dcc..595a0daa8b 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx
@@ -20,9 +20,10 @@ import { TagTree } from '../ContentTagsCollapsible';
 
 interface TagsSidebarBodyProps {
   readOnly: boolean;
+  canManageTags?: boolean;
 }
 
-const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
+const TagsSidebarBody = ({ readOnly, canManageTags = true }: TagsSidebarBodyProps) => {
   const intl = useIntl();
   const [showManageTags, setShowManageTags] = useState(false);
   const contentId = useParams().blockId;
@@ -97,15 +98,17 @@ const TagsSidebarBody = ({ readOnly }: TagsSidebarBodyProps) => {
               </div>
             )}
 
-          <Button
-            className="mt-3 ml-2"
-            variant="outline-primary"
-            size="sm"
-            onClick={() => setShowManageTags(true)}
-            disabled={readOnly}
-          >
-            {intl.formatMessage(messages.manageTagsButton)}
-          </Button>
+          {canManageTags && (
+            <Button
+              className="mt-3 ml-2"
+              variant="outline-primary"
+              size="sm"
+              onClick={() => setShowManageTags(true)}
+              disabled={readOnly}
+            >
+              {intl.formatMessage(messages.manageTagsButton)}
+            </Button>
+          )}
         </Stack>
       </Card.Body>
       <ContentTagsDrawerSheet
diff --git a/src/content-tags-drawer/tags-sidebar-controls/index.tsx b/src/content-tags-drawer/tags-sidebar-controls/index.tsx
index 84f6b17e32..1c64e10add 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/index.tsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/index.tsx
@@ -3,12 +3,13 @@ import TagsSidebarBody from './TagsSidebarBody';
 
 interface TagsSidebarControlsProps {
   readOnly: boolean;
+  canManageTags?: boolean;
 }
 
-const TagsSidebarControls = ({ readOnly }: TagsSidebarControlsProps) => (
+const TagsSidebarControls = ({ readOnly, canManageTags = true }: TagsSidebarControlsProps) => (
   <>
     <TagsSidebarHeader />
-    <TagsSidebarBody readOnly={readOnly} />
+    <TagsSidebarBody readOnly={readOnly} canManageTags={canManageTags} />
   </>
 );
 
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
index 02492102c3..016cdc5a6b 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx
@@ -3,6 +3,8 @@ import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { AlignSidebar } from '@src/generic/sidebar/AlignSidebar';
 import { useCourseOutlineContext } from '@src/course-outline/CourseOutlineContext';
 import { useBackNavigation } from './back-navigation';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getTagsPermissions } from '@src/authz/permissionHelpers';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
 
 /**
@@ -16,6 +18,7 @@ export const OutlineAlignSidebar = () => {
   const sidebarContentId = selectedContainerState?.currentId || courseId;
 
   const { data: contentData } = useContentData(sidebarContentId);
+  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));
 
   const handleBack = useBackNavigation({
     openContainer: openContainerSidebar,
@@ -29,6 +32,7 @@ export const OutlineAlignSidebar = () => {
         : contentData?.courseDisplayNameWithDefault || ''}
       contentId={sidebarContentId}
       onBackBtnClick={(sidebarContentId !== courseId) ? handleBack : undefined}
+      readOnly={!canManageTags}
     />
   );
 };
diff --git a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
index 9bcb1b3c3d..e186c195c0 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
@@ -30,6 +30,7 @@ const DetailsTab = () => {
     [`context_key = "${courseId}"`],
   );
   const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+  const { canManageTags } = useCourseUserPermissions(courseId, permissionHelpers.getTagsPermissions(courseId));
 
   return (
     <>
@@ -43,12 +44,12 @@ const DetailsTab = () => {
         <SidebarSection
           title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
           icon={Tag}
-          actions={[
+          actions={canManageTags ? [
             {
               label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
               onClick: openManageTagsDrawer,
             },
-          ]}
+          ] : undefined}
         >
           <ContentTagsSnippet contentId={courseId} />
         </SidebarSection>
diff --git a/src/course-unit/legacy-sidebar/index.tsx b/src/course-unit/legacy-sidebar/index.tsx
index e5ea7cd56b..e9852c334e 100644
--- a/src/course-unit/legacy-sidebar/index.tsx
+++ b/src/course-unit/legacy-sidebar/index.tsx
@@ -4,6 +4,8 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework/dist';
 import { Stack } from '@openedx/paragon';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import TagsSidebarControls from '@src/content-tags-drawer/tags-sidebar-controls';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getTagsPermissions } from '@src/authz/permissionHelpers';
 import SidebarSection from './SidebarSection';
 import LocationInfo from './LocationInfo';
 import SplitTestSidebarInfo from './SplitTestSidebarInfo';
@@ -38,6 +40,7 @@ const LegacySidebar = ({
 }: LegacySidebarProps) => {
   const { blockId } = useParams();
   const { courseId } = useCourseAuthoringContext();
+  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));
 
   if (!blockId) {
     return null;
@@ -62,7 +65,7 @@ const LegacySidebar = ({
           </SidebarSection>
           {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
             <SidebarSection className="tags-sidebar">
-              <TagsSidebarControls readOnly={readOnly} />
+              <TagsSidebarControls readOnly={readOnly} canManageTags={canManageTags} />
             </SidebarSection>
           )}
           <SidebarSection data-testid="course-unit-location-sidebar">
diff --git a/src/generic/sidebar/AlignSidebar.tsx b/src/generic/sidebar/AlignSidebar.tsx
index 0a38f07c83..f9597fffb5 100644
--- a/src/generic/sidebar/AlignSidebar.tsx
+++ b/src/generic/sidebar/AlignSidebar.tsx
@@ -6,13 +6,16 @@ export interface AlignSidebarProps {
   contentId: string;
   title: string;
   onBackBtnClick?: () => void;
+  readOnly?: boolean;
 }
 
 /**
  * Sidebar that renders Align Sidebar (manage tags sidebar)
  * for the given content.
  */
-export const AlignSidebar = ({ contentId, title, onBackBtnClick }: AlignSidebarProps) => (
+export const AlignSidebar = ({
+  contentId, title, onBackBtnClick, readOnly = false,
+}: AlignSidebarProps) => (
   <div>
     <SidebarTitle
       title={title}
@@ -22,6 +25,7 @@ export const AlignSidebar = ({ contentId, title, onBackBtnClick }: AlignSidebarP
     <ContentTagsDrawer
       id={contentId}
       variant="component"
+      readOnly={readOnly}
     />
   </div>
 );

From a36bb289866830b86fc6f81334927e0281ad3878 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Thu, 20 Aug 2026 18:37:32 +1000
Subject: [PATCH 2/7] feat: validate unit tags manage nd add test

---
 src/authz/permissionHelpers.test.ts           | 21 +++++
 .../ContentTagsCollapsible.test.jsx           | 29 +++++++
 .../ContentTagsDrawerHelper.jsx               |  4 +-
 .../TagsSidebarBody.test.jsx                  | 14 +++-
 .../card-header/CardHeader.test.tsx           | 30 +++++++-
 src/course-outline/card-header/CardHeader.tsx |  7 +-
 .../OutlineAlignSidebar.test.tsx              | 30 +++++++-
 .../info-sidebar/CourseInfoSidebar.test.tsx   | 77 +++++++++++++++++++
 .../info-sidebar/CourseInfoSidebar.tsx        | 14 ++--
 .../unit-sidebar/UnitAlignSidebar.test.tsx    | 43 +++++++++--
 .../unit-sidebar/UnitAlignSidebar.tsx         |  6 ++
 src/generic/sidebar/AlignSidebar.tsx          |  5 +-
 12 files changed, 254 insertions(+), 26 deletions(-)
 create mode 100644 src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx

diff --git a/src/authz/permissionHelpers.test.ts b/src/authz/permissionHelpers.test.ts
index 781becd11d..37aa6b76b4 100644
--- a/src/authz/permissionHelpers.test.ts
+++ b/src/authz/permissionHelpers.test.ts
@@ -12,6 +12,7 @@ import {
   getChecklistsPermissions,
   getImportExportPermissions,
   getViewTeamPermissions,
+  getTagsPermissions,
 } from './permissionHelpers';
 import { CONTENT_LIBRARY_PERMISSIONS, COURSE_PERMISSIONS } from './constants';
 
@@ -258,6 +259,26 @@ describe('permissionHelpers', () => {
     });
   });
 
+  describe('getTagsPermissions', () => {
+    it('returns MANAGE_TAGS permission with the correct action and scope', () => {
+      const result = getTagsPermissions(courseId);
+
+      expect(result).toEqual({
+        canManageTags: {
+          action: COURSE_PERMISSIONS.MANAGE_TAGS,
+          scope: courseId,
+        },
+      });
+    });
+
+    it('uses the provided courseId as scope', () => {
+      const customCourseId = 'course-v1:TestOrg+TestCourse+2024';
+      const result = getTagsPermissions(customCourseId);
+
+      expect(result.canManageTags.scope).toBe(customCourseId);
+    });
+  });
+
   describe('getViewTeamPermissions', () => {
     it('returns course and library view-team permissions with the correct actions', () => {
       const result = getViewTeamPermissions();
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
index 8f0fb6b769..1d04f9271b 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
@@ -256,6 +256,35 @@ describe('<ContentTagsCollapsible />', () => {
     expect(screen.getByText(/add a tag/i)).toBeInTheDocument();
   });
 
+  it('should not render add tags select in edit mode when not allowed to tag objects', async () => {
+    await getComponent({
+      ...data,
+      taxonomyAndTagsData: {
+        id: 123,
+        name: 'Taxonomy 1',
+        canTagObject: false,
+        contentTags: [
+          {
+            value: 'Tag 1',
+            lineage: ['Tag 1'],
+            canDeleteObjecttag: true,
+          },
+        ],
+      },
+    });
+
+    // Still in edit mode, so delete buttons are shown
+    expect(
+      screen.getAllByRole(
+        'button',
+        { name: /delete/i },
+      ).length,
+    ).toBe(1);
+
+    // But the add tags select is hidden
+    expect(screen.queryByText(/add a tag/i)).not.toBeInTheDocument();
+  });
+
   it('should render "no tags added yet" when expanded in read mode', async () => {
     await getComponent({
       ...data,
diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
index 5d315ec860..9cf696f0da 100644
--- a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
@@ -344,7 +344,9 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
         ];
       } else if (mergedOtherTaxonomies[taxonomyId]) {
         const stagedLineages = globalStagedContentTags[taxonomyId].map((t) => t.lineage.slice(0, -1)).flat();
-        const fetchedTags = mergedOtherTaxonomies[taxonomyId].contentTags.filter((t) => !stagedLineages.includes(t.value));
+        const fetchedTags = mergedOtherTaxonomies[taxonomyId].contentTags.filter((t) =>
+          !stagedLineages.includes(t.value)
+        );
 
         mergedOtherTaxonomies[taxonomyId].contentTags = [
           ...fetchedTags,
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
index 32be90bf44..b7046a3122 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
@@ -15,9 +15,9 @@ jest.mock('../data/apiHooks', () => ({
 }));
 jest.mock('../ContentTagsDrawer', () => jest.fn(() => <div>Mocked ContentTagsDrawer</div>));
 
-const RootWrapper = () => (
+const RootWrapper = ({ canManageTags = true } = {}) => (
   <IntlProvider locale="en" messages={{}}>
-    <TagsSidebarBody />
+    <TagsSidebarBody canManageTags={canManageTags} />
   </IntlProvider>
 );
 
@@ -52,4 +52,14 @@ describe('<TagSidebarBody>', () => {
 
     expect(screen.getByText('Mocked ContentTagsDrawer')).toBeInTheDocument();
   });
+
+  it('should not render Manage tags button when canManageTags is false', () => {
+    useContentTaxonomyTagsData.mockReturnValue({
+      isSuccess: true,
+      data: contentTaxonomyTagsMock[contentId],
+    });
+    render(<RootWrapper canManageTags={false} />);
+
+    expect(screen.queryByRole('button', { name: /manage tags/i })).not.toBeInTheDocument();
+  });
 });
diff --git a/src/course-outline/card-header/CardHeader.test.tsx b/src/course-outline/card-header/CardHeader.test.tsx
index d31ca5c5dd..93b3a879da 100644
--- a/src/course-outline/card-header/CardHeader.test.tsx
+++ b/src/course-outline/card-header/CardHeader.test.tsx
@@ -69,9 +69,12 @@ const cardHeaderProps = {
 
 let validateUserPermissionsMock;
 
-const mockPermissions = (canEditCourseContent = true) => {
-  mockWaffleFlags({ enableAuthzCourseAuthoring: !canEditCourseContent });
-  validateUserPermissionsMock.mockResolvedValue({ canEditCourseContent });
+const mockPermissions = (canEditCourseContent = true, canManageTags = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canEditCourseContent || !canManageTags });
+  validateUserPermissionsMock.mockResolvedValue({
+    canEditCourseContent,
+    canManageTags,
+  });
 };
 
 const renderComponent = (props?: object, entry = '/') => {
@@ -525,6 +528,27 @@ describe('<CardHeader />', () => {
     expect(screen.queryByText('0')).not.toBeInTheDocument();
   });
 
+  it('hides Manage tags menu item and tag count when canManageTags is false', async () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
+    });
+    mockGetTagsCount.mockResolvedValue({ 12345: 17 });
+    mockPermissions(true, false);
+    renderComponent();
+
+    // Wait until the permissions have resolved and the menu is available.
+    const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
+
+    // Tag count is not rendered
+    expect(screen.queryByText('17')).not.toBeInTheDocument();
+
+    // Manage tags menu item is not rendered
+    fireEvent.click(menuButton);
+    expect(await screen.findByText(messages.menuConfigure.defaultMessage)).toBeInTheDocument();
+    expect(screen.queryByText(messages.menuManageTags.defaultMessage)).not.toBeInTheDocument();
+  });
+
   it('should render sync button when is ready to sync', () => {
     const mockClickSync = jest.fn();
 
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index fd2a60c384..5ee4916b1a 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -30,6 +30,8 @@ import { useEscapeClick } from '@src/hooks';
 import { XBlockActions } from '@src/data/types';
 import { useUpdateCourseBlockName } from '@src/course-outline/data/apiHooks';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getTagsPermissions } from '@src/authz/permissionHelpers';
 import { ITEM_BADGE_STATUS } from '../constants';
 import { scrollToElement } from '../utils';
 import CardStatus from './CardStatus';
@@ -116,6 +118,7 @@ const CardHeader = ({
     onClickManageTags?.();
   }, [setCurrentPageKey, cardId]);
   const { courseId, canEditCourseContent, canPublishCourseContent } = useCourseAuthoringContext();
+  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));
   const [isFormOpen, openForm, closeForm] = useToggle(false);
   // Set true by any Escape keydown handler; checked in handleEditSubmit
   // to prevent blur-after-Escape from saving the dirty titleValue.
@@ -301,7 +304,7 @@ const CardHeader = ({
           {(isVertical || isSequential) && (
             <CardStatus status={status} showDiscussionsEnabledBadge={showDiscussionsEnabledBadge || false} />
           )}
-          {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && !!contentTagCount && (
+          {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && canManageTags && !!contentTagCount && (
             <TagCount count={contentTagCount} onClick={openManageTagsDrawer} />
           )}
           {extraActionsComponent}
@@ -354,7 +357,7 @@ const CardHeader = ({
                 >
                   {intl.formatMessage(messages.menuConfigure)}
                 </Dropdown.Item>
-                {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
+                {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && canManageTags && (
                   <Dropdown.Item
                     data-testid={`${namePrefix}-card-header__menu-manage-tags-button`}
                     disabled={editMutation.isPending}
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
index 34fb50ca16..b494a8d845 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
@@ -1,5 +1,6 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
 
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import * as CourseAuthoringContext from '@src/CourseAuthoringContext';
 import * as CourseOutlineContext from '@src/course-outline/CourseOutlineContext';
 import * as CourseDetailsApi from '@src/data/apiHooks';
@@ -8,13 +9,18 @@ import * as OutlineSidebarContext from './OutlineSidebarContext';
 import { OutlineAlignSidebar } from './OutlineAlignSidebar';
 
 jest.mock('@src/content-tags-drawer', () => ({
-  ContentTagsDrawer: jest.fn(({ id, variant }) => (
+  ContentTagsDrawer: jest.fn(({ id, variant, readOnly }) => (
     <div data-testid="content-tags-drawer">
-      drawer-mock-{id}-{variant}
+      drawer-mock-{id}-{variant}-{String(readOnly)}
     </div>
   )),
 }));
 
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: jest.fn(),
+}));
+
 describe('OutlineAlignSidebar', () => {
   const setCurrentSelection = jest.fn();
   const clearSelection = jest.fn();
@@ -25,6 +31,11 @@ describe('OutlineAlignSidebar', () => {
 
   beforeEach(() => {
     initializeMocks();
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      canManageTags: true,
+      isLoading: false,
+      isAuthzEnabled: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
     setCurrentSelection.mockReset();
     clearSelection.mockReset();
     openContainerSidebar.mockReset();
@@ -80,7 +91,20 @@ describe('OutlineAlignSidebar', () => {
 
     expect(drawer).toBeInTheDocument();
     expect(drawer).toHaveTextContent(
-      'drawer-mock-block-v1:test+course+run+type@sequential+block@seq1-component',
+      'drawer-mock-block-v1:test+course+run+type@sequential+block@seq1-component-false',
+    );
+  });
+
+  it('renders ContentTagsDrawer in read-only mode when user cannot manage tags', () => {
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      canManageTags: false,
+      isLoading: false,
+      isAuthzEnabled: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
+    render(<OutlineAlignSidebar />);
+
+    expect(screen.getByTestId('content-tags-drawer')).toHaveTextContent(
+      'drawer-mock-block-v1:test+course+run+type@sequential+block@seq1-component-true',
     );
   });
 
diff --git a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx
new file mode 100644
index 0000000000..b1d1bdf829
--- /dev/null
+++ b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx
@@ -0,0 +1,77 @@
+import { fireEvent, initializeMocks, render, screen } from '@src/testUtils';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { mockContentTaxonomyTagsData } from '@src/content-tags-drawer/data/api.mocks';
+import { CourseInfoSidebar } from './CourseInfoSidebar';
+
+const courseId = mockContentTaxonomyTagsData.otherTagsId;
+
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: jest.fn(),
+}));
+
+jest.mock('@src/course-outline/data/apiHooks', () => ({
+  ...jest.requireActual('@src/course-outline/data/apiHooks'),
+  useCourseDetails: () => ({ data: { title: 'Test Course' } }),
+}));
+
+jest.mock('@src/search-manager', () => ({
+  useGetBlockTypes: () => ({ data: [] }),
+}));
+
+jest.mock('../OutlineSidebarContext', () => ({
+  ...jest.requireActual('../OutlineSidebarContext'),
+  useOutlineSidebarContext: () => ({
+    currentTabKey: 'info',
+    setCurrentTabKey: jest.fn(),
+  }),
+}));
+
+mockContentTaxonomyTagsData.applyMock();
+
+const renderComponent = () =>
+  render(<CourseInfoSidebar />, {
+    extraWrapper: ({ children }) => (
+      <CourseAuthoringProvider courseId={courseId}>
+        {children}
+      </CourseAuthoringProvider>
+    ),
+  });
+
+describe('<CourseInfoSidebar />', () => {
+  beforeEach(() => {
+    initializeMocks();
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      canManageTags: true,
+      isLoading: false,
+      isAuthzEnabled: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
+  });
+
+  it('shows the Manage tags action when user can manage tags', async () => {
+    renderComponent();
+    expect(await screen.findByText('Taxonomy Alignments')).toBeInTheDocument();
+
+    const taxonomySection = screen.getByText('Taxonomy Alignments').closest('.pgn__hstack') as HTMLElement;
+    const toggle = taxonomySection.querySelector('.dropdown button') as HTMLButtonElement;
+    expect(toggle).not.toBeNull();
+    fireEvent.click(toggle);
+
+    expect(await screen.findByText('Manage tags')).toBeInTheDocument();
+  });
+
+  it('hides the Manage tags action when user cannot manage tags', async () => {
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      canManageTags: false,
+      isLoading: false,
+      isAuthzEnabled: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
+    renderComponent();
+    expect(await screen.findByText('Taxonomy Alignments')).toBeInTheDocument();
+
+    const taxonomySection = screen.getByText('Taxonomy Alignments').closest('.pgn__hstack') as HTMLElement;
+    expect(taxonomySection.querySelector('.dropdown')).toBeNull();
+    expect(screen.queryByText('Manage tags')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
index e186c195c0..7cf67eb702 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx
@@ -44,12 +44,14 @@ const DetailsTab = () => {
         <SidebarSection
           title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
           icon={Tag}
-          actions={canManageTags ? [
-            {
-              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
-              onClick: openManageTagsDrawer,
-            },
-          ] : undefined}
+          actions={canManageTags ?
+            [
+              {
+                label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+                onClick: openManageTagsDrawer,
+              },
+            ] :
+            undefined}
         >
           <ContentTagsSnippet contentId={courseId} />
         </SidebarSection>
diff --git a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
index a90ad0bd43..0e1e957986 100644
--- a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
@@ -1,16 +1,23 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
+import { useCourseUserPermissions } from '@src/authz/hooks';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { UnitAlignSidebar } from './UnitAlignSidebar';
 import { UnitSidebarProvider } from './UnitSidebarContext';
 
 jest.mock('@src/content-tags-drawer', () => ({
-  ContentTagsDrawer: jest.fn(({ id, variant }) => (
+  ContentTagsDrawer: jest.fn(({ id, variant, readOnly }) => (
     <div data-testid="content-tags-drawer">
-      drawer-mock-{id}-{variant}
+      drawer-mock-{id}-{variant}-{String(readOnly)}
     </div>
   )),
 }));
 
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: jest.fn(),
+}));
+
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: () => ({ blockId: 'unit-id-1' }),
@@ -18,16 +25,23 @@ jest.mock('react-router-dom', () => ({
 
 const renderComponent = () =>
   render(
-    <IframeProvider>
-      <UnitSidebarProvider readOnly={false}>
-        <UnitAlignSidebar />
-      </UnitSidebarProvider>
-    </IframeProvider>,
+    <CourseAuthoringProvider courseId="course-v1:test+course+run">
+      <IframeProvider>
+        <UnitSidebarProvider readOnly={false}>
+          <UnitAlignSidebar />
+        </UnitSidebarProvider>
+      </IframeProvider>
+    </CourseAuthoringProvider>,
   );
 
 describe('OutlineAlignSidebar', () => {
   beforeEach(() => {
     initializeMocks();
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      canManageTags: true,
+      isLoading: false,
+      isAuthzEnabled: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
   });
 
   it('renders ContentTagsDrawer with the correct id and variant', () => {
@@ -37,7 +51,20 @@ describe('OutlineAlignSidebar', () => {
 
     expect(drawer).toBeInTheDocument();
     expect(drawer).toHaveTextContent(
-      'drawer-mock-unit-id-1-component',
+      'drawer-mock-unit-id-1-component-false',
+    );
+  });
+
+  it('renders ContentTagsDrawer in read-only mode when user cannot manage tags', () => {
+    jest.mocked(useCourseUserPermissions).mockReturnValue({
+      canManageTags: false,
+      isLoading: false,
+      isAuthzEnabled: false,
+    } as ReturnType<typeof useCourseUserPermissions>);
+    renderComponent();
+
+    expect(screen.getByTestId('content-tags-drawer')).toHaveTextContent(
+      'drawer-mock-unit-id-1-component-true',
     );
   });
 });
diff --git a/src/course-unit/unit-sidebar/UnitAlignSidebar.tsx b/src/course-unit/unit-sidebar/UnitAlignSidebar.tsx
index 4ecbb28ff9..112d89d71f 100644
--- a/src/course-unit/unit-sidebar/UnitAlignSidebar.tsx
+++ b/src/course-unit/unit-sidebar/UnitAlignSidebar.tsx
@@ -2,6 +2,9 @@ import { useCallback } from 'react';
 import { useParams } from 'react-router-dom';
 import { useContentData } from '@src/content-tags-drawer/data/apiHooks';
 import { AlignSidebar } from '@src/generic/sidebar/AlignSidebar';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getTagsPermissions } from '@src/authz/permissionHelpers';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useUnitSidebarContext } from './UnitSidebarContext';
 
 /**
@@ -9,7 +12,9 @@ import { useUnitSidebarContext } from './UnitSidebarContext';
  */
 export const UnitAlignSidebar = () => {
   const { blockId } = useParams();
+  const { courseId } = useCourseAuthoringContext();
   const { selectedComponentId, setCurrentPageKey } = useUnitSidebarContext();
+  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));
 
   const sidebarContentId = selectedComponentId || blockId;
 
@@ -31,6 +36,7 @@ export const UnitAlignSidebar = () => {
         ''}
       contentId={sidebarContentId || ''}
       onBackBtnClick={selectedComponentId ? handleBack : undefined}
+      readOnly={!canManageTags}
     />
   );
 };
diff --git a/src/generic/sidebar/AlignSidebar.tsx b/src/generic/sidebar/AlignSidebar.tsx
index f9597fffb5..d870b6223a 100644
--- a/src/generic/sidebar/AlignSidebar.tsx
+++ b/src/generic/sidebar/AlignSidebar.tsx
@@ -14,7 +14,10 @@ export interface AlignSidebarProps {
  * for the given content.
  */
 export const AlignSidebar = ({
-  contentId, title, onBackBtnClick, readOnly = false,
+  contentId,
+  title,
+  onBackBtnClick,
+  readOnly = false,
 }: AlignSidebarProps) => (
   <div>
     <SidebarTitle

From a31fa249793aa113574bf8cec8303cebf04ddd4f Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 1 Sep 2026 18:03:10 +1000
Subject: [PATCH 3/7] test: iclrease coverage

---
 .../ContentTagsDrawer.test.jsx                | 24 +++++++++++
 src/content-tags-drawer/data/api.mocks.ts     | 36 ++++++++++++++++
 .../card-header/CardHeader.test.tsx           |  2 +-
 src/generic/sidebar/AlignSidebar.test.tsx     | 42 +++++++++++++++++++
 4 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 src/generic/sidebar/AlignSidebar.test.tsx

diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
index ad4b981fbd..fe862c35f1 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.jsx
@@ -30,6 +30,7 @@ mockContentData.applyMock();
 const {
   stagedTagsId,
   otherTagsId,
+  editableOtherTagsId,
   languageWithTagsId,
   languageWithoutTagsId,
   largeTagsId,
@@ -801,6 +802,29 @@ describe('<ContentTagsDrawer />', () => {
     expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
   });
 
+  it('should show tags staged on an "Other tags" taxonomy', async () => {
+    renderDrawer(editableOtherTagsId);
+    expect(await screen.findByText('Other tags')).toBeInTheDocument();
+
+    // To edit mode
+    fireEvent.click(screen.getByRole('button', { name: /edit tags/i }));
+
+    // The second "Add a tag" select belongs to the taxonomy under "Other tags";
+    // the first one belongs to the regular taxonomy rendered above it.
+    const addTagsSelects = screen.getAllByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
+    expect(addTagsSelects.length).toBe(2);
+    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
+    fireEvent.mouseDown(addTagsSelects[1]);
+
+    // Stage "Tag 1" on the other taxonomy
+    fireEvent.click(await screen.findByText('Tag 1'));
+    fireEvent.click(screen.getByRole('button', { name: /add tags/i }));
+
+    // The staged tag is merged into the other taxonomy's tags, alongside the fetched one
+    expect(screen.getByText('Tag 3')).toBeInTheDocument();
+    expect(screen.getByText('Tag 1')).toBeInTheDocument();
+  });
+
   it('should show Language Taxonomy', async () => {
     renderDrawer(languageWithTagsId);
     expect(await screen.findByText('Languages')).toBeInTheDocument();
diff --git a/src/content-tags-drawer/data/api.mocks.ts b/src/content-tags-drawer/data/api.mocks.ts
index ca2ef39aa9..b222002aab 100644
--- a/src/content-tags-drawer/data/api.mocks.ts
+++ b/src/content-tags-drawer/data/api.mocks.ts
@@ -12,6 +12,8 @@ export async function mockContentTaxonomyTagsData(contentId: string): Promise<an
       return thisMock.stagedTags;
     case thisMock.otherTagsId:
       return thisMock.otherTags;
+    case thisMock.editableOtherTagsId:
+      return thisMock.editableOtherTags;
     case thisMock.languageWithTagsId:
       return thisMock.languageWithTags;
     case thisMock.languageWithoutTagsId:
@@ -89,6 +91,40 @@ mockContentTaxonomyTagsData.otherTags = {
     },
   ],
 };
+mockContentTaxonomyTagsData.editableOtherTagsId =
+  'block-v1:StagedTagsOrg+STC1+2023_1+type@vertical+block@editableOtherTagsId';
+// Same shape as `otherTags`, but the "other" taxonomy is taggable, so its
+// "Add a tag" select is available and tags can be staged onto it.
+mockContentTaxonomyTagsData.editableOtherTags = {
+  taxonomies: [
+    {
+      name: 'Taxonomy 1',
+      taxonomyId: 123,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 2',
+          lineage: ['Tag 2'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+    {
+      // Not present in `mockTaxonomyListData.stagedTags`, so it is rendered
+      // under the "Other tags" section.
+      name: 'Taxonomy 2',
+      taxonomyId: 1234,
+      canTagObject: true,
+      tags: [
+        {
+          value: 'Tag 3',
+          lineage: ['Tag 3'],
+          canDeleteObjecttag: true,
+        },
+      ],
+    },
+  ],
+};
 mockContentTaxonomyTagsData.languageWithTagsId =
   'block-v1:LanguageTagsOrg+STC1+2023_1+type@vertical+block@languageWithTagsId';
 mockContentTaxonomyTagsData.languageWithTags = {
diff --git a/src/course-outline/card-header/CardHeader.test.tsx b/src/course-outline/card-header/CardHeader.test.tsx
index 93b3a879da..94403ca3c5 100644
--- a/src/course-outline/card-header/CardHeader.test.tsx
+++ b/src/course-outline/card-header/CardHeader.test.tsx
@@ -538,7 +538,7 @@ describe('<CardHeader />', () => {
     renderComponent();
 
     // Wait until the permissions have resolved and the menu is available.
-    const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
+    const menuButton = await screen.findByRole('button', { name: 'subsection-card-header__menu' });
 
     // Tag count is not rendered
     expect(screen.queryByText('17')).not.toBeInTheDocument();
diff --git a/src/generic/sidebar/AlignSidebar.test.tsx b/src/generic/sidebar/AlignSidebar.test.tsx
new file mode 100644
index 0000000000..1b505ba87e
--- /dev/null
+++ b/src/generic/sidebar/AlignSidebar.test.tsx
@@ -0,0 +1,42 @@
+import { initializeMocks, render, screen, userEvent } from '@src/testUtils';
+import { AlignSidebar } from './AlignSidebar';
+
+jest.mock('@src/content-tags-drawer', () => ({
+  ContentTagsDrawer: jest.fn(({ id, variant, readOnly }) => (
+    <div>
+      drawer-mock-{id}-{variant}-{String(readOnly)}
+    </div>
+  )),
+}));
+
+describe('<AlignSidebar />', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
+  it('renders the title and an editable tags drawer by default', () => {
+    render(<AlignSidebar contentId="block-1" title="Unit 1" />);
+
+    expect(screen.getByRole('heading', { name: 'Unit 1' })).toBeInTheDocument();
+    expect(screen.getByText('drawer-mock-block-1-component-false')).toBeInTheDocument();
+  });
+
+  it('renders a read-only tags drawer when readOnly is set', () => {
+    render(<AlignSidebar contentId="block-1" title="Unit 1" readOnly />);
+
+    expect(screen.getByText('drawer-mock-block-1-component-true')).toBeInTheDocument();
+  });
+
+  it('shows a back button only when onBackBtnClick is provided', async () => {
+    const user = userEvent.setup();
+    const onBackBtnClick = jest.fn();
+    const { rerender } = render(<AlignSidebar contentId="block-1" title="Unit 1" />);
+
+    expect(screen.queryByRole('button', { name: /back/i })).not.toBeInTheDocument();
+
+    rerender(<AlignSidebar contentId="block-1" title="Unit 1" onBackBtnClick={onBackBtnClick} />);
+    await user.click(screen.getByRole('button', { name: /back/i }));
+
+    expect(onBackBtnClick).toHaveBeenCalled();
+  });
+});

From b04faaa9659ed8bde58ebfd8a4fd82af5614a0d6 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Fri, 4 Sep 2026 16:23:22 +1000
Subject: [PATCH 4/7] refactor: convert to typescript

---
 .../ContentTagsCollapsible.d.ts               |  51 -------
 ...st.jsx => ContentTagsCollapsible.test.tsx} |  48 +++++--
 ...apsible.jsx => ContentTagsCollapsible.tsx} | 129 ++++++++++++------
 .../ContentTagsCollapsibleHelper.jsx          |   3 +-
 ...er.test.jsx => ContentTagsDrawer.test.tsx} |  24 +++-
 ...rHelper.jsx => ContentTagsDrawerHelper.ts} |  92 +++++++------
 src/content-tags-drawer/common/context.ts     |  15 +-
 src/content-tags-drawer/data/types.ts         |  31 +++++
 ...Body.test.jsx => TagsSidebarBody.test.tsx} |  10 +-
 9 files changed, 248 insertions(+), 155 deletions(-)
 delete mode 100644 src/content-tags-drawer/ContentTagsCollapsible.d.ts
 rename src/content-tags-drawer/{ContentTagsCollapsible.test.jsx => ContentTagsCollapsible.test.tsx} (94%)
 rename src/content-tags-drawer/{ContentTagsCollapsible.jsx => ContentTagsCollapsible.tsx} (79%)
 rename src/content-tags-drawer/{ContentTagsDrawer.test.jsx => ContentTagsDrawer.test.tsx} (97%)
 rename src/content-tags-drawer/{ContentTagsDrawerHelper.jsx => ContentTagsDrawerHelper.ts} (85%)
 rename src/content-tags-drawer/tags-sidebar-controls/{TagsSidebarBody.test.jsx => TagsSidebarBody.test.tsx} (85%)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.d.ts b/src/content-tags-drawer/ContentTagsCollapsible.d.ts
deleted file mode 100644
index e42a575bf5..0000000000
--- a/src/content-tags-drawer/ContentTagsCollapsible.d.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Ref } from 'react';
-import type {} from 'react-select/base';
-// This import is necessary for module augmentation.
-// It allows us to extend the 'Props' interface in the 'react-select/base' module
-// and add our custom property 'myCustomProp' to it.
-
-export interface TagTreeEntry {
-  explicit: boolean;
-  children: Record<string, TagTreeEntry>;
-  isCopied: boolean;
-  canChangeObjecttag: boolean;
-  canDeleteObjecttag: boolean;
-}
-
-export interface TaxonomySelectProps {
-  taxonomyId: number;
-  searchTerm: string;
-  appliedContentTagsTree: Record<string, TagTreeEntry>;
-  stagedContentTagsTree: Record<string, TagTreeEntry>;
-  checkedTags: string[];
-  selectCancelRef: Ref;
-  selectAddRef: Ref;
-  selectInlineAddRef: Ref;
-  handleCommitStagedTags: () => void;
-  handleCancelStagedTags: () => void;
-  handleSelectableBoxChange: React.ChangeEventHandler;
-}
-
-// Unfortunately the only way to specify the custom props we pass into React Select
-// is with this global type augmentation.
-// https://react-select.com/typescript#custom-select-props
-// If in the future other parts of this MFE need to use React Select for different things,
-// we should change to using a 'react context' to share this data within <ContentTagsCollapsible>,
-// rather than using the custom <Select> Props (selectProps).
-declare module 'react-select/base' {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends TaxonomySelectProps {
-  }
-}
-
-export type TagTree = {
-  [key: string]: {
-    children: TagTree;
-    canChangeObjecttag: boolean;
-    canDeleteObjecttag: boolean;
-    explicit: boolean;
-    isCopied: boolean;
-  };
-};
-
-export default ContentTagsCollapsible;
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx b/src/content-tags-drawer/ContentTagsCollapsible.test.tsx
similarity index 94%
rename from src/content-tags-drawer/ContentTagsCollapsible.test.jsx
rename to src/content-tags-drawer/ContentTagsCollapsible.test.tsx
index 1d04f9271b..42d2471ee7 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.test.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.tsx
@@ -12,6 +12,40 @@ import userEvent from '@testing-library/user-event';
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 import messages from './messages';
 import { ContentTagsDrawerContext } from './common/context';
+import type { ContentTagsDrawerContextData } from './common/context';
+import type { StagedTagData, TagsInTaxonomy } from './data/types';
+
+/** Only the parts of a content tag that these tests exercise. */
+interface MockContentTag {
+  value: string;
+  lineage: string[];
+  canDeleteObjecttag: boolean;
+}
+
+interface ContentTagsCollapsibleComponentProps {
+  contentId: string;
+  taxonomyAndTagsData: {
+    id: number;
+    name: string;
+    canTagObject: boolean;
+    contentTags: MockContentTag[];
+  };
+  stagedContentTags: StagedTagData[];
+  addStagedContentTag: jest.Mock;
+  removeStagedContentTag: jest.Mock;
+  setStagedTags: jest.Mock;
+  removeGlobalStagedContentTag: jest.Mock;
+  addRemovedContentTag: jest.Mock;
+  deleteRemovedContentTag: jest.Mock;
+  globalStagedContentTags: Record<number, MockContentTag[]>;
+  globalStagedRemovedContentTags: Record<number, string[]>;
+  setGlobalStagedContentTags: jest.Mock;
+  isEditMode: boolean;
+  toEditMode: jest.Mock;
+  collapsibleState: boolean;
+  openCollapsible: jest.Mock;
+  closeCollapsible: jest.Mock;
+}
 
 const taxonomyMockData = {
   hasMorePages: false,
@@ -97,7 +131,7 @@ jest.mock('./data/apiHooks', () => ({
   }),
 }));
 
-const data = {
+const data: ContentTagsCollapsibleComponentProps = {
   contentId: 'block-v1:SampleTaxonomyOrg1+STC1+2023_1+type@vertical+block@7f47fe2dbcaf47c5a071671c741fe1ab',
   taxonomyAndTagsData: {
     id: 123,
@@ -156,7 +190,7 @@ const ContentTagsCollapsibleComponent = ({
   collapsibleState,
   openCollapsible,
   closeCollapsible,
-}) => {
+}: ContentTagsCollapsibleComponentProps) => {
   const context = useMemo(() => ({
     addStagedContentTag,
     removeStagedContentTag,
@@ -173,11 +207,11 @@ const ContentTagsCollapsibleComponent = ({
     closeCollapsible,
   }), []);
   return (
-    <ContentTagsDrawerContext.Provider value={context}>
+    <ContentTagsDrawerContext.Provider value={context as unknown as ContentTagsDrawerContextData}>
       <IntlProvider locale="en" messages={{}}>
         <ContentTagsCollapsible
           contentId={contentId}
-          taxonomyAndTagsData={taxonomyAndTagsData}
+          taxonomyAndTagsData={taxonomyAndTagsData as unknown as TagsInTaxonomy}
           stagedContentTags={stagedContentTags}
           collapsibleState={collapsibleState}
         />
@@ -186,8 +220,6 @@ const ContentTagsCollapsibleComponent = ({
   );
 };
 
-ContentTagsCollapsibleComponent.propTypes = ContentTagsCollapsible.propTypes;
-
 describe('<ContentTagsCollapsible />', () => {
   beforeAll(() => {
     jest.useFakeTimers(); // To account for debounce timer
@@ -201,7 +233,7 @@ describe('<ContentTagsCollapsible />', () => {
     jest.clearAllMocks(); // Reset all mock function call counts after each test case
   });
 
-  async function getComponent(updatedData) {
+  async function getComponent(updatedData?: ContentTagsCollapsibleComponentProps) {
     const componentData = !updatedData ? data : updatedData;
 
     return render(
@@ -589,7 +621,7 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Simulate clicking outside the dropdown remove focus
     const outsideElement = container.querySelector('.taxonomy-tags-count-chip');
-    const selectElement = container.querySelector('.react-select-add-tags__input');
+    const selectElement = container.querySelector('.react-select-add-tags__input')!;
     fireEvent.blur(selectElement, { relatedTarget: outsideElement });
 
     // Wait for the dropdown selector for tags to close, Tag 3 is no longer on
diff --git a/src/content-tags-drawer/ContentTagsCollapsible.jsx b/src/content-tags-drawer/ContentTagsCollapsible.tsx
similarity index 79%
rename from src/content-tags-drawer/ContentTagsCollapsible.jsx
rename to src/content-tags-drawer/ContentTagsCollapsible.tsx
index 7714493230..47a72b1f53 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.tsx
@@ -1,9 +1,16 @@
-// @ts-check
-// disable prop-types since we're using TypeScript to define the prop types,
-// but the linter can't detect that in a .jsx file.
-/* eslint-disable react/prop-types */
 import React, { useContext } from 'react';
 import Select, { components } from 'react-select';
+import type {
+  GroupBase,
+  IndicatorsContainerProps,
+  InputActionMeta,
+  MenuProps,
+  SelectInstance,
+} from 'react-select';
+// This import is necessary for the module augmentation below.
+// It allows us to extend the 'Props' interface in the 'react-select/base' module
+// and add our custom properties to it.
+import type {} from 'react-select/base';
 import {
   Collapsible,
   Button,
@@ -23,17 +30,56 @@ import ContentTagsDropDownSelector from './ContentTagsDropDownSelector';
 import useContentTagsCollapsibleHelper from './ContentTagsCollapsibleHelper';
 import TagsTree from './TagsTree';
 import { ContentTagsDrawerContext } from './common/context';
+import type { DrawerTaxonomy, StagedTagData } from './data/types';
 
-/** @typedef {import("./ContentTagsCollapsible").TaxonomySelectProps} TaxonomySelectProps */
-/** @typedef {import("../taxonomy/data/types.js").TaxonomyData} TaxonomyData */
-/** @typedef {import("./data/types.js").Tag} ContentTagData */
-/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
+export interface TagTreeEntry {
+  explicit: boolean;
+  children: Record<string, TagTreeEntry>;
+  isCopied: boolean;
+  canChangeObjecttag: boolean;
+  canDeleteObjecttag: boolean;
+}
+
+export interface TaxonomySelectProps {
+  taxonomyId: number;
+  searchTerm: string;
+  appliedContentTagsTree: Record<string, TagTreeEntry>;
+  stagedContentTagsTree: Record<string, TagTreeEntry>;
+  checkedTags: string[];
+  selectCancelRef: React.RefObject<HTMLButtonElement>;
+  selectAddRef: React.RefObject<HTMLButtonElement>;
+  selectInlineAddRef: React.RefObject<HTMLButtonElement>;
+  handleCommitStagedTags: () => void;
+  handleCancelStagedTags: () => void;
+  handleSelectableBoxChange: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+// Unfortunately the only way to specify the custom props we pass into React Select
+// is with this global type augmentation.
+// https://react-select.com/typescript#custom-select-props
+// If in the future other parts of this MFE need to use React Select for different things,
+// we should change to using a 'react context' to share this data within <ContentTagsCollapsible>,
+// rather than using the custom <Select> Props (selectProps).
+declare module 'react-select/base' {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> extends TaxonomySelectProps {
+  }
+}
+
+export type TagTree = {
+  [key: string]: {
+    children: TagTree;
+    canChangeObjecttag: boolean;
+    canDeleteObjecttag: boolean;
+    explicit: boolean;
+    isCopied: boolean;
+  };
+};
 
 /**
  * Custom Menu component for our Select box
- * @param {import("react-select").MenuProps&{selectProps: TaxonomySelectProps}} props
  */
-const CustomMenu = (props) => {
+const CustomMenu = (props: MenuProps<StagedTagData, true>) => {
   const {
     handleSelectableBoxChange,
     checkedTags,
@@ -47,6 +93,7 @@ const CustomMenu = (props) => {
     selectAddRef,
     value,
   } = props.selectProps;
+  const stagedTags: readonly StagedTagData[] = Array.isArray(value) ? value : [];
   const intl = useIntl();
   return (
     <components.Menu {...props}>
@@ -59,7 +106,7 @@ const CustomMenu = (props) => {
           className="taxonomy-tags-selectable-box-set"
           onChange={handleSelectableBoxChange}
           value={checkedTags}
-          tabIndex="-1"
+          tabIndex={-1}
         >
           <ContentTagsDropDownSelector
             key={`selector-${taxonomyId}`}
@@ -87,7 +134,7 @@ const CustomMenu = (props) => {
               ref={selectAddRef}
               variant="tertiary"
               className="text-info-500 add-tags-button"
-              disabled={!(value && value.length)}
+              disabled={!stagedTags.length}
               onClick={handleCommitStagedTags}
             >
               {intl.formatMessage(messages.collapsibleAddStagedTagsButtonText)}
@@ -99,7 +146,7 @@ const CustomMenu = (props) => {
   );
 };
 
-const disableActionKeys = (e) => {
+const disableActionKeys = (e: React.KeyboardEvent) => {
   const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft', 'Backspace'];
   if (arrowKeys.includes(e.code)) {
     e.preventDefault();
@@ -118,18 +165,18 @@ const CustomLoadingIndicator = () => {
 
 /**
  * Custom IndicatorsContainer component for our Select box
- * @param {import("react-select").IndicatorsContainerProps&{selectProps: TaxonomySelectProps}} props
  */
-const CustomIndicatorsContainer = (props) => {
+const CustomIndicatorsContainer = (props: IndicatorsContainerProps<StagedTagData, true>) => {
   const {
     value,
     handleCommitStagedTags,
     selectInlineAddRef,
   } = props.selectProps;
+  const stagedTags: readonly StagedTagData[] = Array.isArray(value) ? value : [];
   const intl = useIntl();
   return (
     <components.IndicatorsContainer {...props}>
-      {(value && value.length && (
+      {(stagedTags.length > 0 && (
         <Button
           variant="dark"
           size="sm"
@@ -151,6 +198,17 @@ const CustomIndicatorsContainer = (props) => {
   );
 };
 
+interface ContentTagsCollapsibleProps {
+  /** Id of the content object */
+  contentId: string;
+  /** Taxonomy metadata & applied tags */
+  taxonomyAndTagsData: DrawerTaxonomy;
+  /** Array of staged tags represented as objects with value/label */
+  stagedContentTags: StagedTagData[];
+  /** True if the collapsible is open */
+  collapsibleState: boolean;
+}
+
 /**
  * Collapsible component that holds a Taxonomy along with Tags that belong to it.
  * This includes both applied tags and tags that are available to select
@@ -220,27 +278,20 @@ const CustomIndicatorsContainer = (props) => {
  * Here is an example of what the value of the "Virology" tag would be:
  *
  *  "Science%20and%20Research,Molecular%2C%20Cellular%2C%20and%20Microbiology,Virology"
- *
- * @param {Object} props - The component props.
- * @param {string} props.contentId - Id of the content object
- * @param {StagedTagData[]} props.stagedContentTags
- *        - Array of staged tags represented as objects with value/label
- * @param {TaxonomyData & {contentTags: ContentTagData[]}} props.taxonomyAndTagsData - Taxonomy metadata & applied tags
- * @param {boolean} props.collapsibleState - True if the collapsible is open
  */
 const ContentTagsCollapsible = ({
   contentId,
   taxonomyAndTagsData,
   stagedContentTags,
   collapsibleState,
-}) => {
+}: ContentTagsCollapsibleProps) => {
   const intl = useIntl();
   const { id: taxonomyId, name, canTagObject } = taxonomyAndTagsData;
-  const selectCancelRef = React.useRef(/** @type {HTMLSelectElement | null} */ (null));
-  const selectAddRef = React.useRef(/** @type {HTMLSelectElement | null} */ (null));
-  const selectInlineAddRef = React.useRef(/** @type {HTMLSelectElement | null} */ (null));
-  const selectInlineEditModeRef = React.useRef(/** @type {HTMLButtonElement | null} */ (null));
-  const selectRef = React.useRef(/** @type {HTMLSelectElement | null} */ (null));
+  const selectCancelRef = React.useRef<HTMLButtonElement>(null);
+  const selectAddRef = React.useRef<HTMLButtonElement>(null);
+  const selectInlineAddRef = React.useRef<HTMLButtonElement>(null);
+  const selectInlineEditModeRef = React.useRef<HTMLButtonElement>(null);
+  const selectRef = React.useRef<SelectInstance<StagedTagData, true>>(null);
 
   const [selectMenuIsOpen, setSelectMenuIsOpen] = React.useState(false);
 
@@ -269,15 +320,15 @@ const ContentTagsCollapsible = ({
 
   const [searchTerm, setSearchTerm] = React.useState('');
 
-  const handleSelectableBoxChange = React.useCallback((e) => {
+  const handleSelectableBoxChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     tagChangeHandler(e.target.value, e.target.checked);
   }, [tagChangeHandler]);
 
-  const handleSearch = debounce((term) => {
+  const handleSearch = debounce((term: string) => {
     setSearchTerm(term.trim());
   }, 500); // Perform search after 500ms
 
-  const handleSearchChange = React.useCallback((value, { action }) => {
+  const handleSearchChange = React.useCallback((value: string, { action }: InputActionMeta) => {
     if (action === 'input-blur') {
       if (!selectMenuIsOpen) {
         // Cancel/clear search if focused away from select input and menu closed
@@ -299,7 +350,7 @@ const ContentTagsCollapsible = ({
   // staged tags in the react-select input are removed or fully cleared.
   // The remaining staged tags are passed in as the parameter, so we set the state
   // to the passed in tags
-  const handleStagedTagsMenuChange = React.useCallback((stagedTags) => {
+  const handleStagedTagsMenuChange = React.useCallback((stagedTags: readonly StagedTagData[]) => {
     // Get tags that were unstaged to remove them from checkbox selector
     const unstagedTags = stagedContentTags.filter(
       t1 => !stagedTags.some(t2 => t1.value === t2.value),
@@ -310,7 +361,7 @@ const ContentTagsCollapsible = ({
     // only called when a change occurs in the react-select menu component we know that tags can only be
     // removed from there, hence the tagChangeHandler is always called with `checked=false`.
     unstagedTags.forEach(unstagedTag => tagChangeHandler(unstagedTag.value, false));
-    setStagedTags(taxonomyId, stagedTags);
+    setStagedTags(taxonomyId, [...stagedTags]);
   }, [taxonomyId, setStagedTags, stagedContentTags, tagChangeHandler]);
 
   const handleCommitStagedTags = React.useCallback(() => {
@@ -328,7 +379,7 @@ const ContentTagsCollapsible = ({
     setSelectMenuIsOpen(false);
   }, [handleStagedTagsMenuChange, selectRef, setSearchTerm]);
 
-  const handleSelectOnKeyDown = (event) => {
+  const handleSelectOnKeyDown = (event: React.KeyboardEvent) => {
     const focusedElement = event.target;
 
     if (event.key === 'Escape') {
@@ -345,7 +396,6 @@ const ContentTagsCollapsible = ({
           setSelectMenuIsOpen(false);
         }
         // Navigating backwards
-        // @ts-ignore inputRef actually exists under the current selectRef
       } else if (event.shiftKey && focusedElement === selectRef.current?.inputRef) {
         setSelectMenuIsOpen(false);
       }
@@ -359,10 +409,11 @@ const ContentTagsCollapsible = ({
   }, [setSelectMenuIsOpen, setSearchTerm]);
 
   // Handles logic to close the select menu when clicking outside
-  const handleOnBlur = React.useCallback((event) => {
+  const handleOnBlur = React.useCallback((event: React.FocusEvent) => {
     // Check if a target we are focusing to is an element in our select menu, if not close it
     const menuClasses = ['dropdown-selector', 'inline-add-button', 'cancel-add-tags-button'];
-    if (!event.relatedTarget || !menuClasses.some(cls => event.relatedTarget.className?.includes(cls))) {
+    const { relatedTarget } = event;
+    if (!relatedTarget || !menuClasses.some(cls => relatedTarget.className?.includes(cls))) {
       setSelectMenuIsOpen(false);
     }
   }, [setSelectMenuIsOpen]);
@@ -433,7 +484,7 @@ const ContentTagsCollapsible = ({
                 menuIsOpen={selectMenuIsOpen}
                 onFocus={onSelectMenuFocus}
                 onKeyDown={handleSelectOnKeyDown}
-                ref={/** @type {React.RefObject} */ (selectRef)}
+                ref={selectRef}
                 isMulti
                 isLoading={updateTags.isPending}
                 isDisabled={updateTags.isPending}
diff --git a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
index 848e0f643f..a675f5be43 100644
--- a/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsCollapsibleHelper.jsx
@@ -11,6 +11,7 @@ import { ContentTagsDrawerContext } from './common/context';
 /** @typedef {import("./ContentTagsCollapsible").TagTreeEntry} TagTreeEntry */
 /** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
 /** @typedef {import("./data/types.js").UpdateTagsData} UpdateTagsData */
+/** @typedef {import("./data/types.js").DrawerTaxonomy} DrawerTaxonomy */
 
 /**
  * Util function that sorts the keys of a tree in alphabetical order.
@@ -67,7 +68,7 @@ const getLeafTags = (tree) => {
  * @param {string} contentId The ID of the content we're tagging (e.g. usage key)
  * @param {StagedTagData[]} stagedContentTags
  *       - Array of staged tags represented as objects with value/label
- * @param {TaxonomyData & {contentTags: ContentTagData[]}} taxonomyAndTagsData
+ * @param {DrawerTaxonomy} taxonomyAndTagsData
  * }}
  */
 const useContentTagsCollapsibleHelper = (
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.jsx b/src/content-tags-drawer/ContentTagsDrawer.test.tsx
similarity index 97%
rename from src/content-tags-drawer/ContentTagsDrawer.test.jsx
rename to src/content-tags-drawer/ContentTagsDrawer.test.tsx
index fe862c35f1..a1ae6f13c8 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.tsx
@@ -1,3 +1,4 @@
+import type { ComponentProps, ContextType } from 'react';
 import {
   fireEvent,
   initializeMocks,
@@ -48,10 +49,21 @@ jest.mock('../library-authoring/common/context/SidebarContext', () => ({
   useSidebarContext: () => ({ sidebarAction: mockSidebarAction() }),
 }));
 
-const renderDrawer = (contentId, drawerParams = {}, renderPath = path, containerId = '') => {
-  const params = { contentId, containerId };
+type SheetContextData = ContextType<typeof ContentTagsDrawerSheetContext>;
+type DrawerParams = ComponentProps<typeof ContentTagsDrawer> & Partial<SheetContextData>;
+
+const renderDrawer = (
+  contentId: string | undefined,
+  drawerParams: DrawerParams = {},
+  renderPath = path,
+  containerId = '',
+) => {
+  const params: Record<string, string> = { containerId };
+  if (contentId !== undefined) {
+    params.contentId = contentId;
+  }
   return render(
-    <ContentTagsDrawerSheetContext.Provider value={drawerParams}>
+    <ContentTagsDrawerSheetContext.Provider value={drawerParams as SheetContextData}>
       <ContentTagsDrawer {...drawerParams} />
     </ContentTagsDrawerSheetContext.Provider>,
     { path: renderPath, params },
@@ -273,11 +285,11 @@ describe('<ContentTagsDrawer />', () => {
 
   test.each([
     {
-      variant: 'drawer',
+      variant: 'drawer' as const,
       editButton: /edit tags/i,
     },
     {
-      variant: 'component',
+      variant: 'component' as const,
       editButton: /manage tags/i,
     },
   ])(
@@ -377,7 +389,7 @@ describe('<ContentTagsDrawer />', () => {
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
     expect(screen.getAllByText('Tag 3').length).toBe(2);
 
-    const dropdown = container.querySelector('#content-tags-drawer > div:nth-child(1) > div');
+    const dropdown = container.querySelector<HTMLElement>('#content-tags-drawer > div:nth-child(1) > div')!;
     const dropdownCancel = within(dropdown).getByRole('button', { name: /cancel/i });
     fireEvent.click(dropdownCancel);
 
diff --git a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx b/src/content-tags-drawer/ContentTagsDrawerHelper.ts
similarity index 85%
rename from src/content-tags-drawer/ContentTagsDrawerHelper.jsx
rename to src/content-tags-drawer/ContentTagsDrawerHelper.ts
index 9cf696f0da..2fca58d81d 100644
--- a/src/content-tags-drawer/ContentTagsDrawerHelper.jsx
+++ b/src/content-tags-drawer/ContentTagsDrawerHelper.ts
@@ -1,4 +1,3 @@
-// @ts-check
 import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { cloneDeep } from 'lodash';
@@ -7,24 +6,31 @@ import { useTaxonomyList } from '../taxonomy/data/apiHooks';
 import { extractOrgFromContentId, languageExportId } from './utils';
 import messages from './messages';
 import { ContentTagsDrawerSheetContext } from './common/context';
-
-/** @typedef {import("./data/types.js").Tag} ContentTagData */
-/** @typedef {import("./data/types.js").StagedTagData} StagedTagData */
-/** @typedef {import("./data/types.js").TagsInTaxonomy} TagsInTaxonomy */
-/** @typedef {import("./common/context").ContentTagsDrawerContextData} ContentTagsDrawerContextData */
+import type { ContentTagsDrawerContextData } from './common/context';
+import type {
+  DrawerTag,
+  DrawerTaxonomy,
+  OtherTaxonomy,
+  StagedTagData,
+  Tag,
+  TagsInTaxonomy,
+  UpdateTagsData,
+} from './data/types';
 
 /**
  * Helper hook for *creating* a `ContentTagsDrawerContext`.
  * Handles the context and all the underlying logic for the ContentTagsDrawer component.
  *
  * To *use* the context, just use `useContext(ContentTagsDrawerContext)`
- * @param {string} contentId
- * @param {boolean} canTagObject
- * @param {boolean} fetchMetadata=false If true, fetches metadata for the contentId. This is used on `edx-platform`
+ *
+ * @param fetchMetadata If true, fetches metadata for the contentId. This is used on `edx-platform`
  * and the Course/Unit Outline to show the content name as the drawer title.
- * @returns {ContentTagsDrawerContextData}
  */
-export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetchMetadata = false) => {
+export const useCreateContentTagsDrawerContext = (
+  contentId: string,
+  canTagObject: boolean,
+  fetchMetadata: boolean = false,
+): ContentTagsDrawerContextData => {
   const intl = useIntl();
   const org = extractOrgFromContentId(contentId);
 
@@ -33,19 +39,22 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   // True if the drawer is on edit mode.
   const [isEditMode, setIsEditMode] = React.useState(false);
   // This stores the tags added on the add tags Select in all taxonomies.
-  const [stagedContentTags, setStagedContentTags] = React.useState({});
+  const [stagedContentTags, setStagedContentTags] = React.useState<Record<number, StagedTagData[]>>({});
   // When a staged tags on a taxonomy is commitet then is saved on this map.
-  const [globalStagedContentTags, setGlobalStagedContentTags] = React.useState({});
+  const [globalStagedContentTags, setGlobalStagedContentTags] = React.useState<Record<number, DrawerTag[]>>({});
   // This stores fetched tags deleted by the user.
-  const [globalStagedRemovedContentTags, setGlobalStagedRemovedContentTags] = React.useState({});
+  const [
+    globalStagedRemovedContentTags,
+    setGlobalStagedRemovedContentTags,
+  ] = React.useState<Record<number, string[]>>({});
   // Merges fetched tags, global staged tags and global removed staged tags
-  const [tagsByTaxonomy, setTagsByTaxonomy] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
+  const [tagsByTaxonomy, setTagsByTaxonomy] = React.useState<DrawerTaxonomy[]>([]);
   // Other taxonomies that the user doesn't have permissions
-  const [otherTaxonomies, setOtherTaxonomies] = React.useState(/** @type TagsInTaxonomy[] */ ([]));
+  const [otherTaxonomies, setOtherTaxonomies] = React.useState<OtherTaxonomy[]>([]);
   // This stores taxonomy collapsible states (open/close).
-  const [collapsibleStates, setColapsibleStates] = React.useState({});
+  const [collapsibleStates, setColapsibleStates] = React.useState<Record<number, boolean>>({});
   // Message to show a toast in the content drawer.
-  const [toastMessage, setToastMessage] = React.useState(/** @type string | undefined */ (undefined));
+  const [toastMessage, setToastMessage] = React.useState<string | undefined>(undefined);
   // Mutation to update tags
   const updateTags = useContentTaxonomyTagsUpdater(contentId);
 
@@ -59,7 +68,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
 
   // Tags fetched from database
   const { fetchedTaxonomies, fetchedOtherTaxonomies } = React.useMemo(() => {
-    const sortTaxonomies = (taxonomiesList) => {
+    const sortTaxonomies = (taxonomiesList: TagsInTaxonomy[]) => {
       const taxonomiesWithData = taxonomiesList.filter(
         (t) => t.contentTags.length !== 0,
       );
@@ -67,7 +76,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
       // Count implicit tags per taxonomy.
       // TODO This count is also calculated individually
       // in ContentTagsCollapsible. It should only be calculated once.
-      const tagsCountBytaxonomy = {};
+      const tagsCountBytaxonomy: Record<number, number> = {};
       taxonomiesWithData.forEach((tax) => {
         tagsCountBytaxonomy[tax.id] = new Set(
           tax.contentTags.flatMap(item => item.lineage),
@@ -94,12 +103,12 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
       const taxonomiesList = taxonomyListData.results.map((taxonomy) => ({
         ...taxonomy,
         canTagObject: taxonomy.canTagObject && canTagObject,
-        contentTags: /** @type {ContentTagData[]} */ ([]),
+        contentTags: [] as Tag[],
       }));
 
       const contentTaxonomies = contentTaxonomyTagsData.taxonomies;
 
-      const otherTaxonomiesList = [];
+      const otherTaxonomiesList: OtherTaxonomy[] = [];
 
       // eslint-disable-next-line array-callback-return
       contentTaxonomies.map((contentTaxonomyTags) => {
@@ -140,7 +149,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [taxonomyListData, contentTaxonomyTagsData]);
 
   // Add a content tags to the staged tags for a taxonomy
-  const addStagedContentTag = React.useCallback((taxonomyId, addedTag) => {
+  const addStagedContentTag = React.useCallback((taxonomyId: number, addedTag: StagedTagData) => {
     setStagedContentTags(prevStagedContentTags => {
       const updatedStagedContentTags = {
         ...prevStagedContentTags,
@@ -151,7 +160,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [setStagedContentTags]);
 
   // Remove a content tag from the staged tags for a taxonomy
-  const removeStagedContentTag = React.useCallback((taxonomyId, tagValue) => {
+  const removeStagedContentTag = React.useCallback((taxonomyId: number, tagValue: string) => {
     setStagedContentTags(prevStagedContentTags => ({
       ...prevStagedContentTags,
       [taxonomyId]: prevStagedContentTags[taxonomyId].filter((t) => t.value !== tagValue),
@@ -159,7 +168,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [setStagedContentTags]);
 
   // Remove a content tag from the global staged tags for a taxonomy
-  const removeGlobalStagedContentTag = React.useCallback((taxonomyId, tagValue) => {
+  const removeGlobalStagedContentTag = React.useCallback((taxonomyId: number, tagValue: string) => {
     setGlobalStagedContentTags(prevContentTags => ({
       ...prevContentTags,
       [taxonomyId]: prevContentTags[taxonomyId].filter((t) => t.value !== tagValue),
@@ -167,7 +176,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [setGlobalStagedContentTags]);
 
   // Add a content tags to the removed tags for a taxonomy
-  const addRemovedContentTag = React.useCallback((taxonomyId, addedTag) => {
+  const addRemovedContentTag = React.useCallback((taxonomyId: number, addedTag: string) => {
     setGlobalStagedRemovedContentTags(prevContentTags => {
       const updatedStagedContentTags = {
         ...prevContentTags,
@@ -178,7 +187,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [setGlobalStagedRemovedContentTags]);
 
   // Remove a content tag from the removed tags for a taxonomy
-  const deleteRemovedContentTag = React.useCallback((taxonomyId, tagValue) => {
+  const deleteRemovedContentTag = React.useCallback((taxonomyId: number, tagValue: string) => {
     setGlobalStagedRemovedContentTags(prevContentTags => ({
       ...prevContentTags,
       [taxonomyId]: prevContentTags[taxonomyId].filter((t) => t !== tagValue),
@@ -186,13 +195,13 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [setGlobalStagedRemovedContentTags]);
 
   // Sets the staged content tags for taxonomy to the provided list of tags
-  const setStagedTags = React.useCallback((taxonomyId, tagsList) => {
+  const setStagedTags = React.useCallback((taxonomyId: number, tagsList: StagedTagData[]) => {
     setStagedContentTags(prevStagedContentTags => ({ ...prevStagedContentTags, [taxonomyId]: tagsList }));
   }, [setStagedContentTags]);
 
   // Open a collapsible of a taxonomy
   /* istanbul ignore next */
-  const openCollapsible = React.useCallback((taxonomyId) => {
+  const openCollapsible = React.useCallback((taxonomyId: number) => {
     setColapsibleStates(prevStates => ({
       ...prevStates,
       [taxonomyId]: true,
@@ -201,7 +210,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
 
   // Close a collapsible of a taxonomy
   /* istanbul ignore next */
-  const closeCollapsible = React.useCallback((taxonomyId) => {
+  const closeCollapsible = React.useCallback((taxonomyId: number) => {
     setColapsibleStates(prevStates => ({
       ...prevStates,
       [taxonomyId]: false,
@@ -209,7 +218,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   }, [setColapsibleStates]);
 
   const openAllCollapsible = React.useCallback(() => {
-    const updatedState = {};
+    const updatedState: Record<number, boolean> = {};
     fetchedTaxonomies.forEach((taxonomy) => {
       updatedState[taxonomy.id] = true;
     });
@@ -221,7 +230,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
 
   // Set initial state of collapsible based on content tags
   const setCollapsibleToInitalState = React.useCallback(() => {
-    const updatedState = {};
+    const updatedState: Record<number, boolean> = {};
     fetchedTaxonomies.forEach((taxonomy) => {
       // Taxonomy with content tags must be open
       updatedState[taxonomy.id] = taxonomy.contentTags.length !== 0;
@@ -281,7 +290,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   const showToastAfterSave = React.useCallback(() => {
     const { tagsAdded, tagsRemoved } = countTags();
 
-    let message;
+    let message: string | undefined;
     if (tagsAdded && tagsRemoved) {
       message = `${
         intl.formatMessage(
@@ -323,15 +332,18 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   // Updates `tagsByTaxonomy` merged fetched tags, global staged tags
   // and global removed staged tags.
   React.useEffect(() => {
-    const mergedTags = cloneDeep(fetchedTaxonomies).reduce((acc, obj) => (
+    const mergedTags = cloneDeep(fetchedTaxonomies).reduce<Record<number, DrawerTaxonomy>>((acc, obj) => (
       { ...acc, [obj.id]: obj }
     ), {});
 
-    const mergedOtherTaxonomies = cloneDeep(fetchedOtherTaxonomies).reduce((acc, obj) => (
-      { ...acc, [obj.id]: obj }
-    ), {});
+    const mergedOtherTaxonomies = cloneDeep(fetchedOtherTaxonomies).reduce<Record<number, OtherTaxonomy>>(
+      (acc, obj) => (
+        { ...acc, [obj.id]: obj }
+      ),
+      {},
+    );
 
-    Object.keys(globalStagedContentTags).forEach((taxonomyId) => {
+    Object.keys(globalStagedContentTags).map(Number).forEach((taxonomyId) => {
       if (mergedTags[taxonomyId]) {
         // TODO test this
         // Filter out applied tags that should become implicit because a child tag was committed
@@ -355,7 +367,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
       }
     });
 
-    Object.keys(globalStagedRemovedContentTags).forEach((taxonomyId) => {
+    Object.keys(globalStagedRemovedContentTags).map(Number).forEach((taxonomyId) => {
       if (mergedTags[taxonomyId]) {
         mergedTags[taxonomyId].contentTags = mergedTags[taxonomyId].contentTags.filter(
           (t) => !globalStagedRemovedContentTags[taxonomyId].includes(t.value),
@@ -406,7 +418,7 @@ export const useCreateContentTagsDrawerContext = (contentId, canTagObject, fetch
   ]);
 
   const commitGlobalStagedTags = React.useCallback(() => {
-    const tagsData = [];
+    const tagsData: UpdateTagsData[] = [];
     tagsByTaxonomy.forEach((tags) => {
       tagsData.push({
         taxonomy: tags.id,
diff --git a/src/content-tags-drawer/common/context.ts b/src/content-tags-drawer/common/context.ts
index 6f4d76b76a..9cb4f6ce45 100644
--- a/src/content-tags-drawer/common/context.ts
+++ b/src/content-tags-drawer/common/context.ts
@@ -1,11 +1,16 @@
 import React from 'react';
 
-import type { TagsInTaxonomy, StagedTagData } from '../data/types';
+import type {
+  DrawerTag,
+  DrawerTaxonomy,
+  OtherTaxonomy,
+  StagedTagData,
+} from '../data/types';
 
 export interface ContentTagsDrawerContextData {
   stagedContentTags: Record<number, StagedTagData[]>;
-  globalStagedContentTags: Record<number, StagedTagData[]>;
-  globalStagedRemovedContentTags: Record<number, string>;
+  globalStagedContentTags: Record<number, DrawerTag[]>;
+  globalStagedRemovedContentTags: Record<number, string[]>;
   addStagedContentTag: (taxonomyId: number, addedTag: StagedTagData) => void;
   removeStagedContentTag: (taxonomyId: number, tagValue: string) => void;
   removeGlobalStagedContentTag: (taxonomyId: number, tagValue: string) => void;
@@ -19,7 +24,7 @@ export interface ContentTagsDrawerContextData {
   isContentTaxonomyTagsLoaded: boolean;
   isTaxonomyListLoaded: boolean;
   contentName: string;
-  tagsByTaxonomy: TagsInTaxonomy[];
+  tagsByTaxonomy: DrawerTaxonomy[];
   isEditMode: boolean;
   toEditMode: () => void;
   toReadMode: () => void;
@@ -30,7 +35,7 @@ export interface ContentTagsDrawerContextData {
   showToastAfterSave: () => void;
   closeToast: () => void;
   setCollapsibleToInitalState: () => void;
-  otherTaxonomies: TagsInTaxonomy[];
+  otherTaxonomies: OtherTaxonomy[];
 }
 
 /* istanbul ignore next */
diff --git a/src/content-tags-drawer/data/types.ts b/src/content-tags-drawer/data/types.ts
index 52c2f68a2a..2202074c84 100644
--- a/src/content-tags-drawer/data/types.ts
+++ b/src/content-tags-drawer/data/types.ts
@@ -80,3 +80,34 @@ export interface StagedTagData {
   value: string;
   label: string;
 }
+
+/**
+ * A tag as shown in the tags drawer. Tags fetched from the server carry more fields
+ * (see `Tag`), but tags the user has staged in the drawer are only known by these.
+ */
+export interface DrawerTag {
+  value: string;
+  lineage: string[];
+  canDeleteObjecttag: boolean;
+  /** Only known for tags fetched from the server; not set on tags staged in the drawer. */
+  canChangeObjecttag?: boolean;
+  /** Only known for tags fetched from the server; not set on tags staged in the drawer. */
+  isCopied?: boolean;
+}
+
+/** A taxonomy as shown in the tags drawer, along with the tags applied to the content. */
+export interface DrawerTaxonomy extends Pick<TaxonomyData, 'id' | 'name' | 'canTagObject'> {
+  contentTags: DrawerTag[];
+}
+
+/**
+ * A taxonomy that is applied to the content but is not in the taxonomy list the user
+ * can see, so it is rebuilt from the tags applied to the content.
+ */
+export interface OtherTaxonomy extends
+  DrawerTaxonomy,
+  Pick<
+    TaxonomyData,
+    'exportId' | 'enabled' | 'visibleToAuthors' | 'canChangeTaxonomy' | 'canDeleteTaxonomy'
+  >
+{}
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx
similarity index 85%
rename from src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
rename to src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx
index b7046a3122..6be2b0688e 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.jsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx
@@ -15,9 +15,9 @@ jest.mock('../data/apiHooks', () => ({
 }));
 jest.mock('../ContentTagsDrawer', () => jest.fn(() => <div>Mocked ContentTagsDrawer</div>));
 
-const RootWrapper = ({ canManageTags = true } = {}) => (
+const RootWrapper = ({ canManageTags = true }: { canManageTags?: boolean; } = {}) => (
   <IntlProvider locale="en" messages={{}}>
-    <TagsSidebarBody canManageTags={canManageTags} />
+    <TagsSidebarBody readOnly={false} canManageTags={canManageTags} />
   </IntlProvider>
 );
 
@@ -28,7 +28,7 @@ describe('<TagSidebarBody>', () => {
   });
 
   it('should render data after wuery is complete', () => {
-    useContentTaxonomyTagsData.mockReturnValue({
+    (useContentTaxonomyTagsData as jest.Mock).mockReturnValue({
       isSuccess: true,
       data: contentTaxonomyTagsMock[contentId],
     });
@@ -41,7 +41,7 @@ describe('<TagSidebarBody>', () => {
   });
 
   it('should open ContentTagsDrawer', () => {
-    useContentTaxonomyTagsData.mockReturnValue({
+    (useContentTaxonomyTagsData as jest.Mock).mockReturnValue({
       isSuccess: true,
       data: contentTaxonomyTagsMock[contentId],
     });
@@ -54,7 +54,7 @@ describe('<TagSidebarBody>', () => {
   });
 
   it('should not render Manage tags button when canManageTags is false', () => {
-    useContentTaxonomyTagsData.mockReturnValue({
+    (useContentTaxonomyTagsData as jest.Mock).mockReturnValue({
       isSuccess: true,
       data: contentTaxonomyTagsMock[contentId],
     });

From f2056abd419ed7ee917cb0437d77f979050addfc Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Fri, 4 Sep 2026 16:35:58 +1000
Subject: [PATCH 5/7] fix: wrap info section tags dropdown with the validation

---
 .../info-sidebar/InfoSection.tsx              | 17 ++--
 .../info-sidebar/InfoSidebar.test.tsx         | 84 +++++++++++++++++++
 2 files changed, 95 insertions(+), 6 deletions(-)

diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx
index 5d769147b2..ffe3397ea6 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSection.tsx
@@ -1,6 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useToggle } from '@openedx/paragon';
 import { SchoolOutline, Tag } from '@openedx/paragon/icons';
+import { useCourseUserPermissions } from '@src/authz/hooks';
+import { getTagsPermissions } from '@src/authz/permissionHelpers';
 import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import { courseOutlineQueryKeys } from '@src/course-outline/data/queryKeys';
@@ -32,6 +34,7 @@ export const InfoSection = ({ itemId }: Props) => {
   const { courseId } = useCourseAuthoringContext();
 
   const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));
 
   /**
    * Called after a library component sync operation completes (e.g. accepting or ignoring
@@ -76,12 +79,14 @@ export const InfoSection = ({ itemId }: Props) => {
         <SidebarSection
           title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
           icon={Tag}
-          actions={[
-            {
-              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
-              onClick: openManageTagsDrawer,
-            },
-          ]}
+          actions={canManageTags ?
+            [
+              {
+                label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+                onClick: openManageTagsDrawer,
+              },
+            ] :
+            undefined}
         >
           <ContentTagsSnippet contentId={itemId} />
         </SidebarSection>
diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
index 9f79791c92..54f6ce7f34 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
@@ -86,6 +86,21 @@ jest.mock('@src/search-manager', () => ({
   useGetBlockTypes: () => ({ data: [] }),
 }));
 
+// Mirrors the real hook when authz is disabled (every permission granted), except for
+// `canManageTags`, which each test drives to check the taxonomy section's Manage tags action.
+let mockCanManageTags: boolean;
+jest.mock('@src/authz/hooks', () => ({
+  ...jest.requireActual('@src/authz/hooks'),
+  useCourseUserPermissions: (_courseId: string, permissions: Record<string, unknown>) => ({
+    isLoading: false,
+    isAuthzEnabled: false,
+    ...Object.keys(permissions).reduce(
+      (acc, key) => ({ ...acc, [key]: key === 'canManageTags' ? mockCanManageTags : true }),
+      {},
+    ),
+  }),
+}));
+
 const renderComponent = () =>
   render(<InfoSidebar />, {
     extraWrapper: ({ children }) => (
@@ -216,6 +231,7 @@ describe('InfoSidebar component', () => {
     mockOpenContainerInfoSidebar.mockClear();
     mockClearSelection.mockClear();
     mockSections = [];
+    mockCanManageTags = true;
   });
 
   it('renders InfoSidebar with course info if selectedContainerState is undefined', async () => {
@@ -335,6 +351,74 @@ describe('InfoSidebar component', () => {
     });
   });
 
+  describe.each([
+    {
+      level: 'section',
+      category: 'chapter',
+      displayName: 'section name',
+      containerState: {
+        currentId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@tagged',
+        sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@tagged',
+      },
+      opensOnDetailsTab: false,
+    },
+    {
+      level: 'unit',
+      category: 'vertical',
+      displayName: 'unit name',
+      containerState: {
+        currentId: 'block-v1:UNIX+UX1+2025_T3+type@vertical+block@tagged',
+        subsectionId: 'block-v1:UNIX+UX1+2025_T3+type@sequential+block@seq1',
+        sectionId: 'block-v1:UNIX+UX1+2025_T3+type@chapter+block@ch1',
+      },
+      opensOnDetailsTab: true,
+    },
+  ])('$level taxonomy section', ({
+    category,
+    displayName,
+    containerState,
+    opensOnDetailsTab,
+  }) => {
+    /** Renders the sidebar for this level and returns the Taxonomy Alignments section header. */
+    const renderTaxonomySection = async () => {
+      const user = userEvent.setup();
+      selectedContainerState = containerState;
+      axiosMock
+        .onGet(getXBlockApiUrl(containerState.currentId))
+        .reply(200, {
+          id: containerState.currentId,
+          displayName,
+          category,
+          hasChanges: false,
+        });
+      renderComponent();
+      await screen.findByText(displayName);
+      if (opensOnDetailsTab) {
+        // The Details tab is not active by default (preview is); click it to load its content
+        await user.click(screen.getByRole('tab', { name: /Details/i }));
+      }
+      return (await screen.findByText('Taxonomy Alignments')).closest('.pgn__hstack') as HTMLElement;
+    };
+
+    it('shows the Manage tags action when the user can manage tags', async () => {
+      const taxonomySection = await renderTaxonomySection();
+
+      const toggle = taxonomySection.querySelector('.dropdown button') as HTMLButtonElement;
+      expect(toggle).not.toBeNull();
+      fireEvent.click(toggle);
+
+      expect(await screen.findByText('Manage tags')).toBeInTheDocument();
+    });
+
+    it('hides the Manage tags action when the user cannot manage tags', async () => {
+      mockCanManageTags = false;
+      const taxonomySection = await renderTaxonomySection();
+
+      expect(taxonomySection.querySelector('.dropdown')).toBeNull();
+      expect(screen.queryByText('Manage tags')).not.toBeInTheDocument();
+    });
+  });
+
   describeSidebarMenus({
     level: 'Section',
     defaultData: {

From 6344ff5cdb3eca39e3e7b2e1e9e6480b9fbbf6cb Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Fri, 4 Sep 2026 17:19:38 +1000
Subject: [PATCH 6/7] test: use api mock from testUtils and useEvent

---
 .../ContentTagsCollapsible.test.tsx           | 108 +++++----
 .../ContentTagsDrawer.test.tsx                | 215 ++++++++++--------
 .../TagsSidebarBody.test.tsx                  |  21 +-
 .../card-header/CardHeader.test.tsx           |  70 +++---
 .../OutlineAlignSidebar.test.tsx              |  35 ++-
 .../info-sidebar/CourseInfoSidebar.test.tsx   |  38 ++--
 .../info-sidebar/InfoSidebar.test.tsx         |  61 +++--
 .../unit-sidebar/UnitAlignSidebar.test.tsx    |  37 ++-
 8 files changed, 322 insertions(+), 263 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.test.tsx b/src/content-tags-drawer/ContentTagsCollapsible.test.tsx
index 42d2471ee7..376d99b29c 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.test.tsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.test.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
 import {
   act,
-  render,
   fireEvent,
+  initializeMocks,
+  render,
   screen,
+  userEvent,
   within,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+} from '@src/testUtils';
 
 import ContentTagsCollapsible from './ContentTagsCollapsible';
 import messages from './messages';
@@ -208,14 +208,12 @@ const ContentTagsCollapsibleComponent = ({
   }), []);
   return (
     <ContentTagsDrawerContext.Provider value={context as unknown as ContentTagsDrawerContextData}>
-      <IntlProvider locale="en" messages={{}}>
-        <ContentTagsCollapsible
-          contentId={contentId}
-          taxonomyAndTagsData={taxonomyAndTagsData as unknown as TagsInTaxonomy}
-          stagedContentTags={stagedContentTags}
-          collapsibleState={collapsibleState}
-        />
-      </IntlProvider>
+      <ContentTagsCollapsible
+        contentId={contentId}
+        taxonomyAndTagsData={taxonomyAndTagsData as unknown as TagsInTaxonomy}
+        stagedContentTags={stagedContentTags}
+        collapsibleState={collapsibleState}
+      />
     </ContentTagsDrawerContext.Provider>
   );
 };
@@ -229,6 +227,10 @@ describe('<ContentTagsCollapsible />', () => {
     jest.useRealTimers(); // Restore real timers after the tests
   });
 
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   afterEach(() => {
     jest.clearAllMocks(); // Reset all mock function call counts after each test case
   });
@@ -318,6 +320,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should render "no tags added yet" when expanded in read mode', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent({
       ...data,
       isEditMode: false,
@@ -332,18 +335,19 @@ describe('<ContentTagsCollapsible />', () => {
     const expandToggle = screen.getByRole('button', {
       name: /taxonomy 1/i,
     });
-    fireEvent.click(expandToggle);
+    await user.click(expandToggle);
     expect(screen.queryByText(/no tags added yet/i)).toBeInTheDocument();
 
     const addTags = screen.getByRole('button', {
       name: /add tags/i,
     });
     expect(addTags).toBeInTheDocument();
-    fireEvent.click(addTags);
+    await user.click(addTags);
     expect(data.toEditMode).toHaveBeenCalledTimes(1);
   });
 
   it('should not render "add tags" button when expanded and not allowed to tag objects', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent({
       ...data,
       isEditMode: false,
@@ -358,7 +362,7 @@ describe('<ContentTagsCollapsible />', () => {
     const expandToggle = screen.getByRole('button', {
       name: /taxonomy 1/i,
     });
-    fireEvent.click(expandToggle);
+    await user.click(expandToggle);
     expect(screen.queryByText(/no tags added yet/i)).toBeInTheDocument();
 
     const addTags = screen.queryByRole('button', {
@@ -368,6 +372,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `openCollapsible` when click in the collapsible', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent({
       ...data,
       collapsibleState: false,
@@ -376,7 +381,7 @@ describe('<ContentTagsCollapsible />', () => {
     const expandToggle = screen.getByRole('button', {
       name: /taxonomy 1/i,
     });
-    fireEvent.click(expandToggle);
+    await user.click(expandToggle);
 
     expect(data.openCollapsible).toHaveBeenCalledTimes(1);
     expect(data.closeCollapsible).toHaveBeenCalledTimes(0);
@@ -384,6 +389,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `closeCollapsible` when click in the collapsible', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent({
       ...data,
       collapsibleState: true,
@@ -392,20 +398,20 @@ describe('<ContentTagsCollapsible />', () => {
     const expandToggle = screen.getByRole('button', {
       name: /taxonomy 1/i,
     });
-    fireEvent.click(expandToggle);
+    await user.click(expandToggle);
 
     expect(data.closeCollapsible).toHaveBeenCalledTimes(1);
     expect(data.openCollapsible).toHaveBeenCalledTimes(0);
   });
 
   it('should call `addStagedContentTag` when tag checked in the dropdown', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const { getByText, getAllByText } = await getComponent();
 
     // Click on "Add a tag" button to open dropdown to select new tags
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown/mouseUp` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
-    fireEvent.mouseUp(addTagsButton);
+    // react-select ignores a plain `click`, so press and release the pointer directly
+    await user.pointer([{ target: addTagsButton, keys: '[MouseLeft>]' }, { keys: '[/MouseLeft]' }]);
 
     // Wait for the dropdown selector for tags to open,
     // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
@@ -413,7 +419,7 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click to check Tag 3 and check the `addStagedContentTag` was called with the correct params
     const tag3 = getByText('Tag 3');
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     const taxonomyId = 123;
     const addedStagedTag = {
@@ -425,13 +431,13 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `removeStagedContentTag` when tag staged tag unchecked in the dropdown', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const { getByText, getAllByText } = await getComponent();
 
     // Click on "Add a tag" button to open dropdown to select new tags
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown/mouseup` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
-    fireEvent.mouseUp(addTagsButton);
+    // react-select ignores a plain `click`, so press and release the pointer directly
+    await user.pointer([{ target: addTagsButton, keys: '[MouseLeft>]' }, { keys: '[/MouseLeft]' }]);
 
     // Wait for the dropdown selector for tags to open,
     // Tag 3 should only appear there, (i.e. the dropdown is open, since Tag 3 is not applied)
@@ -439,10 +445,10 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click to check Tag 3
     const tag3 = getByText('Tag 3');
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Click to uncheck Tag 3 and check the `removeStagedContentTag` was called with the correct params
-    fireEvent.click(tag3);
+    await user.click(tag3);
     const taxonomyId = 123;
     const tagValue = 'Tag%203';
     expect(data.removeStagedContentTag).toHaveBeenCalledTimes(1);
@@ -450,6 +456,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `removeGlobalStagedContentTag` when global staged tag is deleted', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent({
       ...data,
       taxonomyAndTagsData: {
@@ -476,7 +483,7 @@ describe('<ContentTagsCollapsible />', () => {
     const deleteButton = screen.getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     const taxonomyId = 123;
     expect(data.removeGlobalStagedContentTag).toHaveBeenCalledTimes(1);
@@ -484,13 +491,14 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `addRemovedContentTag` when a fetched tag is deleted', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent();
 
     const tag = screen.getByText(/tag 2/i);
     const deleteButton = within(tag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     const taxonomyId = 123;
     expect(data.addRemovedContentTag).toHaveBeenCalledTimes(1);
@@ -498,6 +506,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `setStagedTags` to clear staged tags when clicking inline "Add" button', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     // Setup component to have staged tags
     const { getByText } = await getComponent({
       ...data,
@@ -509,7 +518,7 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on inline "Add" button and check that the appropriate methods are called
     const inlineAdd = getByText(messages.collapsibleInlineAddStagedTagsButtonText.defaultMessage);
-    fireEvent.click(inlineAdd);
+    await user.click(inlineAdd);
 
     // Check that `setStagedTags` called with empty tags list to clear staged tags
     const taxonomyId = 123;
@@ -518,6 +527,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should call `setStagedTags` to clear staged tags when clicking "Add tags" button in dropdown', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     // Setup component to have staged tags
     const { container, getByText } = await getComponent({
       ...data,
@@ -529,12 +539,13 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on dropdown with staged tags to expand it
     const selectTagsDropdown = container.getElementsByClassName('react-select-add-tags__control')[0];
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(selectTagsDropdown);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: selectTagsDropdown, keys: '[MouseLeft>]' });
 
     // Click on "Add tags" button and check that the appropriate methods are called
     const dropdownAdd = getByText(messages.collapsibleAddStagedTagsButtonText.defaultMessage);
-    fireEvent.click(dropdownAdd);
+    await user.click(dropdownAdd);
 
     // Check that `setStagedTags` called with empty tags list to clear staged tags
     const taxonomyId = 123;
@@ -543,6 +554,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should close dropdown and clear staged tags when clicking "Cancel" inside dropdown', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     // Setup component to have staged tags
     const { container, getByText } = await getComponent({
       ...data,
@@ -554,12 +566,13 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on dropdown with staged tags to expand it
     const selectTagsDropdown = container.getElementsByClassName('react-select-add-tags__control')[0];
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(selectTagsDropdown);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: selectTagsDropdown, keys: '[MouseLeft>]' });
 
     // Click on inline "Add" button and check that the appropriate methods are called
     const dropdownCancel = getByText(messages.collapsibleCancelStagedTagsButtonText.defaultMessage);
-    fireEvent.click(dropdownCancel);
+    await user.click(dropdownCancel);
 
     // Check that `setStagedTags` called with empty tags list to clear staged tags
     const taxonomyId = 123;
@@ -580,8 +593,9 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to click
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Get the search field
     const searchField = getByRole('combobox');
@@ -601,25 +615,29 @@ describe('<ContentTagsCollapsible />', () => {
     expect(getByDisplayValue(searchTerm)).toBeInTheDocument();
 
     // Clear search
-    fireEvent.change(searchField, { target: { value: '' } });
+    await user.clear(searchField);
 
     // Check that the search term has been cleared
     expect(searchField).toHaveValue('');
   });
 
   it('should close dropdown selector when clicking away', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     const { container, getByText, queryByText } = await getComponent();
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Wait for the dropdown selector for tags to open, Tag 3 should appear
     // since it is not applied
     expect(queryByText('Tag 3')).toBeInTheDocument();
 
-    // Simulate clicking outside the dropdown remove focus
+    // Simulate clicking outside the dropdown remove focus.
+    // Kept on fireEvent: the handler under test branches on `relatedTarget`, which userEvent
+    // does not let us set.
     const outsideElement = container.querySelector('.taxonomy-tags-count-chip');
     const selectElement = container.querySelector('.react-select-add-tags__input')!;
     fireEvent.blur(selectElement, { relatedTarget: outsideElement });
@@ -639,8 +657,9 @@ describe('<ContentTagsCollapsible />', () => {
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Wait for the dropdown selector for tags to open, Tag 3 should appear
     // since it is not applied
@@ -760,6 +779,7 @@ describe('<ContentTagsCollapsible />', () => {
   });
 
   it('should remove applied tags when clicking on `x` of tag bubble', async () => {
+    const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     await getComponent();
 
     // Click on 'x' of applied tag to remove it
@@ -767,7 +787,7 @@ describe('<ContentTagsCollapsible />', () => {
     const xButtonAppliedTag = within(appliedTag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(xButtonAppliedTag);
+    await user.click(xButtonAppliedTag);
 
     // Check that the applied tag has been removed
     expect(appliedTag).not.toBeInTheDocument();
diff --git a/src/content-tags-drawer/ContentTagsDrawer.test.tsx b/src/content-tags-drawer/ContentTagsDrawer.test.tsx
index a1ae6f13c8..2dc9689a11 100644
--- a/src/content-tags-drawer/ContentTagsDrawer.test.tsx
+++ b/src/content-tags-drawer/ContentTagsDrawer.test.tsx
@@ -1,12 +1,12 @@
 import type { ComponentProps, ContextType } from 'react';
 import {
-  fireEvent,
   initializeMocks,
   render,
   waitFor,
   screen,
+  userEvent,
   within,
-} from '../testUtils';
+} from '@src/testUtils';
 import ContentTagsDrawer from './ContentTagsDrawer';
 import messages from './messages';
 import { ContentTagsDrawerSheetContext } from './common/context';
@@ -75,7 +75,7 @@ describe('<ContentTagsDrawer />', () => {
     initializeMocks();
   });
 
-  it('should render page and page title correctly', () => {
+  it('should render page and page title correctly', async () => {
     renderDrawer(stagedTagsId);
     expect(screen.getByText('Manage tags')).toBeInTheDocument();
   });
@@ -160,12 +160,13 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should change to edit mode when click on `Edit tags` on drawer variant', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Show delete tag buttons
     expect(
@@ -185,12 +186,13 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should change to edit mode when click on `Manage tags` on component variant', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId, { variant: 'component' });
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
     const manageTagsButton = screen.getByRole('button', {
       name: /manage tags/i,
     });
-    fireEvent.click(manageTagsButton);
+    await user.click(manageTagsButton);
 
     // Show delete tag buttons
     expect(
@@ -232,17 +234,18 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should change to read mode when click on `Cancel` on drawer variant', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     const cancelButton = screen.getByRole('button', {
       name: /cancel/i,
     });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     // Not show delete tag buttons
     expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
@@ -258,17 +261,18 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should change to read mode when click on `Cancel` on component variant', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId, { variant: 'component' });
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
     const manageTagsButton = screen.getByRole('button', {
       name: /manage tags/i,
     });
-    fireEvent.click(manageTagsButton);
+    await user.click(manageTagsButton);
 
     const cancelButton = screen.getByRole('button', {
       name: /cancel/i,
     });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     // Not show delete tag buttons
     expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
@@ -307,6 +311,7 @@ describe('<ContentTagsDrawer />', () => {
   );
 
   it('should test adding a content tag to the staged tags for a taxonomy', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
@@ -314,25 +319,27 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
     expect((await screen.findAllByText('Tag 3')).length).toBe(1);
 
     // Click to check Tag 3
     const tag3 = screen.getByText('Tag 3');
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
     expect(screen.getAllByText('Tag 3').length).toBe(2);
   });
 
   it('should test removing a staged content from a taxonomy', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
@@ -340,29 +347,31 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
     expect((await screen.findAllByText('Tag 3')).length).toBe(1);
 
     // Click to check Tag 3
     const tag3 = screen.getByText('Tag 3');
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
     expect(screen.getAllByText('Tag 3').length).toBe(2);
 
     // Click it again to unstage it and confirm that there is only one on the page
-    fireEvent.click(tag3);
+    await user.click(tag3);
     expect(screen.getAllByText('Tag 3').length).toBe(1);
   });
 
   it('should test clearing staged tags for a taxonomy', async () => {
+    const user = userEvent.setup();
     const {
       container,
     } = renderDrawer(stagedTagsId);
@@ -372,26 +381,27 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(/add a tag/i);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Tag 3 should only appear in dropdown selector, (i.e. the dropdown is open, since Tag 3 is not applied)
     expect((await screen.findAllByText('Tag 3')).length).toBe(1);
 
     // Click to check Tag 3
     const tag3 = screen.getByText('Tag 3');
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Check that Tag 3 has been staged, i.e. there should be 2 of them on the page
     expect(screen.getAllByText('Tag 3').length).toBe(2);
 
     const dropdown = container.querySelector<HTMLElement>('#content-tags-drawer > div:nth-child(1) > div')!;
     const dropdownCancel = within(dropdown).getByRole('button', { name: /cancel/i });
-    fireEvent.click(dropdownCancel);
+    await user.click(dropdownCancel);
 
     // Check that there are no more Tag 3 on the page, since the staged one is cleared
     // and the dropdown has been closed
@@ -399,6 +409,7 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should test adding global staged tags and cancel', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
@@ -406,31 +417,33 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(/add a tag/i);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Click to check Tag 3
     const tag3 = await screen.findByText(/tag 3/i);
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Click "Add tags" to save to global staged tags
     const addTags = screen.getByRole('button', { name: /add tags/i });
-    fireEvent.click(addTags);
+    await user.click(addTags);
 
     expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
 
     // Click "Cancel"
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(screen.queryByText(/tag 3/i)).not.toBeInTheDocument();
   });
 
   it('should test delete fetched tags and cancel', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
@@ -438,25 +451,26 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Delete the tag
     const tag = await screen.findByText(/tag 2/i);
     const deleteButton = within(tag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     expect(tag).not.toBeInTheDocument();
 
     // Click "Cancel"
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
   });
 
   it('should test delete global staged tags and cancel', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
@@ -464,20 +478,21 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(/add a tag/i);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Click to check Tag 3
     const tag3 = await screen.findByText(/tag 3/i);
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Click "Add tags" to save to global staged tags
     const addTags = screen.getByRole('button', { name: /add tags/i });
-    fireEvent.click(addTags);
+    await user.click(addTags);
 
     const tag = screen.getByText(/tag 3/i);
     expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
@@ -486,18 +501,19 @@ describe('<ContentTagsDrawer />', () => {
     const deleteButton = within(tag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     expect(tag).not.toBeInTheDocument();
 
     // Click "Cancel"
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(screen.queryByText(/tag 3/i)).not.toBeInTheDocument();
   });
 
   it('should test add removed fetched tags and cancel', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId);
     expect(await screen.findByText('Taxonomy 1')).toBeInTheDocument();
 
@@ -505,88 +521,87 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Delete the tag
     const tag = await screen.findByText(/tag 2/i);
     const deleteButton = within(tag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     expect(tag).not.toBeInTheDocument();
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(/add a tag/i);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Click to check Tag 2
     const tag2 = await screen.findByText(/tag 2/i);
-    fireEvent.click(tag2);
+    await user.click(tag2);
 
     // Click "Add tags" to save to global staged tags
     const addTags = screen.getByRole('button', { name: /add tags/i });
-    fireEvent.click(addTags);
+    await user.click(addTags);
 
     expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
 
     // Click "Cancel"
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(screen.getByText(/tag 2/i)).toBeInTheDocument();
   });
 
   it('should call onClose when cancel is clicked', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId, { onClose: mockOnClose });
 
     const cancelButton = await screen.findByRole('button', {
       name: /close/i,
     });
     expect(cancelButton).toBeInTheDocument();
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(mockOnClose).toHaveBeenCalled();
   });
 
-  it('should call closeManageTagsDrawer when Escape key is pressed and no selectable box is active', () => {
+  it('should call closeManageTagsDrawer when Escape key is pressed and no selectable box is active', async () => {
+    const user = userEvent.setup();
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 
-    const { container } = renderDrawer(stagedTagsId);
+    renderDrawer(stagedTagsId);
 
-    fireEvent.keyDown(container, {
-      key: 'Escape',
-    });
+    await user.keyboard('{Escape}');
 
     expect(postMessageSpy).toHaveBeenCalledWith('closeManageTagsDrawer', '*');
 
     postMessageSpy.mockRestore();
   });
 
-  it('should call `onClose` when Escape key is pressed and no selectable box is active', () => {
-    const { container } = renderDrawer(stagedTagsId, { onClose: mockOnClose });
+  it('should call `onClose` when Escape key is pressed and no selectable box is active', async () => {
+    const user = userEvent.setup();
+    renderDrawer(stagedTagsId, { onClose: mockOnClose });
 
-    fireEvent.keyDown(container, {
-      key: 'Escape',
-    });
+    await user.keyboard('{Escape}');
 
     expect(mockOnClose).toHaveBeenCalled();
   });
 
-  it('should not call closeManageTagsDrawer when Escape key is pressed and a selectable box is active', () => {
+  it('should not call closeManageTagsDrawer when Escape key is pressed and a selectable box is active', async () => {
+    const user = userEvent.setup();
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
 
-    const { container } = renderDrawer(stagedTagsId);
+    renderDrawer(stagedTagsId);
 
     // Simulate that the selectable box is open by adding an element with the data attribute
     const selectableBox = document.createElement('div');
     selectableBox.setAttribute('data-selectable-box', 'taxonomy-tags');
     document.body.appendChild(selectableBox);
 
-    fireEvent.keyDown(container, {
-      key: 'Escape',
-    });
+    await user.keyboard('{Escape}');
 
     expect(postMessageSpy).not.toHaveBeenCalled();
 
@@ -596,17 +611,16 @@ describe('<ContentTagsDrawer />', () => {
     postMessageSpy.mockRestore();
   });
 
-  it('should not call `onClose` when Escape key is pressed and a selectable box is active', () => {
-    const { container } = renderDrawer(stagedTagsId, { onClose: mockOnClose });
+  it('should not call `onClose` when Escape key is pressed and a selectable box is active', async () => {
+    const user = userEvent.setup();
+    renderDrawer(stagedTagsId, { onClose: mockOnClose });
 
     // Simulate that the selectable box is open by adding an element with the data attribute
     const selectableBox = document.createElement('div');
     selectableBox.setAttribute('data-selectable-box', 'taxonomy-tags');
     document.body.appendChild(selectableBox);
 
-    fireEvent.keyDown(container, {
-      key: 'Escape',
-    });
+    await user.keyboard('{Escape}');
 
     expect(mockOnClose).not.toHaveBeenCalled();
 
@@ -614,31 +628,30 @@ describe('<ContentTagsDrawer />', () => {
     document.body.removeChild(selectableBox);
   });
 
-  it('should not call closeManageTagsDrawer when Escape key is pressed and container is blocked', () => {
+  it('should not call closeManageTagsDrawer when Escape key is pressed and container is blocked', async () => {
+    const user = userEvent.setup();
     const postMessageSpy = jest.spyOn(window.parent, 'postMessage');
-    const { container } = renderDrawer(stagedTagsId, { blockingSheet: true });
-    fireEvent.keyDown(container, {
-      key: 'Escape',
-    });
+    renderDrawer(stagedTagsId, { blockingSheet: true });
+    await user.keyboard('{Escape}');
 
     expect(postMessageSpy).not.toHaveBeenCalled();
 
     postMessageSpy.mockRestore();
   });
 
-  it('should not call `onClose` when Escape key is pressed and container is blocked', () => {
-    const { container } = renderDrawer(stagedTagsId, {
+  it('should not call `onClose` when Escape key is pressed and container is blocked', async () => {
+    const user = userEvent.setup();
+    renderDrawer(stagedTagsId, {
       blockingSheet: true,
       onClose: mockOnClose,
     });
-    fireEvent.keyDown(container, {
-      key: 'Escape',
-    });
+    await user.keyboard('{Escape}');
 
     expect(mockOnClose).not.toHaveBeenCalled();
   });
 
   it('should call `setBlockingSheet` on add a tag', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId, {
       blockingSheet: true,
       setBlockingSheet: mockSetBlockingSheet,
@@ -651,25 +664,27 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Click on "Add a tag" button to open dropdown
     const addTagsButton = screen.getByText(/add a tag/i);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsButton);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsButton, keys: '[MouseLeft>]' });
 
     // Click to check Tag 3
     const tag3 = await screen.findByText(/tag 3/i);
-    fireEvent.click(tag3);
+    await user.click(tag3);
 
     // Click "Add tags" to save to global staged tags
     const addTags = screen.getByRole('button', { name: /add tags/i });
-    fireEvent.click(addTags);
+    await user.click(addTags);
 
     expect(mockSetBlockingSheet).toHaveBeenCalledWith(true);
   });
 
   it('should call `setBlockingSheet` on delete a tag', async () => {
+    const user = userEvent.setup();
     renderDrawer(stagedTagsId, {
       blockingSheet: true,
       setBlockingSheet: mockSetBlockingSheet,
@@ -682,19 +697,20 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Delete the tag
     const tag = screen.getByText(/tag 2/i);
     const deleteButton = within(tag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     expect(mockSetBlockingSheet).toHaveBeenCalledWith(true);
   });
 
   it('should call `updateTags` mutation on save', async () => {
+    const user = userEvent.setup();
     const { axiosMock } = initializeMocks();
     const url = getContentTaxonomyTagsApiUrl(stagedTagsId);
     axiosMock.onPut(url).reply(200);
@@ -703,12 +719,12 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     const saveButton = screen.getByRole('button', {
       name: /save/i,
     });
-    fireEvent.click(saveButton);
+    await user.click(saveButton);
 
     await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
   });
@@ -719,6 +735,7 @@ describe('<ContentTagsDrawer />', () => {
     'lb:org:lib:html:1',
   ].forEach((containerId) => {
     it(`should invalidate children query when update child tag when containerId is ${containerId}`, async () => {
+      const user = userEvent.setup();
       const newPath = '/container/:containerId/';
       const { axiosMock, queryClient } = initializeMocks();
       const mockInvalidateQueries = jest.spyOn(queryClient, 'invalidateQueries');
@@ -729,12 +746,12 @@ describe('<ContentTagsDrawer />', () => {
       const editTagsButton = screen.getByRole('button', {
         name: /edit tags/i,
       });
-      fireEvent.click(editTagsButton);
+      await user.click(editTagsButton);
 
       const saveButton = screen.getByRole('button', {
         name: /save/i,
       });
-      fireEvent.click(saveButton);
+      await user.click(saveButton);
 
       await waitFor(() => expect(axiosMock.history.put[0].url).toEqual(url));
       expect(mockInvalidateQueries).toHaveBeenCalledTimes(5);
@@ -789,6 +806,7 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should test delete "Other tags" and cancel', async () => {
+    const user = userEvent.setup();
     renderDrawer(otherTagsId);
     expect(await screen.findByText('Taxonomy 2')).toBeInTheDocument();
 
@@ -796,41 +814,43 @@ describe('<ContentTagsDrawer />', () => {
     const editTagsButton = screen.getByRole('button', {
       name: /edit tags/i,
     });
-    fireEvent.click(editTagsButton);
+    await user.click(editTagsButton);
 
     // Delete the tag
     const tag = screen.getByText(/tag 3/i);
     const deleteButton = within(tag).getByRole('button', {
       name: /delete/i,
     });
-    fireEvent.click(deleteButton);
+    await user.click(deleteButton);
 
     expect(tag).not.toBeInTheDocument();
 
     // Click "Cancel"
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    fireEvent.click(cancelButton);
+    await user.click(cancelButton);
 
     expect(screen.getByText(/tag 3/i)).toBeInTheDocument();
   });
 
   it('should show tags staged on an "Other tags" taxonomy', async () => {
+    const user = userEvent.setup();
     renderDrawer(editableOtherTagsId);
     expect(await screen.findByText('Other tags')).toBeInTheDocument();
 
     // To edit mode
-    fireEvent.click(screen.getByRole('button', { name: /edit tags/i }));
+    await user.click(screen.getByRole('button', { name: /edit tags/i }));
 
     // The second "Add a tag" select belongs to the taxonomy under "Other tags";
     // the first one belongs to the regular taxonomy rendered above it.
     const addTagsSelects = screen.getAllByText(messages.collapsibleAddTagsPlaceholderText.defaultMessage);
     expect(addTagsSelects.length).toBe(2);
-    // Use `mouseDown` instead of `click` since the react-select didn't respond to `click`
-    fireEvent.mouseDown(addTagsSelects[1]);
+    // Press without releasing: react-select opens its menu on mouseDown, and a full click
+    // would immediately toggle it back closed.
+    await user.pointer({ target: addTagsSelects[1], keys: '[MouseLeft>]' });
 
     // Stage "Tag 1" on the other taxonomy
-    fireEvent.click(await screen.findByText('Tag 1'));
-    fireEvent.click(screen.getByRole('button', { name: /add tags/i }));
+    await user.click(await screen.findByText('Tag 1'));
+    await user.click(screen.getByRole('button', { name: /add tags/i }));
 
     // The staged tag is merged into the other taxonomy's tags, alongside the fetched one
     expect(screen.getByText('Tag 3')).toBeInTheDocument();
@@ -849,12 +869,13 @@ describe('<ContentTagsDrawer />', () => {
   });
 
   it('should show empty drawer message', async () => {
+    const user = userEvent.setup();
     renderDrawer(emptyTagsId);
     expect(await screen.findByText(/to use tags, please or contact your administrator\./i)).toBeInTheDocument();
     const enableButton = screen.getByRole('button', {
       name: /enable a taxonomy/i,
     });
-    fireEvent.click(enableButton);
+    await user.click(enableButton);
     expect(mockNavigate).toHaveBeenCalledWith('/taxonomies');
   });
 });
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx
index 6be2b0688e..232a876af5 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.test.tsx
@@ -1,6 +1,10 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import {
+  initializeMocks,
+  render,
+  screen,
+  userEvent,
+} from '@src/testUtils';
 import TagsSidebarBody from './TagsSidebarBody';
 import { useContentTaxonomyTagsData } from '../data/apiHooks';
 import { contentTaxonomyTagsMock } from '../__mocks__';
@@ -16,12 +20,14 @@ jest.mock('../data/apiHooks', () => ({
 jest.mock('../ContentTagsDrawer', () => jest.fn(() => <div>Mocked ContentTagsDrawer</div>));
 
 const RootWrapper = ({ canManageTags = true }: { canManageTags?: boolean; } = {}) => (
-  <IntlProvider locale="en" messages={{}}>
-    <TagsSidebarBody readOnly={false} canManageTags={canManageTags} />
-  </IntlProvider>
+  <TagsSidebarBody readOnly={false} canManageTags={canManageTags} />
 );
 
 describe('<TagSidebarBody>', () => {
+  beforeEach(() => {
+    initializeMocks();
+  });
+
   it('shows spinner before the content data query is complete', () => {
     render(<RootWrapper />);
     expect(screen.getByRole('status')).toBeInTheDocument();
@@ -40,7 +46,8 @@ describe('<TagSidebarBody>', () => {
     expect(screen.queryByText('Mocked ContentTagsDrawer')).not.toBeInTheDocument();
   });
 
-  it('should open ContentTagsDrawer', () => {
+  it('should open ContentTagsDrawer', async () => {
+    const user = userEvent.setup();
     (useContentTaxonomyTagsData as jest.Mock).mockReturnValue({
       isSuccess: true,
       data: contentTaxonomyTagsMock[contentId],
@@ -48,7 +55,7 @@ describe('<TagSidebarBody>', () => {
     render(<RootWrapper />);
 
     const manageButton = screen.getByRole('button', { name: /manage tags/i });
-    fireEvent.click(manageButton);
+    await user.click(manageButton);
 
     expect(screen.getByText('Mocked ContentTagsDrawer')).toBeInTheDocument();
   });
diff --git a/src/course-outline/card-header/CardHeader.test.tsx b/src/course-outline/card-header/CardHeader.test.tsx
index 94403ca3c5..5aefbd1479 100644
--- a/src/course-outline/card-header/CardHeader.test.tsx
+++ b/src/course-outline/card-header/CardHeader.test.tsx
@@ -2,15 +2,14 @@ import { setConfig, getConfig } from '@edx/frontend-platform';
 
 import { ITEM_BADGE_STATUS } from '@src/course-outline/constants';
 import {
-  act,
   fireEvent,
   screen,
+  userEvent,
   waitFor,
 } from '@src/testUtils';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { courseId } from '@src/schedule-and-details/__mocks__/courseDetails';
-import { userEvent } from '@testing-library/user-event';
 import { renderCard, setupCardTestMocks } from '../__mocks__/testSetup';
 import CardHeader from './CardHeader';
 import TitleButton from './TitleButton';
@@ -162,17 +161,19 @@ describe('<CardHeader />', () => {
   });
 
   it('check publish menu item is disabled when subsection status is live or published not live and it has no changes', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       status: ITEM_BADGE_STATUS.publishedNotLive,
     });
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
     expect(await screen.findByText(messages.menuPublish.defaultMessage)).toHaveAttribute('aria-disabled', 'true');
   });
 
   it('check publish menu item is enabled when subsection status is live or published not live and it has changes', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       status: ITEM_BADGE_STATUS.publishedNotLive,
@@ -180,55 +181,59 @@ describe('<CardHeader />', () => {
     });
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
     expect(await screen.findByText(messages.menuPublish.defaultMessage)).not.toHaveAttribute('aria-disabled');
   });
 
   it('calls handleExpanded when button is clicked', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     const expandButton = await screen.findByTestId('subsection-card-header__expanded-btn');
-    fireEvent.click(expandButton);
+    await user.click(expandButton);
     expect(onExpandMock).toHaveBeenCalled();
   });
 
   it('calls onClickPublish when item is clicked', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       status: ITEM_BADGE_STATUS.draft,
     });
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
 
     const publishMenuItem = await screen.findByText(messages.menuPublish.defaultMessage);
-    await act(async () => fireEvent.click(publishMenuItem));
+    await user.click(publishMenuItem);
     expect(onClickPublishMock).toHaveBeenCalled();
   });
 
   it('only shows Manage tags menu if the waffle flag is enabled', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'false',
     });
     renderComponent();
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
 
     expect(screen.queryByText(messages.menuManageTags.defaultMessage)).not.toBeInTheDocument();
   });
 
   it('shows ContentTagsDrawer when the menu is clicked', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
     });
     renderComponent();
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
 
     const manageTagsMenuItem = await screen.findByText(messages.menuManageTags.defaultMessage);
-    fireEvent.click(manageTagsMenuItem);
+    await user.click(manageTagsMenuItem);
 
     // Check if the drawer is open
     expect(screen.getAllByText('Manage tags').length).toBe(1);
@@ -385,13 +390,14 @@ describe('<CardHeader />', () => {
   });
 
   it('check editing is enabled when isDisabledEditField is false', async () => {
+    const user = userEvent.setup();
     renderComponent({ ...cardHeaderProps });
 
     expect(screen.getByTestId('subsection-edit-button')).toBeEnabled();
 
     // Ensure menu items related to editing are enabled
     const menuButton = screen.getByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
+    await user.click(menuButton);
     expect(await screen.findByTestId('subsection-card-header__menu-configure-button')).not.toHaveAttribute(
       'aria-disabled',
     );
@@ -419,38 +425,41 @@ describe('<CardHeader />', () => {
   });
 
   it('calls onClickDelete when item is clicked', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
+    await user.click(menuButton);
     const deleteMenuItem = await screen.findByText(messages.menuDelete.defaultMessage);
-    await act(async () => fireEvent.click(deleteMenuItem));
+    await user.click(deleteMenuItem);
     expect(onClickDeleteMock).toHaveBeenCalledTimes(1);
   });
 
   it('calls onClickUnlink when item is clicked', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
+    await user.click(menuButton);
     const unlinkMenuItem = await screen.findByText(messages.menuUnlink.defaultMessage);
-    await act(async () => fireEvent.click(unlinkMenuItem));
+    await user.click(unlinkMenuItem);
     expect(onClickUnlinkMock).toHaveBeenCalledTimes(1);
   });
 
   it('calls onClickDuplicate when item is clicked', async () => {
+    const user = userEvent.setup();
     renderComponent();
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
 
     const duplicateMenuItem = await screen.findByText(messages.menuDuplicate.defaultMessage);
-    fireEvent.click(duplicateMenuItem);
-    await act(async () => fireEvent.click(duplicateMenuItem));
+    await user.click(duplicateMenuItem);
     expect(onClickDuplicateMock).toHaveBeenCalled();
   });
 
   it('check if proctoringExamConfigurationLink is visible', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       proctoringExamConfigurationLink: 'proctoringlink',
@@ -458,7 +467,7 @@ describe('<CardHeader />', () => {
     });
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
+    await user.click(menuButton);
 
     const element = await screen.findByText(messages.menuProctoringLinkText.defaultMessage);
     expect(element).toBeInTheDocument();
@@ -466,6 +475,7 @@ describe('<CardHeader />', () => {
   });
 
   it('check if proctoringExamConfigurationLink is absolute', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       proctoringExamConfigurationLink: 'http://localhost:9000/proctoringlink',
@@ -473,7 +483,7 @@ describe('<CardHeader />', () => {
     });
 
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    await act(async () => fireEvent.click(menuButton));
+    await user.click(menuButton);
 
     const element = await screen.findByText(messages.menuProctoringLinkText.defaultMessage);
     expect(element).toBeInTheDocument();
@@ -529,6 +539,7 @@ describe('<CardHeader />', () => {
   });
 
   it('hides Manage tags menu item and tag count when canManageTags is false', async () => {
+    const user = userEvent.setup();
     setConfig({
       ...getConfig(),
       ENABLE_TAGGING_TAXONOMY_PAGES: 'true',
@@ -544,12 +555,13 @@ describe('<CardHeader />', () => {
     expect(screen.queryByText('17')).not.toBeInTheDocument();
 
     // Manage tags menu item is not rendered
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
     expect(await screen.findByText(messages.menuConfigure.defaultMessage)).toBeInTheDocument();
     expect(screen.queryByText(messages.menuManageTags.defaultMessage)).not.toBeInTheDocument();
   });
 
-  it('should render sync button when is ready to sync', () => {
+  it('should render sync button when is ready to sync', async () => {
+    const user = userEvent.setup();
     const mockClickSync = jest.fn();
 
     renderComponent({
@@ -559,13 +571,14 @@ describe('<CardHeader />', () => {
 
     const syncButton = screen.getByRole('button', { name: /update available - click to sync/i });
     expect(syncButton).toBeInTheDocument();
-    fireEvent.click(syncButton);
+    await user.click(syncButton);
 
     expect(mockClickSync).toHaveBeenCalled();
   });
 
   [null, undefined].forEach((unlinkable) => (
     it(`should not render unlink button if unlinkable action is ${unlinkable}`, async () => {
+      const user = userEvent.setup();
       renderComponent({
         ...cardHeaderProps,
         actions: {
@@ -575,13 +588,14 @@ describe('<CardHeader />', () => {
       });
 
       const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-      fireEvent.click(menuButton);
+      await user.click(menuButton);
 
       expect(screen.queryByText(messages.menuUnlink.defaultMessage)).not.toBeInTheDocument();
     })
   ));
 
   it('should render unlink button disabled if unlinkable action is False', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       actions: {
@@ -590,7 +604,7 @@ describe('<CardHeader />', () => {
       },
     });
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
 
     const unlinkMenuItem = await screen.findByText(messages.menuUnlink.defaultMessage);
     expect(unlinkMenuItem).toBeInTheDocument();
@@ -598,6 +612,7 @@ describe('<CardHeader />', () => {
   });
 
   it('should render unlink button disabled if unlinkable action is False', async () => {
+    const user = userEvent.setup();
     renderComponent({
       ...cardHeaderProps,
       actions: {
@@ -606,11 +621,10 @@ describe('<CardHeader />', () => {
       },
     });
     const menuButton = await screen.findByTestId('subsection-card-header__menu-button');
-    fireEvent.click(menuButton);
+    await user.click(menuButton);
 
     const unlinkMenuItem = await screen.findByText(messages.menuUnlink.defaultMessage);
-    fireEvent.click(unlinkMenuItem);
-    await act(async () => fireEvent.click(unlinkMenuItem));
+    await user.click(unlinkMenuItem);
     expect(onClickUnlinkMock).toHaveBeenCalled();
   });
 
diff --git a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
index b494a8d845..610e891a0b 100644
--- a/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/OutlineAlignSidebar.test.tsx
@@ -1,6 +1,6 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
 
-import { useCourseUserPermissions } from '@src/authz/hooks';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import * as CourseAuthoringContext from '@src/CourseAuthoringContext';
 import * as CourseOutlineContext from '@src/course-outline/CourseOutlineContext';
 import * as CourseDetailsApi from '@src/data/apiHooks';
@@ -16,10 +16,16 @@ jest.mock('@src/content-tags-drawer', () => ({
   )),
 }));
 
-jest.mock('@src/authz/hooks', () => ({
-  ...jest.requireActual('@src/authz/hooks'),
-  useCourseUserPermissions: jest.fn(),
-}));
+let validateUserPermissionsMock: ReturnType<typeof initializeMocks>['validateUserPermissionsMock'];
+
+/**
+ * Authz is only consulted when its waffle flag is on; with the flag off every permission is
+ * granted, so only the restricted cases need to enable it.
+ */
+const mockPermissions = (canManageTags = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canManageTags });
+  validateUserPermissionsMock.mockResolvedValue({ canManageTags });
+};
 
 describe('OutlineAlignSidebar', () => {
   const setCurrentSelection = jest.fn();
@@ -30,12 +36,9 @@ describe('OutlineAlignSidebar', () => {
   const unitId = 'block-v1:test+course+run+type@vertical+block@unit-1';
 
   beforeEach(() => {
-    initializeMocks();
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      canManageTags: true,
-      isLoading: false,
-      isAuthzEnabled: false,
-    } as ReturnType<typeof useCourseUserPermissions>);
+    const mocks = initializeMocks();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    mockPermissions();
     setCurrentSelection.mockReset();
     clearSelection.mockReset();
     openContainerSidebar.mockReset();
@@ -95,15 +98,11 @@ describe('OutlineAlignSidebar', () => {
     );
   });
 
-  it('renders ContentTagsDrawer in read-only mode when user cannot manage tags', () => {
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      canManageTags: false,
-      isLoading: false,
-      isAuthzEnabled: false,
-    } as ReturnType<typeof useCourseUserPermissions>);
+  it('renders ContentTagsDrawer in read-only mode when user cannot manage tags', async () => {
+    mockPermissions(false);
     render(<OutlineAlignSidebar />);
 
-    expect(screen.getByTestId('content-tags-drawer')).toHaveTextContent(
+    expect(await screen.findByTestId('content-tags-drawer')).toHaveTextContent(
       'drawer-mock-block-v1:test+course+run+type@sequential+block@seq1-component-true',
     );
   });
diff --git a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx
index b1d1bdf829..7eb966f9fd 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.test.tsx
@@ -1,16 +1,11 @@
-import { fireEvent, initializeMocks, render, screen } from '@src/testUtils';
-import { useCourseUserPermissions } from '@src/authz/hooks';
+import { initializeMocks, render, screen, userEvent } from '@src/testUtils';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { mockContentTaxonomyTagsData } from '@src/content-tags-drawer/data/api.mocks';
 import { CourseInfoSidebar } from './CourseInfoSidebar';
 
 const courseId = mockContentTaxonomyTagsData.otherTagsId;
 
-jest.mock('@src/authz/hooks', () => ({
-  ...jest.requireActual('@src/authz/hooks'),
-  useCourseUserPermissions: jest.fn(),
-}));
-
 jest.mock('@src/course-outline/data/apiHooks', () => ({
   ...jest.requireActual('@src/course-outline/data/apiHooks'),
   useCourseDetails: () => ({ data: { title: 'Test Course' } }),
@@ -30,6 +25,17 @@ jest.mock('../OutlineSidebarContext', () => ({
 
 mockContentTaxonomyTagsData.applyMock();
 
+let validateUserPermissionsMock: ReturnType<typeof initializeMocks>['validateUserPermissionsMock'];
+
+/**
+ * Authz is only consulted when its waffle flag is on; with the flag off every permission is
+ * granted, so only the restricted cases need to enable it.
+ */
+const mockPermissions = (canManageTags = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canManageTags });
+  validateUserPermissionsMock.mockResolvedValue({ canManageTags });
+};
+
 const renderComponent = () =>
   render(<CourseInfoSidebar />, {
     extraWrapper: ({ children }) => (
@@ -41,32 +47,26 @@ const renderComponent = () =>
 
 describe('<CourseInfoSidebar />', () => {
   beforeEach(() => {
-    initializeMocks();
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      canManageTags: true,
-      isLoading: false,
-      isAuthzEnabled: false,
-    } as ReturnType<typeof useCourseUserPermissions>);
+    const mocks = initializeMocks();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    mockPermissions();
   });
 
   it('shows the Manage tags action when user can manage tags', async () => {
+    const user = userEvent.setup();
     renderComponent();
     expect(await screen.findByText('Taxonomy Alignments')).toBeInTheDocument();
 
     const taxonomySection = screen.getByText('Taxonomy Alignments').closest('.pgn__hstack') as HTMLElement;
     const toggle = taxonomySection.querySelector('.dropdown button') as HTMLButtonElement;
     expect(toggle).not.toBeNull();
-    fireEvent.click(toggle);
+    await user.click(toggle);
 
     expect(await screen.findByText('Manage tags')).toBeInTheDocument();
   });
 
   it('hides the Manage tags action when user cannot manage tags', async () => {
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      canManageTags: false,
-      isLoading: false,
-      isAuthzEnabled: false,
-    } as ReturnType<typeof useCourseUserPermissions>);
+    mockPermissions(false);
     renderComponent();
     expect(await screen.findByText('Taxonomy Alignments')).toBeInTheDocument();
 
diff --git a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
index 54f6ce7f34..d5298a23a5 100644
--- a/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
+++ b/src/course-outline/outline-sidebar/info-sidebar/InfoSidebar.test.tsx
@@ -1,10 +1,10 @@
-import { fireEvent, initializeMocks, render, screen } from '@src/testUtils';
+import { initializeMocks, render, screen, userEvent } from '@src/testUtils';
 import { getCourseSettingsApiUrl } from '@src/data/api';
 import type { SelectionState } from '@src/data/types';
 import { CourseOutlineProvider } from '@src/course-outline/CourseOutlineContext';
 import { OutlineSidebarProvider } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
 import { getXBlockApiUrl } from '@src/course-outline/data/api';
-import userEvent from '@testing-library/user-event';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { InfoSidebar } from './InfoSidebar';
 
 const mockDuplicateItem = { mutate: jest.fn() };
@@ -86,20 +86,16 @@ jest.mock('@src/search-manager', () => ({
   useGetBlockTypes: () => ({ data: [] }),
 }));
 
-// Mirrors the real hook when authz is disabled (every permission granted), except for
-// `canManageTags`, which each test drives to check the taxonomy section's Manage tags action.
-let mockCanManageTags: boolean;
-jest.mock('@src/authz/hooks', () => ({
-  ...jest.requireActual('@src/authz/hooks'),
-  useCourseUserPermissions: (_courseId: string, permissions: Record<string, unknown>) => ({
-    isLoading: false,
-    isAuthzEnabled: false,
-    ...Object.keys(permissions).reduce(
-      (acc, key) => ({ ...acc, [key]: key === 'canManageTags' ? mockCanManageTags : true }),
-      {},
-    ),
-  }),
-}));
+let validateUserPermissionsMock: ReturnType<typeof initializeMocks>['validateUserPermissionsMock'];
+
+/**
+ * Authz is only consulted when its waffle flag is on; with the flag off every permission is
+ * granted, so only the restricted cases need to enable it.
+ */
+const mockPermissions = (canManageTags = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canManageTags });
+  validateUserPermissionsMock.mockResolvedValue({ canManageTags });
+};
 
 const renderComponent = () =>
   render(<InfoSidebar />, {
@@ -149,7 +145,7 @@ function describeSidebarMenus(config: SidebarMenuConfig): void {
       await renderMenu();
 
       const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-      fireEvent.click(menuToggle);
+      await user.click(menuToggle);
 
       const deleteBtn = await screen.findByText('Delete');
       await user.click(deleteBtn);
@@ -162,7 +158,7 @@ function describeSidebarMenus(config: SidebarMenuConfig): void {
       await renderMenu();
 
       const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-      fireEvent.click(menuToggle);
+      await user.click(menuToggle);
 
       const duplicateBtn = await screen.findByText('Duplicate');
       await user.click(duplicateBtn);
@@ -180,7 +176,7 @@ function describeSidebarMenus(config: SidebarMenuConfig): void {
       await renderMenu(withUpstream);
 
       const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-      fireEvent.click(menuToggle);
+      await user.click(menuToggle);
 
       const unlinkBtn = await screen.findByText('Unlink from Library');
       await user.click(unlinkBtn);
@@ -202,7 +198,7 @@ function describeSidebarMenus(config: SidebarMenuConfig): void {
       await renderMenu(withUpstream);
 
       const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-      fireEvent.click(menuToggle);
+      await user.click(menuToggle);
 
       const viewLibBtn = await screen.findByText('View in Library');
       await user.click(viewLibBtn);
@@ -218,6 +214,8 @@ describe('InfoSidebar component', () => {
   beforeEach(() => {
     const mocks = initializeMocks();
     axiosMock = mocks.axiosMock;
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    mockPermissions();
     openDeleteModal.mockClear();
     openUnlinkModal.mockClear();
     mockDuplicateItem.mutate.mockClear();
@@ -231,7 +229,6 @@ describe('InfoSidebar component', () => {
     mockOpenContainerInfoSidebar.mockClear();
     mockClearSelection.mockClear();
     mockSections = [];
-    mockCanManageTags = true;
   });
 
   it('renders InfoSidebar with course info if selectedContainerState is undefined', async () => {
@@ -401,17 +398,18 @@ describe('InfoSidebar component', () => {
     };
 
     it('shows the Manage tags action when the user can manage tags', async () => {
+      const user = userEvent.setup();
       const taxonomySection = await renderTaxonomySection();
 
       const toggle = taxonomySection.querySelector('.dropdown button') as HTMLButtonElement;
       expect(toggle).not.toBeNull();
-      fireEvent.click(toggle);
+      await user.click(toggle);
 
       expect(await screen.findByText('Manage tags')).toBeInTheDocument();
     });
 
     it('hides the Manage tags action when the user cannot manage tags', async () => {
-      mockCanManageTags = false;
+      mockPermissions(false);
       const taxonomySection = await renderTaxonomySection();
 
       expect(taxonomySection.querySelector('.dropdown')).toBeNull();
@@ -510,7 +508,7 @@ describe('InfoSidebar component', () => {
       await renderUnitMenu();
 
       const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-      fireEvent.click(menuToggle);
+      await user.click(menuToggle);
 
       const copyLocationBtn = await screen.findByText('Copy Location ID');
       await user.click(copyLocationBtn);
@@ -567,7 +565,7 @@ describe('InfoSidebar component', () => {
         await renderDraggableUnitMenu();
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         const moveUpBtn = await screen.findByText('Move Up');
         await user.click(moveUpBtn);
@@ -584,7 +582,7 @@ describe('InfoSidebar component', () => {
         await renderDraggableUnitMenu();
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         const moveDownBtn = await screen.findByText('Move Down');
         await user.click(moveDownBtn);
@@ -709,7 +707,7 @@ describe('InfoSidebar component', () => {
         await renderDraggableSubsectionMenu();
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         const moveUpBtn = await screen.findByText('Move Up');
         await user.click(moveUpBtn);
@@ -726,7 +724,7 @@ describe('InfoSidebar component', () => {
         await renderDraggableSubsectionMenu();
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         const moveDownBtn = await screen.findByText('Move Down');
         await user.click(moveDownBtn);
@@ -783,6 +781,7 @@ describe('InfoSidebar component', () => {
       };
 
       it('renders Move Up/Down as disabled when index is undefined', async () => {
+        const user = userEvent.setup();
         mockSections = [makeMovableSection(sectionId)];
         selectedContainerState = { currentId: sectionId, sectionId };
         axiosMock.onGet(getXBlockApiUrl(sectionId)).reply(200, draggableSectionData);
@@ -790,7 +789,7 @@ describe('InfoSidebar component', () => {
         await screen.findByText(draggableSectionData.displayName);
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         expect(await screen.findByText('Move Up')).toBeInTheDocument();
         expect(screen.getByText('Move Down')).toBeInTheDocument();
@@ -801,7 +800,7 @@ describe('InfoSidebar component', () => {
         await renderDraggableSectionMenu();
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         const moveUpBtn = await screen.findByText('Move Up');
         await user.click(moveUpBtn);
@@ -818,7 +817,7 @@ describe('InfoSidebar component', () => {
         await renderDraggableSectionMenu();
 
         const menuToggle = screen.getByRole('button', { name: 'Item Menu' });
-        fireEvent.click(menuToggle);
+        await user.click(menuToggle);
 
         const moveDownBtn = await screen.findByText('Move Down');
         await user.click(moveDownBtn);
diff --git a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
index 0e1e957986..e5c1e2e03d 100644
--- a/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
+++ b/src/course-unit/unit-sidebar/UnitAlignSidebar.test.tsx
@@ -1,5 +1,5 @@
 import { render, screen, initializeMocks } from '@src/testUtils';
-import { useCourseUserPermissions } from '@src/authz/hooks';
+import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
 import { UnitAlignSidebar } from './UnitAlignSidebar';
@@ -13,16 +13,22 @@ jest.mock('@src/content-tags-drawer', () => ({
   )),
 }));
 
-jest.mock('@src/authz/hooks', () => ({
-  ...jest.requireActual('@src/authz/hooks'),
-  useCourseUserPermissions: jest.fn(),
-}));
-
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
   useParams: () => ({ blockId: 'unit-id-1' }),
 }));
 
+let validateUserPermissionsMock: ReturnType<typeof initializeMocks>['validateUserPermissionsMock'];
+
+/**
+ * Authz is only consulted when its waffle flag is on; with the flag off every permission is
+ * granted, so only the restricted cases need to enable it.
+ */
+const mockPermissions = (canManageTags = true) => {
+  mockWaffleFlags({ enableAuthzCourseAuthoring: !canManageTags });
+  validateUserPermissionsMock.mockResolvedValue({ canManageTags });
+};
+
 const renderComponent = () =>
   render(
     <CourseAuthoringProvider courseId="course-v1:test+course+run">
@@ -36,12 +42,9 @@ const renderComponent = () =>
 
 describe('OutlineAlignSidebar', () => {
   beforeEach(() => {
-    initializeMocks();
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      canManageTags: true,
-      isLoading: false,
-      isAuthzEnabled: false,
-    } as ReturnType<typeof useCourseUserPermissions>);
+    const mocks = initializeMocks();
+    validateUserPermissionsMock = mocks.validateUserPermissionsMock;
+    mockPermissions();
   });
 
   it('renders ContentTagsDrawer with the correct id and variant', () => {
@@ -55,15 +58,11 @@ describe('OutlineAlignSidebar', () => {
     );
   });
 
-  it('renders ContentTagsDrawer in read-only mode when user cannot manage tags', () => {
-    jest.mocked(useCourseUserPermissions).mockReturnValue({
-      canManageTags: false,
-      isLoading: false,
-      isAuthzEnabled: false,
-    } as ReturnType<typeof useCourseUserPermissions>);
+  it('renders ContentTagsDrawer in read-only mode when user cannot manage tags', async () => {
+    mockPermissions(false);
     renderComponent();
 
-    expect(screen.getByTestId('content-tags-drawer')).toHaveTextContent(
+    expect(await screen.findByTestId('content-tags-drawer')).toHaveTextContent(
       'drawer-mock-unit-id-1-component-true',
     );
   });

From 6a3a43010e996586eb392d7f97d33e0fb0dcf3df Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 8 Sep 2026 15:52:32 +1000
Subject: [PATCH 7/7] refactor(i18n): use declarative api for messages when
 possible

---
 .../ContentTagsCollapsible.tsx                | 13 ++++----
 .../tags-sidebar-controls/TagsSidebarBody.tsx |  5 ++--
 src/course-outline/card-header/CardHeader.tsx | 30 ++++++++++++-------
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/content-tags-drawer/ContentTagsCollapsible.tsx b/src/content-tags-drawer/ContentTagsCollapsible.tsx
index 47a72b1f53..d44f919624 100644
--- a/src/content-tags-drawer/ContentTagsCollapsible.tsx
+++ b/src/content-tags-drawer/ContentTagsCollapsible.tsx
@@ -19,7 +19,7 @@ import {
   Icon,
 } from '@openedx/paragon';
 import { Tag, KeyboardArrowDown, KeyboardArrowUp } from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { debounce } from 'lodash';
 
 import SelectableBox from '../editors/sharedComponents/SelectableBox';
@@ -127,7 +127,7 @@ const CustomMenu = (props: MenuProps<StagedTagData, true>) => {
               className="tags-drawer-cancel-button"
               onClick={handleCancelStagedTags}
             >
-              {intl.formatMessage(messages.collapsibleCancelStagedTagsButtonText)}
+              <FormattedMessage {...messages.collapsibleCancelStagedTagsButtonText} />
             </Button>
             <Button
               tabIndex={0}
@@ -137,7 +137,7 @@ const CustomMenu = (props: MenuProps<StagedTagData, true>) => {
               disabled={!stagedTags.length}
               onClick={handleCommitStagedTags}
             >
-              {intl.formatMessage(messages.collapsibleAddStagedTagsButtonText)}
+              <FormattedMessage {...messages.collapsibleAddStagedTagsButtonText} />
             </Button>
           </div>
         </div>
@@ -173,7 +173,6 @@ const CustomIndicatorsContainer = (props: IndicatorsContainerProps<StagedTagData
     selectInlineAddRef,
   } = props.selectProps;
   const stagedTags: readonly StagedTagData[] = Array.isArray(value) ? value : [];
-  const intl = useIntl();
   return (
     <components.IndicatorsContainer {...props}>
       {(stagedTags.length > 0 && (
@@ -190,7 +189,7 @@ const CustomIndicatorsContainer = (props: IndicatorsContainerProps<StagedTagData
           tabIndex={0}
           onKeyDown={disableActionKeys} // To prevent navigating staged tags when button focused
         >
-          {intl.formatMessage(messages.collapsibleInlineAddStagedTagsButtonText)}
+          <FormattedMessage {...messages.collapsibleInlineAddStagedTagsButtonText} />
         </Button>
       )) || null}
       {props.children}
@@ -442,7 +441,7 @@ const ContentTagsCollapsible = ({
             && (
               <div className="mb-3" key={taxonomyId}>
                 <p className="text-gray-500">
-                  {intl.formatMessage(messages.collapsibleNoTagsAddedText)}
+                  <FormattedMessage {...messages.collapsibleNoTagsAddedText} />
                   {canTagObject && (
                     <Button
                       tabIndex={0}
@@ -452,7 +451,7 @@ const ContentTagsCollapsible = ({
                       className="text-info-500 add-tags-button"
                       onClick={toEditMode}
                     >
-                      {intl.formatMessage(messages.collapsibleAddStagedTagsButtonText)}
+                      <FormattedMessage {...messages.collapsibleAddStagedTagsButtonText} />
                     </Button>
                   )}
                 </p>
diff --git a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx
index 595a0daa8b..d907828adc 100644
--- a/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx
+++ b/src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx
@@ -7,7 +7,7 @@ import {
   Icon,
 } from '@openedx/paragon';
 import { ArrowDropDown, ArrowDropUp } from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { useParams } from 'react-router-dom';
 import { ContentTagsDrawerSheet } from '..';
 
@@ -24,7 +24,6 @@ interface TagsSidebarBodyProps {
 }
 
 const TagsSidebarBody = ({ readOnly, canManageTags = true }: TagsSidebarBodyProps) => {
-  const intl = useIntl();
   const [showManageTags, setShowManageTags] = useState(false);
   const contentId = useParams().blockId;
   const onClose = () => setShowManageTags(false);
@@ -106,7 +105,7 @@ const TagsSidebarBody = ({ readOnly, canManageTags = true }: TagsSidebarBodyProp
               onClick={() => setShowManageTags(true)}
               disabled={readOnly}
             >
-              {intl.formatMessage(messages.manageTagsButton)}
+              <FormattedMessage {...messages.manageTagsButton} />
             </Button>
           )}
         </Stack>
diff --git a/src/course-outline/card-header/CardHeader.tsx b/src/course-outline/card-header/CardHeader.tsx
index 5ee4916b1a..663df1ec0c 100644
--- a/src/course-outline/card-header/CardHeader.tsx
+++ b/src/course-outline/card-header/CardHeader.tsx
@@ -292,7 +292,11 @@ const CardHeader = ({
                     className="item-card-button-icon"
                     data-testid={`${namePrefix}-edit-button`}
                     alt={intl.formatMessage(messages.altButtonRename)}
-                    tooltipContent={<div>{intl.formatMessage(messages.altButtonRename)}</div>}
+                    tooltipContent={
+                      <div>
+                        <FormattedMessage {...messages.altButtonRename} />
+                      </div>
+                    }
                     iconAs={EditIcon}
                     onClick={onEditClick}
                     disabled={editMutation.isPending}
@@ -313,7 +317,11 @@ const CardHeader = ({
               data-testid={`${namePrefix}-sync-button`}
               alt={intl.formatMessage(messages.readyToSyncButtonAlt)}
               iconAs={SyncIcon}
-              tooltipContent={<div>{intl.formatMessage(messages.readyToSyncButtonAlt)}</div>}
+              tooltipContent={
+                <div>
+                  <FormattedMessage {...messages.readyToSyncButtonAlt} />
+                </div>
+              }
               onClick={onClickSync}
             />
           )}
@@ -337,7 +345,7 @@ const CardHeader = ({
                     href={fullProctoringExamConfigurationLink()}
                     externalLinkTitle={intl.formatMessage(messages.proctoringLinkTooltip)}
                   >
-                    {intl.formatMessage(messages.menuProctoringLinkText)}
+                    <FormattedMessage {...messages.menuProctoringLinkText} />
                   </Dropdown.Item>
                 )}
                 {canPublishCourseContent &&
@@ -347,7 +355,7 @@ const CardHeader = ({
                       disabled={isDisabledPublish}
                       onClick={onClickPublish}
                     >
-                      {intl.formatMessage(messages.menuPublish)}
+                      <FormattedMessage {...messages.menuPublish} />
                     </Dropdown.Item>
                   )}
                 <Dropdown.Item
@@ -355,7 +363,7 @@ const CardHeader = ({
                   disabled={editMutation.isPending}
                   onClick={onConfigureClick}
                 >
-                  {intl.formatMessage(messages.menuConfigure)}
+                  <FormattedMessage {...messages.menuConfigure} />
                 </Dropdown.Item>
                 {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && canManageTags && (
                   <Dropdown.Item
@@ -363,13 +371,13 @@ const CardHeader = ({
                     disabled={editMutation.isPending}
                     onClick={openManageTagsDrawer}
                   >
-                    {intl.formatMessage(messages.menuManageTags)}
+                    <FormattedMessage {...messages.menuManageTags} />
                   </Dropdown.Item>
                 )}
 
                 {isVertical && (
                   <Dropdown.Item onClick={onClickCopy}>
-                    {intl.formatMessage(messages.menuCopy)}
+                    <FormattedMessage {...messages.menuCopy} />
                   </Dropdown.Item>
                 )}
                 {actions.duplicable && (
@@ -377,7 +385,7 @@ const CardHeader = ({
                     data-testid={`${namePrefix}-card-header__menu-duplicate-button`}
                     onClick={onClickDuplicate}
                   >
-                    {intl.formatMessage(messages.menuDuplicate)}
+                    <FormattedMessage {...messages.menuDuplicate} />
                   </Dropdown.Item>
                 )}
                 {actions.draggable && (
@@ -387,14 +395,14 @@ const CardHeader = ({
                       onClick={onClickMoveUp}
                       disabled={!actions.allowMoveUp}
                     >
-                      {intl.formatMessage(messages.menuMoveUp)}
+                      <FormattedMessage {...messages.menuMoveUp} />
                     </Dropdown.Item>
                     <Dropdown.Item
                       data-testid={`${namePrefix}-card-header__menu-move-down-button`}
                       onClick={onClickMoveDown}
                       disabled={!actions.allowMoveDown}
                     >
-                      {intl.formatMessage(messages.menuMoveDown)}
+                      <FormattedMessage {...messages.menuMoveDown} />
                     </Dropdown.Item>
                   </>
                 )}
@@ -407,7 +415,7 @@ const CardHeader = ({
                     className="allow-hover-on-disabled"
                     title={!actions.unlinkable ? intl.formatMessage(messages.menuUnlinkDisabledTooltip) : undefined}
                   >
-                    {intl.formatMessage(messages.menuUnlink)}
+                    <FormattedMessage {...messages.menuUnlink} />
                   </Dropdown.Item>
                 )}
                 {actions.deletable && (