feat: display specific action types in workflow side panel tooltips

packages/twenty-front/src/modules/command-menu/components/SidePanelHeader.tsx

@@ -3,7 +3,7 @@ import { TitleInput } from '@/ui/input/components/TitleInput';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { type IconComponent } from 'twenty-ui/display';
+import { AppTooltip, type IconComponent } from 'twenty-ui/display';
 
 const StyledHeader = styled.div`
   background-color: ${({ theme }) => theme.background.secondary};
@@ -52,6 +52,7 @@ type SidePanelHeaderProps = {
   iconColor: string;
   initialTitle: string;
   headerType: string;
+  iconTooltip?: string;
 } & (
   | {
       disabled: true;
@@ -70,6 +71,7 @@ export const SidePanelHeader = ({
   headerType,
   disabled,
   onTitleChange,
+  iconTooltip,
 }: SidePanelHeaderProps) => {
   const theme = useTheme();
 
@@ -89,15 +91,24 @@ export const SidePanelHeader = ({
     });
   };
 
+  const tooltipId = `side-panel-icon-tooltip-${headerType.replace(/\s+/g, '-')}`;
+
   return (
     <StyledHeader data-testid="side-panel-header">
-      <StyledHeaderIconContainer>
+      <StyledHeaderIconContainer id={tooltipId}>
         <Icon
           color={iconColor}
           stroke={theme.icon.stroke.sm}
           size={theme.icon.size.lg}
         />
       </StyledHeaderIconContainer>
+      {iconTooltip && (
+        <AppTooltip
+          anchorSelect={`#${tooltipId}`}
+          content={iconTooltip}
+          place="top"
+        />
+      )}
       <StyledHeaderInfo>
         <StyledHeaderTitle>
           <TitleInput

packages/twenty-front/src/modules/command-menu/pages/workflow/action/components/WorkflowActionMenuItems.tsx

@@ -4,7 +4,11 @@ import { useTheme } from '@emotion/react';
 import { useIcons } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
 
