fix: error message when code list has invalid format (#14436)

Altinn · Jan 22, 2025 · 4f62d96 · 4f62d96
1 parent 0e08fcb
commit 4f62d96
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -35,7 +35,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 kodelisten fra appen.",
+  "app_content_library.code_lists.format_error": "Kan ikke laste inn kodelisten. Pass på at at alle elementene i kodelisten har både <bold>value</bold> og <bold>label</bold>, og at det ikke er noen ekstra kommaer.",
   "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/...nt-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx b/...nt-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx
@@ -238,9 +238,9 @@ describe('CodeLists', () => {
     expect(onUpdateCodeListIdMock).not.toHaveBeenCalled();
   });
 
-  it('renders error message if option list has error', () => {
+  it('renders error message if option list has format error', () => {
     renderCodeLists({ codeListsData: [{ ...codeListsDataMock[0], hasError: true, data: null }] });
-    const errorMessage = screen.getByText(textMock('app_content_library.code_lists.fetch_error'));
+    const errorMessage = screen.getByText(textMock('app_content_library.code_lists.format_error'));
     expect(errorMessage).toBeInTheDocument();
   });
 

diff --git a/...content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx b/...content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.tsx
@@ -3,7 +3,7 @@ import type { CodeListData, CodeListWithMetadata } from '../CodeListPage';
 import { Accordion } from '@digdir/designsystemet-react';
 import { StudioAlert } from '@studio/components';
 import { EditCodeList } from './EditCodeList/EditCodeList';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import type { CodeListIdSource, CodeListReference } from '../types/CodeListReference';
 import classes from './CodeLists.module.css';
 import { getCodeListSourcesById, getCodeListUsageCount } from '../utils/codeListPageUtils';
@@ -114,14 +114,10 @@ function CodeListAccordionContent({
   codeListSources,
   ...rest
 }: CodeListAccordionContentProps): React.ReactElement {
-  const { t } = useTranslation();
-
   return (
     <Accordion.Content>
       {codeListData.hasError ? (
-        <StudioAlert size='small' severity='danger'>
-          {t('app_content_library.code_lists.fetch_error')}
-        </StudioAlert>
+        <InvalidCodeListAlert />
       ) : (
         <EditCodeList
           codeList={codeListData.data}
@@ -133,3 +129,16 @@ function CodeListAccordionContent({
     </Accordion.Content>
   );
 }
+
+function InvalidCodeListAlert(): React.ReactElement {
+  return (
+    <StudioAlert size='small' severity='danger'>
+      <span>
+        <Trans
+          i18nKey='app_content_library.code_lists.format_error'
+          components={{ bold: <strong /> }}
+        />
+      </span>
+    </StudioAlert>
+  );
+}