= {}) => {
+ options = {
+ ...options,
+ queries: {
+ createPreviewInstance: jest
+ .fn()
+ .mockImplementation(() => Promise.resolve({ id: mockInstanceId })),
+ },
+ };
return renderWithProviders(
,
options,
diff --git a/frontend/packages/ux-editor/src/components/Preview/Preview.tsx b/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
index 1fa794ec7fd..7c3a8bb587d 100644
--- a/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
+++ b/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
@@ -7,12 +7,14 @@ import { useAppContext } from '../../hooks';
import { useChecksum } from '../../hooks/useChecksum.ts';
import { previewPage } from 'app-shared/api/paths';
import { Paragraph } from '@digdir/designsystemet-react';
-import { StudioButton, StudioCenter } from '@studio/components';
+import { StudioButton, StudioCenter, StudioErrorMessage, StudioSpinner } from '@studio/components';
import type { SupportedView } from './ViewToggler/ViewToggler';
import { ViewToggler } from './ViewToggler/ViewToggler';
import { ShrinkIcon } from '@studio/icons';
import { PreviewLimitationsInfo } from 'app-shared/components/PreviewLimitationsInfo/PreviewLimitationsInfo';
import { useSelectedTaskId } from 'app-shared/hooks/useSelectedTaskId';
+import { useCreatePreviewInstanceMutation } from 'app-shared/hooks/mutations/useCreatePreviewInstanceMutation';
+import { useUserQuery } from 'app-shared/hooks/queries';
export type PreviewProps = {
collapsed: boolean;
@@ -85,9 +87,20 @@ const PreviewFrame = () => {
const { previewIframeRef, selectedFormLayoutSetName, selectedFormLayoutName } = useAppContext();
const taskId = useSelectedTaskId(selectedFormLayoutSetName);
const { t } = useTranslation();
+ const { data: user } = useUserQuery();
const { shouldReloadPreview, previewHasLoaded } = useAppContext();
const checksum = useChecksum(shouldReloadPreview);
+ const {
+ mutate: createInstance,
+ data: instance,
+ isError: createInstanceError,
+ isPending: createInstancePending,
+ } = useCreatePreviewInstanceMutation(org, app);
+
+ useEffect(() => {
+ if (user && taskId) createInstance({ partyId: user?.id, taskId: taskId });
+ }, [createInstance, user, taskId]);
useEffect(() => {
return () => {
@@ -95,6 +108,26 @@ const PreviewFrame = () => {
};
}, [previewIframeRef]);
+ if (createInstancePending || !instance) {
+ return (
+
+ {createInstanceError ? (
+ {t('general.page_error_title')}
+ ) : (
+
+ )}
+
+ );
+ }
+ const previewURL = previewPage(
+ org,
+ app,
+ selectedFormLayoutSetName,
+ taskId,
+ selectedFormLayoutName,
+ instance?.id,
+ );
+
return (
@@ -105,7 +138,7 @@ const PreviewFrame = () => {
ref={previewIframeRef}
className={cn(classes.iframe, classes[viewportToSimulate])}
title={t('ux_editor.preview')}
- src={previewPage(org, app, selectedFormLayoutSetName, taskId, selectedFormLayoutName)}
+ src={previewURL}
onLoad={previewHasLoaded}
/>
diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx
index 7183937f8ae..47faa9bf615 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesigner.test.tsx
@@ -21,6 +21,10 @@ import { app, org } from '@studio/testing/testids';
import userEvent from '@testing-library/user-event';
import { user as userMock } from 'app-shared/mocks/mocks';
+jest.mock('app-shared/api/mutations', () => ({
+ createPreviewInstance: jest.fn().mockReturnValue(Promise.resolve({ id: 1 })),
+}));
+
// Test data:
const defaultTexts: ITextResources = {
[DEFAULT_LANGUAGE]: [],
diff --git a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
index db240f8db73..c777abc4976 100644
--- a/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormDesigner.tsx
@@ -16,7 +16,7 @@ import {
} from '@studio/components';
import { BASE_CONTAINER_ID } from 'app-shared/constants';
import { useRuleConfigQuery } from '../hooks/queries/useRuleConfigQuery';
-import { useInstanceIdQuery, useUserQuery } from 'app-shared/hooks/queries';
+import { useUserQuery } from 'app-shared/hooks/queries';
import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
import type { HandleAdd, HandleMove } from 'app-shared/types/dndTypes';
import type { ComponentType } from 'app-shared/types/ComponentType';
@@ -34,7 +34,6 @@ import { shouldDisplayFeature, FeatureFlag } from 'app-shared/utils/featureToggl
export const FormDesigner = (): JSX.Element => {
const { org, app } = useStudioEnvironmentParams();
- const { data: instanceId } = useInstanceIdQuery(org, app);
const { data: user } = useUserQuery();
const { selectedFormLayoutSetName, selectedFormLayoutName, updateLayoutsForPreview } =
useAppContext();
@@ -78,11 +77,7 @@ export const FormDesigner = (): JSX.Element => {
const t = useText();
const formLayoutIsReady =
- selectedFormLayoutSetName &&
- instanceId &&
- formLayouts &&
- formLayoutSettings &&
- isRuleConfigFetched;
+ selectedFormLayoutSetName && formLayouts && formLayoutSettings && isRuleConfigFetched;
const mapErrorToDisplayError = (): { title: string; message: string } => {
const defaultTitle = t('general.fetch_error_title');
diff --git a/frontend/testing/playwright/tests/main-navigation-between-sub-apps/main-navigation-between-sub-apps.spec.ts b/frontend/testing/playwright/tests/main-navigation-between-sub-apps/main-navigation-between-sub-apps.spec.ts
index 25b8c62405f..dd97c456d89 100644
--- a/frontend/testing/playwright/tests/main-navigation-between-sub-apps/main-navigation-between-sub-apps.spec.ts
+++ b/frontend/testing/playwright/tests/main-navigation-between-sub-apps/main-navigation-between-sub-apps.spec.ts
@@ -130,7 +130,7 @@ test('That it is possible to navigate from overview to the preview page and back
await previewPage.verifyPreviewPage();
await header.clickOnBackToCreatePage();
- await uiEditor.verifyUiEditorPage(null);
+ await uiEditor.verifyUiEditorPage();
});
test('That it is possible to navigate from overview to the deploy page and back again', async ({