-type Action = { type: WorkflowActionType; label: string; icon: string };
+type Action = {
+  defaultLabel: string;
+  type: WorkflowActionType;
+  icon: string;
+};
 
 export const WorkflowActionMenuItems = ({
   actions,
@@ -34,7 +38,7 @@ export const WorkflowActionMenuItems = ({
                 size={16}
               />
             )}
-            text={action.label}
+            text={action.defaultLabel}
             onClick={() => onClick(action.type)}
           />
         );

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/ai-agent-action/components/WorkflowEditActionAiAgent.tsx

@@ -6,6 +6,7 @@ import { Select } from '@/ui/input/components/Select';
 import { type WorkflowAiAgentAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
+import { AI_AGENT_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/AiAgentAction';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { type AiAgentOutputSchema } from '@/workflow/workflow-variables/types/AiAgentOutputSchema';
@@ -44,7 +45,7 @@ export const WorkflowEditActionAiAgent = ({
   const { headerTitle, headerIcon, headerIconColor, headerType } =
     useWorkflowActionHeader({
       action,
-      defaultTitle: 'AI Agent',
+      defaultTitle: AI_AGENT_ACTION.defaultLabel,
     });
 
   const { handleOutputSchemaChange, outputFields } = useAiAgentOutputSchema(
@@ -111,6 +112,7 @@ export const WorkflowEditActionAiAgent = ({
         initialTitle={headerTitle}
         headerType={headerType}
         disabled={actionOptions.readonly}
+        iconTooltip={AI_AGENT_ACTION.defaultLabel}
       />
       <WorkflowStepBody>
         <div>

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx

@@ -40,6 +40,7 @@ import { useLingui } from '@lingui/react/macro';
 import { SOURCE_FOLDER_NAME } from '@/serverless-functions/constants/SourceFolderName';
 import { computeNewSources } from '@/serverless-functions/utils/computeNewSources';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
+import { CODE_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/CodeAction';
 import { type Monaco } from '@monaco-editor/react';
 import { type editor } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
@@ -326,7 +327,7 @@ export const WorkflowEditActionServerlessFunction = ({
 
   const headerTitle = isDefined(action.name)
     ? action.name
-    : 'Code - Serverless Function';
+    : CODE_ACTION.defaultLabel;
   const headerIcon = getActionIcon(action.type);
   const headerIconColor = useActionIconColorOrThrow(action.type);
   const headerType = useActionHeaderTypeOrThrow(action.type);
@@ -431,6 +432,7 @@ export const WorkflowEditActionServerlessFunction = ({
           initialTitle={headerTitle}
           headerType={headerType}
           disabled={actionOptions.readonly}
+          iconTooltip={CODE_ACTION.defaultLabel}
         />
         <WorkflowStepBody>
           {activeTabId === WorkflowServerlessFunctionTabId.CODE && (

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionCreateRecord.tsx

@@ -10,6 +10,7 @@ import { useViewOrDefaultViewFromPrefetchedViews } from '@/views/hooks/useViewOr
 import { type WorkflowCreateRecordAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
+import { CREATE_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/CreateRecordAction';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { shouldDisplayFormField } from '@/workflow/workflow-steps/workflow-actions/utils/shouldDisplayFormField';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
@@ -198,7 +199,7 @@ export const WorkflowEditActionCreateRecord = ({
   const { headerTitle, headerIcon, headerIconColor, headerType } =
     useWorkflowActionHeader({
       action,
-      defaultTitle: 'Create Record',
+      defaultTitle: CREATE_RECORD_ACTION.defaultLabel,
     });
 
   return (
@@ -219,6 +220,7 @@ export const WorkflowEditActionCreateRecord = ({
         initialTitle={headerTitle}
         headerType={headerType}
         disabled={isFormDisabled}
+        iconTooltip={CREATE_RECORD_ACTION.defaultLabel}
       />
       <WorkflowStepBody>
         <Select

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionDeleteRecord.tsx

@@ -8,6 +8,7 @@ import { useEffect, useState } from 'react';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
+import { DELETE_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/DeleteRecordAction';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
@@ -118,7 +119,7 @@ export const WorkflowEditActionDeleteRecord = ({
   const { headerTitle, headerIcon, headerIconColor, headerType } =
     useWorkflowActionHeader({
       action,
-      defaultTitle: 'Delete Record',
+      defaultTitle: DELETE_RECORD_ACTION.defaultLabel,
     });
 
   return (
@@ -139,6 +140,7 @@ export const WorkflowEditActionDeleteRecord = ({
         initialTitle={headerTitle}
         headerType={headerType}
         disabled={isFormDisabled}
+        iconTooltip={DELETE_RECORD_ACTION.defaultLabel}
       />
       <WorkflowStepBody>
         <Select

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx

@@ -19,6 +19,7 @@ import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/wo
 import { type WorkflowSendEmailAction } from '@/workflow/types/Workflow';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
+import { SEND_EMAIL_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/SendEmailAction';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
@@ -246,7 +247,7 @@ export const WorkflowEditActionSendEmail = ({
   const { headerTitle, headerIcon, headerIconColor, headerType } =
     useWorkflowActionHeader({
       action,
-      defaultTitle: 'Send Email',
+      defaultTitle: SEND_EMAIL_ACTION.defaultLabel,
     });
 
   const navigate = useNavigateSettings();
@@ -272,6 +273,7 @@ export const WorkflowEditActionSendEmail = ({
           initialTitle={headerTitle}
           headerType={headerType}
           disabled={actionOptions.readonly}
+          iconTooltip={SEND_EMAIL_ACTION.defaultLabel}
         />
         <WorkflowStepBody>
           <Select

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpdateRecord.tsx

@@ -3,6 +3,7 @@ import { type WorkflowUpdateRecordAction } from '@/workflow/types/Workflow';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
 import { WorkflowUpdateRecordBody } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowUpdateRecordBody';
 
+import { UPDATE_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/UpdateRecordAction';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { type UpdateRecordFormData } from '@/workflow/workflow-steps/workflow-actions/types/update-record-form-data.type';
 import { useIcons } from 'twenty-ui/display';
@@ -26,7 +27,7 @@ export const WorkflowEditActionUpdateRecord = ({
   const { headerTitle, headerIcon, headerIconColor, headerType } =
     useWorkflowActionHeader({
       action,
-      defaultTitle: 'Update Record',
+      defaultTitle: UPDATE_RECORD_ACTION.defaultLabel,
     });
 
   const { getIcon } = useIcons();
@@ -70,6 +71,7 @@ export const WorkflowEditActionUpdateRecord = ({
         initialTitle={headerTitle}
         headerType={headerType}
         disabled={isFormDisabled}
+        iconTooltip={UPDATE_RECORD_ACTION.defaultLabel}
       />
       <WorkflowUpdateRecordBody
         defaultObjectNameSingular={action.settings.input.objectName}

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionUpsertRecord.tsx

@@ -3,6 +3,7 @@ import { type WorkflowUpsertRecordAction } from '@/workflow/types/Workflow';
 import { WorkflowStepFooter } from '@/workflow/workflow-steps/components/WorkflowStepFooter';
 import { WorkflowUpdateRecordBody } from '@/workflow/workflow-steps/workflow-actions/components/WorkflowUpdateRecordBody';
 
+import { UPSERT_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/UpsertRecordAction';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { type UpdateRecordFormData } from '@/workflow/workflow-steps/workflow-actions/types/update-record-form-data.type';
 import { useIcons } from 'twenty-ui/display';
@@ -26,7 +27,7 @@ export const WorkflowEditActionUpsertRecord = ({
   const { headerTitle, headerIcon, headerIconColor, headerType } =
     useWorkflowActionHeader({
       action,
-      defaultTitle: 'Create or Update Record',
+      defaultTitle: UPSERT_RECORD_ACTION.defaultLabel,
     });
 
   const { getIcon } = useIcons();
@@ -69,6 +70,7 @@ export const WorkflowEditActionUpsertRecord = ({
         initialTitle={headerTitle}
         headerType={headerType}
         disabled={isFormDisabled}
+        iconTooltip={UPSERT_RECORD_ACTION.defaultLabel}
       />
       <WorkflowUpdateRecordBody
         defaultObjectNameSingular={action.settings.input.objectName}

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/AiActions.ts

@@ -1,13 +1,8 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { AI_AGENT_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/AiAgentAction';
 
 export const AI_ACTIONS: Array<{
-  label: string;
+  defaultLabel: string;
   type: Extract<WorkflowActionType, 'AI_AGENT'>;
   icon: string;
-}> = [
-  {
-    label: 'AI Agent',
-    type: 'AI_AGENT',
-    icon: 'IconBrain',
-  },
-];
+}> = [AI_AGENT_ACTION];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/CoreActions.ts

@@ -1,23 +1,10 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { CODE_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/CodeAction';
+import { HTTP_REQUEST_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/HttpRequestAction';
+import { SEND_EMAIL_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/SendEmailAction';
 
 export const CORE_ACTIONS: Array<{
-  label: string;
+  defaultLabel: string;
   type: Extract<WorkflowActionType, 'CODE' | 'SEND_EMAIL' | 'HTTP_REQUEST'>;
   icon: string;
-}> = [
-  {
-    label: 'Send Email',
-    type: 'SEND_EMAIL',
-    icon: 'IconSend',
-  },
-  {
-    label: 'Code',
-    type: 'CODE',
-    icon: 'IconCode',
-  },
-  {
-    label: 'HTTP Request',
-    type: 'HTTP_REQUEST',
-    icon: 'IconWorld',
-  },
-];
+}> = [SEND_EMAIL_ACTION, CODE_ACTION, HTTP_REQUEST_ACTION];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/FlowActions.ts

@@ -1,23 +1,10 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { DELAY_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/DelayAction';
+import { FILTER_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/FilterAction';
+import { ITERATOR_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/IteratorAction';
 
 export const FLOW_ACTIONS: Array<{
-  label: string;
+  defaultLabel: string;
   type: Extract<WorkflowActionType, 'ITERATOR' | 'FILTER' | 'DELAY'>;
   icon: string;
-}> = [
-  {
-    label: 'Iterator',
-    type: 'ITERATOR',
-    icon: 'IconRepeat',
-  },
-  {
-    label: 'Filter',
-    type: 'FILTER',
-    icon: 'IconFilter',
-  },
-  {
-    label: 'Delay',
-    type: 'DELAY',
-    icon: 'IconPlayerPause',
-  },
-];
+}> = [ITERATOR_ACTION, FILTER_ACTION, DELAY_ACTION];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/HumanInputActions.ts

@@ -1,13 +1,8 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { FORM_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/FormAction';
 
 export const HUMAN_INPUT_ACTIONS: Array<{
-  label: string;
+  defaultLabel: string;
   type: Extract<WorkflowActionType, 'FORM'>;
   icon: string;
-}> = [
-  {
-    label: 'Form',
-    type: 'FORM',
-    icon: 'IconForms',
-  },
-];
+}> = [FORM_ACTION];

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/constants/RecordActions.ts

@@ -1,7 +1,12 @@
 import { type WorkflowActionType } from '@/workflow/types/Workflow';
+import { CREATE_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/CreateRecordAction';
+import { DELETE_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/DeleteRecordAction';
+import { FIND_RECORDS_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/FindRecordsAction';
+import { UPDATE_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/UpdateRecordAction';
+import { UPSERT_RECORD_ACTION } from '@/workflow/workflow-steps/workflow-actions/constants/actions/UpsertRecordAction';
 
 export const RECORD_ACTIONS: Array<{
-  label: string;
+  defaultLabel: string;
   type: Extract<
     WorkflowActionType,
     | 'CREATE_RECORD'
@@ -12,29 +17,9 @@ export const RECORD_ACTIONS: Array<{
   >;
   icon: string;
 }> = [
-  {
-    label: 'Create Record',
-    type: 'CREATE_RECORD',
-    icon: 'IconPlus',
-  },
-  {
-    label: 'Update Record',
-    type: 'UPDATE_RECORD',
-    icon: 'IconReload',
-  },
-  {
-    label: 'Delete Record',
-    type: 'DELETE_RECORD',
-    icon: 'IconTrash',
-  },
-  {
-    label: 'Search Records',
-    type: 'FIND_RECORDS',
-    icon: 'IconSearch',
-  },
-  {
-    label: 'Create or Update Record',
-    type: 'UPSERT_RECORD',
-    icon: 'IconPencilPlus',
-  },
+  CREATE_RECORD_ACTION,
+  UPDATE_RECORD_ACTION,
+  DELETE_RECORD_ACTION,
+  FIND_RECORDS_ACTION,
+  UPSERT_RECORD_ACTION,
 ];