diff --git a/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx b/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx index b68b3de78ae..2ab2d32e1af 100644 --- a/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx +++ b/frontend/app-development/features/appContentLibrary/AppContentLibrary.test.tsx @@ -19,6 +19,7 @@ const updateCodeListIdButtonTextMock = 'Update Code List Id'; const codeListNameMock = 'codeListNameMock'; const newCodeListNameMock = 'newCodeListNameMock'; const codeListMock: CodeList = [{ value: '', label: '' }]; +const optionListsDataMock: OptionsListsResponse = [{ title: codeListNameMock, data: codeListMock }]; jest.mock( '../../../libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage', () => ({ @@ -119,7 +120,7 @@ describe('AppContentLibrary', () => { it('calls onUpdateOptionListId when onUpdateCodeListId is triggered', async () => { const user = userEvent.setup(); - renderAppContentLibrary(optionListsMock); + renderAppContentLibrary(); await goToLibraryPage(user, 'code_lists'); const updateCodeListIdButton = screen.getByRole('button', { name: updateCodeListIdButtonTextMock, @@ -150,7 +151,7 @@ type renderAppContentLibraryProps = { const renderAppContentLibrary = ({ queries = {}, - optionListsData = [], + optionListsData = optionListsDataMock, }: renderAppContentLibraryProps = {}) => { const queryClientMock = createQueryClientMock(); if (optionListsData.length) { 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 11ceff7958a..c58d5917c3c 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 @@ -7,7 +7,6 @@ import type { UserEvent } from '@testing-library/user-event'; import { textMock } from '@studio/testing/mocks/i18nMock'; import type { CodeList as StudioComponentCodeList } from '@studio/components'; import { codeListsDataMock } from '../../../../../mocks/mockPagesConfig'; -import { ArrayUtils } from '@studio/pure-functions'; const onUpdateCodeListIdMock = jest.fn(); const onUpdateCodeListMock = jest.fn(); diff --git a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/EditCodeList/EditCodeList.tsx b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/EditCodeList/EditCodeList.tsx index f420aa6bea0..9b6dca55d65 100644 --- a/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/EditCodeList/EditCodeList.tsx +++ b/frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/EditCodeList/EditCodeList.tsx @@ -42,7 +42,7 @@ export function EditCodeList({ }; const handleValidateCodeListId = (newCodeListId: string) => { - const invalidCodeListNames = ArrayUtils.removeItemByValue(codeListNames, codeList.title); + const invalidCodeListNames = ArrayUtils.removeItemByValue(codeListNames, codeListTitle); const fileNameError = FileNameUtils.findFileNameError(newCodeListId, invalidCodeListNames); return getInvalidInputFileNameErrorMessage(fileNameError); }; diff --git a/frontend/packages/shared/src/api/queries.ts b/frontend/packages/shared/src/api/queries.ts index 2853cc4708d..786d642aba1 100644 --- a/frontend/packages/shared/src/api/queries.ts +++ b/frontend/packages/shared/src/api/queries.ts @@ -88,7 +88,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 {OptionsList, OptionsListsResponse} 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()); diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts index 851ef6b6461..11e38199955 100644 --- a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts +++ b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.test.ts @@ -27,16 +27,23 @@ describe('useUpdateOptionListMutation', () => { expect(queriesMock.updateOptionList).toHaveBeenCalledWith(org, app, optionListId, optionsList); }); - test('Sets the updated option list on the cache for all option lists', async () => { + test('Sets the updated option list on the cache for all option lists when cache contains the list', 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, + }, + ]); }); test('Sets the updated option list on the cache for the single option list', async () => { diff --git a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts index 6d28e0c01f9..3ae772dd54c 100644 --- a/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts +++ b/frontend/packages/shared/src/hooks/mutations/useUpdateOptionListMutation.ts @@ -1,7 +1,11 @@ import type { MutationMeta } from '@tanstack/react-query'; import { QueryKey } from 'app-shared/types/QueryKey'; import type { Option } from 'app-shared/types/Option'; -import type { OptionsList, OptionsListsResponse } from 'app-shared/types/api/OptionsLists'; +import type { + OptionsList, + OptionsListData, + 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'; @@ -25,8 +29,10 @@ export const useUpdateOptionListMutation = (org: string, app: string, meta?: Mut org, app, ]); - const newData = updateListInOptionLists(optionListId, updatedOptionList, oldData); - queryClient.setQueryData([QueryKey.OptionLists, org, app], newData); + if (isOptionsListInOptionListsCache(oldData)) { + const newData = updateListInOptionListsData(optionListId, updatedOptionList, oldData); + queryClient.setQueryData([QueryKey.OptionLists, org, app], newData); + } queryClient.setQueryData([QueryKey.OptionList, org, app, optionListId], updatedOptionList); void queryClient.invalidateQueries({ queryKey: [QueryKey.OptionListIds, org, app] }); }, @@ -34,14 +40,18 @@ export const useUpdateOptionListMutation = (org: string, app: string, meta?: Mut }); }; -const updateListInOptionLists = ( +const isOptionsListInOptionListsCache = (data: OptionsListsResponse | null): boolean => !!data; + +const updateListInOptionListsData = ( optionListId: string, updatedOptionList: OptionsList, oldData: OptionsListsResponse, ): OptionsListsResponse => { - const oldOptionList = oldData.find((optionList) => optionList.title === optionListId); + const oldOptionsListData: OptionsListData = oldData.find( + (optionListData) => optionListData.title === optionListId, + ); return ArrayUtils.replaceByPredicate(oldData, (optionList) => optionList.title === optionListId, { - ...oldOptionList, + ...oldOptionsListData, data: updatedOptionList, }); };