feat(course-outline): add inline rename functionality for components in UnitCard (#101)

* feat(course-outline): enhance ComponentMenu and UnitCard with rename functionality

- Introduced a new inline rename feature for components in UnitCard, allowing users to edit component names directly.
- Updated ComponentMenu to manage menu state and actions more effectively, including closing menus when another is opened.
- Added tests to verify the new rename functionality and menu behavior.
- Enhanced styles for better UI/UX in the component layout.
- Added new messages for internationalization related to renaming components.

* fix(course-outline): simplify hooks by removing unitId parameter

- Updated hooks in AddComponentWidget, ComponentMenu, and UnitCard to eliminate the unitId parameter, streamlining their usage.
- Adjusted related components to ensure compatibility with the new hook signatures.
- Improved code readability and maintainability by reducing complexity in hook implementations.

Author: abhalsod-sonata

src/course-outline/unit-card/AddComponentWidget.tsx

@@ -51,7 +51,7 @@ const AddComponentWidget = ({
 }: AddComponentWidgetProps) => {
   const intl = useIntl();
   const { showToast } = useContext(ToastContext);
-  const { mutateAsync: createXBlock, isPending } = useCreateXBlockInUnit(unitId);
+  const { mutateAsync: createXBlock, isPending } = useCreateXBlockInUnit();
 
   // State for template selection modal – shown when a component type has multiple templates
   const [isModalOpen, setIsModalOpen] = useState(false);

src/course-outline/unit-card/ComponentMenu.test.tsx

@@ -1,6 +1,7 @@
 import {
   act, fireEvent, initializeMocks, render, screen, waitFor,
 } from '@src/testUtils';
+import { useState } from 'react';
 
 import cardHeaderMessages from '@src/course-outline/card-header/messages';
 import ComponentMenu from './ComponentMenu';
@@ -25,22 +26,33 @@ jest.mock('./data/hooks', () => ({
   }),
 }));
 
+const ComponentMenuHarness = (props: Partial<React.ComponentProps<typeof ComponentMenu>>) => {
+  const [openBlockId, setOpenBlockId] = useState<string | null>(null);
+  const blockId = props.blockId ?? 'block-v1:test+type@html+block@1';
+
+  return (
+    <ComponentMenu
+      unitId="block-v1:test+type@vertical+block@unit1"
+      blockId={blockId}
+      displayName="Test Component"
+      blockType="html"
+      actions={{
+        canCopy: true,
+        canDuplicate: true,
+        canDelete: true,
+        canMove: false,
+        canManageAccess: false,
+      }}
+      onActionComplete={mockOnActionComplete}
+      isMenuOpen={openBlockId === blockId}
+      onMenuToggle={setOpenBlockId}
+      {...props}
+    />
+  );
+};
+
 const renderComponentMenu = (props?: Partial<React.ComponentProps<typeof ComponentMenu>>) => render(
-  <ComponentMenu
-    unitId="block-v1:test+type@vertical+block@unit1"
-    blockId="block-v1:test+type@html+block@1"
-    displayName="Test Component"
-    blockType="html"
-    actions={{
-      canCopy: true,
-      canDuplicate: true,
-      canDelete: true,
-      canMove: false,
-      canManageAccess: false,
-    }}
-    onActionComplete={mockOnActionComplete}
-    {...props}
-  />,
+  <ComponentMenuHarness {...props} />,
 );
 
 describe('<ComponentMenu />', () => {
@@ -108,16 +120,62 @@ describe('<ComponentMenu />', () => {
   });
 
   it('does not render when no actions are available', () => {
-    renderComponentMenu({
-      actions: {
-        canCopy: false,
-        canDuplicate: false,
-        canDelete: false,
-        canMove: false,
-        canManageAccess: false,
-      },
-    });
+    render(
+      <ComponentMenuHarness
+        actions={{
+          canCopy: false,
+          canDuplicate: false,
+          canDelete: false,
+          canMove: false,
+          canManageAccess: false,
+        }}
+      />,
+    );
 
     expect(screen.queryByTestId('component-menu')).not.toBeInTheDocument();
   });
+
+  it('closes the menu when another component menu is opened', async () => {
+    const SharedMenus = () => {
+      const [openBlockId, setOpenBlockId] = useState<string | null>(null);
+      const sharedProps = {
+        unitId: 'block-v1:test+type@vertical+block@unit1',
+        displayName: 'Test Component',
+        blockType: 'html',
+        actions: {
+          canCopy: true,
+          canDuplicate: true,
+          canDelete: true,
+          canMove: false,
+          canManageAccess: true,
+        },
+        onActionComplete: mockOnActionComplete,
+        onMenuToggle: setOpenBlockId,
+      };
+
+      return (
+        <>
+          <ComponentMenu
+            {...sharedProps}
+            blockId="block-v1:test+type@html+block@1"
+            isMenuOpen={openBlockId === 'block-v1:test+type@html+block@1'}
+          />
+          <ComponentMenu
+            {...sharedProps}
+            blockId="block-v1:test+type@html+block@2"
+            isMenuOpen={openBlockId === 'block-v1:test+type@html+block@2'}
+          />
+        </>
+      );
+    };
+
+    render(<SharedMenus />);
+
+    const [firstToggle, secondToggle] = screen.getAllByTestId('component-menu-toggle');
+    await act(async () => fireEvent.click(firstToggle));
+    expect(screen.getByTestId('component-menu-manage-access')).toBeInTheDocument();
+
+    await act(async () => fireEvent.click(secondToggle));
+    expect(screen.getAllByTestId('component-menu-manage-access')).toHaveLength(1);
+  });
 });

