Task - Manage tags view (Editor/Auditor)

[MaferMazu]

Description

The idea is to implement in authoring what it looks like to have read-only permissions.

Approved design

https://www.figma.com/design/onU2END2OXaF7RRLWEHsZI/AuthZ---v2?node-id=9145-5836&t=JZXQnlvqwQjdT21C-4

[MaferMazu]

When refining this card, take into account: openedx/frontend-app-authoring#3036

[bra-i-am]

@MaferMazu, I have a question. These are blocked:

Becasue:

• We need platform-wide scoped permissions, so I guess this is required feat: add platform-level glob scope #289
• The permission is being removed: Remove the manage taxonomy permission from the UI #309

---

Hide "Manage Tags" actions for Course Auditor

Permission used: courses.manage_tags (backend action string, course-scoped).
Pattern: useCourseUserPermissions(courseId, permissions)

Frontend bugs (see UI location 4)

Bug A — canTagObject hardcoded to false for otherTaxonomies (ContentTagsDrawerHelper.jsx). The can_tag_object field from object_tags was available but unused.

Bug B — The merge useEffect in ContentTagsDrawerHelper.jsx only merged staged tags into fetchedTaxonomies entries. When a taxonomy was in otherTaxonomies (taxonomy list empty), staged tags were discarded and never reached appliedContentTagsTree → "Add" appeared to work but nothing appeared on screen.

Bug C — The tag selector <Select> in ContentTagsCollapsible.jsx was gated only on isEditMode, not on canTagObject. This showed an interactive selector for taxonomies where the user has no permission.

---

Files to change

1. src/authz/constants.ts

export const COURSE_PERMISSIONS = {
  ...
  MANAGE_TAGS: 'courses.manage_tags',
};

2. src/authz/permissionHelpers.ts

export const getTagsPermissions = (courseId: string) => ({
  canManageTags: {
    action: COURSE_PERMISSIONS.MANAGE_TAGS,
    scope: courseId,
  },
});

---

UI location 1 — Course Outline info sidebar (3-dot menu on Taxonomy Alignments section)

File: src/course-outline/outline-sidebar/info-sidebar/CourseInfoSidebar.tsx

Resolve permission in DetailsTab and make the actions array conditional:

const DetailsTab = () => {
  const { courseId } = useCourseAuthoringContext();
  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));

  ...

  return (
    <SidebarSection
      title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
      icon={Tag}
      actions={canManageTags ? [{
        label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
        onClick: openManageTagsDrawer,
      }] : []}
    >
      <ContentTagsSnippet contentId={courseId} />
    </SidebarSection>
  );
};

---

UI location 2 — Course Outline Align sidebar ("Manage tags" button when unit selected)

Files: OutlineAlignSidebar.tsx → AlignSidebar.tsx

The "Manage tags" button is inside ContentTagsComponentVariantFooter, already gated on !readOnly. Only prop-threading is needed.

src/course-outline/outline-sidebar/OutlineAlignSidebar.tsx — resolve and pass down:

export const OutlineAlignSidebar = () => {
  const { courseId } = useCourseAuthoringContext();
  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));

  return (
    <AlignSidebar
      title={...}
      contentId={sidebarContentId}
      onBackBtnClick={...}
      readOnly={!canManageTags}
    />
  );
};

src/generic/sidebar/AlignSidebar.tsx — add and forward readOnly:

export interface AlignSidebarProps {
  contentId: string;
  title: string;
  onBackBtnClick?: () => void;
  readOnly?: boolean;
}

export const AlignSidebar = ({ contentId, title, onBackBtnClick, readOnly = false }: AlignSidebarProps) => (
  <div>
    <SidebarTitle title={title} icon={SchoolOutline} onBackBtnClick={onBackBtnClick} />
    <ContentTagsDrawer id={contentId} variant="component" readOnly={readOnly} />
  </div>
);

---

UI location 3 — Course Unit legacy sidebar ("Manage tags" button in Unit tags section)

Files: LegacySidebar → TagsSidebarControls → TagsSidebarBody

src/course-unit/legacy-sidebar/index.tsx — resolve and pass down:

const LegacySidebar = ({ unitTitle, isUnitVerticalType, xBlocks, readOnly, isSplitTestType }) => {
  const { courseId } = useCourseAuthoringContext();
  const { canManageTags } = useCourseUserPermissions(courseId, getTagsPermissions(courseId));

  return (
    <Stack gap={3} className="px-4 mw-sm">
      {isUnitVerticalType && (
        <PluginSlot ...>
          {getConfig().ENABLE_TAGGING_TAXONOMY_PAGES === 'true' && (
            <SidebarSection className="tags-sidebar">
              <TagsSidebarControls readOnly={readOnly} canManageTags={canManageTags} />
            </SidebarSection>
          )}
        </PluginSlot>
      )}
    </Stack>
  );
};

src/content-tags-drawer/tags-sidebar-controls/index.tsx — forward prop:

interface TagsSidebarControlsProps {
  readOnly: boolean;
  canManageTags: boolean;
}

const TagsSidebarControls = ({ readOnly, canManageTags }: TagsSidebarControlsProps) => (
  <>
    <TagsSidebarHeader />
    <TagsSidebarBody readOnly={readOnly} canManageTags={canManageTags} />
  </>
);

src/content-tags-drawer/tags-sidebar-controls/TagsSidebarBody.tsx — hide button:

interface TagsSidebarBodyProps {
  readOnly: boolean;
  canManageTags: boolean;
}

const TagsSidebarBody = ({ readOnly, canManageTags }: TagsSidebarBodyProps) => {
  ...
  return (
    <Card.Body ...>
      <Stack>
        ...
        {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>
  );
};

---

UI location 4 — Content Tags Drawer: fix Add button for authz users (Bugs A, B, C)

Files: content-tags-drawer/ContentTagsDrawerHelper.jsx → content-tags-drawer/ContentTagsCollapsible.jsx

src/content-tags-drawer/ContentTagsDrawerHelper.jsx — use canTagObject from API instead of hardcoding false, and extend the staged-tag merge to cover otherTaxonomies:

// Bug A fix — line ~113: use actual value from object_tags response
otherTaxonomiesList.push({
  canTagObject: contentTaxonomyTags.canTagObject,  // was: false
  ...
});

// Bug B fix — line ~334: add else-if branch so staged tags are merged for otherTaxonomies too
Object.keys(globalStagedContentTags).forEach((taxonomyId) => {
  if (mergedTags[taxonomyId]) {
    // existing logic (unchanged)
  } 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],
    ];
  }
});

src/content-tags-drawer/ContentTagsCollapsible.jsx — Bug C fix: gate the tag selector on canTagObject:

// was: {isEditMode && (
{isEditMode && canTagObject && (
  <Select ... />
)}