From 02739964cddf772498c5314d41c2c0201ebdbecf Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Thu, 12 Dec 2024 10:55:07 +0100
Subject: [PATCH] refactor: adapt contract when fetching all option lists to
 visualise error per option list

---
 .../Designer/Controllers/OptionsController.cs | 32 ++++++++++--
 .../src/Designer/Models/Dto/OptionListData.cs | 11 +++++
 .../AppContentLibrary.test.tsx                | 16 +++---
 .../appContentLibrary/AppContentLibrary.tsx   | 20 ++++----
 .../convertOptionListsToCodeLists.test.ts     | 41 ----------------
 .../utils/convertOptionListsToCodeLists.ts    | 13 -----
 ...ertOptionsListsDataToCodeListsData.test.ts | 49 +++++++++++++++++++
 .../convertOptionsListsDataToCodeListsData.ts | 20 ++++++++
 frontend/language/src/nb.json                 |  2 +-
 .../mocks/mockPagesConfig.ts                  | 14 ++++--
 .../pages/CodeListPage/CodeListPage.test.tsx  | 43 +++++-----------
 .../pages/CodeListPage/CodeListPage.tsx       | 24 ++++-----
 .../CodeListPage/CodeLists/CodeLists.test.tsx | 31 +++++++-----
 .../CodeListPage/CodeLists/CodeLists.tsx      | 45 +++++++++++------
 .../LibraryBody/pages/CodeListPage/index.ts   |  2 +-
 .../ContentLibrary/LibraryBody/pages/index.ts |  2 +-
 .../ContentResourceLibraryImpl.test.tsx       |  3 +-
 .../libs/studio-content-library/src/index.ts  |  2 +-
 .../utils/router/RouterRouteMapper.test.ts    |  3 +-
 .../src/ObjectUtils/ObjectUtils.test.ts       | 28 -----------
 .../src/ObjectUtils/ObjectUtils.ts            | 10 ----
 frontend/packages/shared/src/api/queries.ts   |  1 -
 .../useUpdateOptionListIdMutation.test.ts     | 37 +++++++-------
 .../useUpdateOptionListIdMutation.ts          | 25 ++++++----
 .../mutations/useUpdateOptionListMutation.ts  | 25 ++++++++--
 .../src/hooks/queries/useOptionListsQuery.ts  | 11 +++--
 .../packages/shared/src/mocks/queriesMock.ts  |  4 +-
 .../shared/src/types/api/OptionsLists.ts      | 10 +++-
 .../src/components/Elements/ExportForm.tsx    |  6 +--
 .../ux-editor/src/utils/exportUtils.test.ts   | 20 ++++----
 .../ux-editor/src/utils/exportUtils.ts        | 13 +++--
 31 files changed, 306 insertions(+), 257 deletions(-)
 create mode 100644 backend/src/Designer/Models/Dto/OptionListData.cs
 delete mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.test.ts
 delete mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.ts
 create mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.test.ts
 create mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.ts

diff --git a/backend/src/Designer/Controllers/OptionsController.cs b/backend/src/Designer/Controllers/OptionsController.cs
index 1482ad10064..232870e2714 100644
--- a/backend/src/Designer/Controllers/OptionsController.cs
+++ b/backend/src/Designer/Controllers/OptionsController.cs
@@ -3,8 +3,10 @@
 using System.Text.Json;
 using System.Threading;
 using System.Threading.Tasks;
+using Altinn.Studio.Designer.Exceptions.Options;
 using Altinn.Studio.Designer.Helpers;
 using Altinn.Studio.Designer.Models;
+using Altinn.Studio.Designer.Models.Dto;
 using Altinn.Studio.Designer.Services.Interfaces;
 using LibGit2Sharp;
 using Microsoft.AspNetCore.Authorization;
@@ -56,20 +58,40 @@ public ActionResult<string[]> GetOptionsListIds(string org, string repo)
     /// </summary>
     /// <param name="org">Unique identifier of the organisation responsible for the app.</param>
     /// <param name="repo">Application identifier which is unique within an organisation.</param>
-    /// <returns>Dictionary of all option lists belonging to the app</returns>
+    /// <returns>List of <see cref="OptionListData" /> objects with all option lists belonging to the app with data
+    /// set if option list is valid, or isError set if option list is invalid.</returns>
     [HttpGet]
     [Route("option-lists")]
-    public async Task<ActionResult<Dictionary<string, List<Option>>>> GetOptionLists(string org, string repo)
+    public async Task<ActionResult<List<OptionListData>>> GetOptionLists(string org, string repo)
     {
         try
         {
             string developer = AuthenticationHelper.GetDeveloperUserName(HttpContext);
             string[] optionListIds = _optionsService.GetOptionsListIds(org, repo, developer);
-            Dictionary<string, List<Option>> optionLists = [];
+            List<OptionListData> optionLists = [];
             foreach (string optionListId in optionListIds)
             {
-                List<Option> optionList = await _optionsService.GetOptionsList(org, repo, developer, optionListId);
-                optionLists.Add(optionListId, optionList);
+                try
+                {
+                    List<Option> optionList = await _optionsService.GetOptionsList(org, repo, developer, optionListId);
+                    OptionListData optionListData = new()
+                    {
+                        Title = optionListId,
+                        Data = optionList,
+                        HasError = false
+                    };
+                    optionLists.Add(optionListData);
+                }
+                catch (InvalidOptionsFormatException)
+                {
+                    OptionListData optionListData = new()
+                    {
+                        Title = optionListId,
+                        Data = null,
+                        HasError = true
+                    };
+                    optionLists.Add(optionListData);
+                }
             }
             return Ok(optionLists);
         }
diff --git a/backend/src/Designer/Models/Dto/OptionListData.cs b/backend/src/Designer/Models/Dto/OptionListData.cs
new file mode 100644
index 00000000000..99eba20eacb
--- /dev/null
+++ b/backend/src/Designer/Models/Dto/OptionListData.cs
@@ -0,0 +1,11 @@
+using System.Collections.Generic;
+using JetBrains.Annotations;
+
+namespace Altinn.Studio.Designer.Models.Dto;
+
+public class OptionListData
+{
+  public string Title;
+  [CanBeNull] public List<Option> Data;
+  public bool? HasError;
+}
\ No newline at end of file
diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx
index ac0c6d30212..34bbc8fe3b0 100644
--- a/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx
+++ b/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx
@@ -9,9 +9,9 @@ import { app, org } from '@studio/testing/testids';
 import { queriesMock } from 'app-shared/mocks/queriesMock';
 import type { UserEvent } from '@testing-library/user-event';
 import userEvent from '@testing-library/user-event';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
 import type { CodeList } from '@studio/components';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 
 const uploadCodeListButtonTextMock = 'Upload Code List';
 const updateCodeListButtonTextMock = 'Update Code List';
@@ -41,10 +41,6 @@ jest.mock(
   }),
 );
 
