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:
@@ -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 />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
+6
-60
@@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
-193
@@ -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>
|
||||
|
||||
-10
@@ -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,
|
||||
|
||||
+2
-14
@@ -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,
|
||||
|
||||
+1
-10
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user