diff --git a/frontend/libs/studio-components/src/components/StudioIconCard/StudioIconCard.module.css b/frontend/libs/studio-components/src/components/StudioIconCard/StudioIconCard.module.css
index b0d0a6a72a1..64d24fe4a6e 100644
--- 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
index d28a0d8d3ce..5364b8fd4fa 100644
--- 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
index 0d9be822f3a..4740063f601 100644
--- a/frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.tsx
+++ b/frontend/packages/ux-editor/src/components/TaskNavigation/TaskCard.tsx
@@ -6,6 +6,8 @@ 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;
@@ -13,28 +15,22 @@ type TaskCardProps = {
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 = (
- <>
- ) => {
- /* TODO: Implement editing mode */
- }}
- >
- {t('ux_editor.task_card.edit')}
-
- {
- /* TODO: Call delete on task */
- }}
- >
- {t('general.delete')}
-
- >
+
+ const contextButtons = layoutSetModel.type === 'subform' && (
+ {
+ deleteLayoutSet({ layoutSetIdToUpdate: layoutSetModel.id });
+ }}
+ >
+ {t('general.delete')}
+
);
return (