From 190c2359c7cead3eb859ec3da0aa3ddd3e032f2b Mon Sep 17 00:00:00 2001
From: andreastanderen <71079896+standeren@users.noreply.github.com>
Date: Thu, 26 Oct 2023 12:58:56 +0200
Subject: [PATCH] use empty array for layouts if not yet loaded when changing
 layoutset (#11340)

* Set layouts as empty array if not loaded yet

* Move selected layout set to global ux-editor context

* fix tests

* Add tests

* Move MapIformLayoutsToLayouts outside of comopnent

* Filter out eventlistener on window from useLocalStorage hook to separate useReactiveLocalStorage hook
---
 .../Designer/Controllers/PreviewController.cs |  2 +-
 .../DeleteAttachmentTests.cs                  |  4 +-
 .../PreviewController/GetFormDataTests.cs     |  8 +--
 .../InstanceForNextTaskTests.cs               |  4 +-
 .../PreviewController/InstancesTests.cs       |  4 +-
 .../PreviewController/PostAttachmentTests.cs  |  4 +-
 .../PreviewController/ProcessNextTests.cs     |  4 +-
 .../PreviewController/ProcessTests.cs         |  4 +-
 .../PreviewController/UpdateFormDataTests.cs  |  2 +-
 .../UpdateProcessNextTests.cs                 |  4 +-
 .../app-preview/src/views/LandingPage.tsx     | 10 ++--
 .../shared/src/hooks/useEventListener.test.ts | 39 ++++++++++++++
 .../shared/src/hooks/useEventListener.ts      | 16 ++++++
 .../shared/src/hooks/useLocalStorage.ts       |  4 +-
 .../src/hooks/useReactiveLocalStorage.ts      | 20 +++++++
 .../providers/PreviewConnectionContext.tsx    |  2 +-
 .../packages/shared/src/utils/webStorage.ts   |  2 +-
 frontend/packages/ux-editor/src/App.test.tsx  | 28 +++++-----
 frontend/packages/ux-editor/src/App.tsx       | 48 +++++------------
 frontend/packages/ux-editor/src/AppContext.ts |  7 +--
 frontend/packages/ux-editor/src/SubApp.tsx    |  7 ++-
 .../src/components/Elements/Elements.tsx      | 11 ++--
 .../Elements/LayoutSetsContainer.test.tsx     | 51 ++++++++++--------
 .../Elements/LayoutSetsContainer.tsx          | 13 ++---
 .../FormComponent/FormComponent.tsx           |  8 ++-
 .../src/components/Preview/Preview.tsx        |  7 +--
 .../components/config/EditFormContainer.tsx   | 10 ++--
 .../config/Expressions/DataSourceValue.tsx    |  5 +-
 .../toolbar/ConditionalRenderingModal.tsx     | 11 ++--
 .../src/components/toolbar/RuleModal.tsx      |  5 +-
 .../src/containers/DesignView/DesignView.tsx  | 52 ++++++++-----------
 .../NavigationMenu/NavigationMenu.tsx         |  4 +-
 .../FormContainer/FormContainer.tsx           |  7 ++-
 .../ux-editor/src/containers/FormContext.tsx  | 18 +++----
 .../formLayout/formLayoutSlice.ts             |  5 +-
 .../useAddItemToLayoutMutation.test.ts        |  2 +-
 .../useConfigureLayoutSetMutation.test.ts     | 21 ++++++++
 .../useConfigureLayoutSetMutation.ts          |  7 ++-
 .../src/hooks/useFormLayoutsSelector.ts       |  5 +-
 .../src/selectors/formLayoutSelectors.test.ts |  8 +--
 .../src/selectors/formLayoutSelectors.ts      |  3 --
 .../ux-editor/src/testing/appContextMock.ts   |  5 +-
 .../packages/ux-editor/src/testing/mocks.tsx  |  2 +-
 43 files changed, 268 insertions(+), 215 deletions(-)
 create mode 100644 frontend/packages/shared/src/hooks/useEventListener.test.ts
 create mode 100644 frontend/packages/shared/src/hooks/useEventListener.ts
 create mode 100644 frontend/packages/shared/src/hooks/useReactiveLocalStorage.ts
 create mode 100644 frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts

diff --git a/backend/src/Designer/Controllers/PreviewController.cs b/backend/src/Designer/Controllers/PreviewController.cs
index eba1205149b..2f0d7d1de00 100644
--- a/backend/src/Designer/Controllers/PreviewController.cs
+++ b/backend/src/Designer/Controllers/PreviewController.cs
@@ -849,7 +849,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
index 0ee46612cab..c18b2e418e7 100644
--- 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
index ab77e8cb537..05ce8da85bc 100644
--- 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
index 9f74248d81d..64101fb7118 100644
--- 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
index 5e144a0be4d..b34f76acb73 100644
--- 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
index cb4d8d55def..ac4290b66a1 100644
--- 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
index bbbe4f4fee5..4186499d052 100644
--- 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
index 90d7c272297..2244275d508 100644
--- 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
index 485e674d1c1..561d878d350 100644
--- 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
index df9441628bc..11a306bc156 100644
--- 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
index dd5d08647cd..4c0100deb1e 100644
--- a/frontend/app-preview/src/views/LandingPage.tsx
+++ b/frontend/app-preview/src/views/LandingPage.tsx
@@ -35,9 +35,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {
   const [openSaveChoiceInSession, setOpenShowSaveChoiceInSession] = useState<boolean>(false);
   const showPreviewLimitationsInfoSession: boolean = typedSessionStorage.getItem('showPreviewLimitationsInfo');
   const [showPreviewLimitationsInfo, setShowPreviewLimitationsInfo] = useState<boolean>(showPreviewLimitationsInfoSession ?? true);
-  const [selectedLayoutSetInEditor, setSelectedLayoutSetInEditor] = useLocalStorage<string>(
-    'layoutSet/' + app,
-  );
+  const [selectedLayoutSet, setSelectedLayoutSet] = useLocalStorage<string>('layoutSet/' + app, null);
   const [previewViewSize, setPreviewViewSize] = useLocalStorage<PreviewAsViewSize>(
     'viewSize',
     'desktop',
@@ -49,7 +47,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();
   };
@@ -94,7 +92,7 @@ export const LandingPage = ({ variant = 'preview' }: LandingPageProps) => {
             <AppPreviewSubMenu
               setViewSize={setPreviewViewSize}
               viewSize={previewViewSize}
-              selectedLayoutSet={selectedLayoutSetInEditor}
+              selectedLayoutSet={selectedLayoutSet}
               handleChangeLayoutSet={handleChangeLayoutSet}
             />
           }
@@ -121,7 +119,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}
           />
         </div>
diff --git a/frontend/packages/shared/src/hooks/useEventListener.test.ts b/frontend/packages/shared/src/hooks/useEventListener.test.ts
new file mode 100644
index 00000000000..67ee38f671c
--- /dev/null
+++ b/frontend/packages/shared/src/hooks/useEventListener.test.ts
@@ -0,0 +1,39 @@
+import { renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
+
+import { useEventListener } from './useEventListener';
+
+const user = userEvent.setup();
+
+const renderUseEventListener = (eventType: string, action: () => void) =>
+    renderHook(() => useEventListener(eventType, action), {
+        initialProps: { eventType, action },
+    });
+
+describe('useEventListener', () => {
+    it('Calls action when given event happens', async () => {
+        const action = jest.fn();
+        renderUseEventListener('click', action);
+        await act(() => user.click(document.body));
+        expect(action).toHaveBeenCalledTimes(1);
+    });
+
+    it('Does not call action when another event is given', async () => {
+        const action = jest.fn();
+        renderUseEventListener('click', action);
+        await act(() => user.keyboard('{Enter}'));
+        expect(action).not.toHaveBeenCalled();
+    });
+
+    it('Removes event listener on unmount', () => {
+        const removeEventListenerSpy = jest.spyOn(
+            window,
+            'removeEventListener',
+        );
+        const { unmount } = renderUseEventListener('click', jest.fn());
+        expect(removeEventListenerSpy).not.toHaveBeenCalled();
+        unmount();
+        expect(removeEventListenerSpy).toHaveBeenCalledTimes(1);
+    });
+});
\ No newline at end of file
diff --git a/frontend/packages/shared/src/hooks/useEventListener.ts b/frontend/packages/shared/src/hooks/useEventListener.ts
new file mode 100644
index 00000000000..c33e8b74460
--- /dev/null
+++ b/frontend/packages/shared/src/hooks/useEventListener.ts
@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+/**
+ * Adds an event listener to the given element or the document body if no element is given. The listener is removed on unmount.
+ * @param eventType The event type to listen for.
+ * @param action The action to perform when the event is triggered.
+ */
+export function useEventListener(
+    eventType: string,
+    action: () => void,
+) {
+    useEffect(() => {
+        window.addEventListener(eventType, action);
+        return () => window.removeEventListener(eventType, action);
+    }, [eventType, action]);
+}
diff --git a/frontend/packages/shared/src/hooks/useLocalStorage.ts b/frontend/packages/shared/src/hooks/useLocalStorage.ts
index f37851426a8..e85c06cf242 100644
--- a/frontend/packages/shared/src/hooks/useLocalStorage.ts
+++ b/frontend/packages/shared/src/hooks/useLocalStorage.ts
@@ -31,5 +31,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/hooks/useReactiveLocalStorage.ts b/frontend/packages/shared/src/hooks/useReactiveLocalStorage.ts
new file mode 100644
index 00000000000..30d1afcced0
--- /dev/null
+++ b/frontend/packages/shared/src/hooks/useReactiveLocalStorage.ts
@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { typedLocalStorage } from 'app-shared/utils/webStorage';
+import { useLocalStorage } from './useLocalStorage';
+import { useEventListener } from './useEventListener';
+
+export const useReactiveLocalStorage = <T>(
+    key: string,
+    initialValue?: T,
+): [T, (newValue: T) => void, () => void] => {
+    const [value, setValue, removeValue] = useLocalStorage(key, initialValue);
+
+    const handleStorageChange = useCallback(() => {
+        const item = typedLocalStorage.getItem<T>(key);
+        setValue(item);
+    }, [key, setValue]);
+
+    useEventListener('storage', handleStorageChange);
+
+    return [value, setValue, removeValue];
+};
diff --git a/frontend/packages/shared/src/providers/PreviewConnectionContext.tsx b/frontend/packages/shared/src/providers/PreviewConnectionContext.tsx
index ca98f0c52e7..556cc06b97d 100644
--- 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
index 46d4442f260..03718753c68 100644
--- 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) {
diff --git a/frontend/packages/ux-editor/src/App.test.tsx b/frontend/packages/ux-editor/src/App.test.tsx
index 217a19df38c..b48964bf1e0 100644
--- a/frontend/packages/ux-editor/src/App.test.tsx
+++ b/frontend/packages/ux-editor/src/App.test.tsx
@@ -6,24 +6,31 @@ import { textMock } from '../../../testing/mocks/i18nMock';
 import { typedLocalStorage } from 'app-shared/utils/webStorage';
 import { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import { appStateMock } from './testing/stateMocks';
+import { AppContextProps } from './AppContext';
 
-const render = () => {
+const { selectedLayoutSet } = appStateMock.formDesigner.layout;
+const removeSelectedLayoutSetMock = jest.fn();
+const render = (selectedLayoutSetForRender: string) => {
   const queries: Partial<ServicesContextProps> = {
     getInstanceIdForPreview: jest.fn().mockImplementation(() => Promise.resolve('test')),
   };
-  return renderWithMockStore({}, queries)(<App />);
+  const appContextProps: Partial<AppContextProps> = {
+    selectedLayoutSet: selectedLayoutSetForRender,
+    removeSelectedLayoutSet: removeSelectedLayoutSetMock,
+  };
+  return renderWithMockStore({}, queries, undefined, appContextProps)(<App />);
 };
 
 describe('App', () => {
   afterEach(jest.clearAllMocks);
 
   it('should render the spinner', () => {
-    render();
+    render(selectedLayoutSet);
     expect(screen.getByText(textMock('general.loading'))).toBeInTheDocument();
   });
 
   it('should render the component', async () => {
-    render();
+    render(selectedLayoutSet);
     await waitFor(() =>
       expect(screen.queryByText(textMock('general.loading'))).not.toBeInTheDocument(),
     );
@@ -31,24 +38,19 @@ describe('App', () => {
 
   it('Removes the preview layout set from local storage if it does not exist', async () => {
     const layoutSetThatDoesNotExist = 'layout-set-that-does-not-exist';
-    jest.spyOn(typedLocalStorage, 'getItem').mockReturnValue(layoutSetThatDoesNotExist);
-    const removeItem = jest.spyOn(typedLocalStorage, 'removeItem');
-    render();
+    render(layoutSetThatDoesNotExist);
     await waitFor(() =>
       expect(screen.queryByText(textMock('general.loading'))).not.toBeInTheDocument(),
     );
-    expect(removeItem).toHaveBeenCalledTimes(1);
-    expect(removeItem).toHaveBeenCalledWith('layoutSet/app');
+    expect(removeSelectedLayoutSetMock).toHaveBeenCalledTimes(1);
   });
 
   it('Does not remove the preview layout set from local storage if it exists', async () => {
-    const { selectedLayoutSet } = appStateMock.formDesigner.layout;
     jest.spyOn(typedLocalStorage, 'getItem').mockReturnValue(selectedLayoutSet);
-    const removeItem = jest.spyOn(typedLocalStorage, 'removeItem');
-    render();
+    render(selectedLayoutSet);
     await waitFor(() =>
       expect(screen.queryByText(textMock('general.loading'))).not.toBeInTheDocument(),
     );
-    expect(removeItem).not.toHaveBeenCalled();
+    expect(removeSelectedLayoutSetMock).not.toHaveBeenCalled();
   });
 });
diff --git a/frontend/packages/ux-editor/src/App.tsx b/frontend/packages/ux-editor/src/App.tsx
index 4266faf5533..d15ff92d4b2 100644
--- a/frontend/packages/ux-editor/src/App.tsx
+++ b/frontend/packages/ux-editor/src/App.tsx
@@ -1,21 +1,16 @@
 import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { FormDesigner } from './containers/FormDesigner';
-import { FormLayoutActions } from './features/formDesigner/formLayout/formLayoutSlice';
 import { useText } from './hooks';
 import { PageSpinner } from 'app-shared/components/PageSpinner';
 import { ErrorPage } from './components/ErrorPage';
 import { useDatamodelMetadataQuery } from './hooks/queries/useDatamodelMetadataQuery';
-import {
-  selectedLayoutNameSelector,
-  selectedLayoutSetSelector,
-} from './selectors/formLayoutSelectors';
+import { selectedLayoutNameSelector } from './selectors/formLayoutSelectors';
 import { useWidgetsQuery } from './hooks/queries/useWidgetsQuery';
 import { useTextResourcesQuery } from 'app-shared/hooks/queries/useTextResourcesQuery';
 import { useLayoutSetsQuery } from './hooks/queries/useLayoutSetsQuery';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
-import { useLocalStorage } from 'app-shared/hooks/useLocalStorage';
+import { useAppContext } from "./hooks/useAppContext";
 
 /**
  * This is the main React component responsible for controlling
@@ -24,16 +19,10 @@ import { useLocalStorage } from 'app-shared/hooks/useLocalStorage';
  */
 
 export function App() {
-  const dispatch = useDispatch();
   const t = useText();
   const { org, app } = useStudioUrlParams();
   const selectedLayout = useSelector(selectedLayoutNameSelector);
-  const [
-    selectedLayoutSetInPreview,
-    setSelectedLayoutSetInPreview,
-    removeSelectedLayoutSetInPreview,
-  ] = useLocalStorage('layoutSet/' + app, null);
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet, setSelectedLayoutSet, removeSelectedLayoutSet } = useAppContext();
   const { data: layoutSets, isSuccess: areLayoutSetsFetched } = useLayoutSetsQuery(org, app);
   const { isSuccess: areWidgetsFetched, isError: widgetFetchedError } = useWidgetsQuery(org, app);
   const { isSuccess: isDatamodelFetched, isError: dataModelFetchedError } =
@@ -42,17 +31,17 @@ export function App() {
 
   useEffect(() => {
     if (
-      areLayoutSetsFetched &&
-      selectedLayoutSetInPreview &&
-      (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSetInPreview))
+        areLayoutSetsFetched &&
+        selectedLayoutSet &&
+        (!layoutSets || !layoutSets.sets.map((set) => set.id).includes(selectedLayoutSet))
     )
-      removeSelectedLayoutSetInPreview();
+      removeSelectedLayoutSet();
   }, [
     areLayoutSetsFetched,
     layoutSets,
-    selectedLayoutSetInPreview,
-    setSelectedLayoutSetInPreview,
-    removeSelectedLayoutSetInPreview,
+    selectedLayoutSet,
+    setSelectedLayoutSet,
+    removeSelectedLayoutSet,
   ]);
 
   const componentIsReady = areWidgetsFetched && isDatamodelFetched && areTextResourcesFetched;
@@ -81,18 +70,9 @@ export function App() {
   useEffect(() => {
     if (selectedLayoutSet === null && layoutSets) {
       // Only set layout set if layout sets exists and there is no layout set selected yet
-      dispatch(FormLayoutActions.updateSelectedLayoutSet(layoutSets.sets[0].id));
-      typedLocalStorage.setItem<string>('layoutSet/' + app, layoutSets.sets[0].id);
+      setSelectedLayoutSet(layoutSets.sets[0].id);
     }
-  }, [dispatch, selectedLayoutSet, layoutSets, app]);
-
-  useEffect(() => {
-    const layoutSetInEditor = selectedLayoutSetInPreview ?? selectedLayoutSet;
-    if (layoutSets && layoutSetInEditor !== null && layoutSetInEditor !== '') {
-      typedLocalStorage.setItem<string>('layoutSet/' + app, layoutSetInEditor);
-      dispatch(FormLayoutActions.updateSelectedLayoutSet(layoutSetInEditor));
-    }
-  }, [dispatch, selectedLayoutSet, layoutSets, selectedLayoutSetInPreview, app]);
+  }, [setSelectedLayoutSet, selectedLayoutSet, layoutSets, app]);
 
   if (componentHasError) {
     const mappedError = mapErrorToDisplayError();
@@ -103,7 +83,7 @@ export function App() {
     return (
       <FormDesigner
         selectedLayout={selectedLayout}
-        selectedLayoutSet={selectedLayoutSetInPreview ?? selectedLayoutSet}
+        selectedLayoutSet={selectedLayoutSet}
       />
     );
   }
diff --git a/frontend/packages/ux-editor/src/AppContext.ts b/frontend/packages/ux-editor/src/AppContext.ts
index 1ba57248342..25b6e869d37 100644
--- a/frontend/packages/ux-editor/src/AppContext.ts
+++ b/frontend/packages/ux-editor/src/AppContext.ts
@@ -2,8 +2,9 @@ import { createContext, RefObject } from 'react';
 
 export interface AppContextProps {
   previewIframeRef: RefObject<HTMLIFrameElement>;
+  selectedLayoutSet: string;
+  setSelectedLayoutSet: (layoutSet: string) => void;
+  removeSelectedLayoutSet: () => void;
 }
 
-export const AppContext = createContext<AppContextProps>({
-  previewIframeRef: null,
-});
+export const AppContext = createContext<AppContextProps>(null);
diff --git a/frontend/packages/ux-editor/src/SubApp.tsx b/frontend/packages/ux-editor/src/SubApp.tsx
index f73b9266f12..690645b143d 100644
--- a/frontend/packages/ux-editor/src/SubApp.tsx
+++ b/frontend/packages/ux-editor/src/SubApp.tsx
@@ -4,12 +4,17 @@ import { App } from './App';
 import { store } from './store';
 import './styles/index.css';
 import { AppContext } from './AppContext';
+import { useReactiveLocalStorage } from 'app-shared/hooks/useReactiveLocalStorage';
+import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 
 export const SubApp = () => {
   const previewIframeRef = useRef<HTMLIFrameElement>(null);
+  const { app } = useStudioUrlParams();
+  const [selectedLayoutSet, setSelectedLayoutSet, removeSelectedLayoutSet] = useReactiveLocalStorage('layoutSet/' + app, null);
+
   return (
     <Provider store={store}>
-      <AppContext.Provider value={{ previewIframeRef }}>
+      <AppContext.Provider value={{ previewIframeRef, selectedLayoutSet, setSelectedLayoutSet, removeSelectedLayoutSet }}>
         <App />
       </AppContext.Provider>
     </Provider>
diff --git a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx
index 07d01384080..f3d76b400f3 100644
--- a/frontend/packages/ux-editor/src/components/Elements/Elements.tsx
+++ b/frontend/packages/ux-editor/src/components/Elements/Elements.tsx
@@ -2,12 +2,10 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { ConfPageToolbar } from './ConfPageToolbar';
 import { DefaultToolbar } from './DefaultToolbar';
-import { _useIsProdHack } from 'app-shared/utils/_useIsProdHack';
 import { Heading, Paragraph } from '@digdir/design-system-react';
 import { useText } from '../../hooks';
 import {
   selectedLayoutNameSelector,
-  selectedLayoutSetSelector,
 } from '../../selectors/formLayoutSelectors';
 import { useFormLayoutSettingsQuery } from '../../hooks/queries/useFormLayoutSettingsQuery';
 import { useLayoutSetsQuery } from '../../hooks/queries/useLayoutSetsQuery';
@@ -17,14 +15,15 @@ import { Accordion } from '@digdir/design-system-react';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { shouldDisplayFeature } from 'app-shared/utils/featureToggleUtils';
 import classes from './Elements.module.css';
+import { useAppContext } from '../../hooks/useAppContext';
 
 export const Elements = () => {
   const { org, app } = useStudioUrlParams();
   const selectedLayout: string = useSelector(selectedLayoutNameSelector);
-  const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const layoutSetsQuery = useLayoutSetsQuery(org, app);
-  const formLayoutSettingsQuery = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
-  const { receiptLayoutName } = formLayoutSettingsQuery.data;
+  const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
+  const receiptName = formLayoutSettings?.receiptLayoutName;
   const layoutSetNames = layoutSetsQuery?.data?.sets;
 
   const hideComponents = selectedLayout === 'default' || selectedLayout === undefined;
@@ -56,7 +55,7 @@ export const Elements = () => {
           <Paragraph className={classes.noPageSelected} size='small'>
             {t('left_menu.no_components_selected')}
           </Paragraph>
-        ) : receiptLayoutName === selectedLayout ? (
+        ) : receiptName === selectedLayout ? (
           <ConfPageToolbar />
         ) : (
           <DefaultToolbar />
diff --git a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.test.tsx b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.test.tsx
index 9bf25ac6abe..0d5d42f318b 100644
--- a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.test.tsx
+++ b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.test.tsx
@@ -1,25 +1,34 @@
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { LayoutSetsContainer } from './LayoutSetsContainer';
+import { act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { renderWithMockStore } from '../../testing/mocks';
+import { LayoutSetsContainer } from './LayoutSetsContainer';
+import { queryClientMock, renderWithMockStore } from '../../testing/mocks';
 import { layoutSetsMock } from '../../testing/layoutMock';
-import { useDispatch } from 'react-redux';
+import { AppContextProps } from '../../AppContext';
+import { appStateMock } from '../../testing/stateMocks';
+import { QueryKey } from 'app-shared/types/QueryKey';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: jest.fn(),
 }));
+// Test data
+const org = 'org';
+const app = 'app';
+const layoutSetName1 = layoutSetsMock.sets[0].id;
+const layoutSetName2 = layoutSetsMock.sets[1].id;
+const { selectedLayoutSet } = appStateMock.formDesigner.layout;
+const setSelectedLayoutSetMock = jest.fn();
 
 describe('LayoutSetsContainer', () => {
   it('renders component', async () => {
     render();
 
     expect(
-      await screen.findByRole('option', { name: layoutSetsMock.sets[0].id }),
+      await screen.findByRole('option', { name: layoutSetName1 }),
     ).toBeInTheDocument();
     expect(
-      await screen.findByRole('option', { name: layoutSetsMock.sets[1].id }),
+      await screen.findByRole('option', { name: layoutSetName2 }),
     ).toBeInTheDocument();
   });
 
@@ -28,24 +37,20 @@ describe('LayoutSetsContainer', () => {
     expect(screen.getByRole('combobox')).toBeInTheDocument();
   });
 
-  it('calls dispatch when selecting an option', async () => {
-    const dispatch = jest.fn();
-    (useDispatch as jest.Mock).mockReturnValue(dispatch);
+  it('Should update selected layout set when set is clicked in native select', async () => {
     render();
-
-    await waitFor(async () => {
-      await userEvent.selectOptions(
-        screen.getByRole('combobox'),
-        screen.getByRole('option', { name: layoutSetsMock.sets[0].id }),
-      );
-    });
-
-    expect(dispatch).toHaveBeenCalledTimes(1);
-    expect(dispatch).toHaveBeenCalledWith({
-      payload: layoutSetsMock.sets[0].id,
-      type: 'formDesigner/updateSelectedLayoutSet',
-    });
+    const user = userEvent.setup();
+    await act(() => user.selectOptions(screen.getByRole('combobox'), layoutSetName2));
+    expect(setSelectedLayoutSetMock).toHaveBeenCalledTimes(1);
   });
+
 });
 
-const render = () => renderWithMockStore()(<LayoutSetsContainer />);
+const render = () => {
+  queryClientMock.setQueryData([QueryKey.LayoutSets, org, app], layoutSetsMock);
+  const appContextProps: Partial<AppContextProps> = {
+    selectedLayoutSet: selectedLayoutSet,
+    setSelectedLayoutSet: setSelectedLayoutSetMock,
+  };
+  return renderWithMockStore({}, {}, undefined, appContextProps)(<LayoutSetsContainer />);
+};
diff --git a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx
index a9128642b24..2dd89c5f23e 100644
--- a/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx
+++ b/frontend/packages/ux-editor/src/components/Elements/LayoutSetsContainer.tsx
@@ -1,25 +1,22 @@
 import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
 import { useLayoutSetsQuery } from '../../hooks/queries/useLayoutSetsQuery';
-import { selectedLayoutSetSelector } from '../../selectors/formLayoutSelectors';
-import { FormLayoutActions } from '../../features/formDesigner/formLayout/formLayoutSlice';
 import { NativeSelect } from '@digdir/design-system-react';
-import { typedLocalStorage } from 'app-shared/utils/webStorage';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { useText } from '../../hooks';
 import classes from './LayoutSetsContainer.module.css';
+import { useAppContext } from '../../hooks/useAppContext';
 
 export function LayoutSetsContainer() {
   const { org, app } = useStudioUrlParams();
-  const dispatch = useDispatch();
   const layoutSetsQuery = useLayoutSetsQuery(org, app);
   const layoutSetNames = layoutSetsQuery.data?.sets?.map((set) => set.id);
-  const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
   const t = useText();
+  const { selectedLayoutSet, setSelectedLayoutSet } = useAppContext();
 
   const onLayoutSetClick = (set: string) => {
-    dispatch(FormLayoutActions.updateSelectedLayoutSet(set));
-    typedLocalStorage.setItem<string>('layoutSet/' + app, set);
+    if (selectedLayoutSet !== set){
+      setSelectedLayoutSet(set);
+    }
   };
 
   if (!layoutSetNames) return null;
diff --git a/frontend/packages/ux-editor/src/components/FormComponent/FormComponent.tsx b/frontend/packages/ux-editor/src/components/FormComponent/FormComponent.tsx
index 5909a0f6f58..82aef876566 100644
--- a/frontend/packages/ux-editor/src/components/FormComponent/FormComponent.tsx
+++ b/frontend/packages/ux-editor/src/components/FormComponent/FormComponent.tsx
@@ -11,14 +11,13 @@ import { ITextResource } from 'app-shared/types/global';
 import { TrashIcon } from '@navikt/aksel-icons';
 import { formItemConfigs } from '../../data/formItemConfig';
 import { getComponentTitleByComponentType, getTextResource, truncate } from '../../utils/language';
-import { selectedLayoutSetSelector } from '../../selectors/formLayoutSelectors';
 import { textResourcesByLanguageSelector } from '../../selectors/textResourceSelectors';
 import { useDeleteFormComponentMutation } from '../../hooks/mutations/useDeleteFormComponentMutation';
 import { useTextResourcesSelector } from '../../hooks';
 import { useTranslation } from 'react-i18next';
-import { useSelector } from 'react-redux';
 import { AltinnConfirmDialog } from 'app-shared/components';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from '../../hooks/useAppContext';
 
 export interface IFormComponentProps {
   component: IFormComponent;
@@ -37,7 +36,6 @@ export const FormComponent = memo(function FormComponent({
   handleDiscard,
   handleEdit,
   handleSave,
-  debounceSave,
   id,
   isEditMode,
 }: IFormComponentProps) {
@@ -47,14 +45,14 @@ export const FormComponent = memo(function FormComponent({
   const textResources: ITextResource[] = useTextResourcesSelector<ITextResource[]>(
     textResourcesByLanguageSelector(DEFAULT_LANGUAGE),
   );
-  const selectedLayoutSetName = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const [isConfirmDeleteDialogOpen, setIsConfirmDeleteDialogOpen] = useState<boolean>();
   const Icon = formItemConfigs[component.type]?.icon;
 
   const { mutate: deleteFormComponent } = useDeleteFormComponentMutation(
     org,
     app,
-    selectedLayoutSetName,
+    selectedLayoutSet,
   );
 
   const handleDelete = (): void => {
diff --git a/frontend/packages/ux-editor/src/components/Preview/Preview.tsx b/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
index 440422f7bd7..faade71ef6e 100644
--- a/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
+++ b/frontend/packages/ux-editor/src/components/Preview/Preview.tsx
@@ -3,10 +3,7 @@ import classes from './Preview.module.css';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { useSelector } from 'react-redux';
 import cn from 'classnames';
-import {
-  selectedLayoutNameSelector,
-  selectedLayoutSetSelector,
-} from '../../selectors/formLayoutSelectors';
+import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../../hooks/useAppContext';
 import { useUpdate } from 'app-shared/hooks/useUpdate';
@@ -42,7 +39,7 @@ const NoSelectedPageMessage = () => {
 const PreviewFrame = () => {
   const { org, app } = useStudioUrlParams();
   const [viewportToSimulate, setViewportToSimulate] = useState<SupportedView>('desktop');
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const { t } = useTranslation();
   const { previewIframeRef } = useAppContext();
   const layoutName = useSelector(selectedLayoutNameSelector);
diff --git a/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx b/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx
index 60310f3ab22..68fdf2530c3 100644
--- a/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx
+++ b/frontend/packages/ux-editor/src/components/config/EditFormContainer.tsx
@@ -14,14 +14,12 @@ import { useSelectedFormLayout, useTextResourcesSelector } from '../../hooks';
 import { textResourcesByLanguageSelector } from '../../selectors/textResourceSelectors';
 import { DEFAULT_LANGUAGE } from 'app-shared/constants';
 import { ITextResource } from 'app-shared/types/global';
-import {
-  selectedLayoutNameSelector,
-  selectedLayoutSetSelector,
-} from '../../selectors/formLayoutSelectors';
+import { selectedLayoutNameSelector } from '../../selectors/formLayoutSelectors';
 import { useFormLayoutsQuery } from '../../hooks/queries/useFormLayoutsQuery';
 import { FormField } from '../FormField';
 import { FormContainer } from '../../types/FormContainer';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from '../../hooks/useAppContext';
 
 export interface IEditFormContainerProps {
   editFormId: string;
@@ -38,8 +36,8 @@ export const EditFormContainer = ({
 
   const { org, app } = useStudioUrlParams();
 
-  const selectedLayoutSetName = useSelector(selectedLayoutSetSelector);
-  const { data: formLayouts } = useFormLayoutsQuery(org, app, selectedLayoutSetName);
+  const { selectedLayoutSet } = useAppContext();
+  const { data: formLayouts } = useFormLayoutsQuery(org, app, selectedLayoutSet);
   const { data: dataModel } = useDatamodelMetadataQuery(org, app);
   const { components, containers } = useSelectedFormLayout();
   const textResources: ITextResource[] = useTextResourcesSelector<ITextResource[]>(
diff --git a/frontend/packages/ux-editor/src/components/config/Expressions/DataSourceValue.tsx b/frontend/packages/ux-editor/src/components/config/Expressions/DataSourceValue.tsx
index 8890821b36e..809b43b2edc 100644
--- a/frontend/packages/ux-editor/src/components/config/Expressions/DataSourceValue.tsx
+++ b/frontend/packages/ux-editor/src/components/config/Expressions/DataSourceValue.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
 import {
   Select,
   SingleSelectOption,
@@ -10,10 +9,10 @@ import { DataSource, SubExpression } from '../../../types/Expressions';
 import { DatamodelFieldElement } from 'app-shared/types/DatamodelFieldElement';
 import { useDatamodelMetadataQuery } from '../../../hooks/queries/useDatamodelMetadataQuery';
 import { useFormLayoutsQuery } from '../../../hooks/queries/useFormLayoutsQuery';
-import { selectedLayoutSetSelector } from '../../../selectors/formLayoutSelectors';
 import { getComponentIds, getDataModelElementNames } from '../../../utils/expressionsUtils';
 import { useText } from '../../../hooks';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from "../../../hooks/useAppContext";
 
 export interface DataSourceValueProps {
   subExpression: SubExpression;
@@ -29,7 +28,7 @@ export const DataSourceValue = ({
   isComparableValue,
 }: DataSourceValueProps) => {
   const { org, app } = useStudioUrlParams();
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   // TODO: Show spinner when isLoading
   const datamodelQuery = useDatamodelMetadataQuery(org, app);
   const { data: formLayoutsData } = useFormLayoutsQuery(org, app, selectedLayoutSet);
diff --git a/frontend/packages/ux-editor/src/components/toolbar/ConditionalRenderingModal.tsx b/frontend/packages/ux-editor/src/components/toolbar/ConditionalRenderingModal.tsx
index 017581ddc46..02ae208791f 100644
--- a/frontend/packages/ux-editor/src/components/toolbar/ConditionalRenderingModal.tsx
+++ b/frontend/packages/ux-editor/src/components/toolbar/ConditionalRenderingModal.tsx
@@ -4,14 +4,11 @@ import { Typography } from '@mui/material';
 import { ConditionalRenderingComponent } from '../config/ConditionalRenderingComponent';
 import RuleButton from './RuleButton';
 import type { IRuleModelFieldElement } from '../../types/global';
-import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { useFormLayouts } from '../../hooks';
 import {
   getAllLayoutContainers,
   getAllLayoutComponents,
-  getFullLayoutOrder,
-  selectedLayoutSetSelector,
+  getFullLayoutOrder
 } from '../../selectors/formLayoutSelectors';
 import { useRuleModelQuery } from '../../hooks/queries/useRuleModelQuery';
 import { useRuleConfigQuery } from '../../hooks/queries/useRuleConfigQuery';
@@ -19,6 +16,8 @@ import { useRuleConfigMutation } from '../../hooks/mutations/useRuleConfigMutati
 import { ConditionalRenderingConnection } from 'app-shared/types/RuleConfig';
 import { addConditionalRenderingConnection, deleteConditionalRenderingConnection } from '../../utils/ruleConfigUtils';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useFormLayoutsQuery } from '../../hooks/queries/useFormLayoutsQuery';
+import { useAppContext } from "../../hooks/useAppContext";
 
 export interface IConditionalRenderingModalProps {
   modalOpen: boolean;
@@ -29,11 +28,11 @@ export interface IConditionalRenderingModalProps {
 export function ConditionalRenderingModal(props: IConditionalRenderingModalProps) {
   const { org, app } = useStudioUrlParams();
   const [selectedConnectionId, setSelectedConnectionId] = React.useState<string>(null);
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const { data: ruleModel } = useRuleModelQuery(org, app, selectedLayoutSet);
   const { data: ruleConfig } = useRuleConfigQuery(org, app, selectedLayoutSet);
   const { mutate: saveRuleConfig } = useRuleConfigMutation(org, app, selectedLayoutSet);
-  const formLayouts = useFormLayouts();
+  const { data: formLayouts } = useFormLayoutsQuery(org, app, selectedLayoutSet);
   const layoutContainers = getAllLayoutContainers(formLayouts);
   const layoutComponents = getAllLayoutComponents(formLayouts);
   const layoutOrder = getFullLayoutOrder(formLayouts);
diff --git a/frontend/packages/ux-editor/src/components/toolbar/RuleModal.tsx b/frontend/packages/ux-editor/src/components/toolbar/RuleModal.tsx
index 94437506dd4..7a033257af3 100644
--- a/frontend/packages/ux-editor/src/components/toolbar/RuleModal.tsx
+++ b/frontend/packages/ux-editor/src/components/toolbar/RuleModal.tsx
@@ -3,15 +3,14 @@ import Modal from 'react-modal';
 import { Typography } from '@mui/material';
 import { RuleComponent } from '../config/RuleComponent';
 import RuleButton from './RuleButton';
-import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useRuleModelQuery } from '../../hooks/queries/useRuleModelQuery';
 import { RuleConnection } from 'app-shared/types/RuleConfig';
 import { useRuleConfigQuery } from '../../hooks/queries/useRuleConfigQuery';
 import { useRuleConfigMutation } from '../../hooks/mutations/useRuleConfigMutation';
 import { addRuleConnection, deleteRuleConnection } from '../../utils/ruleConfigUtils';
-import { selectedLayoutSetSelector } from '../../selectors/formLayoutSelectors';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from '../../hooks/useAppContext';
 
 export interface IRuleModalProps {
   modalOpen: boolean;
@@ -22,7 +21,7 @@ export interface IRuleModalProps {
 export function RuleModal(props: IRuleModalProps) {
   const { org, app } = useStudioUrlParams();
   const [selectedConnectionId, setSelectedConnectionId] = React.useState<string>(null);
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const { data: ruleConfig } = useRuleConfigQuery(org, app, selectedLayoutSet);
   const { data: ruleModelElements } = useRuleModelQuery(org, app, selectedLayoutSet);
   const { mutate: saveRuleConfig } = useRuleConfigMutation(org, app, selectedLayoutSet);
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
index 4cc1d1dc8dc..2e0c0676e81 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/DesignView.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode, useEffect, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { selectedLayoutSetSelector } from '../../selectors/formLayoutSelectors';
+import { useDispatch } from 'react-redux';
 import { useFormLayoutsQuery } from '../../hooks/queries/useFormLayoutsQuery';
 import { BASE_CONTAINER_ID } from 'app-shared/constants';
 import classes from './DesignView.module.css';
@@ -20,53 +19,46 @@ import { setSelectedLayoutInLocalStorage } from '../../utils/localStorageUtils';
 import { PageAccordion } from './PageAccordion';
 import { RenderedFormContainer } from './RenderedFormContainer';
 import { ReceiptContent } from './ReceiptContent';
+import { useAppContext } from '../../hooks/useAppContext';
+
+/**
+ * Maps the IFormLayouts object to a list of FormLayouts
+ */
+const mapIFormLayoutsToFormLayouts = (formLayouts: IFormLayouts): FormLayout[] => {
+  return Object.entries(formLayouts).map(([key, value]) => ({
+    page: key,
+    data: value,
+  }));
+};
 
 /**
  * @component
- *    Displays the column containing accordions with componnets for each page
+ *    Displays the column containing accordions with components for each page
  *
  * @returns {ReactNode} - The rendered component
  */
 export const DesignView = (): ReactNode => {
   const dispatch = useDispatch();
   const { org, app } = useStudioUrlParams();
-  const selectedLayoutSet: string = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
+  const addLayoutMutation = useAddLayoutMutation(org, app, selectedLayoutSet);
   const { data: layouts } = useFormLayoutsQuery(org, app, selectedLayoutSet);
-
   const { data: instanceId } = useInstanceIdQuery(org, app);
   const { data: formLayoutSettings } = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
-  const formLayoutSettingsQuery = useFormLayoutSettingsQuery(org, app, selectedLayoutSet);
-  const receiptName = formLayoutSettingsQuery.data.receiptLayoutName;
-
-  const layoutOrder = formLayoutSettingsQuery.data.pages.order;
+  const receiptName = formLayoutSettings?.receiptLayoutName;
+  const layoutOrder = formLayoutSettings?.pages.order;
 
   const [searchParams, setSearchParams] = useSearchParams();
   const searchParamsLayout = searchParams.get('layout');
-
-  const { t } = useTranslation();
-
-  const addLayoutMutation = useAddLayoutMutation(org, app, selectedLayoutSet);
-
   const [openAccordion, setOpenAccordion] = useState(searchParamsLayout);
 
-  /**
-   * Maps the IFormLayouts object to a list of FormLayouts
-   */
-  const mapIFormLayoutsToFormLayouts = (iFormLayouts: IFormLayouts): FormLayout[] => {
-    return Object.entries(iFormLayouts).map(([key, value]) => ({
-      page: key,
-      data: value,
-    }));
-  };
-
-  const [formLayoutData, setFormLayoutData] = useState<FormLayout[]>(
-    mapIFormLayoutsToFormLayouts(layouts),
-  );
+  const { t } = useTranslation();
 
   useEffect(() => {
     setOpenAccordion(searchParamsLayout);
-    setFormLayoutData(mapIFormLayoutsToFormLayouts(layouts));
-  }, [layouts, searchParamsLayout]);
+  }, [searchParamsLayout]);
+
+  const formLayoutData = mapIFormLayoutsToFormLayouts(layouts);
 
   /**
    * Checks if the layout name provided is valid
@@ -133,7 +125,7 @@ export const DesignView = (): ReactNode => {
    * Displays the pages as an ordered list
    */
   const displayPageAccordions = layoutOrder.map((pageName, i) => {
-    const layout = formLayoutData.find((formLayout) => formLayout.page === pageName);
+    const layout = formLayoutData?.find((formLayout) => formLayout.page === pageName);
 
     // If the layout does not exist, return null
     if (layout === undefined) return null;
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
index 5ccb994a4e6..704cb4174a9 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/PageAccordion/NavigationMenu/NavigationMenu.tsx
@@ -15,7 +15,6 @@ import { useUpdateLayoutNameMutation } from '../../../../hooks/mutations/useUpda
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
 import { useSelector } from 'react-redux';
 import { useDeleteLayoutMutation } from '../../../../hooks/mutations/useDeleteLayoutMutation';
-import { selectedLayoutSetSelector } from '../../../../selectors/formLayoutSelectors';
 import type { IAppState } from '../../../../types/global';
 import { Divider } from 'app-shared/primitives';
 import { AltinnConfirmDialog } from 'app-shared/components';
@@ -23,6 +22,7 @@ import { useSearchParams } from 'react-router-dom';
 import { firstAvailableLayout } from '../../../../utils/formLayoutsUtils';
 import { InputPopover } from './InputPopover';
 import { deepCopy } from 'app-shared/pure';
+import { useAppContext } from '../../../../hooks/useAppContext';
 
 export type NavigationMenuProps = {
   /**
@@ -45,7 +45,7 @@ export const NavigationMenu = ({ pageName, pageIsReceipt }: NavigationMenuProps)
 
   const { org, app } = useStudioUrlParams();
 
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const invalidLayouts: string[] = useSelector(
     (state: IAppState) => state.formDesigner.layout.invalidLayouts,
   );
diff --git a/frontend/packages/ux-editor/src/containers/DesignView/RenderedFormContainer/FormContainer/FormContainer.tsx b/frontend/packages/ux-editor/src/containers/DesignView/RenderedFormContainer/FormContainer/FormContainer.tsx
index d188bfe797d..09e129221a4 100644
--- a/frontend/packages/ux-editor/src/containers/DesignView/RenderedFormContainer/FormContainer/FormContainer.tsx
+++ b/frontend/packages/ux-editor/src/containers/DesignView/RenderedFormContainer/FormContainer/FormContainer.tsx
@@ -6,9 +6,8 @@ import { useDeleteFormContainerMutation } from '../../../../hooks/mutations/useD
 import type { FormContainer as IFormContainer } from '../../../../types/FormContainer';
 import { FormContainerHeader } from './FormContainerHeader';
 import { ConnectDragSource } from 'react-dnd';
-import { selectedLayoutSetSelector } from '../../../../selectors/formLayoutSelectors';
-import { useSelector } from 'react-redux';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from '../../../../hooks/useAppContext';
 
 export interface IFormContainerProps {
   children: ReactNode;
@@ -34,12 +33,12 @@ export const FormContainer = ({
   isEditMode,
 }: IFormContainerProps) => {
   const { org, app } = useStudioUrlParams();
-  const selectedLayoutSetName = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
 
   const { mutate: deleteFormContainer } = useDeleteFormContainerMutation(
     org,
     app,
-    selectedLayoutSetName,
+    selectedLayoutSet,
   );
 
   const handleDeleteFormContainer = useCallback(deleteFormContainer, [deleteFormContainer]);
diff --git a/frontend/packages/ux-editor/src/containers/FormContext.tsx b/frontend/packages/ux-editor/src/containers/FormContext.tsx
index d53ea8f691c..27a6d422197 100644
--- a/frontend/packages/ux-editor/src/containers/FormContext.tsx
+++ b/frontend/packages/ux-editor/src/containers/FormContext.tsx
@@ -13,13 +13,11 @@ import type { FormComponent } from '../types/FormComponent';
 import { setCurrentEditId } from '../features/appData/textResources/textResourcesSlice';
 import { useUpdateFormContainerMutation } from '../hooks/mutations/useUpdateFormContainerMutation';
 import { useUpdateFormComponentMutation } from '../hooks/mutations/useUpdateFormComponentMutation';
-import {
-  selectedLayoutSetSelector,
-  selectedLayoutNameSelector,
-} from '../selectors/formLayoutSelectors';
+import { selectedLayoutNameSelector } from '../selectors/formLayoutSelectors';
 import { AUTOSAVE_DEBOUNCE_INTERVAL } from 'app-shared/constants';
 import { LayoutItemType } from '../types/global';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from '../hooks/useAppContext';
 
 export type FormContext = {
   formId: string;
@@ -56,9 +54,9 @@ type FormContextProviderProps = {
 export const FormContextProvider = ({ children }: FormContextProviderProps): JSX.Element => {
   const dispatch = useDispatch();
   const { org, app } = useStudioUrlParams();
-  const selectedLayoutSetName = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const selectedLayoutName = useSelector(selectedLayoutNameSelector);
-  const prevSelectedLayoutSetNameRef = useRef(selectedLayoutSetName);
+  const prevSelectedLayoutSetNameRef = useRef(selectedLayoutSet);
   const prevSelectedLayoutNameRef = useRef(selectedLayoutName);
 
   const autoSaveTimeoutRef = useRef(undefined);
@@ -72,13 +70,13 @@ export const FormContextProvider = ({ children }: FormContextProviderProps): JSX
     org,
     app,
     prevSelectedLayoutNameRef.current,
-    selectedLayoutSetName
+    selectedLayoutSet
   );
   const { mutateAsync: updateFormComponent } = useUpdateFormComponentMutation(
     org,
     app,
     prevSelectedLayoutNameRef.current,
-    selectedLayoutSetName
+    selectedLayoutSet
   );
 
   useEffect(() => {
@@ -156,7 +154,7 @@ export const FormContextProvider = ({ children }: FormContextProviderProps): JSX
   useEffect(() => {
     const autoSaveOnLayoutChange = async () => {
       if (
-        prevSelectedLayoutSetNameRef.current === selectedLayoutSetName &&
+        prevSelectedLayoutSetNameRef.current === selectedLayoutSet &&
         prevSelectedLayoutNameRef.current === selectedLayoutName
       )
         return;
@@ -167,7 +165,7 @@ export const FormContextProvider = ({ children }: FormContextProviderProps): JSX
     };
 
     autoSaveOnLayoutChange();
-  }, [handleDiscard, handleSave, selectedLayoutSetName, selectedLayoutName]);
+  }, [handleDiscard, handleSave, selectedLayoutSet, selectedLayoutName]);
 
   const value = useMemo(
     () => ({
diff --git a/frontend/packages/ux-editor/src/features/formDesigner/formLayout/formLayoutSlice.ts b/frontend/packages/ux-editor/src/features/formDesigner/formLayout/formLayoutSlice.ts
index 57734ac34c6..aed4c928c9b 100644
--- a/frontend/packages/ux-editor/src/features/formDesigner/formLayout/formLayoutSlice.ts
+++ b/frontend/packages/ux-editor/src/features/formDesigner/formLayout/formLayoutSlice.ts
@@ -40,10 +40,7 @@ const formLayoutSlice = createSlice({
     },
     updateSelectedLayout: (state, action: PayloadAction<string>) => {
       state.selectedLayout = action.payload;
-    },
-    updateSelectedLayoutSet: (state, action: PayloadAction<string>) => {
-      state.selectedLayoutSet = action.payload;
-    },
+    }
   },
 });
 
diff --git a/frontend/packages/ux-editor/src/hooks/mutations/useAddItemToLayoutMutation.test.ts b/frontend/packages/ux-editor/src/hooks/mutations/useAddItemToLayoutMutation.test.ts
index 8afb1f1dc00..930b9ac5e21 100644
--- a/frontend/packages/ux-editor/src/hooks/mutations/useAddItemToLayoutMutation.test.ts
+++ b/frontend/packages/ux-editor/src/hooks/mutations/useAddItemToLayoutMutation.test.ts
@@ -5,7 +5,7 @@ import { AddFormItemMutationArgs, useAddItemToLayoutMutation } from './useAddIte
 import { ComponentType } from 'app-shared/types/ComponentType';
 import { ApplicationAttachmentMetadata } from 'app-shared/types/ApplicationAttachmentMetadata';
 import { IAppState } from '../../types/global';
-import { externalLayoutsMock, layoutSetsMock } from "../../testing/layoutMock";
+import { externalLayoutsMock, layoutSetsMock } from '../../testing/layoutMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import { convertExternalLayoutsToInternalFormat } from '../../utils/formLayoutsUtils';
 
diff --git a/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts b/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts
new file mode 100644
index 00000000000..eb907050471
--- /dev/null
+++ b/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.test.ts
@@ -0,0 +1,21 @@
+import { queriesMock, renderHookWithMockStore } from '../../testing/mocks';
+import { useConfigureLayoutSetMutation } from './useConfigureLayoutSetMutation';
+import { waitFor } from '@testing-library/react';
+
+// Test data:
+const org = 'org';
+const app = 'app';
+const layoutSetName = 'first-layout-set-name';
+
+describe('useConfigureLayoutSetMutation', () => {
+    it('Calls configureLayoutSet with correct arguments and payload', async () => {
+        const configureLayoutSetResult = renderHookWithMockStore()(() => useConfigureLayoutSetMutation(org, app))
+            .renderHookResult
+            .result;
+        await configureLayoutSetResult.current.mutateAsync({ layoutSetName });
+        await waitFor(() => expect(configureLayoutSetResult.current.isSuccess).toBe(true));
+        
+        expect(queriesMock.configureLayoutSet).toHaveBeenCalledTimes(1);
+        expect(queriesMock.configureLayoutSet).toHaveBeenCalledWith(org, app, layoutSetName);
+    });
+});
\ No newline at end of file
diff --git a/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.ts b/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.ts
index a4ee62c40e6..7e58874dda1 100644
--- a/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.ts
+++ b/frontend/packages/ux-editor/src/hooks/mutations/useConfigureLayoutSetMutation.ts
@@ -1,8 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useDispatch } from 'react-redux';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
-import { FormLayoutActions } from '../../features/formDesigner/formLayout/formLayoutSlice';
+import { useAppContext } from '../useAppContext';
 
 export interface ConfigureLayoutSetMutationArgs {
   layoutSetName: string;
@@ -10,7 +9,7 @@ export interface ConfigureLayoutSetMutationArgs {
 
 export const useConfigureLayoutSetMutation = (org: string, app: string) => {
   const { configureLayoutSet } = useServicesContext();
-  const dispatch = useDispatch();
+  const { setSelectedLayoutSet } = useAppContext();
   const queryClient = useQueryClient();
 
   return useMutation({
@@ -21,7 +20,7 @@ export const useConfigureLayoutSetMutation = (org: string, app: string) => {
       })),
 
     onSuccess: ({ layoutSetName, layoutSets }) => {
-      dispatch(FormLayoutActions.updateSelectedLayoutSet(layoutSetName));
+      setSelectedLayoutSet(layoutSetName);
       queryClient.setQueryData([QueryKey.LayoutSets, org, app], () => layoutSets);
     },
   });
diff --git a/frontend/packages/ux-editor/src/hooks/useFormLayoutsSelector.ts b/frontend/packages/ux-editor/src/hooks/useFormLayoutsSelector.ts
index ba679948efd..a2b1a73e900 100644
--- a/frontend/packages/ux-editor/src/hooks/useFormLayoutsSelector.ts
+++ b/frontend/packages/ux-editor/src/hooks/useFormLayoutsSelector.ts
@@ -1,13 +1,14 @@
 import { useFormLayoutsQuery } from './queries/useFormLayoutsQuery';
 import { useSelector } from 'react-redux';
 import { IFormLayouts, IInternalLayout, IInternalLayoutWithName } from '../types/global';
-import { selectedLayoutNameSelector, selectedLayoutSetSelector } from "../selectors/formLayoutSelectors";
+import { selectedLayoutNameSelector } from '../selectors/formLayoutSelectors';
 import { createEmptyLayout } from '../utils/formLayoutUtils';
 import { useStudioUrlParams } from 'app-shared/hooks/useStudioUrlParams';
+import { useAppContext } from './useAppContext';
 
 export const useFormLayouts = (): IFormLayouts => {
   const { org, app } = useStudioUrlParams();
-  const selectedLayoutSet = useSelector(selectedLayoutSetSelector);
+  const { selectedLayoutSet } = useAppContext();
   const formLayoutsQuery = useFormLayoutsQuery(org, app, selectedLayoutSet);
   const { data } = formLayoutsQuery;
   return data;
diff --git a/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.test.ts b/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.test.ts
index 2d01e6a8d96..b16b77dc239 100644
--- a/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.test.ts
+++ b/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.test.ts
@@ -4,8 +4,7 @@ import {
   getAllLayoutComponents,
   getAllLayoutContainers,
   getFullLayoutOrder,
-  selectedLayoutNameSelector,
-  selectedLayoutSetSelector
+  selectedLayoutNameSelector
 } from './formLayoutSelectors';
 import { ComponentType } from 'app-shared/types/ComponentType';
 
@@ -13,7 +12,6 @@ import { ComponentType } from 'app-shared/types/ComponentType';
 const layout1Name = 'Side1';
 const layout2Name = 'Side2';
 const selectedLayout = layout1Name;
-const selectedLayoutSet = 'test-layout-set';
 const appState: IAppState = {
   ...appStateMock,
   formDesigner: {
@@ -83,10 +81,6 @@ describe('formLayoutSelectors', () => {
     expect(selectedLayoutNameSelector(appState)).toEqual(selectedLayout);
   });
 
-  test('selectedLayoutSetSelector', () => {
-    expect(selectedLayoutSetSelector(appState)).toEqual(selectedLayoutSet);
-  });
-
   test('getAllLayoutContainers', () => {
     expect(getAllLayoutContainers(formLayoutsData)).toEqual({
       [container0Id]: formLayoutsData[layout1Name].containers[container0Id],
diff --git a/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.ts b/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.ts
index 2d2701e0031..49012ca0e6d 100644
--- a/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.ts
+++ b/frontend/packages/ux-editor/src/selectors/formLayoutSelectors.ts
@@ -7,9 +7,6 @@ import {
 export const selectedLayoutNameSelector: AppStateSelector<string> =
   (state) => state.formDesigner.layout.selectedLayout;
 
-export const selectedLayoutSetSelector: AppStateSelector<string> =
-  (state) => state.formDesigner.layout.selectedLayoutSet;
-
 export const getAllLayoutContainers: FormLayoutsSelector<IFormDesignerContainers> =
   (formLayoutsData) => Object
     .values(formLayoutsData)
diff --git a/frontend/packages/ux-editor/src/testing/appContextMock.ts b/frontend/packages/ux-editor/src/testing/appContextMock.ts
index 1a662a5f12f..156c8f85ece 100644
--- a/frontend/packages/ux-editor/src/testing/appContextMock.ts
+++ b/frontend/packages/ux-editor/src/testing/appContextMock.ts
@@ -6,5 +6,8 @@ const previewIframeRefMock: RefObject<HTMLIFrameElement> = {
 };
 
 export const appContextMock: AppContextProps = {
-  previewIframeRef: previewIframeRefMock
+  previewIframeRef: previewIframeRefMock,
+  selectedLayoutSet: 'test-layout-set',
+  setSelectedLayoutSet: (layoutSet: string) => {},
+  removeSelectedLayoutSet: () => {},
 };
diff --git a/frontend/packages/ux-editor/src/testing/mocks.tsx b/frontend/packages/ux-editor/src/testing/mocks.tsx
index 16c67a03ce9..ad4accac9d8 100644
--- a/frontend/packages/ux-editor/src/testing/mocks.tsx
+++ b/frontend/packages/ux-editor/src/testing/mocks.tsx
@@ -40,7 +40,7 @@ export const queriesMock: ServicesContextProps = {
   ...allQueriesMock,
   addAppAttachmentMetadata: jest.fn().mockImplementation(() => Promise.resolve({})),
   addLayoutSet: jest.fn(),
-  configureLayoutSet: jest.fn(),
+  configureLayoutSet: jest.fn().mockImplementation(() => Promise.resolve({})),
   deleteAppAttachmentMetadata: jest.fn().mockImplementation(() => Promise.resolve({})),
   deleteFormLayout: jest.fn().mockImplementation(() => Promise.resolve({})),
   getDatamodelMetadata: jest.fn().mockImplementation(() => Promise.resolve({ elements: {} })),