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

Prevent data visualizer from fetching workflows when not enabled (#10116)

Browse Source 
- Use existing active objects filter
- Add memoization on active objects. Otherwise the reference will keep
changing into
[SettingsDataModelOverviewEffect.tsx](https://github.com/twentyhq/twenty/compare/tt-fix-data-visualizer?expand=1#diff-737ffd4d69acac03975f83069add9503ef3d0a744b56c9760a2d386f1f50e85c),
which will cause infinite re-renders

With workflows
<img width="694" alt="Capture d’écran 2025-02-10 à 18 28 04"
src="https://github.com/user-attachments/assets/72b1d707-4bf7-4920-a442-92f3e685978f"
/>


No workflows
<img width="694" alt="Capture d’écran 2025-02-10 à 18 28 19"
src="https://github.com/user-attachments/assets/0fe54ed4-6776-4e70-ae6a-8e7a5c59e0a0"
/>
This commit is contained in:
Thomas Trompette
2025-02-11 23:36:11 +01:00
committed by GitHub
parent 6faf356be2
commit 959046ee12
2 changed files with 19 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/twenty-front/src/modules/object-metadata/hooks/useFilteredObjectMetadataItems.ts
View File

@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
import { isWorkflowRelatedObjectMetadata } from '@/object-metadata/utils/isWorkflowRelatedObjectMetadata'; import { isWorkflowRelatedObjectMetadata } from '@/object-metadata/utils/isWorkflowRelatedObjectMetadata';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { useCallback, useMemo } from 'react';
import { FeatureFlagKey } from '~/generated-metadata/graphql'; import { FeatureFlagKey } from '~/generated-metadata/graphql';
export const useFilteredObjectMetadataItems = () => { export const useFilteredObjectMetadataItems = () => {
@ -12,13 +13,22 @@ export const useFilteredObjectMetadataItems = () => {
FeatureFlagKey.IsWorkflowEnabled, FeatureFlagKey.IsWorkflowEnabled,
); );
const isWorkflowToBeFiltered = (nameSingular: string) => { const isWorkflowToBeFiltered = useCallback(
return !isWorkflowEnabled && isWorkflowRelatedObjectMetadata(nameSingular); (nameSingular: string) => {
}; return (
!isWorkflowEnabled && isWorkflowRelatedObjectMetadata(nameSingular)
);
},
[isWorkflowEnabled],
);
const activeObjectMetadataItems = objectMetadataItems.filter( const activeObjectMetadataItems = useMemo(
({ isActive, isSystem, nameSingular }) => () =>
isActive && !isSystem && !isWorkflowToBeFiltered(nameSingular), objectMetadataItems.filter(
({ isActive, isSystem, nameSingular }) =>
isActive && !isSystem && !isWorkflowToBeFiltered(nameSingular),
),
[isWorkflowToBeFiltered, objectMetadataItems],
); );
const alphaSortedActiveObjectMetadataItems = activeObjectMetadataItems.sort( const alphaSortedActiveObjectMetadataItems = activeObjectMetadataItems.sort(

9
packages/twenty-front/src/modules/settings/data-model/graph-overview/components/SettingsDataModelOverviewEffect.tsx
View File

@ -2,9 +2,8 @@ import dagre from '@dagrejs/dagre';
import { useTheme } from '@emotion/react'; import { useTheme } from '@emotion/react';
import { Edge, Node } from '@xyflow/react'; import { Edge, Node } from '@xyflow/react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useRecoilValue } from 'recoil';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { isDefined } from 'twenty-shared'; import { isDefined } from 'twenty-shared';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -18,11 +17,9 @@ export const SettingsDataModelOverviewEffect = ({
setNodes, setNodes,
}: SettingsDataModelOverviewEffectProps) => { }: SettingsDataModelOverviewEffectProps) => {
const theme = useTheme(); const theme = useTheme();
const objectMetadataItems = useRecoilValue(objectMetadataItemsState); const { activeObjectMetadataItems: items } = useFilteredObjectMetadataItems();
useEffect(() => { useEffect(() => {
const items = objectMetadataItems.filter((x) => !x.isSystem && x.isActive);
const g = new dagre.graphlib.Graph(); const g = new dagre.graphlib.Graph();
g.setGraph({ rankdir: 'LR' }); g.setGraph({ rankdir: 'LR' });
g.setDefaultEdgeLabel(() => ({})); g.setDefaultEdgeLabel(() => ({}));
@ -98,7 +95,7 @@ export const SettingsDataModelOverviewEffect = ({
setNodes(nodes); setNodes(nodes);
setEdges(edges); setEdges(edges);
}, [objectMetadataItems, setEdges, setNodes, theme]); }, [items, setEdges, setNodes, theme]);
return <></>; return <></>;
}; };