feat: add manage tags action

Author: rpenido

src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx

@@ -1,7 +1,8 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { useToggle } from '@openedx/paragon';
 import { SchoolOutline, Tag } from '@openedx/paragon/icons';
 
-import { ContentTagsSnippet } from '@src/content-tags-drawer';
+import { ContentTagsDrawerSheet, ContentTagsSnippet } from '@src/content-tags-drawer';
 import { ComponentCountSnippet } from '@src/generic/block-type-utils';
 import { useGetBlockTypes } from '@src/search-manager';
 
@@ -18,6 +19,8 @@ export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {
     [`context_key = "${courseId}"`],
   );
 
+  const [isManageTagsDrawerOpen, openManageTagsDrawer, closeManageTagsDrawer] = useToggle(false);
+
   return (
     <div>
       <SidebarTitle
@@ -34,10 +37,21 @@ export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {
         <SidebarSection
           title={intl.formatMessage(messages.sidebarSectionTaxonomy)}
           icon={Tag}
+          actions={[
+            {
+              label: intl.formatMessage(messages.sidebarSectionTaxonomyManageTags),
+              onClick: openManageTagsDrawer,
+            },
+          ]}
         >
           <ContentTagsSnippet contentId={courseId} />
         </SidebarSection>
       </SidebarContent>
+      <ContentTagsDrawerSheet
+        id={courseId}
+        onClose={closeManageTagsDrawer}
+        showSheet={isManageTagsDrawerOpen}
+      />
     </div>
   );
 };

src/course-outline/outline-sidebar/messages.ts

@@ -83,6 +83,11 @@ const messages = defineMessages({
     defaultMessage: 'Taxonomy Alignments',
     description: 'Title of the taxonomy section in the sidebar',
   },
+  sidebarSectionTaxonomyManageTags: {
+    id: 'course-authoring.course-outline.sidebar.sidebar-section-taxonomy.manage-tags-action',
+    defaultMessage: 'Manage tags',
+    description: 'Action to open the tags drawer',
+  },
 });
 
 export default messages;

src/generic/sidebar/SidebarSection.tsx

@@ -1,10 +1,25 @@
-import { Icon, Stack } from '@openedx/paragon';
+import {
+  Dropdown,
+  Icon,
+  IconButton,
+  Stack,
+} from '@openedx/paragon';
+import { MoreVert } from '@openedx/paragon/icons';
 
 export interface SidebarSectionProps {
   /** Title of the section */
   title: string;
   /** Icon to be displayed in the section */
   icon?: React.ComponentType;
+  /** Actions to be displayed in the section */
+  actions?: [
+    {
+      /** Label of the action */
+      label: string;
+      /** Function to be called when the action is clicked */
+      onClick: () => void;
+    },
+  ];
   /** Content of the section */
   children: React.ReactNode;
 }
@@ -26,13 +41,35 @@ export interface SidebarSectionProps {
  * </SidebarSection>
  * ```
  */
-export const SidebarSection = ({ title, icon, children }: SidebarSectionProps) => (
+export const SidebarSection = ({
+  title, icon, actions, children,
+}: SidebarSectionProps) => (
   <Stack gap={2}>
     <Stack direction="horizontal" gap={2}>
       {icon && <Icon src={icon} className="mr-1 text-primary" size="sm" />}
       <h3 className="h5 font-weight-bold text-primary mb-0">
         {title}
       </h3>
+      {actions && (
+        <Dropdown className="ml-auto">
+          <Dropdown.Toggle
+            as={IconButton}
+            src={MoreVert}
+            iconAs={Icon}
+            size="sm"
+          />
+          <Dropdown.Menu>
+            {actions.map((action) => (
+              <Dropdown.Item
+                key={action.label}
+                onClick={action.onClick}
+              >
+                {action.label}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
+      )}
     </Stack>
     {children}
   </Stack>