diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx index 238be40d39..11eb0e3911 100644 --- a/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx +++ b/src/library-authoring/component-info/ComponentAdvancedInfo.test.tsx @@ -12,6 +12,7 @@ import { mockXBlockAssets, mockXBlockOLX, } from '../data/api.mocks'; +import * as apiHooks from '../data/apiHooks'; import { LibraryProvider, SidebarBodyComponentId } from '../common/context'; import { ComponentAdvancedInfo } from './ComponentAdvancedInfo'; import { getXBlockAssetsApiUrl } from '../data/api'; @@ -25,6 +26,7 @@ const setOLXspy = mockSetXBlockOLX.applyMock(); const render = ( usageKey: string = mockLibraryBlockMetadata.usageKeyPublished, libraryId: string = mockContentLibrary.libraryId, + showOnlyPublished: boolean = false, ) => baseRender( , { @@ -35,6 +37,7 @@ const render = ( id: usageKey, type: SidebarBodyComponentId.ComponentInfo, }} + showOnlyPublished={showOnlyPublished} > {children} @@ -124,6 +127,9 @@ describe('', () => { }); it('should display the OLX source of the block (when expanded)', async () => { + const usageKey = mockXBlockOLX.usageKeyHtml; + const spy = jest.spyOn(apiHooks, 'useXBlockOLX'); + render(mockXBlockOLX.usageKeyHtml); const expandButton = await screen.findByRole('button', { name: /Advanced details/ }); fireEvent.click(expandButton); @@ -131,6 +137,21 @@ describe('', () => { // just a substring: const olxPart = /This is a text component which uses/; await waitFor(() => expect(screen.getByText(olxPart)).toBeInTheDocument()); + expect(spy).toHaveBeenCalledWith(usageKey, undefined); + }); + + it('should display the published OLX source of the block (when expanded)', async () => { + const usageKey = mockXBlockOLX.usageKeyHtml; + const spy = jest.spyOn(apiHooks, 'useXBlockOLX'); + + render(usageKey, undefined, true); + const expandButton = await screen.findByRole('button', { name: /Advanced details/ }); + fireEvent.click(expandButton); + // Because of syntax highlighting, the OLX will be borken up by many different tags so we need to search for + // just a substring: + const olxPart = /This is a text component which uses/; + await waitFor(() => expect(screen.getByText(olxPart)).toBeInTheDocument()); + expect(spy).toHaveBeenCalledWith(usageKey, 'published'); }); it('does not display "Edit OLX" button and assets dropzone when the library is read-only', async () => { diff --git a/src/library-authoring/component-info/ComponentAdvancedInfo.tsx b/src/library-authoring/component-info/ComponentAdvancedInfo.tsx index a558ef6902..82d655ca18 100644 --- a/src/library-authoring/component-info/ComponentAdvancedInfo.tsx +++ b/src/library-authoring/component-info/ComponentAdvancedInfo.tsx @@ -21,7 +21,11 @@ import { ComponentAdvancedAssets } from './ComponentAdvancedAssets'; const ComponentAdvancedInfoInner: React.FC> = () => { const intl = useIntl(); - const { readOnly, sidebarComponentInfo } = useLibraryContext(); + const { + readOnly, + sidebarComponentInfo, + showOnlyPublished, + } = useLibraryContext(); const usageKey = sidebarComponentInfo?.id; // istanbul ignore if: this should never happen in production @@ -29,7 +33,10 @@ const ComponentAdvancedInfoInner: React.FC> = () => { throw new Error('sidebarComponentUsageKey is required to render ComponentAdvancedInfo'); } - const { data: olx, isLoading: isOLXLoading } = useXBlockOLX(usageKey); + const { data: olx, isLoading: isOLXLoading } = useXBlockOLX( + usageKey, + showOnlyPublished ? 'published' : undefined, + ); const editorRef = React.useRef(undefined); const [isEditingOLX, setEditingOLX] = React.useState(false); const olxUpdater = useUpdateXBlockOLX(usageKey); diff --git a/src/library-authoring/data/api.ts b/src/library-authoring/data/api.ts index 2efdf9175b..75fdbd9862 100644 --- a/src/library-authoring/data/api.ts +++ b/src/library-authoring/data/api.ts @@ -418,8 +418,8 @@ export async function createCollection(libraryId: string, collectionData: Create * Fetch the OLX for the given XBlock. */ // istanbul ignore next -export async function getXBlockOLX(usageKey: string): Promise { - const { data } = await getAuthenticatedHttpClient().get(getXBlockOLXApiUrl(usageKey)); +export async function getXBlockOLX(usageKey: string, version?: string): Promise { + const { data } = await getAuthenticatedHttpClient().get(getXBlockOLXApiUrl(usageKey), { params: { version } }); return data.olx; } diff --git a/src/library-authoring/data/apiHooks.ts b/src/library-authoring/data/apiHooks.ts index 09151a4602..2190208768 100644 --- a/src/library-authoring/data/apiHooks.ts +++ b/src/library-authoring/data/apiHooks.ts @@ -350,10 +350,10 @@ export const useCreateLibraryCollection = (libraryId: string) => { }; /** Get the OLX source of a library component */ -export const useXBlockOLX = (usageKey: string) => ( +export const useXBlockOLX = (usageKey: string, version?: string) => ( useQuery({ queryKey: xblockQueryKeys.xblockOLX(usageKey), - queryFn: () => getXBlockOLX(usageKey), + queryFn: () => getXBlockOLX(usageKey, version), enabled: !!usageKey, }) );