Merge branch 'main' into chore/access-packages-release

frontend/app-development/features/appContentLibrary/AppContentLibrary.tsx

@@ -14,6 +14,7 @@ import {
   useAddOptionListMutation,
   useUpdateOptionListMutation,
   useUpdateOptionListIdMutation,
+  useDeleteOptionListMutation,
 } from 'app-shared/hooks/mutations';
 import { mapToCodeListsUsage } from './utils/mapToCodeListsUsage';
 
@@ -24,6 +25,7 @@ export function AppContentLibrary(): React.ReactElement {
     org,
     app,
   );
+  const { mutate: deleteOptionList } = useDeleteOptionListMutation(org, app);
   const { mutate: uploadOptionList } = useAddOptionListMutation(org, app, {
     hideDefaultError: (error: AxiosError<ApiError>) => isErrorUnknown(error),
   });
@@ -65,6 +67,7 @@ export function AppContentLibrary(): React.ReactElement {
       codeList: {
         props: {
           codeListsData,
+          onDeleteCodeList: deleteOptionList,
           onUpdateCodeListId: handleUpdateCodeListId,
           onUpdateCodeList: handleUpdate,
           onUploadCodeList: handleUpload,

frontend/app-development/features/overview/components/News/NewsContent/news.nb.json

@@ -1,6 +1,11 @@
 {
   "$schema": "news.schema.json",
   "news": [
+    {
+      "date": "2025-01-17",
+      "title": "Nå kan du ha flere datamodeller i et prosess-steg!",
+      "content": "Du kan nå koble komponenter i et prosess-steg til andre datamodeller, ikke bare til den overordnede datamodellen for steget. Dette gir deg nye muligheter til å håndtere data i appene dine."
+    },
     {
       "date": "2024-11-29",
       "title": "Prøv nytt design på Utforming!",

frontend/language/src/nb.json

@@ -12,9 +12,13 @@
   "api_errors.ResourceNotFound": "Studio prøver å finne en fil som ikke finnes.",
   "api_errors.Unauthorized": "Handlingen du prøver å utføre krever rettigheter du ikke har. Du blir nå logget ut.",
   "api_errors.UploadedImageNotValid": "Det opplastede bildet er ikke en gyldig filtype",
+  "app_content_library.code_lists.clear_search_button_label": "Fjern søkeord",
   "app_content_library.code_lists.code_list_accordion_title": "Kodelistenavn: {{codeListTitle}}",
   "app_content_library.code_lists.code_list_accordion_usage_sub_title_plural": "Kodelisten brukes i {{codeListUsagesCount}} komponenter.",
   "app_content_library.code_lists.code_list_accordion_usage_sub_title_single": "Kodelisten brukes i {{codeListUsagesCount}} komponent.",
+  "app_content_library.code_lists.code_list_delete": "Slett kodeliste",
+  "app_content_library.code_lists.code_list_delete_disabled_title": "Før du kan å slette kodelisten, må du fjerne den fra der den er brukt i appen.",
+  "app_content_library.code_lists.code_list_delete_enabled_title": "Slett kodelisten fra biblioteket.",
   "app_content_library.code_lists.code_list_edit_id_label": "Navn på kodeliste",
   "app_content_library.code_lists.code_list_edit_id_title": "Rediger navn på kodelisten {{codeListName}}",
   "app_content_library.code_lists.code_list_show_usage": "Se hvor kodelisten er tatt i bruk",
@@ -1355,7 +1359,6 @@
   "ux_editor.component_properties.hiddenRow": "Angi hvilke rader som skal skjules",
   "ux_editor.component_properties.hideBottomBorder": "Skjul skillelinjen under komponenten",
   "ux_editor.component_properties.hideChangeButton": "Skjul Endre-knapp",
-  "ux_editor.component_properties.hideEmptyFields": "Skjul tomme felter",
   "ux_editor.component_properties.hideValidationMessages": "Skjul valideringsmeldinger",
   "ux_editor.component_properties.icon": "Ikon",
   "ux_editor.component_properties.id": "ID",
@@ -1388,13 +1391,6 @@
   "ux_editor.component_properties.optionalIndicator": "Vis valgfri-indikator på ledetekst",
   "ux_editor.component_properties.options": "Alternativer",
   "ux_editor.component_properties.optionsId": "Kodeliste",
-  "ux_editor.component_properties.overrides": "Overstyringer",
-  "ux_editor.component_properties.overrides_description": "Overstyringer per komponent for oppsummeringen",
-  "ux_editor.component_properties.overrides_is_compact": "Kompakt visning",
-  "ux_editor.component_properties.overrides_list": "Liste",
-  "ux_editor.component_properties.overrides_not_set": "Ikke satt",
-  "ux_editor.component_properties.overrides_string": "Tekst",
-  "ux_editor.component_properties.overrides_type": "Vis type",
   "ux_editor.component_properties.pageBreak": "PDF-innstillinger (pageBreak)",
   "ux_editor.component_properties.pageRef": "Navnet til siden det gjelder (pageRef)",
   "ux_editor.component_properties.pagination": "Sidenummerering",
@@ -1462,12 +1458,18 @@
   "ux_editor.component_properties.subform.no_existing_layout_set_instructions_header": "Slik gjør du:",
   "ux_editor.component_properties.subform.selected_layout_set_label": "Underskjema",
   "ux_editor.component_properties.subform.selected_layout_set_title": "Valgt underskjemakobling er {{subform}}",
-  "ux_editor.component_properties.summary.add_override": "Legg til overstyring",
-  "ux_editor.component_properties.summary.override.component_id": "ID på komponenten",
-  "ux_editor.component_properties.summary.override.empty_field_text": "Tekst for tomme felter",
-  "ux_editor.component_properties.summary.override.force_show": "Vis alltid feltet",
+  "ux_editor.component_properties.summary.add_override": "Lag en ny overstyring",
+  "ux_editor.component_properties.summary.override.choose_component": "Velg komponent",
+  "ux_editor.component_properties.summary.override.description": "Overstyringer per komponent for oppsummeringen",
+  "ux_editor.component_properties.summary.override.display_type": "Visningstype",
+  "ux_editor.component_properties.summary.override.display_type.list": "Liste",
+  "ux_editor.component_properties.summary.override.display_type.not_set": "Ikke satt",
+  "ux_editor.component_properties.summary.override.display_type.string": "Tekst",
+  "ux_editor.component_properties.summary.override.empty_field_text": "Tekst du vil vise i tomme felt",
   "ux_editor.component_properties.summary.override.hidden": "Skjul feltet",
   "ux_editor.component_properties.summary.override.hide_empty_fields": "Skjul tomme felter",
+  "ux_editor.component_properties.summary.override.show_component": "Vis komponenten",
+  "ux_editor.component_properties.summary.overrides": "Overstyringer",
   "ux_editor.component_properties.summaryDelimiter": "Skillelinje for sammendragsvisningsceller",
   "ux_editor.component_properties.tableColumns": "Innstillinger for kolonner",
   "ux_editor.component_properties.tableHeaders": "Felter som skal vises i tabellens overskrift",

frontend/libs/studio-content-library/mocks/mockPagesConfig.ts

@@ -12,6 +12,7 @@ export const mockPagesConfig: PagesConfig = {
   codeList: {
     props: {
       codeListsData: codeListsDataMock,
+      onDeleteCodeList: () => {},
       onUpdateCodeListId: () => {},
       onUpdateCodeList: () => {},
       onUploadCodeList: () => {},

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.test.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import type { CodeListPageProps } from './CodeListPage';
+import type { CodeListData, CodeListPageProps } from './CodeListPage';
 import { CodeListPage } from './CodeListPage';
 import userEvent from '@testing-library/user-event';
 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';
 
+const onDeleteCodeListMock = jest.fn();
 const onUpdateCodeListIdMock = jest.fn();
 const onUpdateCodeListMock = jest.fn();
 const onUploadCodeListMock = jest.fn();
@@ -59,14 +60,43 @@ describe('CodeListPage', () => {
 
   it('renders the code list accordion', () => {
     renderCodeListPage();
-    const codeListAccordion = screen.getByTitle(
-      textMock('app_content_library.code_lists.code_list_accordion_title', {
-        codeListTitle: codeListName,
-      }),
-    );
+    const codeListAccordion = getCodeListAccordion(codeListName);
     expect(codeListAccordion).toBeInTheDocument();
   });
 
+  it('renders all code lists when search param matches all lists', async () => {
+    const user = userEvent.setup();
+    const codeList2 = 'codeList2';
+    const codeListsSearchParam = 'code';
+    renderCodeListPage({
+      codeListsData: [...codeListsDataMock, { title: codeList2, data: codeListMock }],
+    });
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, codeListsSearchParam);
+    [codeListName, codeList2].forEach((codeListTitle) => {
+      expect(getCodeListAccordion(codeListTitle)).toBeInTheDocument();
+    });
+  });
+
+  it('renders the matching code lists when search param limits result', async () => {
+    const user = userEvent.setup();
+    const codeList2 = 'codeList2';
+    const codeListsSearchParam = '2';
+    renderCodeListPage({
+      codeListsData: [...codeListsDataMock, { title: codeList2, data: codeListMock }],
+    });
+    const searchInput = screen.getByRole('searchbox');
+    await user.type(searchInput, codeListsSearchParam);
+    expect(getCodeListAccordion(codeList2)).toBeInTheDocument();
+    expect(
+      screen.queryByTitle(
+        textMock('app_content_library.code_lists.code_list_accordion_title', {
+          codeListTitle: codeListName,
+        }),
+      ),
+    ).not.toBeInTheDocument();
+  });
+
   it('render the code list accordion as default open when uploading a code list', async () => {
     const user = userEvent.setup();
     const { rerender } = renderCodeListPage();
@@ -80,11 +110,13 @@ describe('CodeListPage', () => {
       title: uploadedCodeListName,
       data: codeListMock,
     });
-    rerender(<CodeListPage {...defaultCodeListPageProps} />);
+    const newCodeListsData: CodeListData[] = [...defaultCodeListPageProps.codeListsData];
+    rerender(<CodeListPage {...defaultCodeListPageProps} codeListsData={newCodeListsData} />);
     const codeListAccordionOpen = screen.getByRole('button', {
       name: uploadedCodeListName,
       expanded: true,
     });
+    expect(codeListAccordionClosed).toHaveAttribute('aria-expanded', 'false');
     expect(codeListAccordionOpen).toHaveAttribute('aria-expanded', 'true');
   });
 
@@ -149,8 +181,17 @@ const uploadCodeList = async (user: UserEvent, fileName: string = uploadedCodeLi
   await user.upload(fileUploaderButton, file);
 };
 
+const getCodeListAccordion = (codeListTitle: string) => {
+  return screen.getByTitle(
+    textMock('app_content_library.code_lists.code_list_accordion_title', {
+      codeListTitle,
+    }),
+  );
+};
+
 const defaultCodeListPageProps: CodeListPageProps = {
   codeListsData: codeListsDataMock,
+  onDeleteCodeList: onDeleteCodeListMock,
   onUpdateCodeListId: onUpdateCodeListIdMock,
   onUpdateCodeList: onUpdateCodeListMock,
   onUploadCodeList: onUploadCodeListMock,

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeListPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { StudioHeading } from '@studio/components';
 import type { CodeList } from '@studio/components';
 import { useTranslation } from 'react-i18next';
@@ -8,6 +8,7 @@ import { CodeListsCounterMessage } from './CodeListsCounterMessage';
 import classes from './CodeListPage.module.css';
 import { ArrayUtils, FileNameUtils } from '@studio/pure-functions';
 import type { CodeListReference } from './types/CodeListReference';
+import { filterCodeLists } from './utils/codeListPageUtils';
 
 export type CodeListWithMetadata = {
   codeList: CodeList;
@@ -22,6 +23,7 @@ export type CodeListData = {
 
 export type CodeListPageProps = {
   codeListsData: CodeListData[];
+  onDeleteCodeList: (codeListId: string) => void;
   onUpdateCodeListId: (codeListId: string, newCodeListId: string) => void;
   onUpdateCodeList: (updatedCodeList: CodeListWithMetadata) => void;
   onUploadCodeList: (uploadedCodeList: File) => void;
@@ -30,14 +32,21 @@ export type CodeListPageProps = {
 
 export function CodeListPage({
   codeListsData,
+  onDeleteCodeList,
   onUpdateCodeListId,
   onUpdateCodeList,
   onUploadCodeList,
   codeListsUsages,
 }: CodeListPageProps): React.ReactElement {
   const { t } = useTranslation();
+  const [searchString, setSearchString] = useState<string>('');
   const [codeListInEditMode, setCodeListInEditMode] = useState<string>(undefined);
 
+  const filteredCodeLists: CodeListData[] = useMemo(
+    () => filterCodeLists(codeListsData, searchString),
+    [codeListsData, searchString],
+  );
+
   const codeListTitles = ArrayUtils.mapByKey<CodeListData, 'title'>(codeListsData, 'title');
 
   const handleUploadCodeList = (uploadedCodeList: File) => {
@@ -58,9 +67,11 @@ export function CodeListPage({
         onUploadCodeList={handleUploadCodeList}
         onUpdateCodeList={onUpdateCodeList}
         codeListNames={codeListTitles}
+        onSetSearchString={setSearchString}
       />
       <CodeLists
-        codeListsData={codeListsData}
+        codeListsData={filteredCodeLists}
+        onDeleteCodeList={onDeleteCodeList}
         onUpdateCodeListId={handleUpdateCodeListId}
         onUpdateCodeList={onUpdateCodeList}
         codeListInEditMode={codeListInEditMode}

frontend/libs/studio-content-library/src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/CodeLists.test.tsx

@@ -12,6 +12,7 @@ import type { CodeList as StudioComponentsCodeList } from '@studio/components';
 import { codeListsDataMock } from '../../../../../../mocks/mockPagesConfig';
 
 const codeListName = codeListsDataMock[0].title;
+const onDeleteCodeListMock = jest.fn();
 const onUpdateCodeListIdMock = jest.fn();
 const onUpdateCodeListMock = jest.fn();
 
@@ -137,6 +138,26 @@ describe('CodeLists', () => {
     expect(codeListUsagesModalTitle).toBeInTheDocument();
   });
 
+  it('renders button to delete code list as disabled when code list is used', async () => {
+    renderCodeLists({
+      codeListsUsages: [
+        {
+          codeListId: codeListName,
+          codeListIdSources: [
+            { layoutSetId: 'layoutSetId', layoutName: 'layoutName', componentIds: ['componentId'] },
+          ],
+        },
+      ],
+    });
+    const deleteCodeListButton = screen.getByRole('button', {
+      name: textMock('app_content_library.code_lists.code_list_delete'),
+    });
+    expect(deleteCodeListButton).toBeDisabled();
+    expect(deleteCodeListButton.title).toBe(
+      textMock('app_content_library.code_lists.code_list_delete_disabled_title'),
+    );
+  });
+
   it('renders the code list editor', () => {
     renderCodeLists();
     const codeListEditor = screen.getByText(textMock('code_list_editor.legend'));
@@ -206,6 +227,20 @@ describe('CodeLists', () => {
     const errorMessage = screen.getByText(textMock('app_content_library.code_lists.fetch_error'));
     expect(errorMessage).toBeInTheDocument();
   });
+
+  it('calls onDeleteCodeList when clicking delete button', async () => {
+    const user = userEvent.setup();
+    renderCodeLists();
+    const deleteCodeListButton = screen.getByRole('button', {
+      name: textMock('app_content_library.code_lists.code_list_delete'),
+    });
+    expect(deleteCodeListButton.title).toBe(
+      textMock('app_content_library.code_lists.code_list_delete_enabled_title'),
+    );
+    await user.click(deleteCodeListButton);
+    expect(onDeleteCodeListMock).toHaveBeenCalledTimes(1);
+    expect(onDeleteCodeListMock).toHaveBeenLastCalledWith(codeListName);
+  });
 });
 
 const changeCodeListId = async (user: UserEvent, oldCodeListId: string, newCodeListId: string) => {
@@ -227,6 +262,7 @@ const changeCodeListId = async (user: UserEvent, oldCodeListId: string, newCodeL
 
 const defaultProps: CodeListsProps = {
   codeListsData: codeListsDataMock,
+  onDeleteCodeList: onDeleteCodeListMock,
   onUpdateCodeListId: onUpdateCodeListIdMock,
   onUpdateCodeList: onUpdateCodeListMock,
   codeListInEditMode: undefined,