diff --git a/src/content-tags-drawer/data/api.mocks.ts b/src/content-tags-drawer/data/api.mocks.ts index ce1d50c05..2f7360be8 100644 --- a/src/content-tags-drawer/data/api.mocks.ts +++ b/src/content-tags-drawer/data/api.mocks.ts @@ -13,6 +13,7 @@ export async function mockContentTaxonomyTagsData(contentId: string): Promise jest.spyOn(api, 'getContentTaxonomyTagsData').mockImplementation(mockContentTaxonomyTagsData); /** diff --git a/src/library-authoring/add-content/PickLibraryContentModal.test.tsx b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx index c66fef293..a73ce8118 100644 --- a/src/library-authoring/add-content/PickLibraryContentModal.test.tsx +++ b/src/library-authoring/add-content/PickLibraryContentModal.test.tsx @@ -32,6 +32,7 @@ const mockAddItemsToCollection = jest.fn(); const mockAddComponentsToContainer = jest.fn(); jest.spyOn(api, 'addItemsToCollection').mockImplementation(mockAddItemsToCollection); jest.spyOn(api, 'addComponentsToContainer').mockImplementation(mockAddComponentsToContainer); +const unitId = 'lct:Axim:TEST:unit:test-unit-1'; const render = (context: 'collection' | 'unit') => baseRender(, { path: context === 'collection' @@ -40,7 +41,7 @@ const render = (context: 'collection' | 'unit') => baseRender( ( ', () => { ); } else { expect(mockAddComponentsToContainer).toHaveBeenCalledWith( - 'unitId', + unitId, ['lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd'], ); } @@ -123,7 +124,7 @@ describe('', () => { ); } else { expect(mockAddComponentsToContainer).toHaveBeenCalledWith( - 'unitId', + unitId, ['lb:Axim:TEST:html:571fe018-f3ce-45c9-8f53-5dafcb422fdd'], ); } diff --git a/src/library-authoring/data/api.mocks.ts b/src/library-authoring/data/api.mocks.ts index a3eb2c4c3..eb5f60188 100644 --- a/src/library-authoring/data/api.mocks.ts +++ b/src/library-authoring/data/api.mocks.ts @@ -482,7 +482,7 @@ export async function mockGetContainerMetadata(containerId: string): Promise { it('should add components to unit', async () => { const { axiosMock } = initializeMocks(); const componentId = 'lb:org:lib:html:1'; - const containerId = 'ltc:org:lib:unit:1'; + const containerId = 'lct:org:lib:unit:1'; const url = api.getLibraryContainerChildrenApiUrl(containerId); axiosMock.onPost(url).reply(200); diff --git a/src/library-authoring/data/apiHooks.test.tsx b/src/library-authoring/data/apiHooks.test.tsx index 6a1fd3dc5..f026829cb 100644 --- a/src/library-authoring/data/apiHooks.test.tsx +++ b/src/library-authoring/data/apiHooks.test.tsx @@ -257,7 +257,7 @@ describe('library api hooks', () => { it('should add components to container', async () => { const componentId = 'lb:org:lib:html:1'; - const containerId = 'ltc:org:lib:unit:1'; + const containerId = 'lct:org:lib:unit:1'; const url = getLibraryContainerChildrenApiUrl(containerId); diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts index b52b597e3..0bf7fe86a 100644 --- a/src/library-authoring/data/apiHooks.ts +++ b/src/library-authoring/data/apiHooks.ts @@ -101,17 +101,27 @@ export const libraryAuthoringQueryKeys = { 'blockTypes', libraryId, ], - container: (containerId?: string) => [ - ...libraryAuthoringQueryKeys.all, - 'container', - containerId, - ], - containerChildren: (containerId?: string) => [ - ...libraryAuthoringQueryKeys.all, - 'container', - containerId, - 'children', - ], + container: (containerId?: string) => { + const baseKey = containerId + ? libraryAuthoringQueryKeys.contentLibrary(getLibraryId(containerId)) + : libraryAuthoringQueryKeys.all; + return [ + ...baseKey, + 'container', + containerId, + ]; + }, + containerChildren: (containerId?: string) => { + const baseKey = containerId + ? libraryAuthoringQueryKeys.contentLibrary(getLibraryId(containerId)) + : libraryAuthoringQueryKeys.all; + return [ + ...baseKey, + 'container', + containerId, + 'children', + ]; + }, }; export const xblockQueryKeys = { diff --git a/src/library-authoring/units/LibraryUnitBlocks.tsx b/src/library-authoring/units/LibraryUnitBlocks.tsx index 16b0e13f9..39ed5fddb 100644 --- a/src/library-authoring/units/LibraryUnitBlocks.tsx +++ b/src/library-authoring/units/LibraryUnitBlocks.tsx @@ -26,6 +26,7 @@ import { useLibraryRoutes } from '../routes'; import messages from './messages'; import { useSidebarContext } from '../common/context/SidebarContext'; import { ToastContext } from '../../generic/toast-context'; +import { canEditComponent } from '../components/ComponentEditorModal'; /** Components that need large min height in preview */ const LARGE_COMPONENTS = [ @@ -90,6 +91,7 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => { componentId, readOnly, setComponentId, + openComponentEditor, } = useLibraryContext(); const { @@ -131,9 +133,14 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => { closeManageTagsDrawer(); }; - const handleComponentSelection = (block: LibraryBlockMetadata) => { + const handleComponentSelection = (block: LibraryBlockMetadata, numberOfClicks: number) => { setComponentId(block.id); navigateTo({ componentId: block.id }); + const canEdit = canEditComponent(block.id); + if (numberOfClicks > 1 && canEdit) { + // Open editor on double click. + openComponentEditor(block.id); + } }; /* istanbul ignore next */ @@ -166,7 +173,7 @@ export const LibraryUnitBlocks = ({ preview }: LibraryUnitBlocksProps) => { }; const renderedBlocks = orderedBlocks?.map((block) => ( - + { outline: hidePreviewFor === block.id && '2px dashed gray', }} isClickable - onClick={() => handleComponentSelection(block)} + onClick={(e: { detail: number; }) => handleComponentSelection(block, e.detail)} disabled={preview} > {hidePreviewFor !== block.id && ( diff --git a/src/library-authoring/units/LibraryUnitPage.test.tsx b/src/library-authoring/units/LibraryUnitPage.test.tsx index daa63b230..cee3503d6 100644 --- a/src/library-authoring/units/LibraryUnitPage.test.tsx +++ b/src/library-authoring/units/LibraryUnitPage.test.tsx @@ -231,4 +231,12 @@ describe('', () => { }); await waitFor(() => expect(mockShowToast).toHaveBeenLastCalledWith('Failed to update components order')); }); + + it('should show editor on double click', async () => { + renderLibraryUnitPage(); + const component = await screen.findByText('text block 0'); + // trigger double click + userEvent.click(component, undefined, { clickCount: 2 }); + expect(await screen.findByRole('dialog', { name: 'Editor Dialog' })).toBeInTheDocument(); + }); });