Create a running variant for workflow diagram nodes (#10857)

- Add all the missing adaptive colors
- Create a running variant for the workflow diagram nodes
- Make the `<Loader />` be precisely `24px` large

## Demo



https://github.com/user-attachments/assets/cc9ef259-30dd-445d-b167-af35b4f9c4cc



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

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeBase.tsx

@@ -10,7 +10,7 @@ import styled from '@emotion/styled';
 import { Handle, Position } from '@xyflow/react';
 import React from 'react';
 import { capitalize, isDefined } from 'twenty-shared';
-import { Label, OverflowingTextWithTooltip } from 'twenty-ui';
+import { Label, Loader, OverflowingTextWithTooltip } from 'twenty-ui';
 
 const StyledStepNodeContainer = styled.div`
   display: flex;
@@ -24,6 +24,12 @@ const StyledStepNodeType = styled.div<{
 }>`
   ${({ nodeVariant, theme }) => {
     switch (nodeVariant) {
+      case 'running': {
+        return css`
+          background-color: ${theme.tag.background.yellow};
+          color: ${theme.tag.text.yellow};
+        `;
+      }
       case 'success': {
         return css`
           background-color: ${theme.tag.background.turquoise};
@@ -102,6 +108,12 @@ const StyledStepNodeInnerContainer = styled.div<{
     & {
     ${({ theme, variant }) => {
       switch (variant) {
+        case 'running': {
+          return css`
+            background: ${theme.adaptiveColors.yellow1};
+            border-color: ${theme.adaptiveColors.yellow4};
+          `;
+        }
         case 'success': {
           return css`
             background: ${theme.adaptiveColors.turquoise1};
@@ -128,6 +140,7 @@ const StyledStepNodeInnerContainer = styled.div<{
 const StyledStepNodeLabel = styled.div<{
   variant: WorkflowDiagramNodeVariant;
 }>`
+  box-sizing: border-box;
   align-items: center;
   display: flex;
   font-size: 13px;
@@ -143,6 +156,7 @@ const StyledStepNodeLabel = styled.div<{
     }
   }};
   max-width: 200px;
+  height: 24px;
 
   .selectable:is(.selected, :focus, :focus-visible) & {
     color: ${({ theme }) => theme.font.color.primary};
@@ -201,7 +215,7 @@ export const WorkflowDiagramStepNodeBase = ({
 
       <StyledStepNodeInnerContainer variant={variant}>
         <StyledStepNodeLabel variant={variant}>
-          {Icon}
+          {variant === 'running' ? <Loader /> : Icon}
 
           <OverflowingTextWithTooltip text={name} />
         </StyledStepNodeLabel>

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramStepNodeReadonly.tsx

@@ -4,17 +4,18 @@ import {
   WorkflowDiagramRunStatus,
   WorkflowDiagramStepNodeData,
 } from '@/workflow/workflow-diagram/types/WorkflowDiagram';
+import { WorkflowDiagramNodeVariant } from '@/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant';
 
 const getNodeVariantFromRunStatus = (
   runStatus: WorkflowDiagramRunStatus | undefined,
-) => {
+): WorkflowDiagramNodeVariant => {
   switch (runStatus) {
     case 'success':
       return 'success';
     case 'failure':
       return 'failure';
     case 'running':
-      return 'default';
+      return 'running';
     case 'not-executed':
       return 'not-executed';
     default:

packages/twenty-front/src/modules/workflow/workflow-diagram/components/__stories__/WorkflowDiagramStepNodeEditableContent.stories.tsx

@@ -101,6 +101,7 @@ export const Catalog: CatalogStory<Story, typeof Wrapper> = {
           values: [
             'empty',
             'default',
+            'running',
             'success',
             'failure',
             'not-executed',

packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagramNodeVariant.ts

@@ -2,5 +2,6 @@ export type WorkflowDiagramNodeVariant =
   | 'default'
   | 'success'
   | 'failure'
+  | 'running'
   | 'empty'
   | 'not-executed';