From 0f7a0f46f62489f36cc4e7ff52bc529246d35f51 Mon Sep 17 00:00:00 2001
From: andreastanderen <andreastanderen@gmail.com>
Date: Wed, 11 Dec 2024 10:49:40 +0100
Subject: [PATCH] adapt getAllOptionsLists to return also faulty options lists
 if reading them fails

---
 .../Designer/Controllers/OptionsController.cs |  33 +++++-
 .../src/Designer/Models/Dto/OptionListData.cs |  11 ++
 .../AppContentLibrary.test.tsx                |  17 ++-
 .../appContentLibrary/AppContentLibrary.tsx   |  26 ++---
 ...convertOptionsListToCodeListResult.test.ts |  58 ----------
 .../convertOptionsListToCodeListResult.ts     |  14 ---
 ...ertOptionsListsDataToCodeListsData.test.ts |  49 ++++++++
 .../convertOptionsListsDataToCodeListsData.ts |  20 ++++
 .../mocks/mockPagesConfig.ts                  |  13 ++-
 .../pages/CodeList/CodeList.test.tsx          |  15 +--
 .../LibraryBody/pages/CodeList/CodeList.tsx   |  23 ++--
 .../CodeList/CodeLists/CodeLists.test.tsx     |  18 +--
 .../pages/CodeList/CodeLists/CodeLists.tsx    |  44 +++----
 .../LibraryBody/pages/CodeList/index.ts       |   2 +-
 .../ContentLibrary/LibraryBody/pages/index.ts |   2 +-
 .../libs/studio-content-library/src/index.ts  |   2 +-
 .../src/types/useLibraryQuery.ts              |   5 -
 .../src/ObjectUtils/ObjectUtils.ts            |  10 --
 frontend/packages/shared/src/api/queries.ts   |   5 +-
 .../useUpdateOptionListIdMutation.test.ts     |  37 +++---
 .../useUpdateOptionListIdMutation.ts          |  25 ++--
 .../useUpdateOptionListMutation.test.ts       |  17 ++-
 .../mutations/useUpdateOptionListMutation.ts  |  24 +++-
 .../shared/src/hooks/queries/index.ts         |   1 -
 .../hooks/queries/useGetOptionListQuery.ts    |  16 ---
 .../hooks/queries/useOptionListQuery.test.ts  |   3 +
 .../src/hooks/queries/useOptionListQuery.ts   |   2 +-
 .../src/hooks/queries/useOptionListsQuery.ts  |  11 +-
 .../packages/shared/src/mocks/queriesMock.ts  |   4 +-
 .../packages/shared/src/types/QueryKey.ts     |   1 +
 .../shared/src/types/api/OptionsLists.ts      |   8 ++
 .../src/components/Elements/ExportForm.tsx    |   6 +-
 .../OptionTabs/EditTab/EditTab.tsx            |   7 +-
 .../OptionListEditor.test.tsx                 | 107 ++++++++----------
 .../OptionListEditor/OptionListEditor.tsx     |  49 ++++----
 .../ux-editor/src/utils/exportUtils.test.ts   |  23 ++--
 .../ux-editor/src/utils/exportUtils.ts        |  13 ++-
 37 files changed, 366 insertions(+), 355 deletions(-)
 create mode 100644 backend/src/Designer/Models/Dto/OptionListData.cs
 delete mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.test.ts
 delete mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.ts
 create mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.test.ts
 create mode 100644 frontend/app-development/features/appContentLibrary/utils/convertOptionsListsDataToCodeListsData.ts
 delete mode 100644 frontend/libs/studio-content-library/src/types/useLibraryQuery.ts
 delete mode 100644 frontend/packages/shared/src/hooks/queries/useGetOptionListQuery.ts

diff --git a/backend/src/Designer/Controllers/OptionsController.cs b/backend/src/Designer/Controllers/OptionsController.cs
index 1482ad10064..33f38d1ac8f 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,41 @@ 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..c88688a2c49
--- /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;
+}
diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx
index c25d60a1270..686894eec64 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';
@@ -31,9 +31,7 @@ jest.mock(
         >
           {uploadCodeListButtonTextMock}
         </button>
-        <button
-          onClick={() => onUpdateCodeList({ title: codeListNameMock, codeList: codeListMock })}
-        >
+        <button onClick={() => onUpdateCodeList({ title: codeListNameMock, data: codeListMock })}>
           {updateCodeListButtonTextMock}
         </button>
       </div>
@@ -41,12 +39,13 @@ jest.mock(
   }),
 );
 
