fix: Double click component card to edit #1598

Author: Ahtesham Quraish

src/library-authoring/collections/LibraryCollectionPage.test.tsx

@@ -355,29 +355,47 @@ describe('<LibraryCollectionPage />', () => {
   });
 
   it('should remove component from collection and hides sidebar', async () => {
+    jest.useFakeTimers(); // ✅ isolate fake timers for this test
+
     const url = getLibraryCollectionItemsApiUrl(
       mockContentLibrary.libraryId,
       mockCollection.collectionId,
     );
     axiosMock.onDelete(url).reply(204);
+
     const displayName = 'Introduction to Testing';
     await renderLibraryCollectionPage();
 
     // open sidebar
     fireEvent.click(await screen.findByText(displayName));
+
+    // ⏩ let the delayed sidebar open run
+    jest.advanceTimersByTime(500);
+
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).toBeInTheDocument());
 
-    const menuBtns = await screen.findAllByRole('button', { name: 'Component actions menu' });
+    const menuBtns = await screen.findAllByRole('button', {
+      name: 'Component actions menu',
+    });
+
     // open menu
     fireEvent.click(menuBtns[0]);
 
+    // click remove
     fireEvent.click(await screen.findByText('Remove from collection'));
+
     await waitFor(() => {
       expect(axiosMock.history.delete.length).toEqual(1);
     });
+
     expect(mockShowToast).toHaveBeenCalledWith('Item successfully removed');
-    // Should close sidebar as component was removed
+
+    // ⏩ let the delayed sidebar close run
+    jest.advanceTimersByTime(500);
+
     await waitFor(() => expect(screen.queryByTestId('library-sidebar')).not.toBeInTheDocument());
+
+    jest.useRealTimers(); // ✅ restore for other tests
   });
 
   it('should show error when remove component from collection', async () => {

src/library-authoring/component-picker/ComponentPicker.test.tsx

@@ -221,46 +221,6 @@ describe('<ComponentPicker />', () => {
     }, '*');
   });
 
-  it('should pick component inside a collection using the sidebar', async () => {
-    render(<ComponentPicker />);
-
-    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
-    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
-
-    // Wait for the content library to load
-    await screen.findByText(/Change Library/i);
-    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
-
-    // Click on the collection card to open the sidebar
-    fireEvent.click(screen.queryAllByText('Collection 1')[0]);
-
-    const sidebar = await screen.findByTestId('library-sidebar');
-
-    // Mock the collection search result
-    mockSearchResult(mockCollectionResult);
-
-    // Click the add component from the component card
-    fireEvent.click(within(sidebar).getByRole('button', { name: 'Open' }));
-
-    // Wait for the collection  to load
-    await screen.findByText(/Back to Library/i);
-    await screen.findByText('Introduction to Testing');
-
-    // Click on the collection card to open the sidebar
-    fireEvent.click(screen.getByText('Introduction to Testing'));
-
-    const collectionSidebar = await screen.findByTestId('library-sidebar');
-
-    // Click the add component from the collection sidebar
-    fireEvent.click(within(collectionSidebar).getByRole('button', { name: 'Add to Course' }));
-
-    expect(postMessageSpy).toHaveBeenCalledWith({
-      usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
-      type: 'pickerComponentSelected',
-      category: 'html',
-    }, '*');
-  });
-
   it('should return to library selection', async () => {
     render(<ComponentPicker />);
 
@@ -428,3 +388,69 @@ describe('<ComponentPicker />', () => {
     expect(screen.queryByText(/never published/i)).not.toBeInTheDocument();
   });
 });
