diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts b/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts index bac81cdd3f..4c814641b5 100644 --- a/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts +++ b/packages/twenty-front/src/modules/page-layout/hooks/useCreateRecordPageFieldWidget.ts @@ -52,11 +52,15 @@ export const useCreateRecordPageFieldWidget = () => { }), ); - const availableRelationField = boxedRelationFieldMetadataItems.find( + const unusedRelationField = boxedRelationFieldMetadataItems.find( (field) => !usedFieldMetadataIds.has(field.id), ); - const fieldMetadataId = availableRelationField?.id ?? ''; + const selectedField = + unusedRelationField ?? boxedRelationFieldMetadataItems[0]; + + const fieldMetadataId = selectedField?.id ?? ''; + const title = selectedField?.label ?? ''; const positionIndex = existingWidgets.length; const widgetId = uuidv4(); @@ -64,6 +68,7 @@ export const useCreateRecordPageFieldWidget = () => { const newWidget = createDefaultFieldWidget({ id: widgetId, pageLayoutTabId: tabId, + title, fieldMetadataId, objectMetadataId: objectMetadataItem.id, positionIndex, diff --git a/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts b/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts index 779326c0bc..3026beb0d3 100644 --- a/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts +++ b/packages/twenty-front/src/modules/page-layout/hooks/useEditPageLayoutWidget.ts @@ -66,6 +66,16 @@ export const useEditPageLayoutWidget = (pageLayoutIdFromProps?: string) => { return; } + if (widgetType === WidgetType.FIELD) { + navigatePageLayoutSidePanel({ + sidePanelPage: SidePanelPages.PageLayoutFieldSettings, + pageTitle: t`Field widget`, + resetNavigationStack: true, + }); + setPageLayoutEditingWidgetId(widgetId); + return; + } + if (widgetType === WidgetType.RECORD_TABLE) { navigatePageLayoutSidePanel({ sidePanelPage: SidePanelPages.PageLayoutRecordTableSettings, diff --git a/packages/twenty-front/src/modules/page-layout/utils/createDefaultFieldWidget.ts b/packages/twenty-front/src/modules/page-layout/utils/createDefaultFieldWidget.ts index ee2f5e1d8e..78e6e1eb2f 100644 --- a/packages/twenty-front/src/modules/page-layout/utils/createDefaultFieldWidget.ts +++ b/packages/twenty-front/src/modules/page-layout/utils/createDefaultFieldWidget.ts @@ -9,12 +9,14 @@ import { export const createDefaultFieldWidget = ({ id, pageLayoutTabId, + title, fieldMetadataId, objectMetadataId, positionIndex, }: { id: string; pageLayoutTabId: string; + title: string; fieldMetadataId: string; objectMetadataId: string; positionIndex: number; @@ -23,7 +25,7 @@ export const createDefaultFieldWidget = ({ __typename: 'PageLayoutWidget', id, pageLayoutTabId, - title: '', + title, type: WidgetType.FIELD, configuration: { __typename: 'FieldConfiguration', diff --git a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx index 1ba140e849..7f82ed8d70 100644 --- a/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx +++ b/packages/twenty-front/src/modules/page-layout/widgets/components/WidgetRenderer.tsx @@ -106,7 +106,8 @@ export const WidgetRenderer = ({ widget }: WidgetRendererProps) => { isPageLayoutInEditMode && (!isRecordPageLayout || (isRecordPageLayout && isRecordPageGlobalEditionEnabled) || - widget.type === WidgetType.FIELDS); + widget.type === WidgetType.FIELDS || + widget.type === WidgetType.FIELD); // TODO: when we have more widgets without headers, we should use a more generic approach to hide the header // each widget type could have metadata (e.g., hasHeader: boolean or headerMode: 'always' | 'editOnly' | 'never') diff --git a/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx index 02d707c18c..674e5a3566 100644 --- a/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx +++ b/packages/twenty-front/src/modules/side-panel/components/SidePanelPageInfo.tsx @@ -5,9 +5,8 @@ import { OverflowingTextWithTooltip, } from 'twenty-ui/display'; -import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types'; -import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; import { selectedNavigationMenuItemIdInEditModeState } from '@/navigation-menu-item/common/states/selectedNavigationMenuItemIdInEditModeState'; +import { useNavigationMenuItemSectionItems } from '@/navigation-menu-item/display/hooks/useNavigationMenuItemSectionItems'; import { SidePanelAskAIInfo } from '@/side-panel/components/SidePanelAskAIInfo'; import { SidePanelFolderInfo } from '@/side-panel/components/SidePanelFolderInfo'; import { SidePanelLinkInfo } from '@/side-panel/components/SidePanelLinkInfo'; @@ -18,6 +17,7 @@ import { SidePanelPageLayoutInfo } from '@/side-panel/components/SidePanelPageLa import { SidePanelRecordInfo } from '@/side-panel/components/SidePanelRecordInfo'; import { SidePanelWorkflowStepInfo } from '@/side-panel/components/SidePanelWorkflowStepInfo'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; +import { NavigationMenuItemType, SidePanelPages } from 'twenty-shared/types'; import { type SidePanelContextChipProps } from '@/side-panel/components/SidePanelContextChip'; import { useContext } from 'react'; @@ -101,6 +101,7 @@ export const SidePanelPageInfo = ({ pageChip }: SidePanelPageInfoProps) => { SidePanelPages.PageLayoutIframeSettings, SidePanelPages.PageLayoutTabSettings, SidePanelPages.PageLayoutFieldsSettings, + SidePanelPages.PageLayoutFieldSettings, SidePanelPages.PageLayoutRecordTableSettings, ].includes(pageChip.page?.page) : false; diff --git a/packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts b/packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts index cc7a2bc58e..da1d0e8985 100644 --- a/packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts +++ b/packages/twenty-front/src/modules/side-panel/components/hooks/usePageLayoutHeaderInfo.ts @@ -175,6 +175,36 @@ export const usePageLayoutHeaderInfo = ({ }; } + case SidePanelPages.PageLayoutFieldSettings: { + if (!isDefined(pageLayoutEditingWidgetId)) { + return null; + } + + const widgetInEditMode = draftPageLayout.tabs + .flatMap((tab) => tab.widgets) + .find((widget) => widget.id === pageLayoutEditingWidgetId); + + if (!isDefined(widgetInEditMode)) { + return null; + } + + const title = isDefined(editedTitle) + ? editedTitle + : isDefined(widgetInEditMode.title) && widgetInEditMode.title !== '' + ? widgetInEditMode.title + : ''; + + return { + headerIcon: IconList, + headerIconColor: iconColor, + headerType: t`Field Widget`, + title, + isReadonly: false, + tab: undefined, + widgetInEditMode, + }; + } + case SidePanelPages.PageLayoutRecordTableSettings: { if (!isDefined(pageLayoutEditingWidgetId)) { return null; diff --git a/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx b/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx index 362935f404..63c6487110 100644 --- a/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx +++ b/packages/twenty-front/src/modules/side-panel/constants/SidePanelPagesConfig.tsx @@ -1,16 +1,17 @@ -import { SidePanelCommandMenuItemEditPage } from '@/command-menu-item/server-items/edit/components/SidePanelCommandMenuItemEditPage'; import { SidePanelCommandMenuItemDisplayPage } from '@/command-menu-item/server-items/display/components/SidePanelCommandMenuItemDisplayPage'; +import { SidePanelCommandMenuItemEditPage } from '@/command-menu-item/server-items/edit/components/SidePanelCommandMenuItemEditPage'; +import { SidePanelNavigationMenuItemEditPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage'; +import { SidePanelNewSidebarItemPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemPage'; import { SidePanelAIChatThreadsPage } from '@/side-panel/pages/ai-chat-threads/components/SidePanelAIChatThreadsPage'; import { SidePanelAskAIPage } from '@/side-panel/pages/ask-ai/components/SidePanelAskAIPage'; import { SidePanelCalendarEventPage } from '@/side-panel/pages/calendar-event/components/SidePanelCalendarEventPage'; import { SidePanelFrontComponentPage } from '@/side-panel/pages/front-component/components/SidePanelFrontComponentPage'; import { SidePanelMessageThreadPage } from '@/side-panel/pages/message-thread/components/SidePanelMessageThreadPage'; -import { SidePanelNavigationMenuItemEditPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNavigationMenuItemEditPage'; -import { SidePanelNewSidebarItemPage } from '@/navigation-menu-item/edit/side-panel/components/SidePanelNewSidebarItemPage'; import { SidePanelPageLayoutChartSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutChartSettings'; +import { SidePanelPageLayoutFieldSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldSettings'; import { SidePanelPageLayoutFieldsSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings'; -import { SidePanelPageLayoutRecordTableSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutRecordTableSettings'; import { SidePanelPageLayoutIframeSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutIframeSettings'; +import { SidePanelPageLayoutRecordTableSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutRecordTableSettings'; import { SidePanelPageLayoutTabSettings } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutTabSettings'; import { SidePanelPageLayoutWidgetTypeSelect } from '@/side-panel/pages/page-layout/components/SidePanelPageLayoutWidgetTypeSelect'; import { SidePanelMergeRecordPage } from '@/side-panel/pages/record-page/components/SidePanelMergeRecordPage'; @@ -82,6 +83,10 @@ export const SIDE_PANEL_PAGES_CONFIG = new Map( SidePanelPages.PageLayoutFieldsSettings, , ], + [ + SidePanelPages.PageLayoutFieldSettings, + , + ], [ SidePanelPages.PageLayoutRecordTableSettings, , diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldSettings.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldSettings.tsx new file mode 100644 index 0000000000..399166ea06 --- /dev/null +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldSettings.tsx @@ -0,0 +1,110 @@ +import { CommandMenuItemDropdown } from '@/command-menu/components/CommandMenuItemDropdown'; +import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById'; +import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup'; +import { SidePanelList } from '@/side-panel/components/SidePanelList'; +import { FieldWidgetFieldDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetFieldDropdownContent'; +import { FieldWidgetLayoutDropdownContent } from '@/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetLayoutDropdownContent'; +import { WidgetSettingsFooter } from '@/side-panel/pages/page-layout/components/WidgetSettingsFooter'; +import { usePageLayoutIdFromContextStore } from '@/side-panel/pages/page-layout/hooks/usePageLayoutIdFromContextStore'; +import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode'; +import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; +import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; +import { styled } from '@linaria/react'; +import { useLingui } from '@lingui/react/macro'; +import { isDefined } from 'twenty-shared/utils'; +import { IconLayoutSidebarRight, IconListDetails } from 'twenty-ui/display'; +import { + FieldDisplayMode, + type FieldConfiguration, +} from '~/generated-metadata/graphql'; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + height: 100%; +`; + +const StyledSidePanelContainer = styled.div` + display: flex; + flex: 1; + flex-direction: column; + overflow: hidden; +`; + +export const SidePanelPageLayoutFieldSettings = () => { + const { t } = useLingui(); + const { pageLayoutId } = usePageLayoutIdFromContextStore(); + + const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); + + const fieldConfiguration = widgetInEditMode?.configuration as + | FieldConfiguration + | undefined; + + const currentFieldMetadataId = fieldConfiguration?.fieldMetadataId; + const currentDisplayMode = fieldConfiguration?.fieldDisplayMode; + + const { fieldMetadataItem: currentFieldMetadataItem } = + useFieldMetadataItemById(currentFieldMetadataId ?? ''); + + if (!isDefined(widgetInEditMode)) { + return null; + } + + const fieldLabel = currentFieldMetadataItem?.label ?? ''; + + const displayModeLabels: Record = { + [FieldDisplayMode.FIELD]: t`Field`, + [FieldDisplayMode.CARD]: t`Card`, + }; + + const layoutLabel = isDefined(currentDisplayMode) + ? (displayModeLabels[currentDisplayMode] ?? '') + : ''; + + const selectableItemIds = ['field', 'layout']; + + return ( + + + + + + + + + } + dropdownPlacement="bottom-end" + description={fieldLabel} + contextualTextPosition="right" + /> + + + + + + } + dropdownPlacement="bottom-end" + description={layoutLabel} + contextualTextPosition="right" + /> + + + + + + + ); +}; diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetFieldDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetFieldDropdownContent.tsx new file mode 100644 index 0000000000..24f9f4f421 --- /dev/null +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetFieldDropdownContent.tsx @@ -0,0 +1,132 @@ +import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById'; +import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems'; +import { useUpdatePageLayoutWidget } from '@/page-layout/hooks/useUpdatePageLayoutWidget'; +import { usePageLayoutIdFromContextStore } from '@/side-panel/pages/page-layout/hooks/usePageLayoutIdFromContextStore'; +import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; +import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; +import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; +import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; +import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; +import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; +import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; +import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; +import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; +import { t } from '@lingui/core/macro'; +import { useState } from 'react'; +import { useIcons } from 'twenty-ui/display'; +import { MenuItemSelect } from 'twenty-ui/navigation'; +import { type FieldConfiguration } from '~/generated-metadata/graphql'; +import { filterBySearchQuery } from '~/utils/filterBySearchQuery'; + +export const FieldWidgetFieldDropdownContent = () => { + const [searchQuery, setSearchQuery] = useState(''); + + const { pageLayoutId, objectNameSingular } = + usePageLayoutIdFromContextStore(); + + const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); + + const fieldConfiguration = widgetInEditMode?.configuration as + | FieldConfiguration + | undefined; + + const currentFieldMetadataId = fieldConfiguration?.fieldMetadataId; + + const { boxedRelationFieldMetadataItems } = useFieldListFieldMetadataItems({ + objectNameSingular, + }); + + const dropdownId = useAvailableComponentInstanceIdOrThrow( + DropdownComponentInstanceContext, + ); + + const selectedItemId = useAtomComponentStateValue( + selectedItemIdComponentState, + dropdownId, + ); + + const { updateCurrentWidgetConfig } = + useUpdateCurrentWidgetConfig(pageLayoutId); + + const { updatePageLayoutWidget } = useUpdatePageLayoutWidget(pageLayoutId); + + const { closeDropdown } = useCloseDropdown(); + + const { getIcon } = useIcons(); + + const availableFields = filterBySearchQuery({ + items: boxedRelationFieldMetadataItems, + searchQuery, + getSearchableValues: (item) => [item.label], + }); + + const { fieldMetadataItem: currentFieldMetadataItem } = + useFieldMetadataItemById(currentFieldMetadataId ?? ''); + + const handleSelectField = (fieldMetadataId: string) => { + updateCurrentWidgetConfig({ + configToUpdate: { + fieldMetadataId, + }, + }); + + const selectedField = boxedRelationFieldMetadataItems.find( + (field) => field.id === fieldMetadataId, + ); + + if (widgetInEditMode && selectedField) { + updatePageLayoutWidget(widgetInEditMode.id, { + title: selectedField.label, + }); + } + + closeDropdown(); + }; + + return ( + <> + setSearchQuery(event.target.value)} + value={searchQuery} + /> + + + field.id)} + > + {availableFields.map((fieldMetadataItem) => ( + { + handleSelectField(fieldMetadataItem.id); + }} + > + { + handleSelectField(fieldMetadataItem.id); + }} + /> + + ))} + + + + ); +}; diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetLayoutDropdownContent.tsx b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetLayoutDropdownContent.tsx new file mode 100644 index 0000000000..3b730477cd --- /dev/null +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/components/dropdown-content/FieldWidgetLayoutDropdownContent.tsx @@ -0,0 +1,101 @@ +import { usePageLayoutIdFromContextStore } from '@/side-panel/pages/page-layout/hooks/usePageLayoutIdFromContextStore'; +import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig'; +import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext'; +import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; +import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; +import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; +import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState'; +import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow'; +import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue'; +import { useLingui } from '@lingui/react/macro'; +import { IconLayoutKanban, IconListDetails } from 'twenty-ui/display'; +import { MenuItemSelect } from 'twenty-ui/navigation'; +import { + FieldDisplayMode, + type FieldConfiguration, +} from '~/generated-metadata/graphql'; + +const LAYOUT_OPTIONS = [ + { + id: FieldDisplayMode.FIELD, + Icon: IconListDetails, + }, + { + id: FieldDisplayMode.CARD, + Icon: IconLayoutKanban, + }, +] as const; + +export const FieldWidgetLayoutDropdownContent = () => { + const { t } = useLingui(); + + const { pageLayoutId } = usePageLayoutIdFromContextStore(); + + const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId); + + const fieldConfiguration = widgetInEditMode?.configuration as + | FieldConfiguration + | undefined; + + const currentDisplayMode = fieldConfiguration?.fieldDisplayMode; + + const dropdownId = useAvailableComponentInstanceIdOrThrow( + DropdownComponentInstanceContext, + ); + + const selectedItemId = useAtomComponentStateValue( + selectedItemIdComponentState, + dropdownId, + ); + + const { updateCurrentWidgetConfig } = + useUpdateCurrentWidgetConfig(pageLayoutId); + + const { closeDropdown } = useCloseDropdown(); + + const handleSelectLayout = (fieldDisplayMode: FieldDisplayMode) => { + updateCurrentWidgetConfig({ + configToUpdate: { + fieldDisplayMode, + }, + }); + closeDropdown(); + }; + + const layoutLabels: Record<(typeof LAYOUT_OPTIONS)[number]['id'], string> = { + [FieldDisplayMode.FIELD]: t`Field`, + [FieldDisplayMode.CARD]: t`Card`, + }; + + return ( + + option.id)} + > + {LAYOUT_OPTIONS.map((option) => ( + { + handleSelectLayout(option.id); + }} + > + { + handleSelectLayout(option.id); + }} + /> + + ))} + + + ); +}; diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts index 033d364f9c..c0b5e7faa4 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/types/PageLayoutSidePanelPage.ts @@ -6,4 +6,5 @@ export type PageLayoutSidePanelPage = | SidePanelPages.PageLayoutIframeSettings | SidePanelPages.PageLayoutTabSettings | SidePanelPages.PageLayoutFieldsSettings + | SidePanelPages.PageLayoutFieldSettings | SidePanelPages.PageLayoutRecordTableSettings; diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts index be071bb5f2..6ad916bc89 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutIcon.ts @@ -21,6 +21,8 @@ export const getPageLayoutIcon = (page: PageLayoutSidePanelPage) => { return IconAppWindow; case SidePanelPages.PageLayoutFieldsSettings: return IconList; + case SidePanelPages.PageLayoutFieldSettings: + return IconList; case SidePanelPages.PageLayoutRecordTableSettings: return IconTable; default: diff --git a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts index 4da1625799..d88d3abcaf 100644 --- a/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts +++ b/packages/twenty-front/src/modules/side-panel/pages/page-layout/utils/getPageLayoutPageTitle.ts @@ -15,6 +15,8 @@ export const getPageLayoutPageTitle = (page: PageLayoutSidePanelPage) => { return t`Tab Settings`; case SidePanelPages.PageLayoutFieldsSettings: return t`Fields Settings`; + case SidePanelPages.PageLayoutFieldSettings: + return t`Field widget`; case SidePanelPages.PageLayoutRecordTableSettings: return t`Record Table Settings`; default: diff --git a/packages/twenty-shared/src/types/SidePanelPages.ts b/packages/twenty-shared/src/types/SidePanelPages.ts index abaac379b1..0afce60fa8 100644 --- a/packages/twenty-shared/src/types/SidePanelPages.ts +++ b/packages/twenty-shared/src/types/SidePanelPages.ts @@ -22,6 +22,7 @@ export enum SidePanelPages { PageLayoutTabSettings = 'page-layout-tab-settings', PageLayoutFieldsSettings = 'page-layout-fields-settings', PageLayoutRecordTableSettings = 'page-layout-record-table-settings', + PageLayoutFieldSettings = 'page-layout-field-settings', ViewFrontComponent = 'view-front-component', NavigationMenuItemEdit = 'navigation-menu-item-edit', NavigationMenuAddItem = 'navigation-menu-add-item',