[Fix][WRS-1190] Don't execute SDK load event if document is not loaded

src/DemoDocumentLoader.tsx

@@ -6,7 +6,7 @@ export class DemoDocumentLoader {
 
     onProjectInfoRequested: (projectId: string) => Promise<Project>;
 
-    onProjectDocumentRequested: (projectId: string) => Promise<string>;
+    onProjectDocumentRequested: (projectId: string) => Promise<string | null>;
 
     onProjectLoaded: (project: Project) => void;
 

src/MainContent.tsx

@@ -20,19 +20,19 @@ import {
     useConnectorAuthenticationResult,
 } from './components/connector-authentication';
 import LeftPanel from './components/layout-panels/leftPanel/LeftPanel';
+import Navbar from './components/navbar/Navbar';
+import StudioNavbar from './components/navbar/studioNavbar/StudioNavbar';
+import MobileVariablesTray from './components/variables/MobileVariablesTray';
+import AppProvider from './contexts/AppProvider';
+import { useAuthToken } from './contexts/AuthTokenProvider';
+import ShortcutProvider from './contexts/ShortcutManager/ShortcutProvider';
 import { useSubscriberContext } from './contexts/Subscriber';
 import { UiConfigContextProvider } from './contexts/UiConfigContext';
 import { VariablePanelContextProvider } from './contexts/VariablePanelContext';
+import { SuiCanvas } from './MainContent.styles';
 import { Project, ProjectConfig } from './types/types';
-import { getDataIdForSUI, getDataTestIdForSUI } from './utils/dataIds';
-import MobileVariablesTray from './components/variables/MobileVariablesTray';
-import StudioNavbar from './components/navbar/studioNavbar/StudioNavbar';
-import Navbar from './components/navbar/Navbar';
 import { APP_WRAPPER_ID } from './utils/constants';
-import ShortcutProvider from './contexts/ShortcutManager/ShortcutProvider';
-import { SuiCanvas } from './MainContent.styles';
-import { useAuthToken } from './contexts/AuthTokenProvider';
-import AppProvider from './contexts/AppProvider';
+import { getDataIdForSUI, getDataTestIdForSUI } from './utils/dataIds';
 
 declare global {
     interface Window {
@@ -48,7 +48,7 @@ interface MainContentProps {
 }
 
 function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentProps) {
-    const [fetchedDocument, setFetchedDocument] = useState('');
+    const [fetchedDocument, setFetchedDocument] = useState<string | null>(null);
     const [variables, setVariables] = useState<Variable[]>([]);
     const [canUndo, setCanUndo] = useState(false);
     const [canRedo, setCanRedo] = useState(false);
@@ -266,18 +266,19 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
     }, [currentProject?.template?.id]);
 
     useEffect(() => {
-        const setHandTool = async () => {
+        (async () => {
+            await window.StudioUISDK.configuration.setValue(WellKnownConfigurationKeys.GraFxStudioAuthToken, authToken);
+        })();
+    }, [authToken]);
+
+    useEffect(() => {
+        (async () => {
             await window.StudioUISDK.tool.setHand();
-        };
-        setHandTool();
-        const loadDocument = async () => {
-            if (authToken) {
-                await window.StudioUISDK.configuration.setValue(
-                    WellKnownConfigurationKeys.GraFxStudioAuthToken,
-                    authToken,
-                );
-            }
+        })();
+    }, []);
 
+    useEffect(() => {
+        const loadDocument = async () => {
             if (!fetchedDocument) return;
 
             await window.StudioUISDK.document.load(fetchedDocument).then((res) => {
@@ -301,7 +302,7 @@ function MainContent({ projectConfig, updateToken: setAuthToken }: MainContentPr
         };
 
         loadDocument();
-    }, [authToken, fetchedDocument]);
+    }, [fetchedDocument]);
 
     return (
         <AppProvider isDocumentLoaded={isDocumentLoaded} isAnimationPlaying={animationStatus}>

src/StudioProjectLoader.tsx

@@ -1,5 +1,5 @@
-import axios, { AxiosError, AxiosResponse } from 'axios';
 import { DownloadFormats, WellKnownConfigurationKeys } from '@chili-publish/studio-sdk';
+import axios, { AxiosError, AxiosResponse } from 'axios';
 import {
     DownloadLinkResult,
     HttpHeaders,
@@ -74,7 +74,7 @@ export class StudioProjectLoader {
         return this.cachedProject;
     };
 
-    public onProjectDocumentRequested = async (): Promise<string> => {
+    public onProjectDocumentRequested = async (): Promise<string | null> => {
         const fallbackDownloadUrl = `${this.graFxStudioEnvironmentApiBaseUrl}/projects/${this.projectId}/document`;
         return StudioProjectLoader.fetchDocument(this.projectDownloadUrl ?? fallbackDownloadUrl, this.authToken);
     };
@@ -132,22 +132,19 @@ export class StudioProjectLoader {
         );
     };
 
-    private static fetchDocument = async (templateUrl: string, token: string): Promise<string> => {
+    private static fetchDocument = async (templateUrl: string, token: string): Promise<string | null> => {
         const url = templateUrl;
         if (url) {
             const fetchPromise = axios.get(url, { headers: { Authorization: `Bearer ${token}` } });
             return fetchPromise
-                .then((response) => {
-                    return response;
-                })
                 .then((res) => {
                     return JSON.stringify(res.data);
                 })
                 .catch(() => {
-                    return '{}';
+                    return null;
                 });
         }
-        return '{}';
+        return null;
     };
 
     private saveDocument = async (

src/main.tsx

@@ -29,7 +29,7 @@
 
     constructor(selector: string, projectConfig: ProjectConfig) {
         const container = document.getElementById(selector || 'sui-root');
         this.root = createRoot(container!);
         this.root.render(
             <React.StrictMode>
                 <App projectConfig={projectConfig} />
@@ -110,7 +110,7 @@
         featureFlags: Record<string, boolean> | undefined,
         onSandboxModeToggle: (() => void) | undefined,
         onProjectInfoRequested: (projectId: string) => Promise<Project>,
-        onProjectDocumentRequested: (projectId: string) => Promise<string>,
+        onProjectDocumentRequested: (projectId: string) => Promise<string | null>,
         onProjectSave: (generateJson: () => Promise<string>) => Promise<Project>,
         onProjectLoaded: (project: Project) => void,
         onAuthenticationRequested: () => string,

src/tests/StudioProjectLoader.test.tsx

@@ -1,7 +1,7 @@
-import axios, { AxiosError } from 'axios';
 import { WellKnownConfigurationKeys } from '@chili-publish/studio-sdk';
-import { Project } from '../types/types';
+import axios, { AxiosError } from 'axios';
 import { StudioProjectLoader } from '../StudioProjectLoader';
+import { Project } from '../types/types';
 
 jest.mock('axios');
 
@@ -111,6 +111,26 @@ describe('StudioProjectLoader', () => {
                 headers: { Authorization: 'Bearer mockAuthToken' },
             });
         });
+
+        it('should return "null" in case of error', async () => {
+            (axios.get as jest.Mock).mockRejectedValueOnce({});
+            const loader = new StudioProjectLoader(
+                mockProjectId,
+                mockGraFxStudioEnvironmentApiBaseUrl,
+                mockAuthToken,
+                false,
+                mockRefreshTokenAction,
+                mockProjectDownloadUrl,
+                mockProjectUploadUrl,
+            );
+
+            const result = await loader.onProjectDocumentRequested();
+
+            expect(result).toBeNull();
+            expect(axios.get).toHaveBeenCalledWith(mockProjectDownloadUrl, {
+                headers: { Authorization: 'Bearer mockAuthToken' },
+            });
+        });
     });
 
     describe('onProjectLoaded', () => {

src/types/types.ts

@@ -1,6 +1,6 @@
+import { ITheme } from '@chili-publish/grafx-shared-components';
 import { DownloadFormats } from '@chili-publish/studio-sdk';
 import { AxiosError, AxiosResponse } from 'axios';
-import { ITheme } from '@chili-publish/grafx-shared-components';
 import { ConnectorAuthenticationResult } from './ConnectorAuthenticationResult';
 
 export type FeatureFlagsType = Record<string, boolean>;
@@ -17,7 +17,7 @@
     featureFlags?: FeatureFlagsType;
     onSandboxModeToggle?: () => void;
     onProjectInfoRequested: (projectId: string) => Promise<Project>;
-    onProjectDocumentRequested: (projectId: string) => Promise<string>;
+    onProjectDocumentRequested: (projectId: string) => Promise<string | null>;
     onProjectLoaded: (project: Project) => void;
     onProjectSave: (generateJson: () => Promise<string>) => Promise<Project>;
     onAuthenticationRequested: () => string;
@@ -31,7 +31,7 @@
     ) => Promise<DownloadLinkResult>;
     overrideEngineUrl?: string;
     onFetchOutputSettings?: (_?: string) => Promise<UserInterfaceWithOutputSettings | null>;
     onFetchUserInterfaces?: () => Promise<AxiosResponse<PaginatedResponse<UserInterface>, any>>;
     onConnectorAuthenticationRequested?: (connectorId: string) => Promise<ConnectorAuthenticationResult>;
 }
 
@@ -57,7 +57,7 @@
 
 export interface StudioConfig extends DefaultStudioConfig {
     onProjectInfoRequested: () => Promise<Project>;
-    onProjectDocumentRequested: () => Promise<string>;
+    onProjectDocumentRequested: () => Promise<string | null>;
     onProjectSave: (generateJson: () => Promise<string>) => Promise<Project>;
 }
 
@@ -177,7 +177,7 @@
     featureFlags?: Record<string, boolean>;
     onSandboxModeToggle?: () => void;
     onProjectInfoRequested?: (projectId: string) => Promise<Project>;
-    onProjectDocumentRequested?: (projectId: string) => Promise<string>;
+    onProjectDocumentRequested?: (projectId: string) => Promise<string | null>;
     onProjectSave?: (generateJson: () => Promise<string>) => Promise<Project>;
     onProjectLoaded?: (project: Project) => void;
     onAuthenticationRequested?: () => string;