Workflow runs in side panel (#11669)

Vidéo explicative : https://share.cleanshot.com/VsvWknlW

Closes https://github.com/twentyhq/core-team-issues/issues/810
Closes https://github.com/twentyhq/core-team-issues/issues/806

Known issues to fix later:

- https://github.com/twentyhq/core-team-issues/issues/879

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuCloseAnimationCompleteCleanup.ts

@@ -19,7 +19,6 @@ import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectab
 import { getShowPageTabListComponentId } from '@/ui/layout/show-page/utils/getShowPageTabListComponentId';
 import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/constants/WorkflowRunStepSidePanelTabListComponentId';
 import { WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/workflow-actions/code-action/constants/WorkflowServerlessFunctionTabListComponentId';
 import { WorkflowServerlessFunctionTabId } from '@/workflow/workflow-steps/workflow-actions/code-action/types/WorkflowServerlessFunctionTabId';
 import { useRecoilCallback } from 'recoil';
@@ -61,12 +60,6 @@ export const useCommandMenuCloseAnimationCompleteCleanup = () => {
 
         emitRightDrawerCloseEvent();
         set(isCommandMenuClosingState, false);
-        set(
-          activeTabIdComponentState.atomFamily({
-            instanceId: WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID,
-          }),
-          null,
-        );
         set(
           activeTabIdComponentState.atomFamily({
             instanceId: WORKFLOW_SERVERLESS_FUNCTION_TAB_LIST_COMPONENT_ID,

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts

@@ -11,21 +11,25 @@ import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-sto
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
 import { ContextStoreViewType } from '@/context-store/types/ContextStoreViewType';
 import { objectMetadataItemFamilySelector } from '@/object-metadata/states/objectMetadataItemFamilySelector';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { getIconColorForObjectType } from '@/object-metadata/utils/getIconColorForObjectType';
 import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
+import { useRunWorkflowRunOpeningInCommandMenuSideEffects } from '@/workflow/hooks/useRunWorkflowRunOpeningInCommandMenuSideEffects';
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { v4 } from 'uuid';
 import { capitalize } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
+import { v4 } from 'uuid';
 
 export const useOpenRecordInCommandMenu = () => {
-  const { navigateCommandMenu } = useCommandMenu();
-
   const theme = useTheme();
   const { getIcon } = useIcons();
 
+  const { navigateCommandMenu } = useCommandMenu();
+  const { runWorkflowRunOpeningInCommandMenuSideEffects } =
+    useRunWorkflowRunOpeningInCommandMenuSideEffects();
+
   const openRecordInCommandMenu = useRecoilCallback(
     ({ set, snapshot }) => {
       return ({
@@ -147,9 +151,21 @@ export const useOpenRecordInCommandMenu = () => {
           pageId: pageComponentInstanceId,
           resetNavigationStack: false,
         });
+
+        if (objectNameSingular === CoreObjectNameSingular.WorkflowRun) {
+          runWorkflowRunOpeningInCommandMenuSideEffects({
+            objectMetadataItem,
+            recordId,
+          });
+        }
       };
     },
-    [getIcon, navigateCommandMenu, theme],
+    [
+      getIcon,
+      navigateCommandMenu,
+      runWorkflowRunOpeningInCommandMenuSideEffects,
+      theme,
+    ],
   );
 
   return {

packages/twenty-front/src/modules/command-menu/hooks/useWorkflowCommandMenu.ts

@@ -1,17 +1,21 @@
 import { useNavigateCommandMenu } from '@/command-menu/hooks/useNavigateCommandMenu';
 import { workflowIdComponentState } from '@/command-menu/pages/workflow/states/workflowIdComponentState';
 import { CommandMenuPages } from '@/command-menu/types/CommandMenuPages';
+import { useSetInitialWorkflowRunRightDrawerTab } from '@/workflow/workflow-diagram/hooks/useSetInitialWorkflowRunRightDrawerTab';
+import { WorkflowDiagramRunStatus } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { v4 } from 'uuid';
 import {
   IconBolt,
   IconComponent,
   IconSettingsAutomation,
 } from 'twenty-ui/display';
+import { v4 } from 'uuid';
 
 export const useWorkflowCommandMenu = () => {
   const { navigateCommandMenu } = useNavigateCommandMenu();
+  const { setInitialWorkflowRunRightDrawerTab } =
+    useSetInitialWorkflowRunRightDrawerTab();
 
   const openWorkflowTriggerTypeInCommandMenu = useRecoilCallback(
     ({ set }) => {
@@ -99,7 +103,19 @@ export const useWorkflowCommandMenu = () => {
 
   const openWorkflowRunViewStepInCommandMenu = useRecoilCallback(
     ({ set }) => {
-      return (workflowId: string, title: string, icon: IconComponent) => {
+      return ({
+        workflowId,
+        title,
+        icon,
+        workflowSelectedNode,
+        stepExecutionStatus,
+      }: {
+        workflowId: string;
+        title: string;
+        icon: IconComponent;
+        workflowSelectedNode: string;
+        stepExecutionStatus: WorkflowDiagramRunStatus;
+      }) => {
         const pageId = v4();
 
         set(
@@ -113,9 +129,14 @@ export const useWorkflowCommandMenu = () => {
           pageIcon: icon,
           pageId,
         });
+
+        setInitialWorkflowRunRightDrawerTab({
+          workflowSelectedNode,
+          stepExecutionStatus,
+        });
       };
     },
-    [navigateCommandMenu],
+    [navigateCommandMenu, setInitialWorkflowRunRightDrawerTab],
   );
 
   return {

packages/twenty-front/src/modules/command-menu/pages/workflow/step/view-run/components/CommandMenuWorkflowRunViewStep.tsx

@@ -1,7 +1,9 @@
 import { getIsInputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsInputTabDisabled';
 import { getIsOutputTabDisabled } from '@/command-menu/pages/workflow/step/view-run/utils/getIsOutputTabDisabled';
+import { CommandMenuPageComponentInstanceContext } from '@/command-menu/states/contexts/CommandMenuPageComponentInstanceContext';
 import { SingleTabProps, TabList } from '@/ui/layout/tab/components/TabList';
 import { activeTabIdComponentState } from '@/ui/layout/tab/states/activeTabIdComponentState';
+import { useComponentInstanceStateContext } from '@/ui/utilities/state/component-state/hooks/useComponentInstanceStateContext';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useFlowOrThrow } from '@/workflow/hooks/useFlowOrThrow';
 import { useWorkflowRun } from '@/workflow/hooks/useWorkflowRun';
@@ -11,13 +13,13 @@ import { useWorkflowSelectedNodeOrThrow } from '@/workflow/workflow-diagram/hook
 import { WorkflowRunStepInputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepInputDetail';
 import { WorkflowRunStepNodeDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepNodeDetail';
 import { WorkflowRunStepOutputDetail } from '@/workflow/workflow-steps/components/WorkflowRunStepOutputDetail';
-import { WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID } from '@/workflow/workflow-steps/constants/WorkflowRunStepSidePanelTabListComponentId';
 import {
   WorkflowRunTabId,
   WorkflowRunTabIdType,
 } from '@/workflow/workflow-steps/types/WorkflowRunTabId';
 import { getWorkflowRunStepExecutionStatus } from '@/workflow/workflow-steps/utils/getWorkflowRunStepExecutionStatus';
 import styled from '@emotion/styled';
+import { isNull } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
 import { IconLogin2, IconLogout, IconStepInto } from 'twenty-ui/display';
 
@@ -41,9 +43,18 @@ export const CommandMenuWorkflowRunViewStep = () => {
 
   const workflowRun = useWorkflowRun({ workflowRunId });
 
+  const commandMenuPageComponentInstance = useComponentInstanceStateContext(
+    CommandMenuPageComponentInstanceContext,
+  );
+  if (isNull(commandMenuPageComponentInstance)) {
+    throw new Error(
+      'CommandMenuPageComponentInstanceContext is not defined. This component should be used within CommandMenuPageComponentInstanceContext.',
+    );
+  }
+
   const activeTabId = useRecoilComponentValueV2(
     activeTabIdComponentState,
-    WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID,
+    commandMenuPageComponentInstance.instanceId,
   );
 
   if (!isDefined(workflowRun)) {
@@ -90,9 +101,7 @@ export const CommandMenuWorkflowRunViewStep = () => {
         <StyledTabList
           tabs={tabs}
           behaveAsLinks={false}
-          componentInstanceId={
-            WORKFLOW_RUN_STEP_SIDE_PANEL_TAB_LIST_COMPONENT_ID
-          }
+          componentInstanceId={commandMenuPageComponentInstance.instanceId}
         />
 
         {activeTabId === WorkflowRunTabId.OUTPUT ? (