chore: use step name in suggestions popover

Author: kevinkim-ogp

packages/frontend/src/components/RichTextEditor/index.tsx

@@ -113,12 +113,13 @@ const Editor = ({
   autoFocus = false,
 }: EditorProps) => {
   const { priorExecutionSteps } = useContext(StepExecutionsContext)
+  const { allApps } = useContext(EditorContext)
   const isMobile = useIsMobile()
   const isMulticol = parentType === 'multicol'
 
   const [stepsWithVariables, varInfo] = useMemo(() => {
     const stepsWithVars = filterVariables(
-      extractVariables(priorExecutionSteps),
+      extractVariables(priorExecutionSteps, allApps),
       (variable) => {
         const variableType = variable.type ?? 'text'
         if (variableTypes) {
@@ -130,7 +131,7 @@ const Editor = ({
     )
     const info = genVariableInfoMap(stepsWithVars)
     return [stepsWithVars, info]
-  }, [priorExecutionSteps, variableTypes])
+  }, [allApps, priorExecutionSteps, variableTypes])
 
   const extensions: Array<any> = [
     Placeholder.configure({

packages/frontend/src/helpers/variables.ts

@@ -1,13 +1,17 @@
 import type {
+  IAction,
+  IApp,
   IDataOutMetadata,
   IDataOutMetadatum,
   IExecutionStep,
+  ITrigger,
   TDataOutMetadatumType,
 } from '@plumber/types'
 
 import get from 'lodash.get'
 
 import { RawColumn, RawRow } from '@/components/VariablesList/utils'
+import { TOOLBOX_ACTIONS, TOOLBOX_APP_KEY } from '@/helpers/toolbox'
 
 // these are the variable types to display on the frontend (make visible)
 export const VISIBLE_VARIABLE_TYPES: TDataOutMetadatumType[] = [
@@ -44,6 +48,40 @@ export interface Variable {
   isHidden?: boolean
 }
 
+function getStepName(executionStep: IExecutionStep, allApps: IApp[]) {
+  const { appKey, key, step } = executionStep
+
+  const isTrigger = ['formsg', 'webhook', 'scheduler'].includes(appKey)
+  const isIfThen = appKey === TOOLBOX_APP_KEY && key === TOOLBOX_ACTIONS.IfThen
+  const app = allApps?.find((a: IApp) => a.key === appKey)
+  const actionsOrTriggers: Array<ITrigger | IAction> =
+    (isTrigger ? app?.triggers : app?.actions) || []
+
+  const selectedActionOrTrigger = actionsOrTriggers.find(
+    (actionOrTrigger: IAction | ITrigger) => actionOrTrigger.key === key,
+  )
+
+  let caption = ''
+  const defaultCaption = selectedActionOrTrigger?.name
+  if (step?.config?.stepName) {
+    caption = `${step.config.stepName}`
+  } else if (defaultCaption) {
+    caption = defaultCaption
+
+    if (isIfThen) {
+      caption = 'Condition'
+    }
+  } else if (app?.name) {
+    caption = app.name
+  }
+
+  return (
+    step?.config?.stepName ||
+    caption ||
+    (appKey || '').charAt(0)?.toUpperCase() + appKey?.slice(1)
+  )
+}
+
 function sortVariables(variables: Variable[]): void {
   variables.sort((a, b) => {
     // Put vars with null order last, but preserve ordering (via `sort`'s
@@ -198,6 +236,7 @@ const process = (
 
 export function extractVariables(
   executionSteps: IExecutionStep[],
+  allApps?: IApp[],
 ): StepWithVariables[] {
   if (!executionSteps) {
     return []
@@ -218,15 +257,12 @@ export function extractVariables(
           metadata,
           '',
         )
+        const stepName = getStepName(executionStep, allApps || [])
         // sort variable by order key in-place
         sortVariables(variables)
         return {
           id: executionStep.stepId,
-          name: `${executionStep.step.position}. ${
-            executionStep.step?.config?.stepName ||
-            (executionStep.appKey || '').charAt(0)?.toUpperCase() +
-              executionStep.appKey?.slice(1)
-          }`,
+          name: `${executionStep.step.position}. ${stepName}`,
           output: variables,
         }
       })