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,
})
);