Move selected layout set to global ux-editor context

Altinn · Oct 19, 2023 · e8d00dd · e8d00dd
1 parent 14b2c03
commit e8d00dd
Show file tree

Hide file tree

Showing 37 changed files with 124 additions and 165 deletions.
diff --git a/backend/src/Designer/Controllers/PreviewController.cs b/backend/src/Designer/Controllers/PreviewController.cs
@@ -859,7 +859,7 @@ public IActionResult UpdateAttachmentWithTag(string org, string app, [FromQuery]
         private string GetSelectedLayoutSetInEditorFromRefererHeader(string refererHeader)
         {
             Uri refererUri = new(refererHeader);
-            string layoutSetName = HttpUtility.ParseQueryString(refererUri.Query)["selectedLayoutSetInEditor"];
+            string layoutSetName = HttpUtility.ParseQueryString(refererUri.Query)["selectedLayoutSet"];
 
             return string.IsNullOrEmpty(layoutSetName) ? null : layoutSetName;
         }

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/DeleteAttachmentTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/DeleteAttachmentTests.cs
@@ -19,7 +19,7 @@ public async Task Delete_Attachment_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/data/{AttachmentGuId}";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Delete, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -30,7 +30,7 @@ public async Task Delete_AttachmentForStateFulApp_Ok()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/data/{AttachmentGuId}";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Delete, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/GetFormDataTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/GetFormDataTests.cs
@@ -24,7 +24,7 @@ public async Task Get_FormData_Ok()
 
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/data/test-datatask-id";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -38,7 +38,7 @@ public async Task Get_FormDataForAppWithoutDatamodel_Ok()
         {
             string dataPathWithData = $"{Org}/empty-app/instances/{PartyId}/{InstanceGuId}/data/test-datatask-id";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -54,7 +54,7 @@ public async Task Get_FormDataForStatefulApp_Ok()
 
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/data/test-datatask-id";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -68,7 +68,7 @@ public async Task Get_FormDataForStatefulAppForTaskWithoutDatamodel_Ok()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/data/test-datatask-id";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName2}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName2}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/InstanceForNextTaskTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/InstanceForNextTaskTests.cs
@@ -22,7 +22,7 @@ public async Task Get_InstanceForNextProcess_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -39,7 +39,7 @@ public async Task Get_InstanceForNextTaskForStatefulApp_Ok_TaskIsIncreased()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/InstancesTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/InstancesTests.cs
@@ -26,7 +26,7 @@ public async Task Post_Instance_Ok()
 
             string dataPathWithData = $"{Org}/{targetRepository}/instances?instanceOwnerPartyId=51001";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Post, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -46,7 +46,7 @@ public async Task Post_InstanceForStatefulApp_Ok()
 
             string dataPathWithData = $"{Org}/{targetRepository}/instances?instanceOwnerPartyId=51001";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Post, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/PostAttachmentTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/PostAttachmentTests.cs
@@ -20,7 +20,7 @@ public async Task Post_Attachment_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/data?dataType=FileUploadId";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Post, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.Created, response.StatusCode);
@@ -31,7 +31,7 @@ public async Task Post_AttachmentForStateFulApp_Ok()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/data?dataType=FileUploadId";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Post, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(StatusCodes.Status201Created, (int)response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/ProcessNextTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/ProcessNextTests.cs
@@ -22,7 +22,7 @@ public async Task Get_ProcessNext_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/process/next";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -39,7 +39,7 @@ public async Task Get_ProcessNextForStatefulApp_Ok()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/process/next";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/ProcessTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/ProcessTests.cs
@@ -22,7 +22,7 @@ public async Task Get_Process_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/process";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -39,7 +39,7 @@ public async Task Get_ProcessForStatefulApp_Ok()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/process";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Get, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/UpdateFormDataTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/UpdateFormDataTests.cs
@@ -19,7 +19,7 @@ public async Task Put_UpdateFormData_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/data/test-datatask-id";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Put, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(StatusCodes.Status200OK, (int)response.StatusCode);

diff --git a/backend/tests/Designer.Tests/Controllers/PreviewController/UpdateProcessNextTests.cs b/backend/tests/Designer.Tests/Controllers/PreviewController/UpdateProcessNextTests.cs
@@ -22,7 +22,7 @@ public async Task Put_ProcessNext_Ok()
         {
             string dataPathWithData = $"{Org}/{App}/instances/{PartyId}/{InstanceGuId}/process/next";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Put, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSetInEditor=");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={App}&selectedLayoutSet=");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);
