Add visual indicator for sensitive actions

Author: Roman Snapko

packages/react-ui/src/app/features/builder/flow-canvas/nodes/step-node.tsx

@@ -32,9 +32,12 @@ import {
   FlowRunStatus,
   FlowVersion,
   isNil,
+  RiskLevel,
   TriggerType,
 } from '@openops/shared';
 
+import { getActionMetadata } from '@/app/features/flows/components/execute-risky-flow-dialog/utils';
+import { ShieldHalf } from 'lucide-react';
 import { CanvasContextMenu } from '../context-menu/canvas-context-menu';
 import { CollapsibleButton } from './collapsible-button';
 import { StackedNodeLayers } from './stacked-node-layer';
@@ -86,6 +89,11 @@ const WorkflowStepNode = React.memo(
       step: data.step!,
     });
 
+    const { metadata: actionsMetadata } = blocksHooks.useAllStepsMetadata({
+      searchQuery: '',
+      type: 'action',
+    });
+
     const stepIndex = useMemo(() => {
       const steps = flowHelper.getAllSteps(flowVersion.trigger);
       return steps.findIndex((step) => step.name === data.step!.name) + 1;
@@ -122,6 +130,27 @@ const WorkflowStepNode = React.memo(
       return getStepStatus(data.step?.name, run, loopIndexes, flowVersion);
     }, [data.step?.name, run, loopIndexes, flowVersion]);
 
+    const isRiskyStep = useMemo(() => {
+      const actionName = data.step?.settings.actionName;
+      const blockName = data.step?.settings.blockName;
+
+      if (!actionsMetadata || !actionName || !blockName) {
+        return false;
+      }
+
+      const actionMetadata = getActionMetadata(
+        actionsMetadata,
+        data.step?.settings.blockName,
+        data.step?.settings.actionName,
+      );
+
+      return actionMetadata?.riskLevel === RiskLevel.HIGH;
+    }, [
+      actionsMetadata,
+      data.step?.settings.actionName,
+      data.step?.settings.blockName,
+    ]);
+
     const showRunningIcon =
       isNil(stepOutputStatus) && run?.status === FlowRunStatus.RUNNING;
     const statusInfo = isNil(stepOutputStatus)
@@ -247,15 +276,49 @@ const WorkflowStepNode = React.memo(
                       </div>
                     </div>
 
-                    {!readonly && (
-                      <CanvasContextMenu
-                        data={data}
-                        isAction={isAction}
-                        openStepActionsMenu={openStepActionsMenu}
-                        setOpenStepActionsMenu={setOpenStepActionsMenu}
-                        setOpenBlockSelector={setOpenBlockSelector}
-                      />
-                    )}
+                    <div className="flex items-center gap-0.5">
+                      <div className="flex items-center gap-[7px]">
+                        {!data.step?.valid && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <InvalidStepIcon
+                                size={16}
+                                viewBox="0 0 16 16"
+                                className="stroke-0 animate-fade"
+                              ></InvalidStepIcon>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom">
+                              {t('Incomplete settings')}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+
+                        {isRiskyStep && (
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <div className="size-4 flex items-center justify-center rounded-full bg-destructive-100">
+                                <ShieldHalf className="size-[10px] text-destructive-300"></ShieldHalf>
+                              </div>
+                            </TooltipTrigger>
+                            <TooltipContent side="bottom">
+                              {t(
+                                'This step may make changes to your environment',
+                              )}
+                            </TooltipContent>
+                          </Tooltip>
+                        )}
+                      </div>
+
+                      {!readonly && (
+                        <CanvasContextMenu
+                          data={data}
+                          isAction={isAction}
+                          openStepActionsMenu={openStepActionsMenu}
+                          setOpenStepActionsMenu={setOpenStepActionsMenu}
+                          setOpenBlockSelector={setOpenBlockSelector}
+                        />
+                      )}
+                    </div>
                   </div>
 
                   <div className="flex justify-between gap-[6px] w-full items-center">
@@ -276,22 +339,6 @@ const WorkflowStepNode = React.memo(
                       {showRunningIcon && (
                         <LoadingSpinner className="w-4 h-4 text-primary"></LoadingSpinner>
                       )}
-                      {!data.step?.valid && (
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <div className="mr-2">
-                              <InvalidStepIcon
-                                size={16}
-                                viewBox="0 0 16 16"
-                                className="stroke-0 animate-fade"
-                              ></InvalidStepIcon>
-                            </div>
-                          </TooltipTrigger>
-                          <TooltipContent side="bottom">
-                            {t('Incomplete settings')}
-                          </TooltipContent>
-                        </Tooltip>
-                      )}
                     </div>
                   </div>
                 </div>

packages/react-ui/src/app/features/flows/components/execute-risky-flow-dialog/utils.ts

@@ -7,7 +7,7 @@ import { Action, ActionType, RiskLevel, Trigger } from '@openops/shared';
 
 type ActionOrTriggerWithIndex = (Action | Trigger) & { index: number };
 
-const getActionMetadata = (
+export const getActionMetadata = (
   metadata: StepMetadataWithSuggestions[] | undefined,
   blockName: string,
   actionName: string | undefined,