fix(designer): Update Existing Input Parameters For Subsequent Action…

…s Once Dynamic Data is Fetched (#4215)

Update operationMetadataSlice and tokens utils

libs/designer/src/lib/core/state/operation/operationMetadataSlice.ts

@@ -3,9 +3,11 @@ import type { Settings } from '../../actions/bjsworkflow/settings';
 import type { NodeStaticResults } from '../../actions/bjsworkflow/staticresults';
 import { StaticResultOption } from '../../actions/bjsworkflow/staticresults';
 import type { RepetitionContext } from '../../utils/parameters/helper';
+import { isTokenValueSegment } from '../../utils/parameters/segment';
+import { normalizeKey } from '../../utils/tokens';
 import { resetNodesLoadStatus, resetWorkflowState } from '../global';
 import { LogEntryLevel, LoggerService } from '@microsoft/designer-client-services-logic-apps';
-import type { ParameterInfo } from '@microsoft/designer-ui';
+import type { ParameterInfo, Token } from '@microsoft/designer-ui';
 import type { FilePickerInfo, InputParameter, OutputParameter, SwaggerParser } from '@microsoft/parsers-logic-apps';
 import { getRecordEntry, type OpenAPIV2, type OperationInfo } from '@microsoft/utils-logic-apps';
 import { createSlice } from '@reduxjs/toolkit';
@@ -171,6 +173,10 @@ interface AddDynamicOutputsPayload {
   outputs: Record<string, OutputInfo>;
 }
 
+interface updateExisitingInputTokenTitlesPayload {
+  tokenTitles: Record<string, string>;
+}
+
 interface AddDynamicInputsPayload {
   nodeId: string;
   groupId: string;
@@ -298,6 +304,26 @@ export const operationMetadataSlice = createSlice({
       const nodeErrors = getRecordEntry(state.errors, nodeId);
       delete nodeErrors?.[ErrorLevel.DynamicOutputs];
     },
+    updateExisitingInputTokenTitles: (state, action: PayloadAction<updateExisitingInputTokenTitlesPayload>) => {
+      const { tokenTitles } = action.payload;
+
+      Object.entries(state.inputParameters).forEach(([nodeId, nodeInputs]) => {
+        Object.entries(nodeInputs.parameterGroups).forEach(([parameterId, parameterGroup]) => {
+          parameterGroup.parameters.forEach((parameter, parameterIndex) => {
+            parameter.value.forEach((segment, segmentIndex) => {
+              if (isTokenValueSegment(segment) && segment.token?.key) {
+                const normalizedKey = normalizeKey(segment.token.key);
+                if (normalizedKey in tokenTitles) {
+                  (
+                    state.inputParameters[nodeId].parameterGroups[parameterId].parameters[parameterIndex].value[segmentIndex].token as Token
+                  ).title = tokenTitles[normalizedKey];
+                }
+              }
+            });
+          });
+        });
+      });
+    },
     updateNodeSettings: (state, action: PayloadAction<AddSettingsPayload>) => {
       const { id, settings } = action.payload;
       const nodeSettings = getRecordEntry(state.settings, id);
@@ -473,6 +499,7 @@ export const {
   updateStaticResults,
   updateParameterConditionalVisibility,
   updateParameterValidation,
+  updateExisitingInputTokenTitles,
   removeParameterValidationError,
   updateOutputs,
   updateActionMetadata,

libs/designer/src/lib/core/utils/outputs.ts

@@ -5,7 +5,13 @@ import type { Settings } from '../actions/bjsworkflow/settings';
 import { getConnectorWithSwagger } from '../queries/connections';
 import { getOperationManifest } from '../queries/operation';
 import type { DependencyInfo, NodeInputs, NodeOperation, NodeOutputs, OutputInfo } from '../state/operation/operationMetadataSlice';
-import { ErrorLevel, updateErrorDetails, clearDynamicOutputs, addDynamicOutputs } from '../state/operation/operationMetadataSlice';
+import {
+  ErrorLevel,
+  updateErrorDetails,
+  clearDynamicOutputs,
+  addDynamicOutputs,
+  updateExisitingInputTokenTitles,
+} from '../state/operation/operationMetadataSlice';
 import { addDynamicTokens } from '../state/tokens/tokensSlice';
 import type { WorkflowKind } from '../state/workflow/workflowInterfaces';
 import type { WorkflowParameterDefinition } from '../state/workflowparameters/workflowparametersSlice';
@@ -18,7 +24,7 @@ import {
   getTokenExpressionMethodFromKey,
   isDynamicDataReadyToLoad,
 } from './parameters/helper';
-import { convertOutputsToTokens } from './tokens';
+import { convertOutputsToTokens, getTokenTitle } from './tokens';
 import { OperationManifestService } from '@microsoft/designer-client-services-logic-apps';
 import { generateSchemaFromJsonString, ValueSegmentType } from '@microsoft/designer-ui';
 import { getIntl } from '@microsoft/intl-logic-apps';
@@ -485,13 +491,17 @@ export const loadDynamicOutputsInNode = async (
             schemaOutputs = updateOutputsForBatchingTrigger(schemaOutputs, settings.splitOn?.value?.value);
           }
 
+          const dynamicOutputTitles: Record<string, string> = {};
           const dynamicOutputs = Object.keys(schemaOutputs).reduce((result: Record<string, OutputInfo>, outputKey: string) => {
             const outputInfo = toOutputInfo(schemaOutputs[outputKey]);
+            dynamicOutputTitles[outputInfo.key] = getTokenTitle(outputInfo);
             return { ...result, [outputInfo.key]: outputInfo };
           }, {});
 
           dispatch(addDynamicOutputs({ nodeId, outputs: dynamicOutputs }));
 
+          dispatch(updateExisitingInputTokenTitles({ tokenTitles: dynamicOutputTitles }));
+
           let iconUri: string, brandColor: string;
           if (OperationManifestService().isSupported(operationInfo.type, operationInfo.kind)) {
             const manifest = await getOperationManifest(operationInfo);

libs/designer/src/lib/core/utils/tokens.ts

@@ -227,7 +227,7 @@ export const getOutputTokenSections = (
       label: getIntl().formatMessage({ description: 'Heading section for Variable tokens', defaultMessage: 'Variables' }),
       tokens: getVariableTokens(variables, nodeTokens).map((token) => ({
         ...token,
-        value: rewriteValueId(token.outputInfo.actionName ?? '', getExpressionValueForOutputToken(token, nodeType) ?? '', replacementIds),
+        value: getTokenValue(token, nodeType, replacementIds),
       })),
     });
 
@@ -240,7 +240,7 @@ export const getOutputTokenSections = (
       tokens = tokens.map((token) => {
         return {
           ...token,
-          value: rewriteValueId(token.outputInfo.actionName ?? '', getExpressionValueForOutputToken(token, nodeType) ?? '', replacementIds),
+          value: getTokenValue(token, nodeType, replacementIds),
         };
       });
 
@@ -262,7 +262,7 @@ export const getOutputTokenSections = (
       currentTokens = currentTokens.map((token) => {
         return {
           ...token,
-          value: rewriteValueId(token.outputInfo.actionName ?? '', getExpressionValueForOutputToken(token, nodeType) ?? '', replacementIds),
+          value: getTokenValue(token, nodeType, replacementIds),
         };
       });
 
@@ -412,13 +412,13 @@ const convertTokenToValueSegment = (token: OutputToken, nodeType: string, replac
         }
       : undefined,
     schema,
-    value: rewriteValueId(token.outputInfo.actionName ?? '', getExpressionValueForOutputToken(token, nodeType) ?? '', replacementIds),
+    value: getTokenValue(token, nodeType, replacementIds),
   };
 
   return createTokenValueSegment(segmentToken, segmentToken.value as string, format);
 };
 
-const getTokenTitle = (output: OutputInfo): string => {
+export const getTokenTitle = (output: OutputInfo): string => {
   if (output.title) {
     return output.title;
   }
@@ -472,9 +472,18 @@ export const convertWorkflowParameterTypeToSwaggerType = (type: string | undefin
   }
 };
 
+export const normalizeKey = (key: string): string => {
+  return key.startsWith('outputs.$.body.') ? key.replace('outputs.$.body.', 'body.$.') : key;
+};
+
+export const getTokenValue = (token: OutputToken, nodeType: string, replacementIds: Record<string, string>): string => {
+  return rewriteValueId(token.outputInfo.actionName ?? '', getExpressionValueForOutputToken(token, nodeType) ?? '', replacementIds);
+};
+
 const rewriteValueId = (id: string, value: string, replacementIds: Record<string, string>): string => {
   return value.replaceAll(id, getRecordEntry(replacementIds, id) ?? id);
 };
+
 const getListCallbackUrlToken = (nodeId: string): TokenGroup => {
   const callbackUrlToken: OutputToken = {
     brandColor: httpWebhookBrandColor,