Add delete widget action in fields widget side panel (#19167)

## Context
Add a new "Manage" section in FIELDS widget side panel with a "Delete
widget" action

Next step: Deleting a non-custom fields widget should be reversible
("Reset to default" followup)

<img width="1286" height="398" alt="Screenshot 2026-03-31 at 15 17 31"
src="https://github.com/user-attachments/assets/9ee63c14-52f1-470e-9112-4538271dc6fc"
/>
This commit is contained in:
Weiko
2026-04-02 09:15:19 +02:00
committed by GitHub
parent 1622c87b7a
commit 0b2f4cdb57
@@ -1,5 +1,6 @@
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle';
import { useDeletePageLayoutWidget } from '@/page-layout/hooks/useDeletePageLayoutWidget';
import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { SidePanelList } from '@/side-panel/components/SidePanelList';
@@ -14,7 +15,11 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { IconChevronDown, IconLayoutSidebarRight } from 'twenty-ui/display';
import {
IconChevronDown,
IconLayoutSidebarRight,
IconTrash,
} from 'twenty-ui/display';
import { type FieldsConfiguration } from '~/generated-metadata/graphql';
const StyledContainer = styled.div`
@@ -39,6 +44,8 @@ export const SidePanelPageLayoutFieldsSettings = () => {
const { updateCurrentWidgetConfig } =
useUpdateCurrentWidgetConfig(pageLayoutId);
const { deletePageLayoutWidget } = useDeletePageLayoutWidget(pageLayoutId);
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
const fieldsConfiguration = widgetInEditMode?.configuration as
@@ -75,6 +82,10 @@ export const SidePanelPageLayoutFieldsSettings = () => {
});
};
const handleDelete = () => {
deletePageLayoutWidget(widgetInEditMode.id);
};
const selectableItemIds = [
'layout',
'new-field-default-visibility',
@@ -124,6 +135,16 @@ export const SidePanelPageLayoutFieldsSettings = () => {
widgetId={widgetInEditMode.id}
/>
</SidePanelGroup>
<SidePanelGroup heading={t`Manage`}>
<SelectableListItem itemId="delete" onEnter={handleDelete}>
<CommandMenuItem
id="delete"
Icon={IconTrash}
label={t`Delete widget`}
onClick={handleDelete}
/>
</SelectableListItem>
</SidePanelGroup>
</SidePanelList>
</StyledSidePanelContainer>
<WidgetSettingsFooter pageLayoutId={pageLayoutId} />