Rework atom naming (#18240)

## Summary

- **Enhanced the `matching-state-variable` ESLint rule** to enforce
consistent naming for `ComponentState`, `FamilyState`, and
`ComponentFamilyState` hooks — previously it only covered `useAtomState`
and `useAtomStateValue`
- **The rule now checks 12 hooks** across three categories: value hooks
(`useAtomComponentStateValue`, `useAtomFamilyStateValue`, etc.), state
hooks (`useAtomComponentState`, `useAtomComponentFamilyState`), and
setter hooks (`useSetAtomState`, `useSetAtomComponentState`,
`useSetAtomFamilyState`, `useSetAtomComponentFamilyState`)
- **Fixed all 225 resulting lint violations** across 151 files, renaming
variables to match their state atom names (e.g. `currentViewId` →
`contextStoreCurrentViewId`, `selectedRecord` → `recordStore`). Cases
where the same state is accessed with different family keys/instance IDs
are suppressed with `eslint-disable-next-line`.

## Naming convention

| Hook | State argument | Valid | Invalid |
|------|---------------|-------|---------|
| `useAtomStateValue` | `fooState` | `const foo = ...` | `const bar =
...` |
| `useAtomComponentStateValue` | `fooComponentState` | `const foo = ...`
| `const bar = ...` |
| `useAtomFamilyStateValue` | `fooFamilyState` | `const foo = ...` |
`const bar = ...` |
| `useAtomComponentFamilyStateValue` | `fooComponentFamilyState` |
`const foo = ...` | `const bar = ...` |
| `useAtomState` | `fooState` | `const [foo, setFoo] = ...` | `const
[bar, setBar] = ...` |
| `useAtomComponentState` | `fooComponentState` | `const [foo, setFoo] =
...` | `const [bar, setBar] = ...` |
| `useAtomComponentFamilyState` | `fooComponentFamilyState` | `const
[foo, setFoo] = ...` | `const [bar, setBar] = ...` |
| `useSetAtomState` | `fooState` | `const setFoo = ...` | `const setBar
= ...` |
| `useSetAtomComponentState` | `fooComponentState` | `const setFoo =
...` | `const setBar = ...` |
| `useSetAtomFamilyState` | `fooFamilyState` | `const setFoo = ...` |
`const setBar = ...` |
| `useSetAtomComponentFamilyState` | `fooComponentFamilyState` | `const
setFoo = ...` | `const setBar = ...` |
This commit is contained in:
Charles Bochet
2026-02-25 22:28:25 +01:00
committed by GitHub
parent 1b805a36f3
commit bc4ae35bc4
321 changed files with 1824 additions and 1518 deletions
@@ -3,13 +3,13 @@ import { workflowVisualizerWorkflowRunIdComponentState } from '@/workflow/states
import { isDefined } from 'twenty-shared/utils';
export const useWorkflowRunIdOrThrow = () => {
const workflowRunId = useAtomComponentStateValue(
const workflowVisualizerWorkflowRunId = useAtomComponentStateValue(
workflowVisualizerWorkflowRunIdComponentState,
);
if (!isDefined(workflowRunId)) {
if (!isDefined(workflowVisualizerWorkflowRunId)) {
throw new Error('Expected the workflow run ID to be defined');
}
return workflowRunId;
return workflowVisualizerWorkflowRunId;
};
@@ -3,13 +3,13 @@ import { workflowVisualizerWorkflowVersionIdComponentState } from '@/workflow/st
import { isDefined } from 'twenty-shared/utils';
export const useWorkflowVersionIdOrThrow = () => {
const workflowVersionId = useAtomComponentStateValue(
const workflowVisualizerWorkflowVersionId = useAtomComponentStateValue(
workflowVisualizerWorkflowVersionIdComponentState,
);
if (!isDefined(workflowVersionId)) {
if (!isDefined(workflowVisualizerWorkflowVersionId)) {
throw new Error('Expected the workflow version ID to be defined');
}
return workflowVersionId;
return workflowVisualizerWorkflowVersionId;
};
@@ -170,13 +170,13 @@ export const WorkflowDiagramCanvasBase = ({
const reactflow = useReactFlow();
const currentWorkflowDiagram = useAtomComponentStateValue(
const workflowDiagram = useAtomComponentStateValue(
workflowDiagramComponentState,
);
const workflowDiagramPanOnDrag = useAtomComponentStateValue(
workflowDiagramPanOnDragComponentState,
);
const workflowDiagram = useAtomComponentStateCallbackState(
const workflowDiagramCallbackState = useAtomComponentStateCallbackState(
workflowDiagramComponentState,
);
const setWorkflowDiagram = useSetAtomComponentState(
@@ -213,12 +213,12 @@ export const WorkflowDiagramCanvasBase = ({
} | null>(null);
const { nodes, edges } = useMemo(() => {
if (!isDefined(currentWorkflowDiagram)) {
if (!isDefined(workflowDiagram)) {
return { nodes: [], edges: [] };
}
const nodes = [...currentWorkflowDiagram.nodes];
const edges = [...currentWorkflowDiagram.edges];
const nodes = [...workflowDiagram.nodes];
const edges = [...workflowDiagram.edges];
if (
isDefined(workflowInsertStepIds.position) &&
@@ -255,7 +255,7 @@ export const WorkflowDiagramCanvasBase = ({
}
return { nodes, edges };
}, [currentWorkflowDiagram, workflowInsertStepIds]);
}, [workflowDiagram, workflowInsertStepIds]);
const isCommandMenuOpened = useAtomStateValue(isCommandMenuOpenedState);
const { isInRightDrawer } = useContext(ActionMenuContext);
@@ -357,10 +357,10 @@ export const WorkflowDiagramCanvasBase = ({
isInRightDrawer,
isCommandMenuOpened,
workflowDiagramFlowInitialized,
workflowDiagram: store.get(workflowDiagram),
workflowDiagram: store.get(workflowDiagramCallbackState),
});
},
[setFlowViewport, workflowDiagram, store],
[setFlowViewport, workflowDiagramCallbackState, store],
);
useEffect(() => {
@@ -378,7 +378,7 @@ export const WorkflowDiagramCanvasBase = ({
const handleNodesChanges = useCallback(
(changes: NodeChange<WorkflowDiagramNode>[]) => {
const existingWorkflowDiagram = store.get(workflowDiagram);
const existingWorkflowDiagram = store.get(workflowDiagramCallbackState);
const filteredChanges = changes.filter(
(change) =>
@@ -399,7 +399,7 @@ export const WorkflowDiagramCanvasBase = ({
};
}
store.set(workflowDiagram, updatedWorkflowDiagram);
store.set(workflowDiagramCallbackState, updatedWorkflowDiagram);
const currentWorkflowDiagramWaitingNodesDimensions = store.get(
workflowDiagramWaitingNodesDimensions,
@@ -419,7 +419,7 @@ export const WorkflowDiagramCanvasBase = ({
isCommandMenuOpened,
setFlowViewport,
workflowDiagramFlowInitialized,
workflowDiagram,
workflowDiagramCallbackState,
workflowDiagramWaitingNodesDimensions,
isInRightDrawer,
store,
@@ -30,7 +30,7 @@ export const WorkflowRunVisualizerEffect = ({
const { getIcon } = useIcons();
const workflowRun = useWorkflowRun({ workflowRunId });
const setWorkflowRunId = useSetAtomComponentState(
const setWorkflowVisualizerWorkflowRunId = useSetAtomComponentState(
workflowVisualizerWorkflowRunIdComponentState,
);
@@ -72,8 +72,8 @@ export const WorkflowRunVisualizerEffect = ({
const store = useStore();
useEffect(() => {
setWorkflowRunId(workflowRunId);
}, [setWorkflowRunId, workflowRunId]);
setWorkflowVisualizerWorkflowRunId(workflowRunId);
}, [setWorkflowVisualizerWorkflowRunId, workflowRunId]);
useEffect(() => {
if (!isDefined(workflowRun)) {
@@ -87,7 +87,7 @@ export const WorkflowRunDiagramStepNode = ({
const { getIcon } = useIcons();
const theme = useTheme();
const workflowId = useAtomComponentStateValue(
const workflowVisualizerWorkflowId = useAtomComponentStateValue(
workflowVisualizerWorkflowIdComponentState,
);
const workflowRunId = useWorkflowRunIdOrThrow();
@@ -116,7 +116,7 @@ export const WorkflowRunDiagramStepNode = ({
: 0;
const handleClick = () => {
if (!isDefined(workflowId)) {
if (!isDefined(workflowVisualizerWorkflowId)) {
throw new Error('Workflow ID must be defined');
}
@@ -127,7 +127,7 @@ export const WorkflowRunDiagramStepNode = ({
setWorkflowSelectedNode(id);
openWorkflowRunViewStepInCommandMenu({
workflowId,
workflowId: workflowVisualizerWorkflowId,
workflowRunId,
title: data.name,
icon: getIcon(getWorkflowNodeIconKey(data)),
@@ -9,15 +9,15 @@ export const useChildStepFiltersAndChildStepFilterGroups = ({
}: {
stepFilterGroupId: string;
}) => {
const stepFilterGroups = useAtomComponentStateValue(
const currentStepFilterGroups = useAtomComponentStateValue(
currentStepFilterGroupsComponentState,
);
const stepFilters = useAtomComponentStateValue(
const currentStepFilters = useAtomComponentStateValue(
currentStepFiltersComponentState,
);
const currentStepFilterGroup = stepFilterGroups?.find(
const currentStepFilterGroup = currentStepFilterGroups?.find(
(stepFilterGroup) => stepFilterGroup.id === stepFilterGroupId,
);
@@ -33,11 +33,11 @@ export const useChildStepFiltersAndChildStepFilterGroups = ({
};
}
const childStepFilters = stepFilters?.filter(
const childStepFilters = currentStepFilters?.filter(
(filter) => filter.stepFilterGroupId === currentStepFilterGroup.id,
);
const childStepFilterGroups = stepFilterGroups?.filter(
const childStepFilterGroups = currentStepFilterGroups?.filter(
(filterGroup) =>
filterGroup.parentStepFilterGroupId === currentStepFilterGroup.id,
);
@@ -5,18 +5,20 @@ import { workflowAiAgentPermissionsIsAddingPermissionState } from '@/workflow/wo
import { workflowAiAgentPermissionsSelectedObjectIdState } from '@/workflow/workflow-steps/workflow-actions/ai-agent-action/states/workflowAiAgentPermissionsSelectedObjectIdState';
export const useResetWorkflowAiAgentPermissionsStateOnCommandMenuClose = () => {
const setSelectedObjectId = useSetAtomState(
const setWorkflowAiAgentPermissionsSelectedObjectId = useSetAtomState(
workflowAiAgentPermissionsSelectedObjectIdState,
);
const setIsAddingPermission = useSetAtomState(
const setWorkflowAiAgentPermissionsIsAddingPermission = useSetAtomState(
workflowAiAgentPermissionsIsAddingPermissionState,
);
const setAgentState = useSetAtomState(workflowAiAgentActionAgentState);
const setWorkflowAiAgentActionAgent = useSetAtomState(
workflowAiAgentActionAgentState,
);
const resetPermissionState = () => {
setSelectedObjectId(undefined);
setIsAddingPermission(false);
setAgentState(undefined);
setWorkflowAiAgentPermissionsSelectedObjectId(undefined);
setWorkflowAiAgentPermissionsIsAddingPermission(false);
setWorkflowAiAgentActionAgent(undefined);
};
useListenToSidePanelClosing(resetPermissionState);