specify error messages in different cases for option lists feature

Altinn · Nov 26, 2024 · 4e87eb0 · 4e87eb0
1 parent 152e922
commit 4e87eb0
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 31 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -1567,7 +1567,8 @@
   "ux_editor.modal_properties_data_model_link": "Legg til en datamodellknytning",
   "ux_editor.modal_properties_data_model_link_multiple_attachments": "Legg til knytning for flere vedlegg",
   "ux_editor.modal_properties_data_model_restrictions_attachment_components": "Når vedlegg er en del av en repeterende gruppe, må det også være en en datamodellknytning",
-  "ux_editor.modal_properties_error_message": "Kunne ikke hente innholdet i kodelisten. Redigering er ikke tilgjengelig.",
+  "ux_editor.modal_properties_fetch_option_list_error_message": "Kunne ikke hente innholdet i kodelisten. Redigering er ikke tilgjengelig.",
+  "ux_editor.modal_properties_fetch_option_list_ids_error_message": "Kunne ikke hente applikasjonens kodelister.",
   "ux_editor.modal_properties_file_upload_list": "Liste (flere vedlegg)",
   "ux_editor.modal_properties_file_upload_simple": "Enkel (ett vedlegg)",
   "ux_editor.modal_properties_grid": "Bredde for hele komponenten",

