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 (