-const optionListIdsMock: string[] = ['list1'];
+const optionsListsMock: OptionsListsResponse = [{ title: codeListNameMock }];
 
 describe('AppContentLibrary', () => {
   afterEach(jest.clearAllMocks);
 
   it('renders the AppContentLibrary with codeLists and images resources available in the content menu', () => {
+
     renderAppContentLibrary();
     const libraryTitle = screen.getByRole('heading', {
       name: textMock('app_content_library.landing_page.title'),
@@ -125,16 +124,16 @@ const goToLibraryPage = async (user: UserEvent, libraryPage: string) => {
 
 type renderAppContentLibraryProps = {
   queries?: Partial<ServicesContextProps>;
-  optionLists?: OptionsLists;
+  optionsLists?: OptionsListsResponse;
 };
 
 const renderAppContentLibrary = ({
   queries = {},
-  optionLists = optionListsMock,
+  optionsLists = [],
 }: renderAppContentLibraryProps = {}) => {
   const queryClientMock = createQueryClientMock();
-  if (optionLists.length) {
-    queryClientMock.setQueryData([QueryKey.OptionListIds, org, app], optionLists);
+  if (optionsLists.length) {
+    queryClientMock.setQueryData([QueryKey.OptionLists, org, app], optionsLists);
   }
   renderWithProviders(queries, queryClientMock)(<AppContentLibrary />);
 };
diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
index f7f180c7e96..86a2d50b64c 100644
--- a/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
+++ b/frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx
@@ -9,25 +9,22 @@ import type { ApiError } from 'app-shared/types/api/ApiError';
 import { toast } from 'react-toastify';
 import type { AxiosError } from 'axios';
 import { isErrorUnknown } from 'app-shared/utils/ApiErrorUtils';
-import { useGetOptionListQuery } from 'app-shared/hooks/queries';
+import { useOptionListsQuery } from 'app-shared/hooks/queries';
+import { convertOptionsListsDataToCodeListsData } from './utils/convertOptionsListsDataToCodeListsData';
 
 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 { data: optionListIds, isPending: optionListIdsPending } = useOptionListIdsQuery(org, app);
-  const getOptionList = useGetOptionListQuery(org, app);
-  const { mutate: uploadOptionList } = useAddOptionListMutation(org, app);
   const { mutate: updateOptionList } = useUpdateOptionListMutation(org, app);
 
-  if (optionListIdsPending)
+  if (optionListsDataPending)
     return <StudioPageSpinner spinnerTitle={t('general.loading')}></StudioPageSpinner>;
 
   const handleUpload = (file: File) => {
@@ -43,16 +40,17 @@ export function AppContentLibrary(): React.ReactElement {
     });
   };
 
-  const handleUpdate = ({ title, codeList }: CodeListWithMetadata) => {
-    updateOptionList({ optionListId: title, optionsList: codeList });
+  const handleUpdate = ({ title, data }: CodeListWithMetadata) => {
+    updateOptionList({ optionListId: title, optionsList: data });
   };
 
+  const codeListsData = convertOptionsListsDataToCodeListsData(optionListsData);
+
   const { getContentResourceLibrary } = new ResourceContentLibraryImpl({
     pages: {
       codeList: {
         props: {
-          codeListIds: optionListIds,
-          getCodeList: getOptionList,
+          codeListsData,
           onUpdateCodeList: handleUpdate,
           onUploadCodeList: handleUpload,
         },
diff --git a/frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.test.ts b/frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.test.ts
deleted file mode 100644
index 40ce5affcd6..00000000000
--- a/frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.test.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import type { OnGetCodeListResult } from '@studio/content-library';
-import { convertOptionsListToCodeListResult } from './convertOptionsListToCodeListResult';
-import type { OptionsList } from 'app-shared/types/api/OptionsLists';
-
-describe('convertOptionsListToCodeListResult', () => {
-  it('converts option list to code list result correctly', () => {
-    const optionList: OptionsList = [
-      { label: 'Option 1', value: '1' },
-      { label: 'Option 2', value: '2' },
-    ];
-    const optionListId: string = 'optionListId';
-    const result: OnGetCodeListResult = convertOptionsListToCodeListResult(
-      optionListId,
-      optionList,
-      false,
-    );
-    expect(result).toEqual({
-      codeListWithMetadata: {
-        title: optionListId,
-        codeList: [
-          { label: 'Option 1', value: '1' },
-          { label: 'Option 2', value: '2' },
-        ],
-      },
-      isError: false,
-    });
-  });
-
-  it('sets isError to true in result when getOptionsList returns error', () => {
-    const optionListId: string = 'optionListId';
-    const result: OnGetCodeListResult = convertOptionsListToCodeListResult(
-      optionListId,
-      undefined,
-      false,
-    );
-    expect(result).toEqual({
-      codeListWithMetadata: {
-        title: optionListId,
-        codeList: undefined,
-      },
-      isError: false,
-    });
-  });
-
-  it('returns a result with empty code list array when the input option list is empty', () => {
-    const optionList: OptionsList = [];
-    const optionListId: string = 'optionListId';
-    const result: OnGetCodeListResult = convertOptionsListToCodeListResult(
-      optionListId,
-      optionList,
-      false,
-    );
-    expect(result).toEqual({
-      codeListWithMetadata: { title: optionListId, codeList: [] },
-      isError: false,
-    });
-  });
-});
diff --git a/frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.ts b/frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.ts
deleted file mode 100644
index 90a9d8c7fff..00000000000
--- a/frontend/app-development/features/appContentLibrary/utils/convertOptionsListToCodeListResult.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { OptionsList } from 'app-shared/types/api/OptionsLists';
-import type { OnGetCodeListResult } from '@studio/content-library';
-
-export const convertOptionsListToCodeListResult = (
-  optionListId: string,
-  optionsList: OptionsList,
-  isError: boolean,
-): OnGetCodeListResult => {
-  const codeListWithMetadata = { title: optionListId, codeList: optionsList };
-  return {
-    codeListWithMetadata: codeListWithMetadata,
-    isError: isError,
-  };
-};
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/libs/studio-content-library/mocks/mockPagesConfig.ts b/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts
index 37d72f90698..61f47b17c58 100644
--- a/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts
+++ b/frontend/libs/studio-content-library/mocks/mockPagesConfig.ts
@@ -1,16 +1,17 @@
 import type { PagesConfig } from '../src/types/PagesProps';
-import type { UseLibraryQuery } from '../src/types/useLibraryQuery';
-import type { CodeList } from '@studio/components';
+import type { CodeListData } from '../src';
 
-const getCodeListMock: UseLibraryQuery<CodeList, string> = (optionListId: string) => {
-  return { data: [], isError: false };
+export const codeListData: CodeListData = {
+  title: 'CodeList1',
+  data: [{ value: 'value', label: 'label' }],
+  hasError: false,
 };
+export const codeListsDataMock: CodeListData[] = [codeListData];
 
 export const mockPagesConfig: PagesConfig = {
   codeList: {
     props: {
-      codeListIds: ['CodeList1', 'CodeList2'],
-      getCodeList: getCodeListMock,
+      codeListsData: codeListsDataMock,
       onUpdateCodeList: () => {},
       onUploadCodeList: () => {},
     },
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx
index f2a4c593171..24b43c5471f 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.test.tsx
@@ -1,18 +1,12 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import type { CodeListProps, OnGetCodeListResult } from './CodeList';
+import type { CodeListProps } from './CodeList';
 import { CodeList } from './CodeList';
 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 = [{ value: 'value', label: 'label' }];
-const getCodeListMock: jest.Mock<OnGetCodeListResult, [codeListId: string]> = jest.fn(
-  (codeListId: string) => {
-    return { codeListWithMetadata: { title: codeListId, codeList: codeListMock }, isError: false };
-  },
-);
 
 describe('CodeList', () => {
   it('renders the codeList heading', () => {
@@ -47,14 +41,13 @@ describe('CodeList', () => {
 
   it('renders the code list as a clickable element', () => {
     renderCodeList();
-    const codeListAccordion = screen.getByRole('button', { name: codeListName });
+    const codeListAccordion = screen.getByRole('button', { name: codeListsDataMock[0].title });
     expect(codeListAccordion).toBeInTheDocument();
   });
 });
 
 const defaultCodeListProps: CodeListProps = {
-  codeListIds: [codeListName],
-  getCodeList: getCodeListMock,
+  codeListsData: codeListsDataMock,
   onUpdateCodeList: onUpdateCodeListMock,
   onUploadCodeList: onUploadCodeListMock,
 };
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx
index 98a39629a96..f3eee669122 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeList.tsx
@@ -9,43 +9,40 @@ import classes from './CodeList.module.css';
 import { ArrayUtils } from '@studio/pure-functions';
 
 export type CodeListWithMetadata = {
-  codeList: StudioComponentCodeList;
+  data: StudioComponentCodeList;
   title: string;
 };
 
-export type OnGetCodeListResult = {
-  codeListWithMetadata: CodeListWithMetadata | undefined;
-  isError: boolean;
+export type CodeListData = {
+  title: string;
+  data?: StudioComponentCodeList;
+  hasError?: boolean;
 };
 
 export type CodeListProps = {
-  codeListIds: string[];
+  codeListsData: CodeListData[];
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
   onUploadCodeList: (uploadedCodeList: File) => void;
 };
 export function CodeList({
-  codeListIds,
+  codeListsData,
   onUpdateCodeList,
   onUploadCodeList,
 }: CodeListProps): React.ReactElement {
   const { t } = useTranslation();
 
-  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={codeListIds.length} />
+      <CodeListsCounterMessage codeListsCount={codeListsData.length} />
       <CodeListsActionsBar
         onUploadCodeList={onUploadCodeList}
         onUpdateCodeList={onUpdateCodeList}
         codeListNames={codeListTitles}
       />
-      <CodeLists
-        codeListIds={codeListIds}
-        getCodeList={getCodeList}
-        onUpdateCodeList={onUpdateCodeList}
-      />
+      <CodeLists codeListsData={codeListsData} onUpdateCodeList={onUpdateCodeList} />
     </div>
   );
 }
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.test.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.test.tsx
index 50dd7b1be9c..ce373ff80b9 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.test.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.test.tsx
@@ -8,19 +8,19 @@ import type { UserEvent } from '@testing-library/user-event';
 import type { RenderResult } from '@testing-library/react';
 import type { CodeList as StudioComponentsCodeList } from '@studio/components';
 import userEvent from '@testing-library/user-event';
-import type { CodeList } from '@studio/components';
+import { codeListsDataMock } from '../../../../../../mocks/mockPagesConfig';
 
 const codeListName = 'codeList';
 const codeListWithMetadataMock: CodeListWithMetadata = {
   title: codeListName,
-  codeList: [{ value: 'value', label: 'label' }],
+  data: [{ 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();
   });
 
@@ -49,21 +49,21 @@ describe('CodeLists', () => {
       title: codeListName,
     });
   });
-
-  it('renders error message if error fetching an option list occurred', () => {
-    renderCodeLists({ getCodeList });
+  
+  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});
-  await user.click(codeListAccordion);
+    const codeListAccordion = screen.getByRole('button', {name: codeListName});
+    await user.click(codeListAccordion);
 };
 
 const defaultProps: CodeListsProps = {
-  codeLists: [codeListWithMetadataMock],
+    codeListsData: codeListsDataMock,
   onUpdateCodeList: onUpdateCodeListMock,
 };
 
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.tsx
index d1aedfc2d35..ab4c03ab705 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.tsx
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/CodeLists/CodeLists.tsx
@@ -1,62 +1,54 @@
 import React from 'react';
-import type { CodeListWithMetadata } from '../CodeList';
 import { StudioCodeListEditor } from '@studio/components';
 import type { CodeList as StudioComponentsCodeList, CodeListEditorTexts } from '@studio/components';
 import { useOptionListEditorTexts } from '../hooks/useCodeListEditorTexts';
+import type { CodeListData, CodeListWithMetadata } from '../CodeList';
 import { Accordion, Alert } from '@digdir/designsystemet-react';
 import { useTranslation } from 'react-i18next';
-import type { UseLibraryQuery } from '../../../../../types/useLibraryQuery';
-import type { CodeList as StudioComponentCodeList } from '@studio/components';
 
 export type CodeListsProps = {
-  codeListIds: string[];
-  getCodeList: UseLibraryQuery<StudioComponentCodeList>;
+  codeListsData: CodeListData[];
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
 };
 
-export function CodeLists({ codeListIds, getCodeList, onUpdateCodeList }: CodeListsProps) {
-  return codeListIds.map((codeListId) => (
+export function CodeLists({ codeListsData, onUpdateCodeList }: CodeListsProps) {
+  return codeListsData.map((codeListData) => (
     <CodeList
-      key={codeListId}
-      codeListId={codeListId}
-      getCodeList={getCodeList}
+      key={codeListData.title}
+      codeListData={codeListData}
       onUpdateCodeList={onUpdateCodeList}
     />
   ));
 }
 
 type CodeListProps = {
-  codeListId: string;
-  getCodeList: UseLibraryQuery<StudioComponentCodeList>;
+  codeListData: CodeListData;
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
 };
 
-function CodeList({ codeList, onUpdateCodeList }: CodeListProps) {
+function CodeList({ codeListData, onUpdateCodeList }: CodeListProps) {
   const editorTexts: CodeListEditorTexts = useOptionListEditorTexts();
     const { t } = useTranslation();
 
   const handleUpdateCodeList = (updatedCodeList: StudioComponentsCodeList): void => {
-    const updatedCodeListWithMetadata = updateCodeListWithMetadata(codeList, updatedCodeList);
+    const updatedCodeListWithMetadata = updateCodeListWithMetadata({title: codeListData.title, data: codeListData.data}, updatedCodeList);
     onUpdateCodeList(updatedCodeListWithMetadata);
   };
 
-  const codeListText = codeListError
-    ? t('app_content_library.code_lists.fetch_error')
-    : t('app_content_library.code_lists.edit_code_list_placeholder_text');
-
   return (
     <Accordion border>
       <Accordion.Item>
-        <Accordion.Header>{codeListId}</Accordion.Header>
+        <Accordion.Header>{codeListData.title}</Accordion.Header>
         <Accordion.Content>
+            {codeListData.hasError ?
+                <Alert size='small' severity='danger'>
+                    {t('app_content_library.code_lists.fetch_error')}
+                </Alert> :
           <StudioCodeListEditor
-            codeList={codeList.codeList}
+            codeList={codeListData.data}
             onChange={handleUpdateCodeList}
             texts={editorTexts}
-          />
-          <Alert size='small' severity={codeListError ? 'danger' : 'info'}>
-            {codeListText}
-          </Alert>
+          />}
         </Accordion.Content>
       </Accordion.Item>
     </Accordion>
@@ -67,5 +59,5 @@ export const updateCodeListWithMetadata = (
   currentCodeListWithMetadata: CodeListWithMetadata,
   updatedCodeList: StudioComponentsCodeList,
 ): CodeListWithMetadata => {
-  return { ...currentCodeListWithMetadata, codeList: updatedCodeList };
-};
+  return { ...currentCodeListWithMetadata, data: updatedCodeList };
+}
diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/index.ts b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/index.ts
index 7ac1e957dcb..0c896fa2650 100644
--- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/index.ts
+++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeList/index.ts
@@ -1,2 +1,2 @@
 export { CodeList } from './CodeList';
-export type { CodeListWithMetadata, CodeListProps, OnGetCodeListResult } from './CodeList';
+export type { CodeListWithMetadata, CodeListProps, CodeListData } from './CodeList';
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 5af55a7c923..c51eb22019e 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, OnGetCodeListResult } from './CodeList';
+export type { CodeListWithMetadata, CodeListData } from './CodeList';
diff --git a/frontend/libs/studio-content-library/src/index.ts b/frontend/libs/studio-content-library/src/index.ts
index b4833887cd7..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, OnGetCodeListResult } from './ContentLibrary/LibraryBody/pages';
+export type { CodeListWithMetadata, CodeListData } from './ContentLibrary/LibraryBody/pages';
diff --git a/frontend/libs/studio-content-library/src/types/useLibraryQuery.ts b/frontend/libs/studio-content-library/src/types/useLibraryQuery.ts
deleted file mode 100644
index a6ecc714f1b..00000000000
--- a/frontend/libs/studio-content-library/src/types/useLibraryQuery.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export type UseLibraryQuery<T> = () => {
-  data?: T;
-  isError?: boolean;
-  isPending?: boolean;
-};
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 63caeb6f623..ce25314af2c 100644
--- a/frontend/packages/shared/src/api/queries.ts
+++ b/frontend/packages/shared/src/api/queries.ts
@@ -72,7 +72,6 @@ import type { OrgList } from 'app-shared/types/OrgList';
 import type { RepoStatus } from 'app-shared/types/RepoStatus';
 import type { Repository, User } from 'app-shared/types/Repository';
 import type { RuleConfig } from 'app-shared/types/RuleConfig';
-
 import type { WidgetSettingsResponse } from 'app-shared/types/widgetTypes';
 import { buildQueryParams } from 'app-shared/utils/urlUtils';
 import { orgListUrl } from '../cdn-paths';
@@ -88,7 +87,7 @@ 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, OptionsList } from 'app-shared/types/api/OptionsLists';
+import type { OptionsList, OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 import type { LayoutSetsModel } from '../types/api/dto/LayoutSetsModel';
 
 export const getIsLoggedInWithAnsattporten = () => get<{ isLoggedIn: boolean }>(authStatusAnsattporten());
@@ -116,7 +115,7 @@ export const getLayoutNames = (owner: string, app: string) => get<string[]>(layo
 export const getLayoutSets = (owner: string, app: string) => get<LayoutSets>(layoutSetsPath(owner, app));
 export const getLayoutSetsExtended = (owner: string, app: string) => get<LayoutSetsModel>(layoutSetsPath(owner, app) + '/extended');
 export const getOptionList = (owner: string, app: string, optionListId: string) => get<OptionsList>(optionListPath(owner, app, optionListId));
-export const getOptionLists = (owner: string, app: string) => get<OptionsLists>(optionListsPath(owner, app));
+export const getOptionLists = (owner: string, app: string) => get<OptionsListsResponse>(optionListsPath(owner, app));
 export const getOptionListIds = (owner: string, app: string) => get<string[]>(optionListIdsPath(owner, app));
 export const getOrgList = () => get<OrgList>(orgListUrl());
 export const getOrganizations = () => get<Organization[]>(orgsListPath());
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..b1148610858 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 { useQueryClient, useMutation } from '@tanstack/react-query';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
-import { ObjectUtils } from '@studio/pure-functions';
+import type { OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
+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.test.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts
index 7ed8ac17e78..156f819596d 100644
--- a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts
+++ b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts
@@ -19,8 +19,11 @@ const updateOptionList = jest.fn().mockImplementation(() => Promise.resolve(upda
 
 describe('useUpdateOptionListMutation', () => {
   test('Calls useUpdateOptionList with correct parameters', async () => {
-    const renderUpdateOptionListMutationResult = renderHookWithProviders(() =>
-      useUpdateOptionListMutation(org, app),
+    const queryClient = createQueryClientMock();
+    queryClient.setQueryData([QueryKey.OptionLists, org, app], []);
+    const renderUpdateOptionListMutationResult = renderHookWithProviders(
+      () => useUpdateOptionListMutation(org, app),
+      { queryClient },
     ).result;
     await renderUpdateOptionListMutationResult.current.mutateAsync(args);
     expect(queriesMock.updateOptionList).toHaveBeenCalledTimes(1);
@@ -29,13 +32,17 @@ describe('useUpdateOptionListMutation', () => {
 
   test('Sets the updated option list on the cache', async () => {
     const queryClient = createQueryClientMock();
+    queryClient.setQueryData(
+      [QueryKey.OptionLists, org, app],
+      [{ title: optionListId, data: optionsList }],
+    );
     const renderUpdateOptionListMutationResult = renderHookWithProviders(
       () => useUpdateOptionListMutation(org, app),
       { queries: { updateOptionList }, queryClient },
     ).result;
     await renderUpdateOptionListMutationResult.current.mutateAsync(args);
-    expect(queryClient.getQueryData([QueryKey.OptionLists, org, app])).toEqual({
-      test: updatedOptionsList,
-    });
+    expect(queryClient.getQueryData([QueryKey.OptionLists, org, app])).toEqual([
+      { title: optionListId, data: updatedOptionsList },
+    ]);
   });
 });
diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts
index 2ecf5ea1e63..245bfb00335 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 { useQueryClient, useMutation } from '@tanstack/react-query';
 import { useServicesContext } from 'app-shared/contexts/ServicesContext';
+import type { OptionsList, OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
+import { ArrayUtils } from '@studio/pure-functions';
 
 export interface UpdateOptionListMutationArgs {
   optionListId: string;
@@ -19,12 +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/index.ts b/frontend/packages/shared/src/hooks/queries/index.ts
index 09c6c6d0728..fc03b8ed37f 100644
--- a/frontend/packages/shared/src/hooks/queries/index.ts
+++ b/frontend/packages/shared/src/hooks/queries/index.ts
@@ -2,7 +2,6 @@ export { useAppMetadataQuery } from './useAppMetadataQuery';
 export { useAppVersionQuery } from './useAppVersionQuery';
 export { useDataModelsJsonQuery } from './useDataModelsJsonQuery';
 export { useDataModelsXsdQuery } from './useDataModelsXsdQuery';
-export { useGetOptionListQuery } from './useGetOptionListQuery';
 export { useInstanceIdQuery } from './useInstanceIdQuery';
 export { useOptionListQuery } from './useOptionListQuery';
 export { useOptionListsQuery } from './useOptionListsQuery';
diff --git a/frontend/packages/shared/src/hooks/queries/useGetOptionListQuery.ts b/frontend/packages/shared/src/hooks/queries/useGetOptionListQuery.ts
deleted file mode 100644
index 5a2fc15c928..00000000000
--- a/frontend/packages/shared/src/hooks/queries/useGetOptionListQuery.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useServicesContext } from 'app-shared/contexts/ServicesContext';
-import { QueryKey } from 'app-shared/types/QueryKey';
-import { useQuery } from '@tanstack/react-query';
-import type { OptionsList } from 'app-shared/types/api/OptionsLists';
-
-type GetOptionListResult = { data?: OptionsList; isError?: boolean };
-type UseGetOptionListQueryResult = (optionListId: string) => GetOptionListResult;
-
-export const useGetOptionListQuery = (org: string, app: string): UseGetOptionListQueryResult => {
-  const { getOptionList } = useServicesContext();
-  return (optionListId: string) =>
-    useQuery<OptionsList>({
-      queryKey: [QueryKey.OptionLists, org, app, optionListId],
-      queryFn: () => getOptionList(org, app, optionListId),
-    });
-};
diff --git a/frontend/packages/shared/src/hooks/queries/useOptionListQuery.test.ts b/frontend/packages/shared/src/hooks/queries/useOptionListQuery.test.ts
index b7dd0c10632..2876ebefa9f 100644
--- a/frontend/packages/shared/src/hooks/queries/useOptionListQuery.test.ts
+++ b/frontend/packages/shared/src/hooks/queries/useOptionListQuery.test.ts
@@ -5,6 +5,7 @@ import { useOptionListQuery } from 'app-shared/hooks/queries/useOptionListQuery'
 import { waitFor } from '@testing-library/react';
 import type { ServicesContextProps } from 'app-shared/contexts/ServicesContext';
 import type { OptionsList } from 'app-shared/types/api/OptionsLists';
+import { createQueryClientMock } from 'app-shared/mocks/queryClientMock';
 
 const optionsListId = 'optionsListId';
 
@@ -23,8 +24,10 @@ describe('useOptionListQuery', () => {
 });
 
 const render = async (queries: Partial<ServicesContextProps> = {}) => {
+  const queryClient = createQueryClientMock();
   const { result } = renderHookWithProviders(() => useOptionListQuery(org, app, optionsListId), {
     queries,
+    queryClient,
   });
   await waitFor(() => expect(result.current.isSuccess).toBe(true));
   return result;
diff --git a/frontend/packages/shared/src/hooks/queries/useOptionListQuery.ts b/frontend/packages/shared/src/hooks/queries/useOptionListQuery.ts
index ff2db725d25..91ec12df941 100644
--- a/frontend/packages/shared/src/hooks/queries/useOptionListQuery.ts
+++ b/frontend/packages/shared/src/hooks/queries/useOptionListQuery.ts
@@ -11,7 +11,7 @@ export const useOptionListQuery = (
 ): UseQueryResult<OptionsList> => {
   const { getOptionList } = useServicesContext();
   return useQuery<OptionsList>({
-    queryKey: [QueryKey.OptionLists, org, app],
+    queryKey: [QueryKey.OptionList, org, app, optionListId],
     queryFn: () => getOptionList(org, app, optionListId),
   });
 };
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 cc0957bfe1a..af2a9364a1e 100644
--- a/frontend/packages/shared/src/mocks/queriesMock.ts
+++ b/frontend/packages/shared/src/mocks/queriesMock.ts
@@ -69,7 +69,7 @@ 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 { OptionsList, OptionsLists } from 'app-shared/types/api/OptionsLists';
+import type { OptionsList, OptionsListsResponse } from 'app-shared/types/api/OptionsLists';
 import type { LayoutSetsModel } from '../types/api/dto/LayoutSetsModel';
 import { layoutSetsExtendedMock } from '@altinn/ux-editor/testing/layoutSetsMock';
 
@@ -110,7 +110,7 @@ export const queriesMock: ServicesContextProps = {
     .mockImplementation(() => Promise.resolve<LayoutSetsModel>(layoutSetsExtendedMock)),
   getOptionListIds: jest.fn().mockImplementation(() => Promise.resolve<string[]>([])),
   getOptionList: jest.fn().mockImplementation(() => Promise.resolve<OptionsList>([])),
-  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/QueryKey.ts b/frontend/packages/shared/src/types/QueryKey.ts
index 5195acbf358..5db7f25c245 100644
--- a/frontend/packages/shared/src/types/QueryKey.ts
+++ b/frontend/packages/shared/src/types/QueryKey.ts
@@ -27,6 +27,7 @@ export enum QueryKey {
   LayoutSchema = 'LayoutSchema',
   LayoutSets = 'LayoutSets',
   LayoutSetsExtended = 'LayoutSetsExtended',
+  OptionList = 'OptionList',
   OptionLists = 'OptionLists',
   OptionListIds = 'OptionListIds',
   OrgList = 'OrgList',
diff --git a/frontend/packages/shared/src/types/api/OptionsLists.ts b/frontend/packages/shared/src/types/api/OptionsLists.ts
index 35b59e98882..7e1fa317025 100644
--- a/frontend/packages/shared/src/types/api/OptionsLists.ts
+++ b/frontend/packages/shared/src/types/api/OptionsLists.ts
@@ -3,3 +3,11 @@ import type { Option } from 'app-shared/types/Option';
 export type OptionsList = Option[];
 
 export type OptionsLists = Record<string, OptionsList>;
+
+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/components/config/editModal/EditOptions/OptionTabs/EditTab/EditTab.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/EditTab.tsx
index f6d935408a8..2cbaf4a1913 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/EditTab.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/EditTab.tsx
@@ -93,12 +93,7 @@ function SelectedOptionList({
 
   return (
     <div aria-label={label} className={classes.chosenOptionContainer}>
-      <OptionListEditor
-        label={label}
-        optionsId={component.optionsId}
-        component={component}
-        handleComponentChange={handleComponentChange}
-      />
+      <OptionListEditor component={component} handleComponentChange={handleComponentChange} />
       <div className={classes.deleteButtonContainer}>
         <StudioDeleteButton
           className={classes.deleteButton}
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.test.tsx
index 829ff80aa22..23a08391990 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.test.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
-import type { OptionsLists } from 'app-shared/types/api/OptionsLists';
 import type { Option } from 'app-shared/types/Option';
+import type { OptionListEditorProps } from './OptionListEditor';
 import { OptionListEditor } from './OptionListEditor';
 import { textMock } from '@studio/testing/mocks/i18nMock';
 import { renderWithProviders } from '../../../../../../../testing/mocks';
@@ -11,30 +11,32 @@ import { queriesMock } from 'app-shared/mocks/queriesMock';
 import { app, org } from '@studio/testing/testids';
 import { componentMocks } from '../../../../../../../testing/componentMocks';
 import { ComponentType } from 'app-shared/types/ComponentType';
+import type { OptionsList } from 'app-shared/types/api/OptionsLists';
 
 // Test data:
 const mockComponent = componentMocks[ComponentType.RadioButtons];
-
-const apiResult: OptionsLists = {
-  options: [
-    { value: 'test', label: 'label text', description: 'description', helpText: 'help text' },
-    { value: 2, label: 'label number', description: null, helpText: null },
-    { value: true, label: 'label boolean', description: null, helpText: null },
-  ],
-};
+const handleComponentChange = jest.fn();
+const apiResult: OptionsList = [
+  { value: 'test', label: 'label text', description: 'description', helpText: 'help text' },
+  { value: 2, label: 'label number', description: null, helpText: null },
+  { value: true, label: 'label boolean', description: null, helpText: null },
+];
+const getOptionListMock = jest
+  .fn()
+  .mockImplementation(() => Promise.resolve<OptionsList>(apiResult));
 
 describe('OptionListEditor', () => {
   afterEach(() => jest.clearAllMocks());
 
   describe('ManualOptionListEditorModal', () => {
     it('should render the open Dialog button', async () => {
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditor();
       expect(getManualModalButton()).toBeInTheDocument();
     });
 
     it('should open Dialog', async () => {
       const user = userEvent.setup();
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditor();
 
       await user.click(getManualModalButton());
 
@@ -43,7 +45,7 @@ describe('OptionListEditor', () => {
 
     it('should close Dialog', async () => {
       const user = userEvent.setup();
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditor();
 
       await user.click(getManualModalButton());
       await user.click(screen.getByRole('button', { name: 'close modal' })); // Todo: Replace "close modal" with defaultDialogProps.closeButtonTitle when we upgrade to Designsystemet v1
@@ -53,13 +55,7 @@ describe('OptionListEditor', () => {
 
     it('should call doReloadPreview when editing', async () => {
       const user = userEvent.setup();
-      const componentWithOptionsId = mockComponent;
-      componentWithOptionsId.optionsId = 'optionsID';
-      const handleComponentChange = jest.fn();
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
-        handleComponentChange,
-        component: componentWithOptionsId,
-      });
+      await renderOptionListEditor();
       const text = 'test';
 
       await user.click(getManualModalButton());
@@ -74,16 +70,12 @@ describe('OptionListEditor', () => {
   });
 
   describe('LibraryOptionListEditorModal', () => {
-    beforeEach(() => {
-      mockComponent.optionsId = 'options';
-      mockComponent.options = undefined;
-    });
-
     it('should render a spinner when there is no data', () => {
       renderOptionListEditor({
         queries: {
-          getOptionLists: jest.fn().mockImplementation(() => Promise.resolve<OptionsLists>({})),
+          getOptionList: jest.fn().mockImplementation(() => Promise.resolve<OptionsList>([])),
         },
+        props: { component: { ...mockComponent, options: undefined } },
       });
 
       expect(
@@ -94,8 +86,9 @@ describe('OptionListEditor', () => {
     it('should render an error message when getOptionLists throws an error', async () => {
       await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
         queries: {
-          getOptionLists: jest.fn().mockRejectedValueOnce(new Error('Error')),
+          getOptionList: jest.fn().mockRejectedValueOnce(new Error('Error')),
         },
+        props: { component: { ...mockComponent, options: undefined } },
       });
 
       expect(
@@ -104,13 +97,17 @@ describe('OptionListEditor', () => {
     });
 
     it('should render the open Dialog button', async () => {
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
+        props: { component: { ...mockComponent, options: undefined } },
+      });
       expect(getOptionModalButton()).toBeInTheDocument();
     });
 
     it('should open Dialog', async () => {
       const user = userEvent.setup();
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
+        props: { component: { ...mockComponent, options: undefined } },
+      });
 
       await user.click(getOptionModalButton());
 
@@ -119,7 +116,9 @@ describe('OptionListEditor', () => {
 
     it('should close Dialog', async () => {
       const user = userEvent.setup();
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
+        props: { component: { ...mockComponent, options: undefined } },
+      });
 
       await user.click(getOptionModalButton());
       await user.click(screen.getByRole('button', { name: 'close modal' })); // Todo: Replace "close modal" with defaultDialogProps.closeButtonTitle when we upgrade to Designsystemet v1
@@ -132,6 +131,7 @@ describe('OptionListEditor', () => {
       const doReloadPreview = jest.fn();
       await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
         previewContextProps: { doReloadPreview },
+        props: { component: { ...mockComponent, options: undefined } },
       });
 
       await user.click(getOptionModalButton());
@@ -146,7 +146,9 @@ describe('OptionListEditor', () => {
 
     it('should call updateOptionList with correct parameters when closing Dialog', async () => {
       const user = userEvent.setup();
-      await renderOptionListEditorAndWaitForSpinnerToBeRemoved();
+      await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
+        props: { component: { ...mockComponent, options: undefined } },
+      });
       const expectedResultAfterEdit: Option[] = [
         { value: 'test', label: 'label text', description: 'description', helpText: 'help text' },
         { value: 2, label: 'label number', description: 'test', helpText: null },
@@ -183,45 +185,28 @@ function getManualModalButton() {
   });
 }
 
-const renderOptionListEditor = ({
-  previewContextProps = {},
-  queries = {},
-  component = {},
-  handleComponentChange = jest.fn(),
-} = {}) => {
-  return renderWithProviders(
-    <OptionListEditor
-      label={mockComponent.optionsId}
-      optionsId={mockComponent.optionsId}
-      component={{ ...mockComponent, ...component }}
-      handleComponentChange={handleComponentChange}
-    />,
-    {
-      queries: {
-        getOptionLists: jest
-          .fn()
-          .mockImplementation(() => Promise.resolve<OptionsLists>(apiResult)),
-        ...queries,
-      },
-      queryClient: createQueryClientMock(),
-      previewContextProps,
-    },
-  );
+const defaultProps: OptionListEditorProps = {
+  component: mockComponent,
+  handleComponentChange,
+};
+
+const renderOptionListEditor = ({ previewContextProps = {}, queries = {}, props = {} } = {}) => {
+  return renderWithProviders(<OptionListEditor {...defaultProps} {...props} />, {
+    queries: { getOptionList: getOptionListMock, ...queries },
+    queryClient: createQueryClientMock(),
+    previewContextProps,
+  });
 };
 
 const renderOptionListEditorAndWaitForSpinnerToBeRemoved = async ({
   previewContextProps = {},
-  queries = {
-    getOptionLists: jest.fn().mockImplementation(() => Promise.resolve<OptionsLists>(apiResult)),
-  },
-  component = {},
-  handleComponentChange = jest.fn(),
+  queries = {},
+  props = {},
 } = {}) => {
   const view = renderOptionListEditor({
     previewContextProps,
     queries,
-    component,
-    handleComponentChange,
+    props,
   });
   await waitForElementToBeRemoved(() => {
     return screen.queryByText(textMock('ux_editor.modal_properties_code_list_spinner_title'));
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.tsx
index 2f581ec6407..6550f1622ee 100644
--- a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.tsx
+++ b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/OptionTabs/EditTab/OptionListEditor/OptionListEditor.tsx
@@ -12,27 +12,35 @@ import {
 import type { CodeListEditorTexts } from '@studio/components';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useUpdateOptionListMutation } from 'app-shared/hooks/mutations/useUpdateOptionListMutation';
-import { useOptionListsQuery } from 'app-shared/hooks/queries/useOptionListsQuery';
 import { useOptionListEditorTexts } from '../../hooks/useOptionListEditorTexts';
 import { usePreviewContext } from 'app-development/contexts/PreviewContext';
 import type { IGenericEditComponent } from '../../../../../componentConfig';
 import type { SelectionComponentType } from '../../../../../../../types/FormComponent';
 import classes from './OptionListEditor.module.css';
+import { useOptionListQuery } from 'app-shared/hooks/queries';
 
-type OptionListEditorProps = {
-  optionsId: string;
-  label: string;
-} & Pick<IGenericEditComponent<SelectionComponentType>, 'component' | 'handleComponentChange'>;
+export type OptionListEditorProps = Pick<
+  IGenericEditComponent<SelectionComponentType>,
+  'component' | 'handleComponentChange'
+>;
 
 export function OptionListEditor({
-  optionsId,
   component,
   handleComponentChange,
-  label,
 }: OptionListEditorProps): React.ReactNode {
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
-  const { data: optionsLists, status } = useOptionListsQuery(org, app);
+  const { data: optionsList, status } = useOptionListQuery(org, app, component.optionsId);
+
+  if (component.options !== undefined) {
+    return (
+      <EditManualOptionListEditorModal
+        label={component.label}
+        component={component}
+        handleComponentChange={handleComponentChange}
+      />
+    );
+  }
 
   switch (status) {
     case 'pending':
@@ -46,24 +54,13 @@ export function OptionListEditor({
         </StudioErrorMessage>
       );
     case 'success': {
-      if (optionsLists[optionsId] !== undefined) {
-        return (
-          <EditLibraryOptionListEditorModal
-            label={label}
-            optionsId={optionsId}
-            optionsList={optionsLists[optionsId]}
-          />
-        );
-      }
-      if (component.options !== undefined) {
-        return (
-          <EditManualOptionListEditorModal
-            label={label}
-            component={component}
-            handleComponentChange={handleComponentChange}
-          />
-        );
-      }
+      return (
+        <EditLibraryOptionListEditorModal
+          label={component.label}
+          optionsId={component.optionsId}
+          optionsList={optionsList}
+        />
+      );
     }
   }
 }
diff --git a/frontend/packages/ux-editor/src/utils/exportUtils.test.ts b/frontend/packages/ux-editor/src/utils/exportUtils.test.ts
index 4664f25c808..5356f3ae1dd 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,13 @@ describe('generateExportFormFormat', () => {
       },
     ],
   };
-  const optionLists = {
-    optionList1: [{ label: 'option1', value: 'option1' }],
-  };
+  const optionListsData: OptionsListsResponse = [
+    {
+      title: 'optionList1',
+      data: [{ label: 'option1', value: 'option1' }],
+      hasError: false,
+    },
+  ];
   it.each(['nb', 'en'])(
     'should generate correct export format for specified default language',
     (language) => {
@@ -113,7 +118,7 @@ describe('generateExportFormFormat', () => {
         selectedFormLayoutSetName,
         app,
         textResources,
-        optionLists,
+        optionListsData,
         language,
         false,
       );
@@ -198,7 +203,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       undefined,
       false,
     );
@@ -250,7 +255,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       'nb',
       false,
     );
@@ -269,7 +274,7 @@ describe('generateExportFormFormat', () => {
       selectedFormLayoutSetName,
       app,
       textResources,
-      optionLists,
+      optionListsData,
       'nb',
       true,
     );
@@ -281,7 +286,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 +302,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;
   };