fix: 14718 add confirm when deleting codelist (#14727)

Co-authored-by: Tomas Engebretsen <[email protected]>
Altinn · Feb 24, 2025 · c66f25b · c66f25b
1 parent ae7e0c0
commit c66f25b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 1 deletion.
diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
@@ -17,6 +17,7 @@
   "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_confirm": "Er du sikker på at du vil slette kodelisten {{codeListTitle}}? Alt innholdet i kodelisten vil bli fjernet.",
   "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_disabled_title": "Redigering er ikke tilgjengelig når kodelisten er tatt i bruk.",

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
@@ -244,8 +244,10 @@ describe('CodeLists', () => {
     expect(errorMessage).toBeInTheDocument();
   });
 
-  it('calls onDeleteCodeList when clicking delete button', async () => {
+  it('calls onDeleteCodeList when the user clicks the delete button and confirms', async () => {
     const user = userEvent.setup();
+    jest.spyOn(window, 'confirm').mockImplementation(() => true);
+
     renderCodeLists();
     const deleteCodeListButton = screen.getByRole('button', {
       name: textMock('app_content_library.code_lists.code_list_delete'),
@@ -257,6 +259,21 @@ describe('CodeLists', () => {
     expect(onDeleteCodeListMock).toHaveBeenCalledTimes(1);
     expect(onDeleteCodeListMock).toHaveBeenLastCalledWith(codeListName);
   });
+
+  it('does not call onDeleteCodeList when it is not confirmed', async () => {
+    const user = userEvent.setup();
+    jest.spyOn(window, 'confirm').mockImplementation(() => false);
+
+    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(0);
+  });
 });
 
 const changeCodeListId = async (user: UserEvent, oldCodeListId: string, newCodeListId: string) => {

diff --git a/...src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/EditCodeList/EditCodeList.tsx b/...src/ContentLibrary/LibraryBody/pages/CodeListPage/CodeLists/EditCodeList/EditCodeList.tsx
@@ -75,6 +75,7 @@ export function EditCodeList({
         codeListHasUsages={codeListHasUsages}
         codeListSources={codeListSources}
         onDeleteCodeList={handleDeleteCodeList}
+        codeListTitle={codeListTitle}
       />
     </div>
   );
@@ -138,12 +139,14 @@ type CodeListButtonsProps = {
   codeListHasUsages: boolean;
   codeListSources: CodeListIdSource[];
   onDeleteCodeList: (codeListId: string) => void;
+  codeListTitle: string;
 };
 
 function CodeListButtons({
   codeListHasUsages,
   codeListSources,
   onDeleteCodeList,
+  codeListTitle,
 }: CodeListButtonsProps): React.ReactElement {
   const { t } = useTranslation();
   const deleteButtonTitle = codeListHasUsages
@@ -156,6 +159,9 @@ function CodeListButtons({
         onDelete={onDeleteCodeList}
         title={deleteButtonTitle}
         disabled={codeListHasUsages}
+        confirmMessage={t('app_content_library.code_lists.code_list_delete_confirm', {
+          codeListTitle,
+        })}
       >
         {t('app_content_library.code_lists.code_list_delete')}
       </StudioDeleteButton>