feat: Enable menus in unit info sidebar in the unit page

Author: ChrisChV

src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 import { isEmpty } from 'lodash';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -26,6 +26,7 @@ import { PublishButon } from './PublishButon';
 import messages from '../messages';
 import { InfoSection } from './InfoSection';
 import { useClipboard } from '@src/generic/clipboard';
+import { ToastContext } from '@src/generic/toast-context';
 
 export const UnitSidebar = () => {
   const intl = useIntl();
@@ -48,6 +49,7 @@ export const UnitSidebar = () => {
     openUnlinkModal,
   } = useCourseAuthoringContext();
   const { copyToClipboard } = useClipboard();
+  const { showToast } = useContext(ToastContext);
 
   const handlePublish = () => {
     if (unitData?.hasChanges) {
@@ -124,7 +126,9 @@ export const UnitSidebar = () => {
     // Extract the location ID: the part after "block@" at the end of the usage key
     // e.g. "block-v1:org+course+run+type@vertical+block@abc123" → "abc123"
     const locationId = unitId.match(/block@(.+)$/)?.[1];
-    if (!locationId) { return; }
+    if (!locationId) {
+      return;
+    }
 
     if (navigator.clipboard) {
       // Modern approach: requires HTTPS (secure context)
@@ -139,6 +143,7 @@ export const UnitSidebar = () => {
       document.execCommand('copy'); // eslint-disable-line deprecation/deprecation
       document.body.removeChild(textarea);
     }
+    showToast(intl.formatMessage(messages.locationCopiedText));
   };
 
   return (

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

@@ -175,6 +175,11 @@ const messages = defineMessages({
     defaultMessage: '{name} is a library {category}. Content cannot be added to Library referenced {category}s.',
     description: 'Alert displayed in sidebar when author tries to add content in library referenced blocks',
   },
+  locationCopiedText: {
+    id: 'course-authoring.course-outline.sidebar.unit.copied-location',
+    defaultMessage: 'Location ID saved in the Clipboard',
+    description: 'Toast messages when the user copied an unit location ID',
+  },
 });
 
 export default messages;

src/course-unit/unit-sidebar/unit-info/UnitInfoSidebar.tsx

@@ -1,24 +1,34 @@
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { ComponentCountSnippet, getItemIcon } from '@src/generic/block-type-utils';
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
-import { useEffect, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 import { Tag } from '@openedx/paragon/icons';
 import { ContentTagsSnippet } from '@src/content-tags-drawer';
 import configureMessages from '@src/generic/configure-modal/messages';
 import {
   Button, ButtonGroup, Tab, Tabs,
 } from '@openedx/paragon';
+import { useToggle } from '@openedx/paragon';
 import { useDispatch, useSelector } from 'react-redux';
 import { useIframe } from '@src/generic/hooks/context/hooks';
 import { AccessEditComponent, DiscussionEditComponent } from '@src/generic/configure-modal/UnitTab';
 import { Form, Formik } from 'formik';
 import { getCourseUnitData, getCourseVerticalChildren } from '@src/course-unit/data/selectors';
 import { messageTypes, PUBLISH_TYPES, UNIT_VISIBILITY_STATES } from '@src/course-unit/constants';
-import { editCourseUnitVisibilityAndData } from '@src/course-unit/data/thunk';
+import { editCourseUnitVisibilityAndData, fetchCourseSectionVerticalData, fetchCourseVerticalChildrenData } from '@src/course-unit/data/thunk';
 import PublishControls from './PublishControls';
 import { useUnitSidebarContext } from '../UnitSidebarContext';
 import messages from './messages';
+import { getLibraryId } from '@src/generic/key-utils';
+import { useClipboard } from '@src/generic/clipboard';
+import { ToastContext } from '@src/generic/toast-context';
+import { UnlinkModal } from '@src/generic/unlink-modal';
+import { useUnlinkDownstream } from '@src/generic/unlink-modal/data/apiHooks';
+import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
+import { useQueryClient } from '@tanstack/react-query';
+import { courseOutlineQueryKeys, useDeleteCourseItem } from '@src/course-outline/data/apiHooks';
+import DeleteModal from '@src/generic/delete-modal/DeleteModal';
 
 /**
  * Component to show unit details: Publish status, Component counts and Content Tags.
@@ -193,17 +203,83 @@ const UnitInfoSettings = () => {
  */
 export const UnitInfoSidebar = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const { copyToClipboard } = useClipboard();
   const currentItemData = useSelector(getCourseUnitData);
   const {
     currentTabKey,
     setCurrentTabKey,
   } = useUnitSidebarContext();
+  const { showToast } = useContext(ToastContext);
+  const { courseId } = useCourseAuthoringContext();
+
+  const [isUnlinkModalOpen, openUnlinkModal, closeUnlinkModal] = useToggle(false);
+  const [isDeleteModalOpen, openDeleteModal, closeDeleteModal] = useToggle(false);
+  const { mutateAsync: unlinkDownstream } = useUnlinkDownstream();
+  const { mutateAsync: deleteCourseItem } = useDeleteCourseItem();
+  const queryClient = useQueryClient();
+
+  const sequenceId = currentItemData?.ancestorInfo?.ancestors?.[0]?.id;
+  const sectionId = currentItemData?.ancestorInfo?.ancestors?.[1]?.id;
+
+  const handleDeleteSubmit = async () => {
+    await deleteCourseItem({
+      itemId: currentItemData.id,
+      subsectionId: sequenceId,
+      sectionId,
+    }, {
+      onSuccess: () => {
+        closeDeleteModal();
+        navigate(`/course/${courseId}`);
+      },
+    });
+  };
+
+  const handleUnlinkSubmit = async () => {
+    await unlinkDownstream({
+      downstreamBlockId: currentItemData.id,
+      subsectionId: sequenceId,
+      sectionId,
+    }, {
+      onSuccess: () => {
+        closeUnlinkModal();
+        queryClient.invalidateQueries({ queryKey: courseOutlineQueryKeys.courseItemId(currentItemData.id) });
+        dispatch(fetchCourseSectionVerticalData(currentItemData.id, sequenceId));
+        dispatch(fetchCourseVerticalChildrenData(currentItemData.id, false));
+      },
+    });
+  };
 
   useEffect(() => {
     // Set default Tab key
     setCurrentTabKey('details');
   }, []);
 
+  const handleCopyLocation = () => {
+    // Extract the location ID: the part after "block@" at the end of the usage key
+    // e.g. "block-v1:org+course+run+type@vertical+block@abc123" → "abc123"
+    const locationId = currentItemData.id.match(/block@(.+)$/)?.[1];
+    if (!locationId) {
+      return;
+    }
+
+    if (navigator.clipboard) {
+      // Modern approach: requires HTTPS (secure context)
+      void navigator.clipboard.writeText(locationId);
+    } else {
+      // Fallback for HTTP (non-secure) dev environments
+      // Note: execCommand is deprecated but still widely supported as fallback
+      const textarea = document.createElement('textarea');
+      textarea.value = locationId;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy'); // eslint-disable-line deprecation/deprecation
+      document.body.removeChild(textarea);
+    }
+    showToast(intl.formatMessage(messages.locationCopiedText));
+  };
+
   return (
     <>
       <SidebarTitle
@@ -212,11 +288,17 @@ export const UnitInfoSidebar = () => {
         menuProps={{
           itemId: currentItemData.id,
           index: -1,
-          onClickUnlink: () => {},
-          onClickDelete: () => {},
-          onClickViewLibrary: () => {},
-          onClickCopy: () => {},
-          onClickCopyLocation: () => {},
+          onClickUnlink: openUnlinkModal,
+          onClickDelete: openDeleteModal,
+          onClickViewLibrary: () => {
+            const upstreamRef = currentItemData?.upstreamInfo?.upstreamRef;
+            if (upstreamRef) {
+              const libId = getLibraryId(upstreamRef);
+              navigate(`/library/${libId}/unit/${upstreamRef}`);
+            }
+          },
+          onClickCopy: () => copyToClipboard(currentItemData.id),
+          onClickCopyLocation: handleCopyLocation,
         }}
       />
       <Tabs
@@ -242,6 +324,19 @@ export const UnitInfoSidebar = () => {
           </div>
         </Tab>
       </Tabs>
+      <DeleteModal
+        isOpen={isDeleteModalOpen}
+        close={closeDeleteModal}
+        onDeleteSubmit={handleDeleteSubmit}
+        category="unit"
+      />
+      <UnlinkModal
+        isOpen={isUnlinkModalOpen}
+        close={closeUnlinkModal}
+        onUnlinkSubmit={handleUnlinkSubmit}
+        displayName={currentItemData.displayName}
+        category="vertical"
+      />
     </>
   );
 };

src/course-unit/unit-sidebar/unit-info/messages.ts

@@ -134,6 +134,11 @@ const messages = defineMessages({
     defaultMessage: 'Settings',
     description: 'Label for the settings tab of the unit info sidebar',
   },
+  locationCopiedText: {
+    id: 'course-authoring.unit-page.sidebar.info.copied-location',
+    defaultMessage: 'Location ID saved in the Clipboard',
+    description: 'Toast messages when the user copied an unit location ID',
+  },
 });
 
 export default messages;