Refactor action metadata logic to centralize in flows-utils and replace redundant implementations

Author: Roman Snapko

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

@@ -32,11 +32,10 @@ import {
   FlowRunStatus,
   FlowVersion,
   isNil,
-  RiskLevel,
   TriggerType,
 } from '@openops/shared';
 
-import { getActionMetadata } from '@/app/features/flows/components/execute-risky-flow-dialog/utils';
+import { flowsHooks } from '@/app/features/flows/lib/flows-hooks';
 import { ShieldHalf } from 'lucide-react';
 import { CanvasContextMenu } from '../context-menu/canvas-context-menu';
 import { CollapsibleButton } from './collapsible-button';
@@ -130,26 +129,11 @@ 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,
-        blockName,
-        actionName,
-      );
-
-      return actionMetadata?.riskLevel === RiskLevel.HIGH;
-    }, [
+    const isRiskyStep = flowsHooks.useIsRiskyAction(
       actionsMetadata,
-      data.step?.settings.actionName,
       data.step?.settings.blockName,
-    ]);
+      data.step?.settings.actionName,
+    );
 
     const showRunningIcon =
       isNil(stepOutputStatus) && run?.status === FlowRunStatus.RUNNING;

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

@@ -1,29 +1,9 @@
-import { ActionBase } from '@openops/blocks-framework';
-import {
-  BlockStepMetadataWithSuggestions,
-  StepMetadataWithSuggestions,
-} from '@openops/components/ui';
+import { StepMetadataWithSuggestions } from '@openops/components/ui';
 import { Action, ActionType, RiskLevel, Trigger } from '@openops/shared';
+import { flowsUtils } from '@/app/features/flows/lib/flows-utils';
 
 type ActionOrTriggerWithIndex = (Action | Trigger) & { index: number };
 
-export const getActionMetadata = (
-  metadata: StepMetadataWithSuggestions[] | undefined,
-  blockName: string,
-  actionName: string | undefined,
-): ActionBase | undefined => {
-  const blockStepMetadata = metadata?.find(
-    (stepMetadata: StepMetadataWithSuggestions) =>
-      stepMetadata.type === ActionType.BLOCK &&
-      (stepMetadata as BlockStepMetadataWithSuggestions).blockName ===
-        blockName,
-  ) as BlockStepMetadataWithSuggestions | undefined;
-
-  return blockStepMetadata?.suggestedActions?.find(
-    (suggestedAction) => suggestedAction.name === actionName,
-  );
-};
-
 export const getRiskyActionFormattedNames = (
   allSteps: (Action | Trigger)[],
   metadata: StepMetadataWithSuggestions[] | undefined,
@@ -35,7 +15,7 @@ export const getRiskyActionFormattedNames = (
     .map((action) => {
       return {
         action,
-        metadata: getActionMetadata(
+        metadata: flowsUtils.getActionMetadata(
           metadata,
           action.settings.blockName,
           action.settings.actionName,

packages/react-ui/src/app/features/flows/lib/flows-hooks.ts

@@ -1,10 +1,15 @@
-import { INTERNAL_ERROR_TOAST, toast } from '@openops/components/ui';
-import { ListFlowsRequest, PopulatedFlow } from '@openops/shared';
+import {
+  INTERNAL_ERROR_TOAST,
+  StepMetadataWithSuggestions,
+  toast,
+} from '@openops/components/ui';
+import { ListFlowsRequest, PopulatedFlow, RiskLevel } from '@openops/shared';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { t } from 'i18next';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { NavigateFunction } from 'react-router-dom';
 
+import { flowsUtils } from '@/app/features/flows/lib/flows-utils';
 import { flowsApi } from './flows-api';
 
 import { userSettingsHooks } from '@/app/common/hooks/user-settings-hooks';
@@ -65,6 +70,22 @@ export const flowsHooks = {
       setSearchTerm,
     };
   },
+  useIsRiskyAction: (
+    metadata: StepMetadataWithSuggestions[] | undefined,
+
+    blockName: string | undefined,
+    actionName: string | undefined,
+  ) => {
+    return useMemo(() => {
+      if (!metadata || !blockName || !actionName) return false;
+      const actionMetadata = flowsUtils.getActionMetadata(
+        metadata,
+        blockName,
+        actionName,
+      );
+      return actionMetadata?.riskLevel === RiskLevel.HIGH;
+    }, [metadata, blockName, actionName]);
+  },
   useCreateFlow: (navigate: NavigateFunction) => {
     const { updateHomePageOperationalViewFlag } =
       userSettingsHooks.useHomePageOperationalView();

packages/react-ui/src/app/features/flows/lib/flows-utils.tsx

@@ -1,8 +1,13 @@
+import { ActionBase } from '@openops/blocks-framework';
+import {
+  BlockStepMetadataWithSuggestions,
+  StepMetadataWithSuggestions,
+} from '@openops/components/ui';
 import cronstrue from 'cronstrue/i18n';
 import { t } from 'i18next';
 import { TimerReset, TriangleAlert, Zap } from 'lucide-react';
 
-import { Flow, FlowVersion, TriggerType } from '@openops/shared';
+import { ActionType, Flow, FlowVersion, TriggerType } from '@openops/shared';
 
 import { flowsApi } from './flows-api';
 
@@ -29,8 +34,26 @@ const downloadFlow = async (flowId: string, versionId: string) => {
   downloadFile(JSON.stringify(template, null, 2), template.name, 'json');
 };
 
+const getActionMetadata = (
+  metadata: StepMetadataWithSuggestions[] | undefined,
+  blockName: string,
+  actionName: string | undefined,
+): ActionBase | undefined => {
+  const blockStepMetadata = metadata?.find(
+    (stepMetadata: StepMetadataWithSuggestions) =>
+      stepMetadata.type === ActionType.BLOCK &&
+      (stepMetadata as BlockStepMetadataWithSuggestions).blockName ===
+        blockName,
+  ) as BlockStepMetadataWithSuggestions | undefined;
+
+  return blockStepMetadata?.suggestedActions?.find(
+    (suggestedAction) => suggestedAction.name === actionName,
+  );
+};
+
 export const flowsUtils = {
   downloadFlow,
+  getActionMetadata,
   flowStatusToolTipRenderer: (flow: Flow, version: FlowVersion) => {
     const trigger = version.trigger;
     switch (trigger.type) {