houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create fake hidden fields group (#18525)

Browse Source 
## Demo


https://github.com/user-attachments/assets/43f31c43-fe37-4553-ad42-fc97a948d6ea

## Ungrouped fields

<img width="3456" height="2160" alt="CleanShot 2026-03-10 at 13 52
57@2x"
src="https://github.com/user-attachments/assets/13d1db63-59ac-4e2b-8950-fccf430176c4"
/>
This commit is contained in:
Baptiste Devessier
2026-03-10 16:26:35 +01:00
committed by GitHub
parent 8e003aa6cf
commit 926dd545f4
23 changed files with 1110 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/side-panel/pages/page-layout/components/SidePanelPageLayoutFieldsSettings.tsx
+33 -4
View File
@@ -1,17 +1,19 @@
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { CommandMenuItem } from '@/command-menu/components/CommandMenuItem';
import { CommandMenuItemToggle } from '@/command-menu/components/CommandMenuItemToggle';
import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
import { SidePanelGroup } from '@/side-panel/components/SidePanelGroup';
import { SidePanelList } from '@/side-panel/components/SidePanelList';
import { WidgetSettingsFooter } from '@/side-panel/pages/page-layout/components/WidgetSettingsFooter';
import { useNavigatePageLayoutSidePanel } from '@/side-panel/pages/page-layout/hooks/useNavigatePageLayoutSidePanel';
import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from '@/side-panel/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord';
import { useUpdateCurrentWidgetConfig } from '@/side-panel/pages/page-layout/hooks/useUpdateCurrentWidgetConfig';
import { useWidgetInEditMode } from '@/side-panel/pages/page-layout/hooks/useWidgetInEditMode';
import { useFieldsWidgetGroups } from '@/page-layout/widgets/fields/hooks/useFieldsWidgetGroups';
import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { IconLayoutSidebarRight } from 'twenty-ui/display';
import { IconChevronDown, IconLayoutSidebarRight } from 'twenty-ui/display';
import { type FieldsConfiguration } from '~/generated-metadata/graphql';
const StyledContainer = styled.div`
@@ -33,6 +35,9 @@ export const SidePanelPageLayoutFieldsSettings = () => {
const { pageLayoutId, objectNameSingular } =
usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
const { updateCurrentWidgetConfig } =
useUpdateCurrentWidgetConfig(pageLayoutId);
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
const fieldsConfiguration = widgetInEditMode?.configuration as
@@ -59,6 +64,18 @@ export const SidePanelPageLayoutFieldsSettings = () => {
});
};
const isShouldAllowUserToSeeHiddenFieldsToggled =
fieldsConfiguration?.shouldAllowUserToSeeHiddenFields === true;
const handleToggleShouldAllowUserToSeeHiddenFields = () => {
updateCurrentWidgetConfig({
configToUpdate: {
shouldAllowUserToSeeHiddenFields:
!isShouldAllowUserToSeeHiddenFieldsToggled,
},
});
};
const selectableItemIds = [
'layout',
'display-more-fields-button',
@@ -75,7 +92,7 @@ export const SidePanelPageLayoutFieldsSettings = () => {
<StyledContainer>
<StyledSidePanelContainer>
<SidePanelList commandGroups={[]} selectableItemIds={selectableItemIds}>
<SidePanelGroup heading={t`Customize`}>
<SidePanelGroup heading={t`Data and display`}>
<SelectableListItem
itemId="layout"
onEnter={handleNavigateToLayout}
@@ -90,6 +107,18 @@ export const SidePanelPageLayoutFieldsSettings = () => {
contextualTextPosition="right"
/>
</SelectableListItem>
<SelectableListItem
itemId="display-more-fields-button"
onEnter={handleToggleShouldAllowUserToSeeHiddenFields}
>
<CommandMenuItemToggle
LeftIcon={IconChevronDown}
text={t`Display "More fields" button`}
id="display-more-fields-button"
toggled={isShouldAllowUserToSeeHiddenFieldsToggled}
onToggleChange={handleToggleShouldAllowUserToSeeHiddenFields}
/>
</SelectableListItem>
</SidePanelGroup>
</SidePanelList>
</StyledSidePanelContainer>