8191 command k workflow trigger for selected record

packages/twenty-front/src/generated/graphql.tsx

@@ -1,5 +1,5 @@
-import * as Apollo from '@apollo/client';
 import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
@@ -1849,6 +1849,13 @@ export type DeactivateWorkflowVersionMutationVariables = Exact<{
 
 export type DeactivateWorkflowVersionMutation = { __typename?: 'Mutation', deactivateWorkflowVersion: boolean };
 
+export type RunWorkflowVersionMutationVariables = Exact<{
+  input: RunWorkflowVersionInput;
+}>;
+
+
+export type RunWorkflowVersionMutation = { __typename?: 'Mutation', runWorkflowVersion: { __typename?: 'WorkflowRun', workflowRunId: any } };
+
 export type DeleteWorkspaceInvitationMutationVariables = Exact<{
   appTokenId: Scalars['String'];
 }>;
@@ -3525,6 +3532,39 @@ export function useDeactivateWorkflowVersionMutation(baseOptions?: Apollo.Mutati
 export type DeactivateWorkflowVersionMutationHookResult = ReturnType<typeof useDeactivateWorkflowVersionMutation>;
 export type DeactivateWorkflowVersionMutationResult = Apollo.MutationResult<DeactivateWorkflowVersionMutation>;
 export type DeactivateWorkflowVersionMutationOptions = Apollo.BaseMutationOptions<DeactivateWorkflowVersionMutation, DeactivateWorkflowVersionMutationVariables>;
+export const RunWorkflowVersionDocument = gql`
+    mutation RunWorkflowVersion($input: RunWorkflowVersionInput!) {
+  runWorkflowVersion(input: $input) {
+    workflowRunId
+  }
+}
+    `;
+export type RunWorkflowVersionMutationFn = Apollo.MutationFunction<RunWorkflowVersionMutation, RunWorkflowVersionMutationVariables>;
+
+/**
+ * __useRunWorkflowVersionMutation__
+ *
+ * To run a mutation, you first call `useRunWorkflowVersionMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRunWorkflowVersionMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [runWorkflowVersionMutation, { data, loading, error }] = useRunWorkflowVersionMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
+export function useRunWorkflowVersionMutation(baseOptions?: Apollo.MutationHookOptions<RunWorkflowVersionMutation, RunWorkflowVersionMutationVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useMutation<RunWorkflowVersionMutation, RunWorkflowVersionMutationVariables>(RunWorkflowVersionDocument, options);
+      }
+export type RunWorkflowVersionMutationHookResult = ReturnType<typeof useRunWorkflowVersionMutation>;
+export type RunWorkflowVersionMutationResult = Apollo.MutationResult<RunWorkflowVersionMutation>;
+export type RunWorkflowVersionMutationOptions = Apollo.BaseMutationOptions<RunWorkflowVersionMutation, RunWorkflowVersionMutationVariables>;
 export const DeleteWorkspaceInvitationDocument = gql`
     mutation DeleteWorkspaceInvitation($appTokenId: String!) {
   deleteWorkspaceInvitation(appTokenId: $appTokenId)

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/DeleteRecordsActionEffect.tsx

@@ -97,6 +97,7 @@ export const DeleteRecordsActionEffect = ({
   useEffect(() => {
     if (canDelete) {
       addActionMenuEntry({
+        type: 'standard',
         key: 'delete',
         label: 'Delete',
         position,

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/ExportRecordsActionEffect.tsx

@@ -3,10 +3,12 @@ import {
   displayedExportProgress,
   useExportRecordData,
 } from '@/action-menu/hooks/useExportRecordData';
+import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { IconDatabaseExport } from '@tabler/icons-react';
 
 import { useEffect } from 'react';
-import { IconFileExport } from 'twenty-ui';
 
 export const ExportRecordsActionEffect = ({
   position,
@@ -16,6 +18,9 @@ export const ExportRecordsActionEffect = ({
   objectMetadataItem: ObjectMetadataItem;
 }) => {
   const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
+  const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
+    contextStoreNumberOfSelectedRecordsComponentState,
+  );
 
   const { progress, download } = useExportRecordData({
     delayMs: 100,
@@ -26,10 +31,14 @@ export const ExportRecordsActionEffect = ({
 
   useEffect(() => {
     addActionMenuEntry({
+      type: 'standard',
       key: 'export',
       position,
-      label: displayedExportProgress(progress),
-      Icon: IconFileExport,
+      label: displayedExportProgress(
+        contextStoreNumberOfSelectedRecords > 0 ? 'selection' : 'all',
+        progress,
+      ),
+      Icon: IconDatabaseExport,
       accent: 'default',
       onClick: () => download(),
     });

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/ManageFavoritesActionEffect.tsx

@@ -44,6 +44,7 @@ export const ManageFavoritesActionEffect = ({
     }
 
     addActionMenuEntry({
+      type: 'standard',
       key: 'manage-favorites',
       label: isFavorite ? 'Remove from favorites' : 'Add to favorites',
       position,

packages/twenty-front/src/modules/action-menu/actions/record-actions/components/RecordActionMenuEntriesSetter.tsx

@@ -1,19 +1,22 @@
 import { DeleteRecordsActionEffect } from '@/action-menu/actions/record-actions/components/DeleteRecordsActionEffect';
 import { ExportRecordsActionEffect } from '@/action-menu/actions/record-actions/components/ExportRecordsActionEffect';
 import { ManageFavoritesActionEffect } from '@/action-menu/actions/record-actions/components/ManageFavoritesActionEffect';
+import { WorkflowRunRecordActionEffect } from '@/action-menu/actions/record-actions/workflow-run-record-actions/components/WorkflowRunRecordActionEffect';
 import { contextStoreCurrentObjectMetadataIdComponentState } from '@/context-store/states/contextStoreCurrentObjectMetadataIdComponentState';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMetadataItemById';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
+const globalRecordActionEffects = [
+  ExportRecordsActionEffect,
+];
+
 const singleRecordActionEffects = [
   ManageFavoritesActionEffect,
-  ExportRecordsActionEffect,
   DeleteRecordsActionEffect,
 ];
 
 const multipleRecordActionEffects = [
-  ExportRecordsActionEffect,
   DeleteRecordsActionEffect,
 ];
 
@@ -36,24 +39,32 @@ export const RecordActionMenuEntriesSetter = () => {
     );
   }
 
-  if (!contextStoreNumberOfSelectedRecords) {
-    return null;
-  }
-
   const actions =
     contextStoreNumberOfSelectedRecords === 1
       ? singleRecordActionEffects
       : multipleRecordActionEffects;
 
   return (
     <>
-      {actions.map((ActionEffect, index) => (
+      {globalRecordActionEffects.map((ActionEffect, index) => (
         <ActionEffect
           key={index}
           position={index}
           objectMetadataItem={objectMetadataItem}
         />
       ))}
+      {actions.map((ActionEffect, index) => (
+        <ActionEffect
+          key={index}
+          position={globalRecordActionEffects.length + index}
+          objectMetadataItem={objectMetadataItem}
+        />
+      ))}
+      {contextStoreNumberOfSelectedRecords === 1 && (
+        <WorkflowRunRecordActionEffect
+          objectMetadataItem={objectMetadataItem}
+        />
+      )}
     </>
   );
 };

packages/twenty-front/src/modules/action-menu/actions/record-actions/workflow-run-record-actions/components/WorkflowRunRecordActionEffect.tsx

@@ -0,0 +1,98 @@
+import { useActionMenuEntries } from '@/action-menu/hooks/useActionMenuEntries';
+import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useActiveWorkflowVersionsWithTriggerRecordType } from '@/workflow/hooks/useActiveWorkflowVersionsWithTriggerRecordType';
+import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
+import { useTheme } from '@emotion/react';
+import { useEffect } from 'react';
+import { useRecoilValue } from 'recoil';
+import { IconSettingsAutomation, isDefined } from 'twenty-ui';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const WorkflowRunRecordActionEffect = ({
+  objectMetadataItem,
+}: {
+  objectMetadataItem: ObjectMetadataItem;
+}) => {
+  const { addActionMenuEntry, removeActionMenuEntry } = useActionMenuEntries();
+
+  const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
+    contextStoreTargetedRecordsRuleComponentState,
+  );
+
+  const selectedRecordId =
+    contextStoreTargetedRecordsRule.mode === 'selection'
+      ? contextStoreTargetedRecordsRule.selectedRecordIds[0]
+      : undefined;
+
+  const selectedRecord = useRecoilValue(
+    recordStoreFamilyState(selectedRecordId ?? ''),
+  );
+
+  const { records: activeWorkflowVersions } =
+    useActiveWorkflowVersionsWithTriggerRecordType({
+      objectNameSingular: objectMetadataItem.nameSingular,
+    });
+
+  const { runWorkflowVersion } = useRunWorkflowVersion();
+
+  const { enqueueSnackBar } = useSnackBar();
+
+  const theme = useTheme();
+
+  useEffect(() => {
+    if (!isDefined(objectMetadataItem) || objectMetadataItem.isRemote) {
+      return;
+    }
+
+    for (const [
+      index,
+      activeWorkflowVersion,
+    ] of activeWorkflowVersions.entries()) {
+      addActionMenuEntry({
+        type: 'workflow-run',
+        key: `workflow-run-${activeWorkflowVersion.workflow.name}`,
+        label: capitalize(activeWorkflowVersion.workflow.name),
+        position: index,
+        Icon: IconSettingsAutomation,
+        onClick: async () => {
+          if (!isDefined(selectedRecord)) {
+            return;
+          }
+
+          await runWorkflowVersion(activeWorkflowVersion.id, selectedRecord);
+
+          enqueueSnackBar(
+            '',
+            {
+              variant: SnackBarVariant.Success,
+              title: `${capitalize(activeWorkflowVersion.workflow.name)} starting...`,
+              icon: (
+                <IconSettingsAutomation size={16} color={theme.snackBar.success.color} />
+              ),
+            },
+          );
+        },
+      });
+    }
+
+    return () => {
+      for (const activeWorkflowVersion of activeWorkflowVersions) {
+        removeActionMenuEntry(
+          `workflow-run-${activeWorkflowVersion.workflow.name}`,
+        );
+      }
+    };
+  }, [
+    activeWorkflowVersions,
+    addActionMenuEntry,
+    objectMetadataItem,
+    removeActionMenuEntry,
+  ]);
+
+  return null;
+};

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBar.stories.tsx

@@ -5,6 +5,7 @@ import { RecoilRoot } from 'recoil';
 import { RecordIndexActionMenuBar } from '@/action-menu/components/RecordIndexActionMenuBar';
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { ContextStoreComponentInstanceContext } from '@/context-store/states/contexts/ContextStoreComponentInstanceContext';
 import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
 import { contextStoreTargetedRecordsRuleComponentState } from '@/context-store/states/contextStoreTargetedRecordsRuleComponentState';
@@ -40,6 +41,9 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
               }),
               3,
             );
+
+            const entryType: ActionMenuEntry['type'] = 'standard';
+
             set(
               actionMenuEntriesComponentState.atomFamily({
                 instanceId: 'story-action-menu',
@@ -48,7 +52,7 @@ const meta: Meta<typeof RecordIndexActionMenuBar> = {
                 [
                   'delete',
                   {
-                    isPinned: true,
+                    type: entryType,
                     key: 'delete',
                     label: 'Delete',
                     position: 0,

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuBarEntry.stories.tsx

@@ -21,6 +21,7 @@ const markAsDoneMock = jest.fn();
 export const Default: Story = {
   args: {
     entry: {
+      type: 'standard',
       key: 'delete',
       label: 'Delete',
       position: 0,
@@ -33,6 +34,7 @@ export const Default: Story = {
 export const WithDangerAccent: Story = {
   args: {
     entry: {
+      type: 'standard',
       key: 'delete',
       label: 'Delete',
       position: 0,
@@ -46,6 +48,7 @@ export const WithDangerAccent: Story = {
 export const WithInteraction: Story = {
   args: {
     entry: {
+      type: 'standard',
       key: 'markAsDone',
       label: 'Mark as done',
       position: 0,

packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx

@@ -7,6 +7,7 @@ import { RecordIndexActionMenuDropdown } from '@/action-menu/components/RecordIn
 import { actionMenuEntriesComponentState } from '@/action-menu/states/actionMenuEntriesComponentState';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
+import { ActionMenuEntry } from '@/action-menu/types/ActionMenuEntry';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { IconCheckbox, IconHeart, IconTrash } from 'twenty-ui';
@@ -29,6 +30,9 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
             ),
             { x: 10, y: 10 },
           );
+
+          const entryType: ActionMenuEntry['type'] = 'standard';
+
           set(
             actionMenuEntriesComponentState.atomFamily({
               instanceId: 'story-action-menu',
@@ -37,6 +41,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
               [
                 'delete',
                 {
+                  type: entryType,
                   key: 'delete',
                   label: 'Delete',
                   position: 0,
@@ -47,6 +52,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
               [
                 'markAsDone',
                 {
+                  type: entryType,
                   key: 'markAsDone',
                   label: 'Mark as done',
                   position: 1,
@@ -57,6 +63,7 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
               [
                 'addToFavorites',
                 {
+                  type: entryType,
                   key: 'addToFavorites',
                   label: 'Add to favorites',
                   position: 2,