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:
+22
-1
@@ -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} />
|
||||
|
||||
Reference in New Issue
Block a user