Update workflow nodes configuration (#6861)

- Improve the design of the right drawer
- Allow to update the trigger of the workflow: the object and the event
listened to
- Allow to update the selected serverless function that a code action
should execute
- Change how we determine which workflow version to display in the
visualizer. We fetch the selected workflow's data, including whether it
has a draft or a published version. If the workflow has a draft version,
it gets displayed; otherwise, we display the last published version.
- I used the type `WorkflowWithCurrentVersion` to forward the currently
edited workflow with its _current_ version embedded across the app.
- I created single-responsibility hooks like
`useFindWorkflowWithCurrentVersion`, `useFindShowPageWorkflow`,
`useUpdateWorkflowVersionTrigger` or `useUpdateWorkflowVersionStep`.
- I updated the types for workflow related objects, like `Workflow` and
`WorkflowVersion`. See
`packages/twenty-front/src/modules/workflow/types/Workflow.ts`.
- This introduced the possibility to have `null` values for triggers and
steps. I made the according changes in the codebase and in the tests.
- I created a utility function to extract both parts of object-event
format (`company.created`):
`packages/twenty-front/src/modules/workflow/utils/splitWorkflowTriggerEventName.ts`

packages/twenty-front/src/modules/workflow/components/RightDrawerWorkflowSelectActionContent.tsx

@@ -1,19 +1,9 @@
-import { TabList } from '@/ui/layout/tab/components/TabList';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
-import { useRightDrawerWorkflowSelectAction } from '@/workflow/hooks/useRightDrawerWorkflowSelectAction';
-import { Workflow } from '@/workflow/types/Workflow';
+import { ACTIONS } from '@/workflow/constants/Actions';
+import { useCreateStep } from '@/workflow/hooks/useCreateStep';
+import { WorkflowWithCurrentVersion } from '@/workflow/types/Workflow';
 import styled from '@emotion/styled';
 
-// FIXME: copy-pasted
-const StyledTabListContainer = styled.div`
-  align-items: center;
-  border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
-  box-sizing: border-box;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  height: 40px;
-`;
-
 const StyledActionListContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -24,33 +14,24 @@ const StyledActionListContainer = styled.div`
   padding-inline: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const TAB_LIST_COMPONENT_ID =
-  'workflow-select-action-page-right-tab-list';
-
 export const RightDrawerWorkflowSelectActionContent = ({
   workflow,
 }: {
-  workflow: Workflow;
+  workflow: WorkflowWithCurrentVersion;
 }) => {
-  const tabListId = `${TAB_LIST_COMPONENT_ID}`;
-
-  const { tabs, options, handleActionClick } =
-    useRightDrawerWorkflowSelectAction({ tabListId, workflow });
+  const { createStep } = useCreateStep({
+    workflow,
+  });
 
   return (
     <>
-      <StyledTabListContainer>
-        <TabList loading={false} tabListId={tabListId} tabs={tabs} />
-      </StyledTabListContainer>
-
       <StyledActionListContainer>
-        {options.map((option) => (
+        {ACTIONS.map((action) => (
           <MenuItem
-            key={option.id}
-            LeftIcon={option.icon}
-            text={option.name}
+            LeftIcon={action.icon}
+            text={action.label}
             onClick={() => {
-              handleActionClick(option.id);
+              return createStep(action.type);
             }}
           />
         ))}