+
+describe('<ComponentPicker /> with collection', () => {
+  beforeEach(() => {
+    initializeMocks();
+    postMessageSpy = jest.spyOn(window.parent, 'postMessage');
+
+    mockSearchResult({ ...mockResult });
+  });
+
+  it('should pick component inside a collection using the sidebar', async () => {
+    jest.useFakeTimers(); // ✅ enable fake timers
+
+    render(<ComponentPicker />);
+
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+    fireEvent.click(screen.getByDisplayValue(/lib:sampletaxonomyorg1:tl1/i));
+
+    // Wait for the content library to load
+    await screen.findByText(/Change Library/i);
+    expect(await screen.findByText('Test Library 1')).toBeInTheDocument();
+
+    // Click on the collection card to open the sidebar
+    const collections = await screen.findAllByText('Collection 1'); // ✅ wait until it renders
+    fireEvent.click(collections[0]);
+
+    // ⏩ let the 500ms single-click timer finish
+    jest.advanceTimersByTime(500);
+
+    const sidebar = await screen.findByTestId('library-sidebar');
+
+    // Mock the collection search result
+    mockSearchResult(mockCollectionResult);
+
+    // Click the add component from the component card
+    fireEvent.click(within(sidebar).getByRole('button', { name: 'Open' }));
+
+    // ⏩ advance timers again in case sidebar open uses timeout
+    jest.advanceTimersByTime(500);
+
+    // Wait for the collection to load
+    await screen.findByText(/Back to Library/i);
+    await screen.findByText('Introduction to Testing');
+
+    // Click on the collection card to open the sidebar
+    fireEvent.click(screen.getByText('Introduction to Testing'));
+
+    // ⏩ advance timers again for delayed sidebar open
+    jest.advanceTimersByTime(500);
+
+    const collectionSidebar = await screen.findByTestId('library-sidebar');
+
+    // Click the add component from the collection sidebar
+    fireEvent.click(within(collectionSidebar).getByRole('button', { name: 'Add to Course' }));
+
+    expect(postMessageSpy).toHaveBeenCalledWith(
+      {
+        usageKey: 'lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd',
+        type: 'pickerComponentSelected',
+        category: 'html',
+      },
+      '*',
+    );
+
+    jest.useRealTimers(); // ✅ restore real timers
+  });
+});

src/library-authoring/components/ComponentCard.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useRef } from 'react';
 import {
   ActionRow,
 } from '@openedx/paragon';
@@ -15,11 +15,15 @@ type ComponentCardProps = {
   hit: ContentHit,
 };
 
+const DOUBLE_CLICK_DELAY = 500; // ms
+
 const ComponentCard = ({ hit }: ComponentCardProps) => {
-  const { showOnlyPublished } = useLibraryContext();
+  const { showOnlyPublished, openComponentEditor } = useLibraryContext();
   const { openComponentInfoSidebar, openItemSidebar, sidebarItemInfo } = useSidebarContext();
   const { componentPickerMode } = useComponentPickerContext();
 
+  const clickTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const {
     blockType,
     formatted,
@@ -34,15 +38,27 @@ const ComponentCard = ({ hit }: ComponentCardProps) => {
     showOnlyPublished ? formatted.published?.displayName : formatted.displayName
   ) ?? '';
 
-  const selectComponent = useCallback(() => {
-    if (!componentPickerMode) {
-      openItemSidebar(usageKey, SidebarBodyItemId.ComponentInfo);
-    } else {
-      // In component picker mode, we want to open the sidebar
-      // without changing the URL
-      openComponentInfoSidebar(usageKey);
-    }
-  }, [usageKey, openItemSidebar, openComponentInfoSidebar, componentPickerMode]);
+  const selectComponent = useCallback(
+    () => {
+      if (clickTimerRef.current) {
+        clearTimeout(clickTimerRef.current);
+        clickTimerRef.current = null;
+        openItemSidebar(usageKey, SidebarBodyItemId.ComponentInfo);
+        openComponentEditor(usageKey);
+      } else {
+        clickTimerRef.current = setTimeout(() => {
+          clickTimerRef.current = null;
+
+          if (componentPickerMode) {
+            openComponentInfoSidebar(usageKey);
+          } else {
+            openItemSidebar(usageKey, SidebarBodyItemId.ComponentInfo);
+          }
+        }, DOUBLE_CLICK_DELAY);
+      }
+    },
+    [usageKey, openItemSidebar, openComponentInfoSidebar, componentPickerMode],
+  );
 
   const selected = sidebarItemInfo?.type === SidebarBodyItemId.ComponentInfo
     && sidebarItemInfo.id === usageKey;