feat: enable deletion of layout sets for subforms

Adds a delete button for subforms on task cards.
Removes the edit button dummy as it is not in use yet.

Padding added to iconContainer to keep spacing correct even without
context buttons. As StudioIcon has a css rule with padding on the first
element inside.

commit-id:e8b13a5a

frontend/libs/studio-components/src/components/StudioIconCard/StudioIconCard.module.css

@@ -43,6 +43,7 @@
 }
 
 .iconContainer {
+  padding: var(--fds-spacing-2);
   height: var(--fds-spacing-26);
   display: flex;
   align-items: center;

frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.test.tsx

@@ -3,16 +3,26 @@ import React from 'react';
 import type { LayoutSetModel } from 'app-shared/types/api/dto/LayoutSetModel';
 import userEvent from '@testing-library/user-event';
 import { screen } from '@testing-library/react';
-import { studioIconCardPopoverTrigger } from '@studio/testing/testids';
+import { app, org, studioIconCardPopoverTrigger } from '@studio/testing/testids';
 import { renderWithProviders } from '../../testing/mocks';
+import { queriesMock } from 'app-shared/mocks/queriesMock';
 
 describe('taskCard', () => {
+  let confirmSpy: jest.SpyInstance;
+  beforeAll(() => {
+    confirmSpy = jest.spyOn(window, 'confirm');
+    confirmSpy.mockImplementation(jest.fn(() => true));
+  });
+
+  afterAll(() => {
+    confirmSpy.mockRestore();
+  });
+
   it('should display popover when clicking ellipsis button', async () => {
-    render();
     const user = userEvent.setup();
+    render();
     await user.click(screen.getByTestId(studioIconCardPopoverTrigger));
     expect(screen.getByRole('button', { name: /general.delete/ })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /ux_editor.task_card.edit/ })).toBeInTheDocument();
   });
 
   it('should display datatype id', async () => {
@@ -24,6 +34,22 @@ describe('taskCard', () => {
     render();
     expect(screen.getByText(/ux_editor.subform/)).toBeInTheDocument();
   });
+
+  it('should show deletion button for subform', async () => {
+    const user = userEvent.setup();
+    render();
+    await user.click(screen.getByTestId(studioIconCardPopoverTrigger));
+    expect(screen.getByRole('button', { name: /general.delete/ })).toBeInTheDocument();
+  });
+
+  it('should call delete layout set mutation when clicking delete button', async () => {
+    const user = userEvent.setup();
+    render();
+    await user.click(screen.getByTestId(studioIconCardPopoverTrigger));
+    await user.click(screen.getByRole('button', { name: /general.delete/ }));
+    expect(queriesMock.deleteLayoutSet).toHaveBeenCalledTimes(1);
+    expect(queriesMock.deleteLayoutSet).toHaveBeenCalledWith(org, app, 'test');
+  });
 });
 
 const render = () => {

frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.tsx

@@ -1,40 +1,35 @@
-import React, { type MouseEvent } from 'react';
+import React from 'react';
 import type { LayoutSetModel } from 'app-shared/types/api/dto/LayoutSetModel';
 import { StudioIconCard } from '@studio/components/src/components/StudioIconCard/StudioIconCard';
-import { PencilIcon } from '@studio/icons';
 import { getLayoutSetTypeTranslationKey } from 'app-shared/utils/layoutSetsUtils';
 import { useTranslation } from 'react-i18next';
 import { StudioButton, StudioDeleteButton, StudioParagraph } from '@studio/components';
 import { useLayoutSetIcon } from '../../hooks/useLayoutSetIcon';
+import { useDeleteLayoutSetMutation } from 'app-development/hooks/mutations/useDeleteLayoutSetMutation';
+import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 
 type TaskCardProps = {
   layoutSetModel: LayoutSetModel;
 };
 
 export const TaskCard = ({ layoutSetModel }: TaskCardProps) => {
   const { t } = useTranslation();
+  const { org, app } = useStudioEnvironmentParams();
+  const { mutate: deleteLayoutSet } = useDeleteLayoutSetMutation(org, app);
 
   const taskName = getLayoutSetTypeTranslationKey(layoutSetModel);
   const taskIcon = useLayoutSetIcon(layoutSetModel);
-  const contextButtons = (
-    <>
-      <StudioButton
-        variant='tertiary'
-        onClick={(event: MouseEvent<HTMLButtonElement>) => {
-          /* TODO: Implement editing mode */
-        }}
-      >
-        <PencilIcon /> {t('ux_editor.task_card.edit')}
-      </StudioButton>
-      <StudioDeleteButton
-        variant='tertiary'
-        onDelete={() => {
-          /* TODO: Call delete on task */
-        }}
-      >
-        {t('general.delete')}
-      </StudioDeleteButton>
-    </>
+
+  const contextButtons = layoutSetModel.type === 'subform' && (
+    <StudioDeleteButton
+      variant='tertiary'
+      confirmMessage={t('ux_editor.delete.subform.confirm')}
+      onDelete={() => {
+        deleteLayoutSet({ layoutSetIdToUpdate: layoutSetModel.id });
+      }}
+    >
+      {t('general.delete')}
+    </StudioDeleteButton>
   );
 
   return (