diff --git a/frontend/packages/ux-editor-v3/src/components/config/editModal/EditCodeList.tsx b/frontend/packages/ux-editor-v3/src/components/config/editModal/EditCodeList.tsx
@@ -13,7 +13,7 @@ export function EditCodeList({ component, handleComponentChange }: IGenericEditC
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
 
-  const { data: optionListIds, isPending, isError, error } = useOptionListIdsQuery(org, app);
+  const { data: optionListIds, isPending, isError } = useOptionListIdsQuery(org, app);
   const [useCustomCodeList, setUseCustomCodeList] = useState<boolean>(optionListIds?.length === 0);
   const handleOptionsIdChange = (e) => {
     handleComponentChange({
@@ -31,7 +31,7 @@ export function EditCodeList({ component, handleComponentChange }: IGenericEditC
         />
       ) : isError ? (
         <ErrorMessage>
-          {error instanceof Error ? error.message : t('ux_editor.modal_properties_error_message')}
+          {t('ux_editor.modal_properties_fetch_option_list_ids_error_message')}
         </ErrorMessage>
       ) : optionListIds?.length === 0 ? (
         <ErrorMessage>{t('ux_editor.modal_properties_no_options_found_message')}</ErrorMessage>

diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.test.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.test.tsx
@@ -220,15 +220,18 @@ describe('EditOptions', () => {
     expect(screen.getByText(textMock('ux_editor.options.code_list_only'))).toBeInTheDocument();
   });
 
-  it('should show error message if query fails', async () => {
-    jest.spyOn(console, 'error').mockImplementation(() => {});
+  it('should show error message if getOptionListIds fails', async () => {
     renderEditOptions({
       queries: {
-        getOptionListIds: jest.fn().mockRejectedValueOnce(new Error('Error')),
+        getOptionListIds: jest.fn().mockImplementation(() => Promise.reject()),
       },
     });
 
-    expect(await screen.findByText('Error')).toBeInTheDocument();
+    expect(
+      await screen.findByText(
+        textMock('ux_editor.modal_properties_fetch_option_list_error_message'),
+      ),
+    ).toBeInTheDocument();
     jest.clearAllMocks();
   });
 });
diff --git a/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx b/frontend/packages/ux-editor/src/components/config/editModal/EditOptions/EditOptions.tsx
@@ -29,7 +29,7 @@ export function EditOptions<T extends SelectionComponentType>({
   renderOptions,
 }: ISelectionEditComponentProvidedProps<T>) {
   const { org, app } = useStudioEnvironmentParams();
-  const { data: optionListIds, isPending, isError, error } = useOptionListIdsQuery(org, app);
+  const { data: optionListIds, isPending, isError } = useOptionListIdsQuery(org, app);
   const { t } = useTranslation();
 
   return (
@@ -44,7 +44,7 @@ export function EditOptions<T extends SelectionComponentType>({
         />
       ) : isError ? (
         <ErrorMessage className={classes.errorMessage}>
-          {error instanceof Error ? error.message : t('ux_editor.modal_properties_error_message')}
+          {t('ux_editor.modal_properties_fetch_option_list_error_message')}
         </ErrorMessage>
       ) : (
         <OptionTabs

diff --git a/...components/config/editModal/EditOptions/OptionTabs/EditOptionList/EditOptionList.test.tsx b/...components/config/editModal/EditOptions/OptionTabs/EditOptionList/EditOptionList.test.tsx
@@ -69,27 +69,17 @@ describe('EditOptionList', () => {
     expect(await screen.findByRole('combobox')).toHaveValue('test-2');
   });
 
-  it('should render error message if getOptionListIds returns an error', async () => {
+  it('should render error message if getOptionListIds returns an unknown error', async () => {
     renderEditOptionList({
       queries: {
         getOptionListIds: jest.fn().mockImplementation(() => Promise.reject()),
       },
     });
 
     expect(
-      await screen.findByText(textMock('ux_editor.modal_properties_error_message')),
-    ).toBeInTheDocument();
-  });
-
-  it('should render standard error message if option list endpoint throws an error without specified error message', async () => {
-    renderEditOptionList({
-      queries: {
-        getOptionListIds: jest.fn().mockImplementation(() => Promise.reject()),
-      },
-    });
-
-    expect(
-      await screen.findByText(textMock('ux_editor.modal_properties_error_message')),
+      await screen.findByText(
+        textMock('ux_editor.modal_properties_fetch_option_list_error_message'),
+      ),
     ).toBeInTheDocument();
   });
 

diff --git a/.../src/components/config/editModal/EditOptions/OptionTabs/EditOptionList/EditOptionList.tsx b/.../src/components/config/editModal/EditOptions/OptionTabs/EditOptionList/EditOptionList.tsx
@@ -124,7 +124,11 @@ function OptionListSelector<T extends SelectionComponentType>({
         />
       );
     case 'error':
-      return <ErrorMessage>{t('ux_editor.modal_properties_error_message')}</ErrorMessage>;
+      return (
+        <ErrorMessage>
+          {t('ux_editor.modal_properties_fetch_option_list_error_message')}
+        </ErrorMessage>
+      );
     case 'success':
       return (
         <OptionListSelectorWithData

diff --git a/...mponents/config/editModal/EditOptions/OptionTabs/EditOptionList/OptionListEditor.test.tsx b/...mponents/config/editModal/EditOptions/OptionTabs/EditOptionList/OptionListEditor.test.tsx
@@ -39,15 +39,15 @@ describe('OptionListEditor', () => {
     ).toBeInTheDocument();
   });
 
-  it('should render an error message when api throws an error', async () => {
+  it('should render an error message when getOptionLists throws an error', async () => {
     await renderOptionListEditorAndWaitForSpinnerToBeRemoved({
       queries: {
         getOptionLists: jest.fn().mockRejectedValueOnce(new Error('Error')),
       },
     });
 
     expect(
-      screen.getByText(textMock('ux_editor.modal_properties_error_message')),
+      screen.getByText(textMock('ux_editor.modal_properties_fetch_option_list_error_message')),
     ).toBeInTheDocument();
   });
 

diff --git a/...rc/components/config/editModal/EditOptions/OptionTabs/EditOptionList/OptionListEditor.tsx b/...rc/components/config/editModal/EditOptions/OptionTabs/EditOptionList/OptionListEditor.tsx
@@ -25,7 +25,7 @@ type OptionListEditorProps = {
 export function OptionListEditor({ optionsId }: OptionListEditorProps): React.ReactNode {
   const { t } = useTranslation();
   const { org, app } = useStudioEnvironmentParams();
-  const { data: optionsListMap, status } = useOptionListsQuery(org, app);
+  const { data: optionsLists, status } = useOptionListsQuery(org, app);
 
   switch (status) {
     case 'pending':
@@ -34,12 +34,12 @@ export function OptionListEditor({ optionsId }: OptionListEditorProps): React.Re
       );
     case 'error':
       return (
-        <StudioErrorMessage>{t('ux_editor.modal_properties_error_message')}</StudioErrorMessage>
+        <StudioErrorMessage>
+          {t('ux_editor.modal_properties_fetch_option_list_error_message')}
+        </StudioErrorMessage>
       );
     case 'success': {
-      return (
-        <OptionListEditorModal optionsList={optionsListMap[optionsId]} optionsId={optionsId} />
-      );
+      return <OptionListEditorModal optionsList={optionsLists[optionsId]} optionsId={optionsId} />;
     }
   }
 }