feat: enable deletion of layout sets for subforms

Adds a delete button for subforms on task cards. commit-id:e8b13a5a
Altinn · Mar 10, 2025 · e65d0ba · e65d0ba
1 parent 004d401
commit e65d0ba
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 21 deletions.
diff --git a/frontend/libs/studio-components/src/components/StudioIconCard/StudioIconCard.module.css b/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;

diff --git a/frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.test.tsx b/frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.test.tsx
@@ -8,11 +8,10 @@ import { renderWithProviders } from '../../testing/mocks';
 
 describe('taskCard', () => {
   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 +23,13 @@ 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();
+  });
 });
 
 const render = () => {

diff --git a/frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.tsx b/frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.tsx
@@ -6,35 +6,31 @@ 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='Er du sikker?'
+      onDelete={() => {
+        deleteLayoutSet({ layoutSetIdToUpdate: layoutSetModel.id });
+      }}
+    >
+      {t('general.delete')}
+    </StudioDeleteButton>
   );
 
   return (