@@ -36,7 +36,7 @@ public async Task Put_ProcessNextForStatefulAppForNonExistingTask_Ok()
         {
             string dataPathWithData = $"{Org}/{StatefulApp}/instances/{PartyId}/{InstanceGuId}/process/next";
             using HttpRequestMessage httpRequestMessage = new(HttpMethod.Put, dataPathWithData);
-            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSetInEditor={LayoutSetName}");
+            httpRequestMessage.Headers.Referrer = new Uri($"{MockedReferrerUrl}?org={Org}&app={StatefulApp}&selectedLayoutSet={LayoutSetName}");
 
             using HttpResponseMessage response = await HttpClient.SendAsync(httpRequestMessage);
             Assert.Equal(HttpStatusCode.OK, response.StatusCode);

diff --git a/frontend/app-preview/src/views/LandingPage.tsx b/frontend/app-preview/src/views/LandingPage.tsx
@@ -32,9 +32,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {
   const { data: instanceId } = useInstanceIdQuery(org, app);
   const repoType = getRepositoryType(org, app);
   const menu = getTopBarAppPreviewMenu(org, app, repoType, t);
-  const [selectedLayoutSetInEditor, setSelectedLayoutSetInEditor] = useLocalStorage<string>(
-    'layoutSet/' + app,
-  );
+  const [selectedLayoutSet, setSelectedLayoutSet] = useLocalStorage<string>('layoutSet/' + app, null);
   const [previewViewSize, setPreviewViewSize] = useLocalStorage<PreviewAsViewSize>(
     'viewSize',
     'desktop',
@@ -43,7 +41,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {
     input !== null && input.tagName === 'IFRAME';
 
   const handleChangeLayoutSet = (layoutSet: string) => {
-    setSelectedLayoutSetInEditor(layoutSet);
+    setSelectedLayoutSet(layoutSet);
     // might need to remove selected layout from local storage to make sure first page is selected
     window.location.reload();
   };
@@ -79,7 +77,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {
               <AppPreviewSubMenu
                 setViewSize={setPreviewViewSize}
                 viewSize={previewViewSize}
-                selectedLayoutSet={selectedLayoutSetInEditor}
+                selectedLayoutSet={selectedLayoutSet}
                 handleChangeLayoutSet={handleChangeLayoutSet}
               />
             }
@@ -89,7 +87,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {
           <iframe
             title={t('preview.iframe_title')}
             id='app-frontend-react-iframe'
-            src={previewPage(org, app, selectedLayoutSetInEditor)}
+            src={previewPage(org, app, selectedLayoutSet)}
             className={previewViewSize === 'desktop' ? classes.iframeDesktop : classes.iframeMobile}
           />
           {previewViewSize === 'mobile' && <div className={classes.iframeMobileViewOverlay}></div>}

diff --git a/frontend/packages/shared/src/hooks/useLocalStorage.ts b/frontend/packages/shared/src/hooks/useLocalStorage.ts
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { TypedStorage, typedLocalStorage } from 'app-shared/utils/webStorage';
 
 const useWebStorage = <T>(
@@ -8,6 +8,20 @@ const useWebStorage = <T>(
 ): [T, (newValue: T) => void, () => void] => {
   const [value, setValue] = useState<T>(typedStorage.getItem(key) || initialValue);
 
+  const handleStorageChange = useCallback(() => {
+    const item = typedStorage.getItem<T>(key);
+    setValue(item);
+  }, [key, setValue]);
+
+  useEffect(() => {
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, [handleStorageChange]);
+
   const setStorageValue = useCallback(
     (newValue: T) => {
       typedStorage.setItem(key, newValue);
@@ -31,5 +45,5 @@ const useWebStorage = <T>(
  * @description
  * useLocalStorage is a hook that allows you to use local storage the same way you would with useState
  */
-export const useLocalStorage = <T, K = string>(key: K, initialValue?: T) =>
-  useWebStorage<T>(typedLocalStorage, key as string, initialValue);
+export const useLocalStorage = <T>(key: string, initialValue?: T) =>
+  useWebStorage<T>(typedLocalStorage, key, initialValue);
diff --git a/frontend/packages/shared/src/providers/PreviewConnectionContext.tsx b/frontend/packages/shared/src/providers/PreviewConnectionContext.tsx
@@ -1,6 +1,6 @@
 import React, { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { previewSignalRHubSubPath } from 'app-shared/api/paths';
-import { HubConnection, HubConnectionBuilder, LogLevel } from "@microsoft/signalr";
+import { HubConnection, HubConnectionBuilder, LogLevel } from '@microsoft/signalr';
 
 const PreviewConnectionContext = createContext<HubConnection>(null);
 

diff --git a/frontend/packages/shared/src/utils/webStorage.ts b/frontend/packages/shared/src/utils/webStorage.ts
@@ -8,7 +8,7 @@ export type TypedStorage = {
   removeItem: (key: string) => void;
 };
 
-type WebStorage = Pick<Storage, 'setItem' | 'getItem' | 'removeItem'>;
+type WebStorage = Pick<Storage, 'setItem' | 'getItem' | 'removeItem' >;
 
 const createWebStorage = (storage: WebStorage): TypedStorage => {
   if (!storage) {