chore(page-layout): remove IS_RECORD_PAGE_LAYOUT_* feature flags (#20556)

## Summary

- Both \`IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED\` and
\`IS_RECORD_PAGE_LAYOUT_GLOBAL_EDITION_ENABLED\` are force-enabled on
every existing workspace by the 1.23.0 upgrade command
\`BackfillRecordPageLayoutsCommand\` and seeded enabled for new
workspaces via \`DEFAULT_FEATURE_FLAGS\` +
\`seed-feature-flags.util.ts\`. They are no longer load-bearing.
- Unwrap all \`if (flag) { … }\` conditionals to their enabled branch on
both server and front.
- Delete legacy fallback files that only the disabled branch reached:
\`PageLayoutRelationWidgetsSyncEffect\`,
\`usePageLayoutWithRelationWidgets\`,
\`reInjectDynamicRelationWidgetsFromDraft\`,
\`injectRelationWidgetsIntoLayout\`, \`isDynamicRelationWidget\` (and
their tests).
- Strip the two \`enableFeatureFlags\` calls from the 1.23 upgrade
command — the page-layout backfill data logic itself is kept intact
since old workspaces upgrading from < 1.23 still need it.
- No DB cleanup migration: stale \`featureFlag\` rows are left in place,
matching the precedent set by #20531 and #20460.

Net diff: 37 files, +106 / -1727.

## Test plan

- [x] \`npx nx typecheck twenty-shared twenty-server twenty-front\` —
all pass
- [x] \`npx nx lint:diff-with-main twenty-server twenty-front\` — all
pass
- [x] \`cd packages/twenty-front && npx jest page-layout\` — 1240 tests,
all pass
- [x] \`cd packages/twenty-server && npx jest
workspace-entity-manager.spec\` — pass
- [ ] Manual smoke: open a record page, verify tabs render and \"Edit
Layout\" command-menu action is available
- [ ] Manual smoke: Settings → Data model → object → Layout tab is
visible (and hidden for remote / Dashboard objects)
- [ ] Manual smoke: edit a tab title, save, reload — confirm persistence
This commit is contained in:
Charles Bochet
2026-05-14 08:12:00 +02:00
committed by GitHub
parent 6dd1e8a471
commit 04eb913551
37 changed files with 107 additions and 1705 deletions
@@ -9,10 +9,8 @@ import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/u
import { useReorderPageLayoutWidgets } from '@/page-layout/hooks/useReorderPageLayoutWidgets';
import { StandaloneWidgetPlaceholder } from '@/page-layout/widgets/components/StandaloneWidgetPlaceholder';
import { RecordPageAddWidgetSection } from '@/page-layout/widgets/components/RecordPageAddWidgetSection';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { styled } from '@linaria/react';
import {
FeatureFlagKey,
PageLayoutTabLayoutMode,
PageLayoutType,
} from '~/generated-metadata/graphql';
@@ -38,10 +36,6 @@ export const PageLayoutContent = () => {
const isRecordPageLayout =
currentPageLayout.type === PageLayoutType.RECORD_PAGE;
const isRecordPageGlobalEditionEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_GLOBAL_EDITION_ENABLED,
);
const isCanvasLayout = layoutMode === PageLayoutTabLayoutMode.CANVAS;
const isVerticalList = layoutMode === PageLayoutTabLayoutMode.VERTICAL_LIST;
@@ -62,19 +56,13 @@ export const PageLayoutContent = () => {
}
if (isVerticalList) {
if (
isPageLayoutInEditMode &&
isRecordPageLayout &&
isRecordPageGlobalEditionEnabled
) {
if (isPageLayoutInEditMode && isRecordPageLayout) {
return (
<PageLayoutVerticalListEditor
widgets={activeTab.widgets}
onReorder={reorderWidgets}
isReorderEnabled={true}
trailingElement={
isRecordPageLayout ? <RecordPageAddWidgetSection /> : undefined
}
trailingElement={<RecordPageAddWidgetSection />}
/>
);
}
@@ -1,5 +1,4 @@
import { useBasePageLayout } from '@/page-layout/hooks/useBasePageLayout';
import { usePageLayoutWithRelationWidgets } from '@/page-layout/hooks/usePageLayoutWithRelationWidgets';
import { useSetIsPageLayoutInEditMode } from '@/page-layout/hooks/useSetIsPageLayoutInEditMode';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
@@ -8,27 +7,24 @@ import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayo
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { isPageLayoutEmpty } from '@/page-layout/utils/isPageLayoutEmpty';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentState';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
import { useStore } from 'jotai';
import { useCallback, useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { FeatureFlagKey, PageLayoutType } from '~/generated-metadata/graphql';
import { PageLayoutType } from '~/generated-metadata/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
type PageLayoutInitializationQueryEffectProps = {
pageLayoutId: string;
};
const PageLayoutInitializationEffect = ({
// oxlint-disable-next-line twenty/effect-components
export const PageLayoutInitializationQueryEffect = ({
pageLayoutId,
pageLayout,
}: {
pageLayoutId: string;
pageLayout: PageLayout | undefined;
}) => {
}: PageLayoutInitializationQueryEffectProps) => {
const pageLayout = useBasePageLayout(pageLayoutId);
const [pageLayoutIsInitialized, setPageLayoutIsInitialized] =
useAtomComponentState(pageLayoutIsInitializedComponentState);
@@ -99,53 +95,3 @@ const PageLayoutInitializationEffect = ({
return null;
};
const PageLayoutInitializationWithRelationWidgets = ({
pageLayoutId,
basePageLayout,
}: {
pageLayoutId: string;
basePageLayout: PageLayout | undefined;
}) => {
const pageLayout = usePageLayoutWithRelationWidgets(basePageLayout);
return (
<PageLayoutInitializationEffect
pageLayoutId={pageLayoutId}
pageLayout={pageLayout}
/>
);
};
// oxlint-disable-next-line twenty/effect-components
export const PageLayoutInitializationQueryEffect = ({
pageLayoutId,
}: PageLayoutInitializationQueryEffectProps) => {
const { layoutType } = useLayoutRenderingContext();
const featureFlags = useFeatureFlagsMap();
const isRecordPageLayoutEditingEnabled =
featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
const basePageLayout = useBasePageLayout(pageLayoutId);
const needsRelationWidgets =
layoutType === PageLayoutType.RECORD_PAGE &&
!isRecordPageLayoutEditingEnabled;
if (needsRelationWidgets) {
return (
<PageLayoutInitializationWithRelationWidgets
pageLayoutId={pageLayoutId}
basePageLayout={basePageLayout}
/>
);
}
return (
<PageLayoutInitializationEffect
pageLayoutId={pageLayoutId}
pageLayout={basePageLayout}
/>
);
};
@@ -1,193 +0,0 @@
import { isLayoutCustomizationModeEnabledState } from '@/layout-customization/states/isLayoutCustomizationModeEnabledState';
import { useFieldListFieldMetadataItems } from '@/object-record/record-field-list/hooks/useFieldListFieldMetadataItems';
import { useBasePageLayout } from '@/page-layout/hooks/useBasePageLayout';
import { pageLayoutCurrentLayoutsComponentState } from '@/page-layout/states/pageLayoutCurrentLayoutsComponentState';
import { pageLayoutDraftComponentState } from '@/page-layout/states/pageLayoutDraftComponentState';
import { pageLayoutIsInitializedComponentState } from '@/page-layout/states/pageLayoutIsInitializedComponentState';
import { pageLayoutPersistedComponentState } from '@/page-layout/states/pageLayoutPersistedComponentState';
import { type DraftPageLayout } from '@/page-layout/types/DraftPageLayout';
import { type PageLayout } from '@/page-layout/types/PageLayout';
import { convertPageLayoutToTabLayouts } from '@/page-layout/utils/convertPageLayoutToTabLayouts';
import { injectRelationWidgetsIntoLayout } from '@/page-layout/utils/injectRelationWidgetsIntoLayout';
import { isDynamicRelationWidget } from '@/page-layout/utils/isDynamicRelationWidget';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
import { useStore } from 'jotai';
import { useCallback, useEffect } from 'react';
import { isDefined } from 'twenty-shared/utils';
import { PageLayoutType, WidgetType } from '~/generated-metadata/graphql';
import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
type PageLayoutRelationWidgetsSyncEffectProps = {
pageLayoutId: string;
};
export const PageLayoutRelationWidgetsSyncEffect = ({
pageLayoutId,
}: PageLayoutRelationWidgetsSyncEffectProps) => {
const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
const pageLayoutIsInitialized = useAtomComponentStateValue(
pageLayoutIsInitializedComponentState,
);
const basePageLayout = useBasePageLayout(pageLayoutId);
const { boxedRelationFieldMetadataItems } = useFieldListFieldMetadataItems({
objectNameSingular: targetRecordIdentifier?.targetObjectNameSingular ?? '',
});
const pageLayoutPersistedComponentCallbackState =
useAtomComponentStateCallbackState(pageLayoutPersistedComponentState);
const pageLayoutDraftComponentCallbackState =
useAtomComponentStateCallbackState(pageLayoutDraftComponentState);
const pageLayoutCurrentLayoutsComponentCallbackState =
useAtomComponentStateCallbackState(pageLayoutCurrentLayoutsComponentState);
const store = useStore();
const isLayoutCustomizationModeEnabled = useAtomStateValue(
isLayoutCustomizationModeEnabledState,
);
const getDraftWithSyncedDynamicRelationWidgets = useCallback(
(
currentDraft: DraftPageLayout,
layoutWithRelationWidgets: PageLayout,
): DraftPageLayout => {
return {
...currentDraft,
tabs: currentDraft.tabs.map((draftTab) => {
const persistedTab = layoutWithRelationWidgets.tabs.find(
(tab) => tab.id === draftTab.id,
);
if (!isDefined(persistedTab)) {
return draftTab;
}
const dynamicRelationWidgets = persistedTab.widgets.filter(
isDynamicRelationWidget,
);
const nonDynamicWidgets = draftTab.widgets.filter(
(widget) => !isDynamicRelationWidget(widget),
);
if (dynamicRelationWidgets.length === 0) {
return {
...draftTab,
widgets: nonDynamicWidgets,
};
}
const firstFieldsWidgetIndex = nonDynamicWidgets.findIndex(
(widget) => widget.type === WidgetType.FIELDS,
);
if (firstFieldsWidgetIndex === -1) {
return {
...draftTab,
widgets: [...nonDynamicWidgets, ...dynamicRelationWidgets],
};
}
const widgetsBeforeFields = nonDynamicWidgets.slice(
0,
firstFieldsWidgetIndex + 1,
);
const widgetsAfterFields = nonDynamicWidgets.slice(
firstFieldsWidgetIndex + 1,
);
return {
...draftTab,
widgets: [
...widgetsBeforeFields,
...dynamicRelationWidgets,
...widgetsAfterFields,
],
};
}),
};
},
[],
);
const syncPageLayoutWithRelationWidgets = useCallback(
(layout: PageLayout) => {
const currentPersisted = store.get(
pageLayoutPersistedComponentCallbackState,
);
if (!isDeeplyEqual(layout, currentPersisted)) {
store.set(pageLayoutPersistedComponentCallbackState, layout);
const currentDraft = store.get(pageLayoutDraftComponentCallbackState);
const nextDraft = isLayoutCustomizationModeEnabled
? getDraftWithSyncedDynamicRelationWidgets(currentDraft, layout)
: {
id: layout.id,
name: layout.name,
type: layout.type,
objectMetadataId: layout.objectMetadataId,
tabs: layout.tabs,
defaultTabToFocusOnMobileAndSidePanelId:
layout.defaultTabToFocusOnMobileAndSidePanelId,
};
if (!isDeeplyEqual(nextDraft, currentDraft)) {
store.set(pageLayoutDraftComponentCallbackState, nextDraft);
}
const tabLayouts = convertPageLayoutToTabLayouts({
...layout,
tabs: nextDraft.tabs,
});
store.set(pageLayoutCurrentLayoutsComponentCallbackState, tabLayouts);
}
},
[
getDraftWithSyncedDynamicRelationWidgets,
isLayoutCustomizationModeEnabled,
pageLayoutCurrentLayoutsComponentCallbackState,
pageLayoutDraftComponentCallbackState,
pageLayoutPersistedComponentCallbackState,
store,
],
);
useEffect(() => {
if (!pageLayoutIsInitialized) {
return;
}
if (!isDefined(basePageLayout)) {
return;
}
const isRecordPage = layoutType === PageLayoutType.RECORD_PAGE;
if (!isRecordPage) {
return;
}
const layoutWithRelationWidgets = injectRelationWidgetsIntoLayout(
basePageLayout,
boxedRelationFieldMetadataItems,
);
syncPageLayoutWithRelationWidgets(layoutWithRelationWidgets);
}, [
basePageLayout,
boxedRelationFieldMetadataItems,
pageLayoutIsInitialized,
layoutType,
syncPageLayoutWithRelationWidgets,
]);
return null;
};
@@ -1,16 +1,13 @@
import { PageLayoutEditModeProvider } from '@/page-layout/components/PageLayoutEditModeProvider';
import { PageLayoutInitializationQueryEffect } from '@/page-layout/components/PageLayoutInitializationQueryEffect';
import { PageLayoutRecordPageCustomizationSessionRegistrationEffect } from '@/page-layout/components/PageLayoutRecordPageCustomizationSessionRegistrationEffect';
import { PageLayoutRelationWidgetsSyncEffect } from '@/page-layout/components/PageLayoutRelationWidgetsSyncEffect';
import { PageLayoutRendererContent } from '@/page-layout/components/PageLayoutRendererContent';
import { PageLayoutComponentInstanceContext } from '@/page-layout/states/contexts/PageLayoutComponentInstanceContext';
import { getTabListInstanceIdFromPageLayoutAndRecord } from '@/page-layout/utils/getTabListInstanceIdFromPageLayoutAndRecord';
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
import 'react-grid-layout/css/styles.css';
import 'react-resizable/css/styles.css';
import { FeatureFlagKey, PageLayoutType } from '~/generated-metadata/graphql';
type PageLayoutRendererProps = {
pageLayoutId: string;
@@ -21,10 +18,6 @@ export const PageLayoutRenderer = ({
}: PageLayoutRendererProps) => {
const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
const featureFlags = useFeatureFlagsMap();
const isRecordPageLayoutEditingEnabled =
featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
const tabListInstanceId = getTabListInstanceIdFromPageLayoutAndRecord({
pageLayoutId,
layoutType,
@@ -48,12 +41,6 @@ export const PageLayoutRenderer = ({
>
<PageLayoutInitializationQueryEffect pageLayoutId={pageLayoutId} />
<PageLayoutRecordPageCustomizationSessionRegistrationEffect />
{!isRecordPageLayoutEditingEnabled &&
layoutType === PageLayoutType.RECORD_PAGE && (
<PageLayoutRelationWidgetsSyncEffect
pageLayoutId={pageLayoutId}
/>
)}
<PageLayoutRendererContent />
</PageLayoutEditModeProvider>
</TabListComponentInstanceContext.Provider>
@@ -3,7 +3,6 @@ import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
import { PageLayoutEditModeProvider } from '@/page-layout/components/PageLayoutEditModeProvider';
import { PageLayoutInitializationQueryEffect } from '@/page-layout/components/PageLayoutInitializationQueryEffect';
import { PageLayoutRecordPageCustomizationSessionRegistrationEffect } from '@/page-layout/components/PageLayoutRecordPageCustomizationSessionRegistrationEffect';
import { PageLayoutRelationWidgetsSyncEffect } from '@/page-layout/components/PageLayoutRelationWidgetsSyncEffect';
import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
import { useCurrentPageLayoutOrThrow } from '@/page-layout/hooks/useCurrentPageLayoutOrThrow';
import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
@@ -16,8 +15,6 @@ import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingC
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
import { TabListComponentInstanceContext } from '@/ui/layout/tab-list/states/contexts/TabListComponentInstanceContext';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useFeatureFlagsMap } from '@/workspace/hooks/useFeatureFlagsMap';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
type PageLayoutSingleTabRendererProps = {
pageLayoutId: string;
@@ -79,10 +76,6 @@ export const PageLayoutSingleTabRenderer = ({
}: PageLayoutSingleTabRendererProps) => {
const { targetRecordIdentifier, layoutType } = useLayoutRenderingContext();
const featureFlags = useFeatureFlagsMap();
const isRecordPageLayoutEditingEnabled =
featureFlags[FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_EDITING_ENABLED];
const tabListInstanceId = getTabListInstanceIdFromPageLayoutAndRecord({
pageLayoutId,
layoutType,
@@ -106,9 +99,6 @@ export const PageLayoutSingleTabRenderer = ({
>
<PageLayoutInitializationQueryEffect pageLayoutId={pageLayoutId} />
<PageLayoutRecordPageCustomizationSessionRegistrationEffect />
{!isRecordPageLayoutEditingEnabled && (
<PageLayoutRelationWidgetsSyncEffect pageLayoutId={pageLayoutId} />
)}
<PageLayoutSingleTabRendererContent />
</PageLayoutEditModeProvider>
</TabListComponentInstanceContext.Provider>
@@ -46,14 +46,10 @@ import { TabListFromUrlOptionalEffect } from '@/ui/layout/tab-list/components/Ta
import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { SidePanelPages } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import {
FeatureFlagKey,
type PageLayoutType,
} from '~/generated-metadata/graphql';
import { type PageLayoutType } from '~/generated-metadata/graphql';
const StyledContainer = styled.div`
box-sizing: border-box;
@@ -112,10 +108,6 @@ export const PageLayoutTabList = ({
const { getIcon } = useIcons();
const { t } = useLingui();
const isRecordPageGlobalEditionEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_GLOBAL_EDITION_ENABLED,
);
const tabsWithIcons: SingleTabProps[] = tabs.map((tab) => ({
id: tab.id,
title: tab.title,
@@ -266,10 +258,7 @@ export const PageLayoutTabList = ({
(tabId: string) => {
const shouldOpenSettings =
isPageLayoutInEditMode &&
shouldEnableTabEditingFeatures(
pageLayoutType,
isRecordPageGlobalEditionEnabled,
);
shouldEnableTabEditingFeatures(pageLayoutType);
if (shouldOpenSettings && activeTabId === tabId) {
openTabSettings(tabId);
@@ -284,7 +273,6 @@ export const PageLayoutTabList = ({
},
[
isPageLayoutInEditMode,
isRecordPageGlobalEditionEnabled,
pageLayoutType,
activeTabId,
isTabSettingsOpen,
@@ -297,10 +285,7 @@ export const PageLayoutTabList = ({
(tabId: string) => {
const shouldOpenSettings =
isPageLayoutInEditMode &&
shouldEnableTabEditingFeatures(
pageLayoutType,
isRecordPageGlobalEditionEnabled,
);
shouldEnableTabEditingFeatures(pageLayoutType);
if (shouldOpenSettings && activeTabId === tabId) {
openTabSettings(tabId);
@@ -316,7 +301,6 @@ export const PageLayoutTabList = ({
},
[
isPageLayoutInEditMode,
isRecordPageGlobalEditionEnabled,
pageLayoutType,
activeTabId,
isTabSettingsOpen,
@@ -26,14 +26,10 @@ import { type SingleTabProps } from '@/ui/layout/tab-list/types/SingleTabProps';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useSetAtomComponentState } from '@/ui/utilities/state/jotai/hooks/useSetAtomComponentState';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useContext } from 'react';
import { SidePanelPages } from 'twenty-shared/types';
import { ThemeContext } from 'twenty-ui/theme-constants';
import {
FeatureFlagKey,
type PageLayoutType,
} from '~/generated-metadata/graphql';
import { type PageLayoutType } from '~/generated-metadata/graphql';
const StyledOverflowDropdownListDraggableWrapper = styled.div`
cursor: grab;
@@ -79,16 +75,8 @@ export const PageLayoutTabListReorderableOverflowDropdown = ({
const isPageLayoutInEditMode = useIsPageLayoutInEditMode();
const isRecordPageGlobalEditionEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_GLOBAL_EDITION_ENABLED,
);
const shouldShowEditButton =
isPageLayoutInEditMode &&
shouldEnableTabEditingFeatures(
pageLayoutType,
isRecordPageGlobalEditionEnabled,
);
isPageLayoutInEditMode && shouldEnableTabEditingFeatures(pageLayoutType);
const isPageLayoutTabDragging = useAtomComponentStateValue(
isPageLayoutTabDraggingComponentState,
@@ -21,11 +21,9 @@ import { activeTabIdComponentState } from '@/ui/layout/tab-list/states/activeTab
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { useAtomFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomFamilyStateValue';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { styled } from '@linaria/react';
import { isDefined } from 'twenty-shared/utils';
import { useIsMobile } from 'twenty-ui/utilities';
import { FeatureFlagKey } from '~/generated-metadata/graphql';
const StyledContainer = styled.div<{ hasPinnedTab: boolean }>`
display: grid;
grid-template-columns: ${({ hasPinnedTab }) =>
@@ -73,10 +71,6 @@ export const PageLayoutTabsRenderer = () => {
const isMobile = useIsMobile();
const isRecordPageGlobalEditionEnabled = useIsFeatureEnabled(
FeatureFlagKey.IS_RECORD_PAGE_LAYOUT_GLOBAL_EDITION_ENABLED,
);
const metadataStore = useAtomFamilyStateValue(
metadataStoreState,
'objectMetadataItems',
@@ -90,10 +84,7 @@ export const PageLayoutTabsRenderer = () => {
const canEnableTabEditing =
isPageLayoutInEditMode &&
shouldEnableTabEditingFeatures(
currentPageLayout.type,
isRecordPageGlobalEditionEnabled,
);
shouldEnableTabEditingFeatures(currentPageLayout.type);
const tabsWithVisibleWidgets = getTabsWithVisibleWidgets({
tabs: currentPageLayout.tabs,