src/course-outline/unit-card/ComponentMenu.tsx

@@ -39,6 +39,8 @@ interface ComponentMenuProps {
   userPartitions?: XBlockTypes['userPartitions'];
   actions: UnitComponentActions;
   onActionComplete: (targetUnitId?: string) => void;
+  isMenuOpen: boolean;
+  onMenuToggle: (blockId: string | null) => void;
 }
 
 const stopMenuEvent = (event: React.SyntheticEvent) => {
@@ -54,6 +56,8 @@ const ComponentMenu = ({
   userPartitions,
   actions,
   onActionComplete,
+  isMenuOpen,
+  onMenuToggle,
 }: ComponentMenuProps) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -65,7 +69,7 @@ const ComponentMenu = ({
   const [isMoveModalOpen, openMoveModal, closeMoveModal] = useToggle(false);
   const [moveRequest, setMoveRequest] = useState<IMoveRequestPayload | null>(null);
   const [configureItemData, setConfigureItemData] = useState<FormattedAccessManagedXBlockDataTypes | null>(null);
-  const { mutateAsync: deleteComponent } = useDeleteUnitComponent(unitId);
+  const { mutateAsync: deleteComponent } = useDeleteUnitComponent();
   const { mutateAsync: duplicateComponent } = useDuplicateUnitComponent(unitId);
 
   const handleManageAccess = useCallback((event: React.MouseEvent) => {
@@ -171,8 +175,13 @@ const ComponentMenu = ({
       >
         <Dropdown
           id={`component-menu-${blockId}`}
+          key={`${blockId}-${isMenuOpen}`}
           data-testid="component-menu"
-          onToggle={(_isOpen, event) => event?.stopPropagation()}
+          show={isMenuOpen}
+          onToggle={(isOpen, event) => {
+            event?.stopPropagation();
+            onMenuToggle(isOpen ? blockId : null);
+          }}
         >
           <Dropdown.Toggle
             id={`component-menu-toggle-${blockId}`}

src/course-outline/unit-card/UnitCard.scss

@@ -25,15 +25,27 @@
         display: flex;
         align-items: center;
 
-        >.flex-grow-1 {
+        .item-card-header,
+        .form-group {
           min-width: 0;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          max-width: 80%;
         }
 
-        >a.flex-grow-1 {
+        .component-title-group {
+          flex: 0 1 auto;
+          align-items: center;
+
+          .item-card-header__title-btn {
+            flex: 0 1 auto;
+            min-width: 0;
+            margin-right: .5rem;
+          }
+
+          .item-card-button-icon {
+            flex-shrink: 0;
+          }
+        }
+
+        >a.item-card-header__title-btn {
           color: inherit;
           text-decoration: none;
 
@@ -42,21 +54,71 @@
           }
         }
 
-        >a.component-card-button-icon,
-        .component-menu-wrapper .component-card-button-icon {
-          text-decoration: none;
-          color: var(--pgn-color-primary-500);
+        .item-card-header__title-btn .truncate-1-line {
+          min-width: 0;
+          display: block;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .item-card-button-icon {
+          opacity: 0;
+          transition: opacity .3s linear;
 
-          &:hover,
           &:focus {
-            text-decoration: none;
-            color: var(--pgn-color-white);
-            background-color: var(--pgn-color-primary-500);
+            opacity: 1;
           }
         }
 
+        .component-rename-button {
+          margin-right: .5rem;
+        }
+
+        &:hover .item-card-button-icon {
+          opacity: 1;
+        }
+
+        .component-header-actions {
+          flex-shrink: 0;
+          opacity: 1;
+          margin-left: .25rem;
+          align-items: center;
+        }
+
+        .component-edit-button,
+        .component-menu-wrapper,
+        .btn-icon.btn-icon-md {
+          align-self: center;
+        }
+
+        .component-edit-button {
+          width: 4.125rem;
+          height: 2.25rem;
+          white-space: nowrap;
+        }
+
+        .btn-icon.btn-icon-md {
+          width: 2.5rem;
+          height: 2.5rem;
+        }
+
         .component-menu-wrapper {
           flex-shrink: 0;
+          opacity: 1;
+
+          .component-card-button-icon {
+            opacity: 1;
+            text-decoration: none;
+            color: var(--pgn-color-primary-500);
+
+            &:hover,
+            &:focus {
+              text-decoration: none;
+              color: var(--pgn-color-white);
+              background-color: var(--pgn-color-primary-500);
+            }
+          }
         }
       }
     }
@@ -96,6 +158,10 @@
         .component-card-button-icon:hover {
           background-color: var(--pgn-color-icon-button-bg-primary-hover);
         }
+
+        .component-edit-button {
+          white-space: nowrap;
+        }
       }
     }
 

src/course-outline/unit-card/UnitCard.test.tsx

@@ -5,6 +5,7 @@ import { getConfig } from '@edx/frontend-platform';
 import { mockWaffleFlags } from '@src/data/apiHooks.mock';
 
 import { XBlock } from '@src/data/types';
+import headerNavigationsMessages from '@src/course-unit/header-navigations/messages';
 import UnitCard from './UnitCard';
 import cardMessages from '../card-header/messages';
 import componentMessages from './messages';
@@ -16,6 +17,7 @@ const mockUseComponentTemplates = jest.fn();
 const mockCreateXBlock = jest.fn();
 const mockPasteBlock = jest.fn();
 const mockCopyToClipboard = jest.fn();
+const mockRenameComponent = jest.fn();
 const mockShowPasteXBlock = { current: false };
 
 jest.mock('@src/course-unit/data/apiHooks', () => ({
@@ -40,6 +42,10 @@ jest.mock('./data/hooks', () => ({
   useDuplicateUnitComponent: () => ({
     mutateAsync: jest.fn(),
   }),
+  useRenameUnitComponent: () => ({
+    mutateAsync: mockRenameComponent,
+    isPending: false,
+  }),
 }));
 
 // Mock pasteBlock API call used by handlePasteComponent
@@ -171,6 +177,8 @@ describe('<UnitCard />', () => {
     mockUseComponentTemplates.mockReturnValue({ data: undefined });
     mockPasteBlock.mockReset();
     mockCreateXBlock.mockReset();
+    mockRenameComponent.mockReset();
+    mockRenameComponent.mockResolvedValue(undefined);
     mockShowPasteXBlock.current = false;
   });
 
@@ -363,6 +371,7 @@ describe('<UnitCard />', () => {
       const editButton = await screen.findByTestId('component-edit-button');
       expect(editButton.tagName).toBe('A');
       expect(editButton).toHaveAttribute('href', `/course/5/editor/html/${htmlComponent.blockId}`);
+      expect(editButton).toHaveTextContent(headerNavigationsMessages.editButton.defaultMessage);
     });
 
     it('renders edit button with legacy Studio URL for non-MFE types', async () => {
@@ -398,6 +407,29 @@ describe('<UnitCard />', () => {
       const prevented = !editButton.dispatchEvent(clickEvent);
       expect(prevented).toBe(false);
     });
+
+    it('shows inline rename field after clicking the rename button', async () => {
+      await setupExpandedView([htmlComponent]);
+
+      const renameButton = await screen.findByTestId('component-rename-button');
+      fireEvent.click(renameButton);
+
+      const renameField = await screen.findByTestId('component-rename-field');
+      expect(renameField).toBeInTheDocument();
+      expect(renameField).toHaveValue('HTML Component');
+
+      fireEvent.change(renameField, { target: { value: 'Renamed Component' } });
+      expect(renameField).toHaveValue('Renamed Component');
+
+      fireEvent.blur(renameField);
+
+      await waitFor(() => {
+        expect(mockRenameComponent).toHaveBeenCalledWith({
+          blockId: htmlComponent.blockId,
+          displayName: 'Renamed Component',
+        });
+      });
+    });
   });
 
   describe('preview button', () => {