271 remove is command menu v2 enabled (#10809)

Closes https://github.com/twentyhq/core-team-issues/issues/271 This PR - Removes the feature flag IS_COMMAND_MENU_V2_ENABLED - Removes all old Right drawer components - Removes the Action menu bar - Removes unused Copilot page
2025-03-12 16:26:29 +01:00
parent 1b0413bf8b
commit daa501549e
124 changed files with 281 additions and 4222 deletions
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
@ -13,8 +13,6 @@ import { getOrganizedDiagram } from '@/workflow/workflow-diagram/utils/getOrgani
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
-  applyEdgeChanges,
-  applyNodeChanges,
  Background,
  EdgeChange,
  EdgeProps,
@ -22,13 +20,15 @@ import {
  NodeChange,
  NodeProps,
  ReactFlow,
+  applyEdgeChanges,
+  applyNodeChanges,
  useReactFlow,
 } from '@xyflow/react';
 import '@xyflow/react/dist/style.css';
 import React, { useEffect, useMemo, useRef } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
-import { Tag, TagColor, THEME_COMMON } from 'twenty-ui';
+import { THEME_COMMON, Tag, TagColor } from 'twenty-ui';

 const StyledResetReactflowStyles = styled.div`
  height: 100%;
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasEditableEffect.tsx
@ -1,10 +1,10 @@
+import { useCallback, useContext } from 'react';
+import { useRecoilValue, useSetRecoilState } from 'recoil';
+
 import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
 import { commandMenuNavigationStackState } from '@/command-menu/states/commandMenuNavigationStackState';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/workflow-diagram/constants/EmptyTriggerStepId';
 import { useStartNodeCreation } from '@/workflow/workflow-diagram/hooks/useStartNodeCreation';
@ -16,28 +16,19 @@ import {
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
 import { isCreateStepNode } from '@/workflow/workflow-diagram/utils/isCreateStepNode';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
-import { useLingui } from '@lingui/react/macro';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
-import { useCallback, useContext } from 'react';
-import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
-import { IconBolt, useIcons } from 'twenty-ui';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';
+import { useIcons } from 'twenty-ui';

 export const WorkflowDiagramCanvasEditableEffect = () => {
-  const { t } = useLingui();
  const { getIcon } = useIcons();
  const { startNodeCreation } = useStartNodeCreation();

-  const { openRightDrawer, closeRightDrawer } = useRightDrawer();
  const {
    openWorkflowTriggerTypeInCommandMenu,
    openWorkflowEditStepInCommandMenu,
  } = useCommandMenu();

-  const setHotkeyScope = useSetHotkeyScope();
-
  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);

  const setCommandMenuNavigationStack = useSetRecoilState(
@ -48,36 +39,21 @@ export const WorkflowDiagramCanvasEditableEffect = () => {

  const workflowId = useRecoilValue(workflowIdState);

-  const isCommandMenuV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCommandMenuV2Enabled,
-  );
-
  const handleSelectionChange = useCallback(
    ({ nodes }: OnSelectionChangeParams) => {
      const selectedNode = nodes[0] as WorkflowDiagramNode;
-      const isClosingStep = isDefined(selectedNode) === false;

      if (!isInRightDrawer) {
        setCommandMenuNavigationStack([]);
      }

-      if (isClosingStep) {
-        closeRightDrawer();
-        return;
-      }
-
      const isEmptyTriggerNode = selectedNode.type === EMPTY_TRIGGER_STEP_ID;
      if (isEmptyTriggerNode) {
-        if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+        if (isDefined(workflowId)) {
          openWorkflowTriggerTypeInCommandMenu(workflowId);
          return;
        }

-        openRightDrawer(RightDrawerPages.WorkflowStepSelectTriggerType, {
-          title: t`Trigger Type`,
-          Icon: IconBolt,
-        });
-
        return;
      }

@ -91,7 +67,7 @@ export const WorkflowDiagramCanvasEditableEffect = () => {

      setWorkflowSelectedNode(selectedNode.id);

-      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+      if (isDefined(workflowId)) {
        openWorkflowEditStepInCommandMenu(
          workflowId,
          selectedNodeData.name,
@ -100,27 +76,16 @@ export const WorkflowDiagramCanvasEditableEffect = () => {

        return;
      }
-
-      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-      openRightDrawer(RightDrawerPages.WorkflowStepEdit, {
-        title: selectedNodeData.name,
-        Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)),
-      });
    },
    [
      isInRightDrawer,
-      isCommandMenuV2Enabled,
      setCommandMenuNavigationStack,
-      closeRightDrawer,
      workflowId,
-      openRightDrawer,
-      t,
      openWorkflowTriggerTypeInCommandMenu,
      startNodeCreation,
      openWorkflowEditStepInCommandMenu,
      getIcon,
      setWorkflowSelectedNode,
-      setHotkeyScope,
    ],
  );

--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasReadonlyEffect.tsx
@ -1,10 +1,5 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
-import { EMPTY_TRIGGER_STEP_ID } from '@/workflow/workflow-diagram/constants/EmptyTriggerStepId';
 import { useTriggerNodeSelection } from '@/workflow/workflow-diagram/hooks/useTriggerNodeSelection';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
 import {
@ -12,64 +7,40 @@ import {
  WorkflowDiagramStepNodeData,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWorkflowNodeIconKey';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { useIcons } from 'twenty-ui';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';

 export const WorkflowDiagramCanvasReadonlyEffect = () => {
  const { getIcon } = useIcons();
-  const { openRightDrawer, closeRightDrawer } = useRightDrawer();
  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
-  const setHotkeyScope = useSetHotkeyScope();
  const { openWorkflowViewStepInCommandMenu } = useCommandMenu();
-  const isCommandMenuV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCommandMenuV2Enabled,
-  );

  const workflowId = useRecoilValue(workflowIdState);

  const handleSelectionChange = useCallback(
    ({ nodes }: OnSelectionChangeParams) => {
      const selectedNode = nodes[0] as WorkflowDiagramNode;
-      const isClosingStep = isDefined(selectedNode) === false;
-
-      if (isClosingStep || selectedNode.type === EMPTY_TRIGGER_STEP_ID) {
-        closeRightDrawer();
-        return;
-      }

      setWorkflowSelectedNode(selectedNode.id);
-      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });

      const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData;

-      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+      if (isDefined(workflowId)) {
        openWorkflowViewStepInCommandMenu(
          workflowId,
          selectedNodeData.name,
          getIcon(getWorkflowNodeIconKey(selectedNodeData)),
        );
-        return;
      }
-
-      openRightDrawer(RightDrawerPages.WorkflowStepView, {
-        title: selectedNodeData.name,
-        Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)),
-      });
    },
    [
      setWorkflowSelectedNode,
-      setHotkeyScope,
-      isCommandMenuV2Enabled,
-      closeRightDrawer,
      openWorkflowViewStepInCommandMenu,
      workflowId,
      getIcon,
-      openRightDrawer,
    ],
  );

--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramCanvasEffect.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowRunDiagramCanvasEffect.tsx
@ -1,9 +1,5 @@
 import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
 import { useTabListStates } from '@/ui/layout/tab/hooks/internal/useTabListStates';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
 import { workflowIdState } from '@/workflow/states/workflowIdState';
 import { workflowSelectedNodeState } from '@/workflow/workflow-diagram/states/workflowSelectedNodeState';
@ -15,23 +11,16 @@ import { getWorkflowNodeIconKey } from '@/workflow/workflow-diagram/utils/getWor
 import { WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/constants/WorkflowRunStepSidePanelTabListComponentId';
 import { WorkflowRunTabId } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
 import { TRIGGER_STEP_ID } from '@/workflow/workflow-trigger/constants/TriggerStepId';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { OnSelectionChangeParams, useOnSelectionChange } from '@xyflow/react';
 import { useCallback } from 'react';
 import { useRecoilCallback, useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared';
 import { useIcons } from 'twenty-ui';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';

 export const WorkflowRunDiagramCanvasEffect = () => {
  const { getIcon } = useIcons();
-  const { openRightDrawer, closeRightDrawer } = useRightDrawer();
  const setWorkflowSelectedNode = useSetRecoilState(workflowSelectedNodeState);
-  const setHotkeyScope = useSetHotkeyScope();
  const { openWorkflowViewRunStepInCommandMenu } = useCommandMenu();
-  const isCommandMenuV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCommandMenuV2Enabled,
-  );

  const workflowId = useRecoilValue(workflowIdState);

@ -61,15 +50,8 @@ export const WorkflowRunDiagramCanvasEffect = () => {
  const handleSelectionChange = useCallback(
    ({ nodes }: OnSelectionChangeParams) => {
      const selectedNode = nodes[0] as WorkflowDiagramNode;
-      const isClosingStep = isDefined(selectedNode) === false;
-
-      if (isClosingStep) {
-        closeRightDrawer();
-        return;
-      }

      setWorkflowSelectedNode(selectedNode.id);
-      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });

      const selectedNodeData = selectedNode.data as WorkflowDiagramStepNodeData;

@ -81,29 +63,18 @@ export const WorkflowRunDiagramCanvasEffect = () => {
        goBackToFirstWorkflowRunRightDrawerTabIfNeeded();
      }

-      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+      if (isDefined(workflowId)) {
        openWorkflowViewRunStepInCommandMenu(
          workflowId,
          selectedNodeData.name,
          getIcon(getWorkflowNodeIconKey(selectedNodeData)),
        );
-
-        return;
      }
-
-      openRightDrawer(RightDrawerPages.WorkflowRunStepView, {
-        title: selectedNodeData.name,
-        Icon: getIcon(getWorkflowNodeIconKey(selectedNodeData)),
-      });
    },
    [
      setWorkflowSelectedNode,
-      setHotkeyScope,
-      isCommandMenuV2Enabled,
      workflowId,
-      openRightDrawer,
      getIcon,
-      closeRightDrawer,
      goBackToFirstWorkflowRunRightDrawerTabIfNeeded,
      openWorkflowViewRunStepInCommandMenu,
    ],
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useRightDrawerState.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useRightDrawerState.ts
@ -1,24 +1,12 @@
 import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState';
 import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
-import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
-import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
-import { RightDrawerAnimationVariant } from '@/ui/layout/right-drawer/types/RightDrawerAnimationVariant';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useRecoilValue } from 'recoil';
 import { useIsMobile } from 'twenty-ui';
-import { FeatureFlagKey } from '~/generated/graphql';

 export const useRightDrawerState = (): {
-  rightDrawerState: RightDrawerAnimationVariant | CommandMenuAnimationVariant;
+  rightDrawerState: CommandMenuAnimationVariant;
 } => {
-  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
-  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
  const isMobile = useIsMobile();
-
-  const isCommandMenuV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCommandMenuV2Enabled,
-  );
-
  const isCommandMenuOpened = useRecoilValue(isCommandMenuOpenedState);

  if (isMobile) {
@ -27,17 +15,7 @@ export const useRightDrawerState = (): {
    };
  }

-  if (isCommandMenuV2Enabled) {
-    return {
-      rightDrawerState: isCommandMenuOpened ? 'normal' : 'closed',
-    };
-  }
-
  return {
-    rightDrawerState: !isRightDrawerOpen
-      ? 'closed'
-      : isRightDrawerMinimized
-        ? 'minimized'
-        : 'normal',
+    rightDrawerState: isCommandMenuOpened ? 'normal' : 'closed',
  };
 };
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/hooks/useStartNodeCreation.ts
@ -1,31 +1,19 @@
-import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
-import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
-import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
-import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
-import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { workflowIdState } from '@/workflow/states/workflowIdState';
-import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState';
-import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { useCallback } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+
+import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
+import { workflowIdState } from '@/workflow/states/workflowIdState';
+import { workflowCreateStepFromParentStepIdState } from '@/workflow/workflow-steps/states/workflowCreateStepFromParentStepIdState';
 import { isDefined } from 'twenty-shared';
-import { IconSettingsAutomation } from 'twenty-ui';
-import { FeatureFlagKey } from '~/generated-metadata/graphql';

 export const useStartNodeCreation = () => {
-  const { openRightDrawer } = useRightDrawer();
  const setWorkflowCreateStepFromParentStepId = useSetRecoilState(
    workflowCreateStepFromParentStepIdState,
  );
-  const setHotkeyScope = useSetHotkeyScope();
  const { openWorkflowActionInCommandMenu } = useCommandMenu();

  const workflowId = useRecoilValue(workflowIdState);

-  const isCommandMenuV2Enabled = useIsFeatureEnabled(
-    FeatureFlagKey.IsCommandMenuV2Enabled,
-  );
-
  /**
   * This function is used in a context where dependencies shouldn't change much.
   * That's why its wrapped in a `useCallback` hook. Removing memoization might break the app unexpectedly.
@ -34,24 +22,15 @@ export const useStartNodeCreation = () => {
    (parentNodeId: string) => {
      setWorkflowCreateStepFromParentStepId(parentNodeId);

-      if (isCommandMenuV2Enabled && isDefined(workflowId)) {
+      if (isDefined(workflowId)) {
        openWorkflowActionInCommandMenu(workflowId);
        return;
      }
-
-      setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
-      openRightDrawer(RightDrawerPages.WorkflowStepSelectAction, {
-        title: 'Select Action',
-        Icon: IconSettingsAutomation,
-      });
    },
    [
      setWorkflowCreateStepFromParentStepId,
-      isCommandMenuV2Enabled,
-      openWorkflowActionInCommandMenu,
      workflowId,
-      setHotkeyScope,
-      openRightDrawer,
+      openWorkflowActionInCommandMenu,
    ],
  );