feat(vscode): Update assertions tokens metadata

libs/designer-ui/src/lib/assertionsPanel/assertion.tsx

@@ -48,6 +48,8 @@ export interface AssertionProps {
   onAssertionDelete: AssertionDeleteHandler;
   onAssertionUpdate: AssertionUpdateHandler;
   getTokenPicker: GetAssertionTokenPickerHandler;
+  tokenMapping: Record<string, ValueSegment>;
+  loadParameterValueFromString: (value: string) => ValueSegment[];
   validationErrors?: Record<string, string | undefined>;
   isInverted: boolean;
 }
@@ -57,6 +59,8 @@ export function Assertion({
   onAssertionDelete,
   getTokenPicker,
   onAssertionUpdate,
+  tokenMapping,
+  loadParameterValueFromString,
   validationErrors,
   isInverted,
 }: AssertionProps): JSX.Element {
@@ -115,6 +119,8 @@ export function Assertion({
           isExpanded={expanded}
           getTokenPicker={getTokenPicker}
           handleUpdate={handleUpdate}
+          tokenMapping={tokenMapping}
+          loadParameterValueFromString={loadParameterValueFromString}
           validationErrors={validationErrors}
         />
       </div>

libs/designer-ui/src/lib/assertionsPanel/assertionField.tsx

@@ -50,6 +50,8 @@ export interface AssertionFieldProps {
   isExpanded: boolean;
   getTokenPicker: GetAssertionTokenPickerHandler;
   handleUpdate: (newAssertion: Assertion) => void;
+  tokenMapping: Record<string, ValueSegment>;
+  loadParameterValueFromString: (value: string) => ValueSegment[];
   validationErrors?: Record<string, string | undefined>;
 }
 
@@ -64,6 +66,8 @@ export const AssertionField = ({
   isExpanded,
   getTokenPicker,
   handleUpdate,
+  tokenMapping,
+  loadParameterValueFromString,
   validationErrors,
 }: AssertionFieldProps): JSX.Element => {
   const intl = useIntl();
@@ -185,8 +189,8 @@ export const AssertionField = ({
                 labelId="condition-label"
                 tokenEditor={true}
                 value={[]}
-                tokenMapping={{}}
-                // errorDetails={{message:  ?? ''}}
+                tokenMapping={tokenMapping}
+                loadParameterValueFromString={loadParameterValueFromString}
                 getTokenPicker={(
                   editorId: string,
                   labelId: string,

libs/designer-ui/src/lib/assertionsPanel/assertions.tsx

@@ -1,3 +1,4 @@
+import type { ValueSegment } from '../editor';
 import { isHighContrastBlack } from '../utils';
 import {
   type AssertionUpdateHandler,
@@ -23,6 +24,8 @@ export interface AssertionsProps {
   onAssertionUpdate: AssertionUpdateHandler;
   onAssertionDelete: AssertionDeleteHandler;
   getTokenPicker: GetAssertionTokenPickerHandler;
+  tokenMapping: Record<string, ValueSegment>;
+  loadParameterValueFromString: (value: string) => ValueSegment[];
   validationErrors?: Record<string, Record<string, string | undefined>>;
 }
 
@@ -33,6 +36,8 @@ export function Assertions({
   onAssertionUpdate,
   onAssertionDelete,
   getTokenPicker,
+  tokenMapping,
+  loadParameterValueFromString,
   validationErrors,
 }: AssertionsProps): JSX.Element {
   const intl = useIntl();
@@ -73,6 +78,8 @@ export function Assertions({
         onAssertionDelete={onAssertionDelete}
         onAssertionUpdate={onAssertionUpdate}
         getTokenPicker={getTokenPicker}
+        tokenMapping={tokenMapping}
+        loadParameterValueFromString={loadParameterValueFromString}
         validationErrors={parameterErrors}
         isInverted={isInverted}
       />

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

@@ -0,0 +1,59 @@
+import { type ValueSegment, ValueSegmentType, GroupType, type GroupItems } from '@microsoft/designer-ui';
+import { type AssertionDefintion, clone } from '@microsoft/utils-logic-apps';
+
+/**
+ * Loads token metadata for the given operand using the provided token mapping.
+ * @param {ValueSegment[]} operand - The operand to load token metadata for.
+ * @param {Record<string, ValueSegment>} tokenMapping - The mapping of tokens to their corresponding metadata.
+ * @returns The operand with updated token metadata.
+ */
+const loadTokenMetaData = (operand: ValueSegment[], tokenMapping: Record<string, ValueSegment>) => {
+  return operand.map((segment: ValueSegment) => {
+    if (segment.type === ValueSegmentType.TOKEN && tokenMapping[segment.value]) {
+      const newToken = { ...segment.token, ...tokenMapping[segment.value].token };
+      return { ...segment, token: newToken };
+    }
+    return segment;
+  }) as ValueSegment[];
+};
+
+/**
+ * Recursively applies assertions to the items in a group.
+ * @param {GroupItems} items - The group items to apply assertions to.
+ * @param {Record<string, ValueSegment>} tokenMapping - The mapping of tokens to their corresponding values.
+ * @returns The updated group items with assertions applied.
+ */
+const recurseAssertions = (items: GroupItems, tokenMapping: Record<string, ValueSegment>): GroupItems => {
+  const newItems = clone(items);
+  if (newItems.type === GroupType.GROUP) {
+    newItems.items = newItems.items.map((item) => {
+      return recurseAssertions(item, tokenMapping);
+    });
+    return newItems;
+  } else {
+    newItems.operand1 = loadTokenMetaData(newItems.operand1, tokenMapping);
+    newItems.operand2 = loadTokenMetaData(newItems.operand2, tokenMapping);
+    return newItems;
+  }
+};
+
+/**
+ * Updates the token metadata in the assertions object.
+ * @param {Record<string, ValueSegment>} tokenMapping - The mapping of tokens to their corresponding value segments.
+ * @param {Record<string, AssertionDefintion>} assertions - The assertions object to update.
+ * @returns The updated assertions object.
+ */
+export const updateTokenMetadataInAssertions = (
+  tokenMapping: Record<string, ValueSegment>,
+  assertions: Record<string, AssertionDefintion>
+) => {
+  const updatedAssertions = clone(assertions);
+  Object.keys(updatedAssertions).forEach((assertionKey) => {
+    const { items } = updatedAssertions[assertionKey].expression;
+    if (items) {
+      updatedAssertions[assertionKey].expression.items = recurseAssertions(items, tokenMapping);
+    }
+  });
+
+  return updatedAssertions;
+};

libs/designer/src/lib/ui/panel/assertionsPanel/assertionsPanel.tsx

@@ -4,12 +4,14 @@ import type { VariableDeclaration } from '../../../core/state/tokens/tokensSlice
 import { useAssertions, useAssertionsValidationErrors } from '../../../core/state/unitTest/unitTestSelectors';
 import { updateAssertions, updateAssertion } from '../../../core/state/unitTest/unitTestSlice';
 import type { AppDispatch, RootState } from '../../../core/store';
+import { updateTokenMetadataInAssertions } from '../../../core/utils/assertions';
 import {
   VariableBrandColor,
   VariableIcon,
   generateExpressionFromKey,
   getTokenExpressionMethodFromKey,
   getTokenValueFromToken,
+  loadParameterValueFromString,
   toConditionViewModel,
 } from '../../../core/utils/parameters/helper';
 import { type TokenGroup, getExpressionTokenSections } from '../../../core/utils/tokens';
@@ -28,8 +30,8 @@ import {
   ValueSegmentType,
 } from '@microsoft/designer-ui';
 import { getIntl } from '@microsoft/intl-logic-apps';
-import { guid, type AssertionDefintion, aggregate, getPropertyValue, labelCase } from '@microsoft/utils-logic-apps';
-import { useCallback, useMemo, useState } from 'react';
+import { guid, type AssertionDefintion, aggregate, getPropertyValue, labelCase, isNullOrEmpty } from '@microsoft/utils-logic-apps';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 const getVariableTokens = (variables: Record<string, VariableDeclaration[]>): OutputToken[] => {
@@ -180,13 +182,13 @@ const getTokenPicker = (
 
 export const AssertionsPanel = (props: CommonPanelProps) => {
   const workflowAssertions = useAssertions();
-  const [assertions, setAssertions] = useState<Record<string, AssertionDefintion>>(workflowAssertions);
+  const [assertions, setAssertions] = useState<Record<string, AssertionDefintion>>({});
   const assertionsValidationErrors = useAssertionsValidationErrors();
 
   const dispatch = useDispatch<AppDispatch>();
+  const [tokenMapping, setTokenMapping] = useState<Record<string, ValueSegment>>({});
 
   const tokens = useTokens();
-
   const onClose = () => {
     props.toggleCollapse?.();
   };
@@ -225,6 +227,29 @@ export const AssertionsPanel = (props: CommonPanelProps) => {
     dispatch(updateAssertions({ assertions: newAssertions }));
   };
 
+  useEffect(() => {
+    if (!isNullOrEmpty(tokenMapping)) {
+      setAssertions(updateTokenMetadataInAssertions(tokenMapping, workflowAssertions));
+    }
+  }, [tokenMapping, workflowAssertions]);
+
+  useEffect(() => {
+    const callback = async () => {
+      const mapping: Record<string, ValueSegment> = {};
+      for (const group of [...tokens.outputTokensWithValues, ...tokens.variableTokens]) {
+        for (const token of group.tokens) {
+          if (!token.value) {
+            continue;
+          }
+          mapping[token.value] = await getValueSegmentFromToken(token);
+        }
+      }
+      setTokenMapping(mapping);
+    };
+
+    callback();
+  }, [tokens]);
+
   const onGetTokenPicker = useCallback(
     (
       editorId: string,
@@ -256,6 +281,8 @@ export const AssertionsPanel = (props: CommonPanelProps) => {
       onAssertionDelete={onAssertionDelete}
       onAssertionUpdate={onAssertionUpdate}
       getTokenPicker={onGetTokenPicker}
+      tokenMapping={tokenMapping}
+      loadParameterValueFromString={(value: string) => loadParameterValueFromString(value)}
       validationErrors={assertionsValidationErrors}
     />
   );