-const optionListsMock: OptionsLists = {
-  list1: [{ label: 'label', value: 'value' }],
-};
-
 describe('AppContentLibrary', () => {
   afterEach(jest.clearAllMocks);
 
@@ -61,7 +57,7 @@ describe('AppContentLibrary', () => {
   });
 
   it('renders a spinner when waiting for option lists', () => {
-    renderAppContentLibrary({ optionLists: {} });
+    renderAppContentLibrary({ optionListsData: [] });
     const spinner = screen.getByText(textMock('general.loading'));
     expect(spinner).toBeInTheDocument();
   });
@@ -127,16 +123,16 @@ const goToLibraryPage = async (user: UserEvent, libraryPage: string) => {
 
 type renderAppContentLibraryProps = {
   queries?: Partial<ServicesContextProps>;
-  optionLists?: OptionsLists;
+  optionListsData?: OptionsListsResponse;
 };
 
 const renderAppContentLibrary = ({
   queries = {},
-  optionLists = optionListsMock,
+  optionListsData = [],
 }: renderAppContentLibraryProps = {}) => {
   const queryClientMock = createQueryClientMock();
-  if (Object.keys(optionLists).length) {
-    queryClientMock.setQueryData([QueryKey.OptionLists, org, app], optionLists);
+  if (optionListsData.length) {
+    queryClientMock.setQueryData([QueryKey.OptionLists, org, app], optionListsData);
   }
   renderWithProviders(queries, queryClientMock)(<AppContentLibrary />);
 };
diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
index 1db64ff4077..19fc5ea9f6b 100644
--- a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
+++ b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
@@ -1,9 +1,9 @@
 import type { CodeListWithMetadata } from '@studio/content-library';
 import { ResourceContentLibraryImpl } from '@studio/content-library';
 import React from 'react';
-import { useOptionListsQuery } from 'app-shared/hooks/queries/useOptionListsQuery';
+import { useOptionListsQuery } from 'app-shared/hooks/queries';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
-import { convertOptionListsToCodeLists } from './utils/convertOptionListsToCodeLists';
+import { convertOptionsListsDataToCodeListsData } from './utils/convertOptionsListsDataToCodeListsData';
 import { StudioPageSpinner } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { useAddOptionListMutation, useUpdateOptionListMutation } from 'app-shared/hooks/mutations';
@@ -15,20 +15,19 @@ import { isErrorUnknown } from 'app-shared/utils/ApiErrorUtils';
 export function AppContentLibrary(): React.ReactElement {
   const { org, app } = useStudioEnvironmentParams();
   const { t } = useTranslation();
-  const {
-    data: optionLists,
-    isPending: optionListsPending,
-    isError: optionListsError,
-  } = useOptionListsQuery(org, app);
+  const { data: optionListsData, isPending: optionListsDataPending } = useOptionListsQuery(
+    org,
+    app,
+  );
   const { mutate: uploadOptionList } = useAddOptionListMutation(org, app, {
     hideDefaultError: (error: AxiosError<ApiError>) => isErrorUnknown(error),
   });
   const { mutate: updateOptionList } = useUpdateOptionListMutation(org, app);
 
-  if (optionListsPending)
+  if (optionListsDataPending)
     return <StudioPageSpinner spinnerTitle={t('general.loading')}></StudioPageSpinner>;
 
-  const codeLists = convertOptionListsToCodeLists(optionLists);
+  const codeListsData = convertOptionsListsDataToCodeListsData(optionListsData);
 
   const handleUpload = (file: File) => {
     uploadOptionList(file, {
@@ -51,10 +50,9 @@ export function AppContentLibrary(): React.ReactElement {
     pages: {
       codeList: {
         props: {
-          codeLists: codeLists,
+          codeListsData,
           onUpdateCodeList: handleUpdate,
           onUploadCodeList: handleUpload,
-          fetchDataError: optionListsError,
         },
       },
       images: {
diff --git a/frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.test.ts b/frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.test.ts
deleted file mode 100644
index dbb6c5262db..00000000000
--- a/frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.test.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import type { CodeListWithMetadata } from '@studio/content-library';
-import { convertOptionListsToCodeLists } from './convertOptionListsToCodeLists';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
-
-describe('convertOptionListsToCodeLists', () => {
-  it('converts option lists map to code lists array correctly', () => {
-    const optionLists: OptionsLists = {
-      list1: [
-        { label: 'Option 1', value: '1' },
-        { label: 'Option 2', value: '2' },
-      ],
-      list2: [
-        { label: 'Option A', value: 'A' },
-        { label: 'Option B', value: 'B' },
-      ],
-    };
-    const result: CodeListWithMetadata[] = convertOptionListsToCodeLists(optionLists);
-    expect(result).toEqual([
-      {
-        title: 'list1',
-        codeList: [
-          { label: 'Option 1', value: '1' },
-          { label: 'Option 2', value: '2' },
-        ],
-      },
-      {
-        title: 'list2',
-        codeList: [
-          { label: 'Option A', value: 'A' },
-          { label: 'Option B', value: 'B' },
-        ],
-      },
-    ]);
-  });
-
-  it('returns an empty array when the input map is empty', () => {
-    const optionLists: OptionsLists = {};
-    const result: CodeListWithMetadata[] = convertOptionListsToCodeLists(optionLists);
-    expect(result).toEqual([]);
-  });
-});
diff --git a/frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.ts b/frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.ts
deleted file mode 100644
index 576e9fa0c0c..00000000000
--- a/frontend/app-development/features/appContentLibrary/utils/convertOptionListsToCodeLists.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { CodeListWithMetadata } from '@studio/content-library';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
-
-export function convertOptionListsToCodeLists(optionLists: OptionsLists): CodeListWithMetadata[] {
-  const codeLists = [];
-  Object.entries(optionLists).map((optionList) =>
-    codeLists.push({
-      codeList: optionList[1],
-      title: optionList[0],
-    }),
-  );
-  return codeLists;
-}
diff --git a/frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.test.ts b/frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.test.ts
new file mode 100644
index 00000000000..7d67033df69
--- /dev/null
+++ b/frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.test.ts
@@ -0,0 +1,49 @@
+import type { CodeListData } from '@studio/content-library';
+import { convertOptionsListsDataToCodeListsData } from './convertOptionsListsDataToCodeListsData';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
+
+describe('convertOptionsListsDataToCodeListsData', () => {
+  it('converts option lists data to code lists data correctly', () => {
+    const optionListId: string = 'optionListId';
+    const optionListsData: OptionsListsResponse = [
+      {
+        title: optionListId,
+        data: [
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ],
+        hasError: false,
+      },
+    ];
+    const result: CodeListData[] = convertOptionsListsDataToCodeListsData(optionListsData);
+    expect(result).toEqual([
+      {
+        title: optionListId,
+        data: [
+          { label: 'Option 1', value: '1' },
+          { label: 'Option 2', value: '2' },
+        ],
+        hasError: false,
+      },
+    ]);
+  });
+
+  it('sets hasError to true in result when optionListsResponse returns an option list with error', () => {
+    const optionListId: string = 'optionListId';
+    const optionListsData: OptionsListsResponse = [
+      {
+        title: optionListId,
+        data: null,
+        hasError: true,
+      },
+    ];
+    const result: CodeListData[] = convertOptionsListsDataToCodeListsData(optionListsData);
+    expect(result).toEqual([{ title: optionListId, data: null, hasError: true }]);
+  });
+
+  it('returns a result with empty code list data array when the input option list data is empty', () => {
+    const optionListsData: OptionsListsResponse = [];
+    const result: CodeListData[] = convertOptionsListsDataToCodeListsData(optionListsData);
+    expect(result).toEqual([]);
+  });
+});
diff --git a/frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.ts b/frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.ts
new file mode 100644
index 00000000000..e9d386db542
--- /dev/null
+++ b/frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.ts
@@ -0,0 +1,20 @@
+import type { OptionsListData, OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
+import type { CodeListData } from '@studio/content-library';
+
+export const convertOptionsListsDataToCodeListsData = (optionListsData: OptionsListsResponse) => {
+  const codeListsData = [];
+  optionListsData.map((optionListData) => {
+    const codeListData = convertOptionsListDataToCodeListData(optionListData);
+    codeListsData.push(codeListData);
+  });
+  return codeListsData;
+};
+
+const convertOptionsListDataToCodeListData = (optionListData: OptionsListData) => {
+  const codeListData: CodeListData = {
+    title: optionListData.title,
+    data: optionListData.data,
+    hasError: optionListData.hasError,
+  };
+  return codeListData;
+};
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 6dab05e6c34..a5fee0296d6 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -19,7 +19,7 @@
   "app_content_library.code_lists.create_new_code_list_modal_title": "Lag ny kodeliste",
   "app_content_library.code_lists.create_new_code_list_name": "Navn",
   "app_content_library.code_lists.edit_code_list_placeholder_text": "Her kommer det redigeringsmuligheter snart",
-  "app_content_library.code_lists.fetch_error": "Kunne ikke hente kodelister fra appen.",
+  "app_content_library.code_lists.fetch_error": "Kunne ikke hente kodelisten fra appen.",
   "app_content_library.code_lists.info_box.description": "En kodeliste er en liste med strukturerte data. Den inneholder definerte alternativer som alle har en unik kode. For eksempel kan du ha en kodeliste med kommunenavn i skjemaet ditt, som brukerne kan velge fra en nedtrekksmeny. Brukerne ser bare navnet, ikke koden.",
   "app_content_library.code_lists.info_box.title": "Hva er en kodeliste?",
   "app_content_library.code_lists.no_content": "Dette biblioteket har ingen kodelister",
diff --git a/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts b/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts
index 73ea05e2aaf..61f47b17c58 100644
--- a/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts
+++ b/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts
@@ -1,15 +1,19 @@
 import type { PagesConfig } from '../src/types/PagesProps';
+import type { CodeListData } from '../src';
+
+export const codeListData: CodeListData = {
+  title: 'CodeList1',
+  data: [{ value: 'value', label: 'label' }],
+  hasError: false,
+};
+export const codeListsDataMock: CodeListData[] = [codeListData];
 
 export const mockPagesConfig: PagesConfig = {
   codeList: {
     props: {
-      codeLists: [
-        { title: 'CodeList1', codeList: [] },
-        { title: 'CodeList2', codeList: [] },
-      ],
+      codeListsData: codeListsDataMock,
       onUpdateCodeList: () => {},
       onUploadCodeList: () => {},
-      fetchDataError: false,
     },
   },
   images: {
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx
index be1931673aa..4b102f596df 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx
@@ -1,20 +1,16 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import type { CodeListPageProps, CodeListWithMetadata } from './CodeListPage';
+import type { CodeListPageProps } from './CodeListPage';
 import { CodeListPage } from './CodeListPage';
 import { textMock } from '@studio/testing/mocks/i18nMock';
+import { codeListsDataMock } from '../../../../../mocks/mockPagesConfig';
 
 const onUpdateCodeListMock = jest.fn();
 const onUploadCodeListMock = jest.fn();
-const codeListName = 'codeList';
-const codeListMock: CodeListWithMetadata = {
-  title: codeListName,
-  codeList: [{ value: 'value', label: 'label' }],
-};
 
 describe('CodeListPage', () => {
   it('renders the codeList heading', () => {
-    renderCodeList();
+    renderCodeListPage();
     const codeListHeading = screen.getByRole('heading', {
       name: textMock('app_content_library.code_lists.page_name'),
     });
@@ -22,7 +18,7 @@ describe('CodeListPage', () => {
   });
 
   it('renders a code list counter message', () => {
-    renderCodeList();
+    renderCodeListPage();
     const codeListCounterMessage = screen.getByText(
       textMock('app_content_library.code_lists.code_lists_count_info_single'),
     );
@@ -30,7 +26,7 @@ describe('CodeListPage', () => {
   });
 
   it('renders code list actions', () => {
-    renderCodeList();
+    renderCodeListPage();
     const codeListSearchField = screen.getByRole('searchbox');
     const codeListCreatButton = screen.getByRole('button', {
       name: textMock('app_content_library.code_lists.create_new_code_list'),
@@ -44,37 +40,20 @@ describe('CodeListPage', () => {
   });
 
   it('renders the code list as a clickable element', () => {
-    renderCodeList();
-    const codeListAccordion = screen.getByRole('button', { name: codeListName });
+    renderCodeListPage();
+    const codeListAccordion = screen.getByRole('button', { name: codeListsDataMock[0].title });
     expect(codeListAccordion).toBeInTheDocument();
   });
-
-  it('renders error message if error fetching option lists occurred', () => {
-    renderCodeList({ fetchDataError: true });
-    const errorMessage = screen.getByText(textMock('app_content_library.code_lists.fetch_error'));
-    expect(errorMessage).toBeInTheDocument();
-  });
 });
 
-const defaultCodeListProps: CodeListPageProps = {
-  codeLists: [codeListMock],
+const defaultCodeListPageProps: CodeListPageProps = {
+  codeListsData: codeListsDataMock,
   onUpdateCodeList: onUpdateCodeListMock,
   onUploadCodeList: onUploadCodeListMock,
-  fetchDataError: false,
 };
 
-const renderCodeList = ({
-  codeLists,
-  onUpdateCodeList,
-  onUploadCodeList,
-  fetchDataError,
-}: Partial<CodeListPageProps> = defaultCodeListProps) => {
+const renderCodeListPage = (props: Partial<CodeListPageProps> = {}) => {
   render(
-    <CodeListPage
-      codeLists={codeLists}
-      onUpdateCodeList={onUpdateCodeList}
-      onUploadCodeList={onUploadCodeList}
-      fetchDataError={fetchDataError}
-    />,
+    <CodeListPage {...defaultCodeListPageProps} {...props} />,
   );
 };
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx
index 224aac3d3dd..fda09a9515c 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StudioHeading, StudioPageError } from '@studio/components';
+import { StudioHeading } from '@studio/components';
 import type { CodeList as StudioComponentCodeList } from '@studio/components';
 import { useTranslation } from 'react-i18next';
 import { CodeListsActionsBar } from './CodeListsActionsBar';
@@ -13,35 +13,37 @@ export type CodeListWithMetadata = {
   title: string;
 };
 
+export type CodeListData = {
+  title: string;
+  data?: StudioComponentCodeList;
+  hasError?: boolean;
+};
+
 export type CodeListPageProps = {
-  codeLists: CodeListWithMetadata[];
+  codeListsData: CodeListData[];
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
   onUploadCodeList: (uploadedCodeList: File) => void;
-  fetchDataError: boolean;
 };
+
 export function CodeListPage({
-  codeLists,
+  codeListsData,
   onUpdateCodeList,
   onUploadCodeList,
-  fetchDataError,
 }: CodeListPageProps): React.ReactElement {
   const { t } = useTranslation();
 
-  if (fetchDataError)
-    return <StudioPageError message={t('app_content_library.code_lists.fetch_error')} />;
-
-  const codeListTitles = ArrayUtils.mapByKey<CodeListWithMetadata, 'title'>(codeLists, 'title');
+  const codeListTitles = ArrayUtils.mapByKey<CodeListData, 'title'>(codeListsData, 'title');
 
   return (
     <div className={classes.codeListsContainer}>
       <StudioHeading size='small'>{t('app_content_library.code_lists.page_name')}</StudioHeading>
-      <CodeListsCounterMessage codeListsCount={codeLists.length} />
+      <CodeListsCounterMessage codeListsCount={codeListsData.length} />
       <CodeListsActionsBar
         onUploadCodeList={onUploadCodeList}
         onUpdateCodeList={onUpdateCodeList}
         codeListNames={codeListTitles}
       />
-      <CodeLists codeLists={codeLists} onUpdateCodeList={onUpdateCodeList} />
+      <CodeLists codeListsData={codeListsData} onUpdateCodeList={onUpdateCodeList} />
     </div>
   );
 }
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx
index 3ee864fd806..f825c23d204 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx
@@ -8,18 +8,14 @@ import type { UserEvent } from '@testing-library/user-event';
 import type { RenderResult } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { CodeList as StudioComponentsCodeList } from '@studio/components';
+import { codeListsDataMock } from '../../../../../../mocks/mockPagesConfig';
 
-const codeListName = 'codeList';
-const codeListWithMetadataMock: CodeListWithMetadata = {
-  title: codeListName,
-  codeList: [{ value: 'value', label: 'label' }],
-};
 const onUpdateCodeListMock = jest.fn();
 
 describe('CodeLists', () => {
   it('renders the code list', () => {
     renderCodeLists();
-    const codeListAccordion = screen.getByRole('button', { name: codeListName });
+    const codeListAccordion = screen.getByRole('button', { name: codeListsDataMock[0].title });
     expect(codeListAccordion).toBeInTheDocument();
   });
 
@@ -45,18 +41,24 @@ describe('CodeLists', () => {
     expect(onUpdateCodeListMock).toHaveBeenCalledTimes(1);
     expect(onUpdateCodeListMock).toHaveBeenLastCalledWith({
       codeList: [expect.objectContaining({ value: codeListValueText })],
-      title: codeListName,
+      title: codeListsDataMock[0].title,
     });
   });
+
+  it('renders error message if option list has error', () => {
+    renderCodeLists({ codeListsData: [{ ...codeListsDataMock[0], hasError: true, data: null }] });
+    const errorMessage = screen.getByText(textMock('app_content_library.code_lists.fetch_error'));
+    expect(errorMessage).toBeInTheDocument();
+  });
 });
 
 const openCodeList = async (user: UserEvent) => {
-  const codeListAccordion = screen.getByRole('button', { name: codeListName });
+  const codeListAccordion = screen.getByRole('button', { name: codeListsDataMock[0].title });
   await user.click(codeListAccordion);
 };
 
 const defaultProps: CodeListsProps = {
-  codeLists: [codeListWithMetadataMock],
+  codeListsData: codeListsDataMock,
   onUpdateCodeList: onUpdateCodeListMock,
 };
 
@@ -68,21 +70,24 @@ describe('updateCodeListWithMetadata', () => {
   it('returns an updated CodeListWithMetadata object', () => {
     const updatedCodeList: StudioComponentsCodeList = [{ value: '', label: '' }];
     const updatedCodeListWithMetadata: CodeListWithMetadata = updateCodeListWithMetadata(
-      codeListWithMetadataMock,
+      { title: codeListsDataMock[0].title, codeList: codeListsDataMock[0].data },
       updatedCodeList,
     );
-    expect(updatedCodeListWithMetadata).toEqual({ title: codeListName, codeList: updatedCodeList });
+    expect(updatedCodeListWithMetadata).toEqual({
+      title: codeListsDataMock[0].title,
+      codeList: updatedCodeList,
+    });
   });
 
   it('works with an empty code list', () => {
     const updatedCodeList: StudioComponentsCodeList = [];
     const updatedCodeListWithMetadata: CodeListWithMetadata = updateCodeListWithMetadata(
-      codeListWithMetadataMock,
+      { title: codeListsDataMock[0].title, codeList: codeListsDataMock[0].data },
       updatedCodeList,
     );
 
     expect(updatedCodeListWithMetadata).toEqual({
-      title: codeListName,
+      title: codeListsDataMock[0].title,
       codeList: updatedCodeList,
     });
   });
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx
index 9eff18b4932..8167569fec8 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx
@@ -1,44 +1,59 @@
 import React from 'react';
-import type { CodeListWithMetadata } from '../CodeListPage';
+import type { CodeListData, CodeListWithMetadata } from '../CodeListPage';
 import { Accordion } from '@digdir/designsystemet-react';
-import { StudioCodeListEditor } from '@studio/components';
+import { StudioAlert, StudioCodeListEditor } from '@studio/components';
 import type { CodeList as StudioComponentsCodeList, CodeListEditorTexts } from '@studio/components';
 import { useOptionListEditorTexts } from '../hooks/useCodeListEditorTexts';
+import { useTranslation } from 'react-i18next';
 
 export type CodeListsProps = {
-  codeLists: CodeListWithMetadata[];
+  codeListsData: CodeListData[];
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
 };
 
-export function CodeLists({ codeLists, onUpdateCodeList }: CodeListsProps) {
-  return codeLists.map((codeList) => (
-    <CodeList key={codeList.title} codeList={codeList} onUpdateCodeList={onUpdateCodeList} />
+export function CodeLists({ codeListsData, onUpdateCodeList }: CodeListsProps) {
+  return codeListsData.map((codeListData) => (
+    <CodeList
+      key={codeListData.title}
+      codeListData={codeListData}
+      onUpdateCodeList={onUpdateCodeList}
+    />
   ));
 }
 
 type CodeListProps = {
-  codeList: CodeListWithMetadata;
+  codeListData: CodeListData;
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
 };
 
-function CodeList({ codeList, onUpdateCodeList }: CodeListProps) {
+function CodeList({ codeListData, onUpdateCodeList }: CodeListProps) {
+  const { t } = useTranslation();
   const editorTexts: CodeListEditorTexts = useOptionListEditorTexts();
 
   const handleBlurAny = (updatedCodeList: StudioComponentsCodeList): void => {
-    const updatedCodeListWithMetadata = updateCodeListWithMetadata(codeList, updatedCodeList);
+    const updatedCodeListWithMetadata = updateCodeListWithMetadata(
+      { title: codeListData.title, codeList: codeListData.data },
+      updatedCodeList,
+    );
     onUpdateCodeList(updatedCodeListWithMetadata);
   };
 
   return (
     <Accordion border>
       <Accordion.Item>
-        <Accordion.Header>{codeList.title}</Accordion.Header>
+        <Accordion.Header>{codeListData.title}</Accordion.Header>
         <Accordion.Content>
-          <StudioCodeListEditor
-            codeList={codeList.codeList}
-            onBlurAny={handleBlurAny}
-            texts={editorTexts}
-          />
+          {codeListData.hasError ? (
+            <StudioAlert size='small' severity='danger'>
+              {t('app_content_library.code_lists.fetch_error')}
+            </StudioAlert>
+          ) : (
+            <StudioCodeListEditor
+              codeList={codeListData.data}
+              onBlurAny={handleBlurAny}
+              texts={editorTexts}
+            />
+          )}
         </Accordion.Content>
       </Accordion.Item>
     </Accordion>
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/index.ts
index 37eddf1ea3b..ffcb4126071 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/index.ts
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/index.ts
@@ -1,2 +1,2 @@
 export { CodeListPage } from './CodeListPage';
-export type { CodeListWithMetadata, CodeListPageProps } from './CodeListPage';
+export type { CodeListWithMetadata, CodeListData, CodeListPageProps } from './CodeListPage';
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/index.ts
index 4066219e3f5..cedde4105d1 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/index.ts
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/index.ts
@@ -1 +1 @@
-export type { CodeListWithMetadata } from './CodeListPage';
+export type { CodeListWithMetadata, CodeListData } from './CodeListPage';
diff --git a/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx b/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
index 180209adb4b..626791a13e2 100644
--- a/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
+++ b/frontend/libs/studio-content-library/src/config/ContentResourceLibraryImpl.test.tsx
@@ -9,10 +9,9 @@ describe('ContentResourceLibraryImpl', () => {
     const pagesConfig: PagesConfig = {
       codeList: {
         props: {
-          codeLists: [],
+          codeListsData: [],
           onUpdateCodeList: () => {},
           onUploadCodeList: () => {},
-          fetchDataError: false,
         },
       },
       images: {
diff --git a/frontend/libs/studio-content-library/src/index.ts b/frontend/libs/studio-content-library/src/index.ts
index 7b2d6e43572..aa13dfd73a0 100644
--- a/frontend/libs/studio-content-library/src/index.ts
+++ b/frontend/libs/studio-content-library/src/index.ts
@@ -1,2 +1,2 @@
 export { ResourceContentLibraryImpl } from './config/ContentResourceLibraryImpl';
-export type { CodeListWithMetadata } from './ContentLibrary/LibraryBody/pages';
+export type { CodeListWithMetadata, CodeListData } from './ContentLibrary/LibraryBody/pages';
diff --git a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
index 439f99b18da..eedd6b79495 100644
--- a/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
+++ b/frontend/libs/studio-content-library/src/utils/router/RouterRouteMapper.test.ts
@@ -25,10 +25,9 @@ describe('RouterRouteMapperImpl', () => {
     const routerMapper = new RouterRouteMapperImpl({
       codeList: {
         props: {
-          codeLists: [],
+          codeListsData: [],
           onUpdateCodeList: () => {},
           onUploadCodeList: () => {},
-          fetchDataError: false,
         },
       },
     });
diff --git a/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.test.ts b/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.test.ts
index 9925795ee0b..a797b0cfbbb 100644
--- a/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.test.ts
+++ b/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.test.ts
@@ -81,32 +81,4 @@ describe('objectUtils', () => {
       expect(ObjectUtils.flattenObjectValues(object)).toEqual(['value1', 'value2', 'value3']);
     });
   });
-
-  describe('sortEntriesInObjectByKeys', () => {
-    it('Sorts all entries in an object by its keys', () => {
-      const unsortedObject = { b: 'value1', a: 'value2', c: 'value3' };
-      const sortedObject = ObjectUtils.sortEntriesInObjectByKeys(unsortedObject);
-      const sortedObjectKeys = Object.keys(sortedObject);
-      expect(sortedObjectKeys[0]).toBe('a');
-      expect(sortedObjectKeys[1]).toBe('b');
-      expect(sortedObjectKeys[2]).toBe('c');
-      expect(sortedObject).toEqual(unsortedObject);
-    });
-
-    it('Returns same order if entries in object is already sorted', () => {
-      const unsortedObject = { a: 'value1', b: 'value2', c: 'value3' };
-      const sortedObject = ObjectUtils.sortEntriesInObjectByKeys(unsortedObject);
-      const sortedObjectKeys = Object.keys(sortedObject);
-      expect(sortedObjectKeys[0]).toBe('a');
-      expect(sortedObjectKeys[1]).toBe('b');
-      expect(sortedObjectKeys[2]).toBe('c');
-      expect(sortedObject).toEqual(unsortedObject);
-    });
-
-    it('Returns empty list if entries to sort is empty', () => {
-      const emptyObject = {};
-      const sortedObject = ObjectUtils.sortEntriesInObjectByKeys(emptyObject);
-      expect(sortedObject).toEqual({});
-    });
-  });
 });
diff --git a/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.ts b/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.ts
index 9f15a9743de..e911317a8f5 100644
--- a/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.ts
+++ b/frontend/libs/studio-pure-functions/src/ObjectUtils/ObjectUtils.ts
@@ -44,14 +44,4 @@ export class ObjectUtils {
       })
       .flat();
   };
-
-  /**
-   * Sorts all entries in an object by its keys.
-   * @param object The object to sort.
-   * @returns A new object with the entries sorted by key.
-   */
-  static sortEntriesInObjectByKeys = <T extends object>(object: T): T =>
-    Object.fromEntries(
-      Object.entries(object).sort(([keyA], [keyB]) => keyA.localeCompare(keyB)),
-    ) as T;
 }
diff --git a/frontend/packages/shared/src/api/queries.ts b/frontend/packages/shared/src/api/queries.ts
index 57002072126..2a87b948e77 100644
--- a/frontend/packages/shared/src/api/queries.ts
+++ b/frontend/packages/shared/src/api/queries.ts
@@ -87,7 +87,6 @@ import type { Policy } from 'app-shared/types/Policy';
 import type { RepoDiffResponse } from 'app-shared/types/api/RepoDiffResponse';
 import type { ExternalImageUrlValidationResponse } from 'app-shared/types/api/ExternalImageUrlValidationResponse';
 import type { MaskinportenScopes } from 'app-shared/types/MaskinportenScope';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
 import type { LayoutSetsModel } from '../types/api/dto/LayoutSetsModel';
 
 export const getIsLoggedInWithAnsattporten = () => get<{ isLoggedIn: boolean }>(authStatusAnsattporten());
diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.test.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.test.ts
index 04d4a9551fd..2f360ace7da 100644
--- a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.test.ts
+++ b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.test.ts
@@ -6,7 +6,7 @@ import { useUpdateOptionListIdMutation } from './useUpdateOptionListIdMutation';
 import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import type { Option } from 'app-shared/types/Option';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 
 // Test data:
 const optionListId: string = 'optionListId';
@@ -17,7 +17,7 @@ const args: UpdateOptionListIdMutationArgs = { optionListId, newOptionListId };
 describe('useUpdateOptionListIdMutation', () => {
   test('Calls useUpdateOptionIdList with correct parameters', async () => {
     const queryClient = createQueryClientMock();
-    queryClient.setQueryData([QueryKey.OptionLists, org, app], [{ optionListId: optionListMock }]);
+    queryClient.setQueryData([QueryKey.OptionLists, org, app], []);
     const renderUpdateOptionListMutationResult = renderHookWithProviders(
       () => useUpdateOptionListIdMutation(org, app),
       { queryClient },
@@ -38,11 +38,11 @@ describe('useUpdateOptionListIdMutation', () => {
     const optionListC = 'optionListC';
     const optionListZ = 'optionListZ';
     const queryClient = createQueryClientMock();
-    const oldData: OptionsLists = {
-      optionListA: optionListMock,
-      optionListB: optionListMock,
-      optionListZ: optionListMock,
-    };
+    const oldData: OptionsListsResponse = [
+      { title: optionListA, data: optionListMock },
+      { title: optionListB, data: optionListMock },
+      { title: optionListZ, data: optionListMock },
+    ];
     queryClient.setQueryData([QueryKey.OptionLists, org, app], oldData);
     const renderUpdateOptionListMutationResult = renderHookWithProviders(
       () => useUpdateOptionListIdMutation(org, app),
@@ -52,21 +52,24 @@ describe('useUpdateOptionListIdMutation', () => {
       optionListId: optionListA,
       newOptionListId: optionListC,
     });
-    const cacheData = queryClient.getQueryData([QueryKey.OptionLists, org, app]);
-    const cacheDataKeys = Object.keys(cacheData);
-    expect(cacheDataKeys[0]).toEqual(optionListB);
-    expect(cacheDataKeys[1]).toEqual(optionListC);
-    expect(cacheDataKeys[2]).toEqual(optionListZ);
+    const cacheData: OptionsListsResponse = queryClient.getQueryData([
+      QueryKey.OptionLists,
+      org,
+      app,
+    ]);
+    expect(cacheData[0].title).toEqual(optionListB);
+    expect(cacheData[1].title).toEqual(optionListC);
+    expect(cacheData[2].title).toEqual(optionListZ);
   });
 
   test('Invalidates the optionListIds query cache', async () => {
     const queryClient = createQueryClientMock();
     const invalidateQueriesSpy = jest.spyOn(queryClient, 'invalidateQueries');
-    const oldData: OptionsLists = {
-      firstOptionList: optionListMock,
-      optionListId: optionListMock,
-      lastOptionList: optionListMock,
-    };
+    const oldData: OptionsListsResponse = [
+      { title: 'firstOptionList', data: optionListMock },
+      { title: 'optionListId', data: optionListMock },
+      { title: 'lastOptionList', data: optionListMock },
+    ];
     queryClient.setQueryData([QueryKey.OptionLists, org, app], oldData);
     const renderUpdateOptionListMutationResult = renderHookWithProviders(
       () => useUpdateOptionListIdMutation(org, app),
diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.ts
index d56dddb6c51..2147ead2b0f 100644
--- a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.ts
+++ b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListIdMutation.ts
@@ -1,8 +1,8 @@
 import { QueryKey } from 'app-shared/types/QueryKey';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
-import { ObjectUtils } from '@studio/pure-functions';
+import { ArrayUtils } from '@studio/pure-functions';
 
 export interface UpdateOptionListIdMutationArgs {
   optionListId: string;
@@ -21,7 +21,11 @@ export const useUpdateOptionListIdMutation = (org: string, app: string) => {
       }));
     },
     onSuccess: ({ optionListId, newOptionListId }) => {
-      const oldData: OptionsLists = queryClient.getQueryData([QueryKey.OptionLists, org, app]);
+      const oldData: OptionsListsResponse = queryClient.getQueryData([
+        QueryKey.OptionLists,
+        org,
+        app,
+      ]);
       const ascSortedData = changeIdAndSortCacheData(optionListId, newOptionListId, oldData);
       queryClient.setQueryData([QueryKey.OptionLists, org, app], ascSortedData);
       queryClient.invalidateQueries({ queryKey: [QueryKey.OptionListIds, org, app] });
@@ -32,10 +36,13 @@ export const useUpdateOptionListIdMutation = (org: string, app: string) => {
 const changeIdAndSortCacheData = (
   oldId: string,
   newId: string,
-  oldData: OptionsLists,
-): OptionsLists => {
-  const newData = { ...oldData };
-  delete newData[oldId];
-  newData[newId] = oldData[oldId];
-  return ObjectUtils.sortEntriesInObjectByKeys(newData);
+  oldData: OptionsListsResponse,
+): OptionsListsResponse => {
+  const oldOptionList = oldData.find((optionList) => optionList.title === oldId);
+  const newOptionLists: OptionsListsResponse = ArrayUtils.replaceByPredicate(
+    oldData,
+    (optionList) => optionList.title === oldId,
+    { ...oldOptionList, title: newId },
+  );
+  return newOptionLists.sort((a, b) => a.title.localeCompare(b.title));
 };
diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts
index b6bfd00e2e6..d610596ceb6 100644
--- a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts
+++ b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts
@@ -1,9 +1,10 @@
 import type { MutationMeta } from '@tanstack/react-query';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import type { Option } from 'app-shared/types/Option';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
+import type { OptionsList, OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
+import { ArrayUtils } from '@studio/pure-functions';
 
 export interface UpdateOptionListMutationArgs {
   optionListId: string;
@@ -19,11 +20,27 @@ export const useUpdateOptionListMutation = (org: string, app: string, meta?: Mut
       return updateOptionList(org, app, optionListId, optionsList);
     },
     onSuccess: (updatedOptionList: Option[], { optionListId }) => {
-      const oldData: OptionsLists = queryClient.getQueryData([QueryKey.OptionLists, org, app]);
-      const newData = { ...oldData };
-      newData[optionListId] = updatedOptionList;
+      const oldData: OptionsListsResponse = queryClient.getQueryData([
+        QueryKey.OptionLists,
+        org,
+        app,
+      ]);
+      const newData = updateListInOptionLists(optionListId, updatedOptionList, oldData);
       queryClient.setQueryData([QueryKey.OptionLists, org, app], newData);
+      queryClient.invalidateQueries({ queryKey: [QueryKey.OptionListIds, org, app] });
     },
     meta,
   });
 };
+
+const updateListInOptionLists = (
+  optionListId: string,
+  updatedOptionList: OptionsList,
+  oldData: OptionsListsResponse,
+): OptionsListsResponse => {
+  const oldOptionList = oldData.find((optionList) => optionList.title === optionListId);
+  return ArrayUtils.replaceByPredicate(oldData, (optionList) => optionList.title === optionListId, {
+    ...oldOptionList,
+    data: updatedOptionList,
+  });
+};
diff --git a/frontend/packages/shared/src/hooks/queries/useOptionListsQuery.ts b/frontend/packages/shared/src/hooks/queries/useOptionListsQuery.ts
index d378391aedf..9123f432848 100644
--- a/frontend/packages/shared/src/hooks/queries/useOptionListsQuery.ts
+++ b/frontend/packages/shared/src/hooks/queries/useOptionListsQuery.ts
@@ -2,12 +2,15 @@ import { useServicesContext } from 'app-shared/contexts/ServicesContext';
 import { QueryKey } from 'app-shared/types/QueryKey';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useQuery } from '@tanstack/react-query';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 
-export const useOptionListsQuery = (org: string, app: string): UseQueryResult<OptionsLists> => {
+export const useOptionListsQuery = (
+  org: string,
+  app: string,
+): UseQueryResult<OptionsListsResponse> => {
   const { getOptionLists } = useServicesContext();
-  return useQuery<OptionsLists>({
+  return useQuery<OptionsListsResponse>({
     queryKey: [QueryKey.OptionLists, org, app],
-    queryFn: () => getOptionLists(org, app).then((result) => result),
+    queryFn: () => getOptionLists(org, app),
   });
 };
diff --git a/frontend/packages/shared/src/mocks/queriesMock.ts b/frontend/packages/shared/src/mocks/queriesMock.ts
index 6efd4b3f207..11dd27f8ce2 100644
--- a/frontend/packages/shared/src/mocks/queriesMock.ts
+++ b/frontend/packages/shared/src/mocks/queriesMock.ts
@@ -69,9 +69,9 @@ import type { DeploymentsResponse } from 'app-shared/types/api/DeploymentsRespon
 import type { RepoDiffResponse } from 'app-shared/types/api/RepoDiffResponse';
 import type { ExternalImageUrlValidationResponse } from 'app-shared/types/api/ExternalImageUrlValidationResponse';
 import type { MaskinportenScope } from 'app-shared/types/MaskinportenScope';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
 import type { LayoutSetsModel } from '../types/api/dto/LayoutSetsModel';
 import { layoutSetsExtendedMock } from '@altinn/ux-editor/testing/layoutSetsMock';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 
 export const queriesMock: ServicesContextProps = {
   // Queries
@@ -109,7 +109,7 @@ export const queriesMock: ServicesContextProps = {
     .fn()
     .mockImplementation(() => Promise.resolve<LayoutSetsModel>(layoutSetsExtendedMock)),
   getOptionListIds: jest.fn().mockImplementation(() => Promise.resolve<string[]>([])),
-  getOptionLists: jest.fn().mockImplementation(() => Promise.resolve<OptionsLists>({})),
+  getOptionLists: jest.fn().mockImplementation(() => Promise.resolve<OptionsListsResponse>([])),
   getOrgList: jest.fn().mockImplementation(() => Promise.resolve<OrgList>(orgList)),
   getOrganizations: jest.fn().mockImplementation(() => Promise.resolve<Organization[]>([])),
   getRepoMetadata: jest.fn().mockImplementation(() => Promise.resolve<Repository>(repository)),
diff --git a/frontend/packages/shared/src/types/api/OptionsLists.ts b/frontend/packages/shared/src/types/api/OptionsLists.ts
index fa3f5d6d7da..4552a783d1f 100644
--- a/frontend/packages/shared/src/types/api/OptionsLists.ts
+++ b/frontend/packages/shared/src/types/api/OptionsLists.ts
@@ -1,3 +1,11 @@
 import type { Option } from 'app-shared/types/Option';
 
-export type OptionsLists = Record<string, Option[]>;
+export type OptionsList = Option[];
+
+export type OptionsListData = {
+  title: string;
+  data?: OptionsList;
+  hasError?: boolean;
+};
+
+export type OptionsListsResponse = OptionsListData[];
diff --git a/frontend/packages/ux-editor/src/components/Elements/ExportForm.tsx b/frontend/packages/ux-editor/src/components/Elements/ExportForm.tsx
index 41ac3c4756e..78a789d8e2b 100644
--- a/frontend/packages/ux-editor/src/components/Elements/ExportForm.tsx
+++ b/frontend/packages/ux-editor/src/components/Elements/ExportForm.tsx
@@ -14,7 +14,7 @@ export const ExportForm = () => {
   const { org, app } = useStudioEnvironmentParams();
   const { selectedFormLayoutSetName } = useAppContext();
   const { data: formLayouts } = useFormLayoutsQuery(org, app, selectedFormLayoutSetName);
-  const { data: optionLists } = useOptionListsQuery(org, app);
+  const { data: optionListsData } = useOptionListsQuery(org, app);
 
   const { data: textResources } = useTextResourcesQuery(org, app);
   const { data: settings } = useFormLayoutSettingsQuery(org, app, selectedFormLayoutSetName);
@@ -27,11 +27,11 @@ export const ExportForm = () => {
         selectedFormLayoutSetName,
         app,
         textResources,
-        optionLists,
+        optionListsData,
         'nb',
         false,
       ),
-    [formLayouts, textResources, settings, selectedFormLayoutSetName, app, optionLists],
+    [formLayouts, textResources, settings, selectedFormLayoutSetName, app, optionListsData],
   );
 
   const [exportFormat, setExportFormat] = React.useState<ExportFormType>({
diff --git a/frontend/packages/ux-editor/src/utils/exportUtils.test.ts b/frontend/packages/ux-editor/src/utils/exportUtils.test.ts
index 4664f25c808..521582460ad 100644
--- a/frontend/packages/ux-editor/src/utils/exportUtils.test.ts
+++ b/frontend/packages/ux-editor/src/utils/exportUtils.test.ts
@@ -5,6 +5,7 @@ import type { ITextResources } from 'app-shared/types/global';
 import type { ExportForm } from '../types/ExportForm';
 import type { FormComponent } from '../types/FormComponent';
 import type { FormContainer } from '../types/FormContainer';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 
 describe('generateExportFormFormat', () => {
   const settings = {
@@ -101,9 +102,10 @@ describe('generateExportFormFormat', () => {
       },
     ],
   };
-  const optionLists = {
-    optionList1: [{ label: 'option1', value: 'option1' }],
-  };
+  const optionListsData: OptionsListsResponse = [
+    { title: 'optionList1', data: [{ label: 'option1', value: 'option1' }] },
+  ];
+
   it.each(['nb', 'en'])(
     'should generate correct export format for specified default language',
     (language) => {
@@ -113,7 +115,7 @@ describe('generateExportFormFormat', () => {
         selectedFormLayoutSetName,
         app,
         textResources,
-        optionLists,
+        optionListsData,
         language,
         false,
       );
@@ -198,7 +200,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       undefined,
       false,
     );
@@ -250,7 +252,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       'nb',
       false,
     );
@@ -269,7 +271,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       'nb',
       true,
     );
@@ -281,7 +283,7 @@ describe('generateExportFormFormat', () => {
     expect(result.pages[0].components[1]).toHaveProperty('mapping');
   });
 
-  it('should return empty array for text resorce binding if no text resource bindings are set for component', () => {
+  it('should return empty array for text resource binding if no text resource bindings are set for component', () => {
     const componentWithoutTextResourceBindings: FormComponent<ComponentType.Input> = {
       id: 'component1',
       itemType: 'COMPONENT',
@@ -297,7 +299,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       'nb',
       true,
     );
diff --git a/frontend/packages/ux-editor/src/utils/exportUtils.ts b/frontend/packages/ux-editor/src/utils/exportUtils.ts
index a0036212848..07e99122233 100644
--- a/frontend/packages/ux-editor/src/utils/exportUtils.ts
+++ b/frontend/packages/ux-editor/src/utils/exportUtils.ts
@@ -8,9 +8,9 @@ import type {
   ExportTextResourceValue,
 } from '../types/ExportForm';
 import type { IFormLayouts, IOption, ITextResourceBindings } from '../types/global';
-import type { KeyValuePairs } from 'app-shared/types/KeyValuePairs';
 import { internalLayoutToExternal } from '../converters/formLayoutConverters';
 import type { ExternalComponent, ExternalFormLayout } from 'app-shared/types/api';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 
 export class ExportUtils {
   private readonly pageOrder: string[];
@@ -18,7 +18,7 @@ export class ExportUtils {
   private readonly layoutSetName: string;
   private readonly appId: string;
   private readonly textResources: ITextResources;
-  private readonly optionLists: KeyValuePairs<any>;
+  private readonly optionListsData: OptionsListsResponse;
   private readonly defaultLanguage: string;
   private readonly includeRestProperties: boolean;
 
@@ -28,7 +28,7 @@ export class ExportUtils {
     layoutSetName: string,
     appId: string,
     textResources: ITextResources,
-    optionLists: KeyValuePairs<any>,
+    optionListsData: OptionsListsResponse,
     defaultLanguage: string,
     includeRestProperties: boolean = false,
   ) {
@@ -37,7 +37,7 @@ export class ExportUtils {
     this.layoutSetName = layoutSetName;
     this.appId = appId;
     this.textResources = textResources;
-    this.optionLists = optionLists;
+    this.optionListsData = optionListsData;
     this.defaultLanguage = defaultLanguage;
     this.includeRestProperties = includeRestProperties;
   }
@@ -141,7 +141,10 @@ export class ExportUtils {
       return component.options;
     }
     if (component.optionsId) {
-      return this.optionLists[component.optionsId];
+      const optionListData = this.optionListsData.find(
+        (optionListData) => optionListData.title === component.optionsId,
+      );
+      return optionListData.data;
     }
     return undefined;
   };