feat(designer): Added Validation to Static Results (#4197)

* static results validation

* add 1 more validation

Localize/lang/strings.json

@@ -210,6 +210,7 @@
   "6uCEoM": "Enter a valid value for ''{parameterName}''.",
   "6ueRYm": "Start time",
   "6xRvni": "Data type",
+  "6yFUar": "Outputs are required when status is \"Succeeded\"",
   "70eoQu": "Select function from",
   "73iM9+": "Update source schema",
   "74e2xB": "Create a new connection",
@@ -289,6 +290,7 @@
   "AEguAy": "Empty value",
   "AGCm1p": "Name",
   "AHB418": "Filter Actions",
+  "ANGw2o": "Click for more information on Static Result",
   "AO6T9u": "Done",
   "AQ7Zxc": "Returns the index for a value's n-th occurrence in a string (case-insensitive, invariant culture).",
   "Af+Ve0": "(UTC+11:00) Bougainville Island",
@@ -450,6 +452,7 @@
   "H8bEUn": "Required. The number that Subtrahend is removed from.",
   "H9CZTr": "The expression is invalid. Make sure to use single quotes.",
   "HDqP2g": "Required. The key name of the form data value to return.",
+  "HGA9iU": "The Error and its code is required when status is \"Failed\"",
   "HH970i": "Month",
   "HILmmE": "Required. The collection to sort.",
   "HMiE+4": "Exit full screen",
@@ -523,6 +526,7 @@
   "LCXZLM": "Loading Function Apps...",
   "LElaX3": "Next flow suggestion",
   "LMB8am": "Creating...",
+  "LPdGu/": "Ouputs should not be provided when status is \"Failed\"",
   "LR/3Lr": "Configure",
   "LRAhSA": "When enabled, this action will run with the user from the \"Run as\" setting in the Dataverse trigger",
   "LS8rfZ": "Returns the scheme from a URI",
@@ -1112,6 +1116,7 @@
   "_6uCEoM.comment": "Invalid Pattern error message. Do not remove the double single quotes around the display name, as it is needed to wrap the placeholder text.",
   "_6ueRYm.comment": "Start time text",
   "_6xRvni.comment": "The data type of the current node.",
+  "_6yFUar.comment": "Error message for when status is succeded and outputs are not provided",
   "_70eoQu.comment": "Path to the function to select",
   "_73iM9+.comment": "Header to update source schema",
   "_74e2xB.comment": "General description for creating a new connection.",
@@ -1191,6 +1196,7 @@
   "_AEguAy.comment": "Error message on expression evaluation",
   "_AGCm1p.comment": "Header for resource name",
   "_AHB418.comment": "Filter Actions",
+  "_ANGw2o.comment": "button label to show more information on static result",
   "_AO6T9u.comment": "Done Label for button",
   "_AQ7Zxc.comment": "Label for description of custom nthIndexOf Function",
   "_Af+Ve0.comment": "Time zone value ",
@@ -1352,6 +1358,7 @@
   "_H8bEUn.comment": "Required number parameter to be minused in sub function",
   "_H9CZTr.comment": "Invalid expression due to misused double quotes",
   "_HDqP2g.comment": "Required string parameter to be used as key for triggerFormDataValue function",
+  "_HGA9iU.comment": "Error message for when status is failed and error and error code are not provided",
   "_HH970i.comment": "Frequency value ",
   "_HILmmE.comment": "Required collection parameter to apply sort function on",
   "_HMiE+4.comment": "Token picker for 'Exit full screen'",
@@ -1425,6 +1432,7 @@
   "_LCXZLM.comment": "Text for loading function apps",
   "_LElaX3.comment": "Text for button that shows the next flow suggestion",
   "_LMB8am.comment": "Button text to show a connection is being created",
+  "_LPdGu/.comment": "Error message for when status is failed and outputs are provided",
   "_LR/3Lr.comment": "Configure",
   "_LRAhSA.comment": "Description of invoker connection setting",
   "_LS8rfZ.comment": "Label for description of custom uriScheme Function",
@@ -2247,6 +2255,7 @@
   "_srpZD2.comment": "Client ID Label Display Name",
   "_ss5JPH.comment": "Heading Title for a Parameter Without Name",
   "_sv+IcU.comment": "Message to display when the data map definition can't be generated",
+  "_svaqnp.comment": "Error message for when status is succeded and error is provided",
   "_sw6EXK.comment": "The title of the status property in the static result schema",
   "_syiNc+.comment": "Browse for file",
   "_sys5gu.comment": "Authentication type",
@@ -2871,6 +2880,7 @@
   "srpZD2": "Client ID",
   "ss5JPH": "New parameter",
   "sv+IcU": "Unable to generate data map definition",
+  "svaqnp": "Error should not be provided when status is \"Succeeded\"",
   "sw6EXK": "Status",
   "syiNc+": "Browse",
   "sys5gu": "Client Certificate",

libs/designer-ui/src/lib/arrayeditor/arrayeditor.less

@@ -180,11 +180,4 @@
       font-size: @card-label-font-size;
     }
   }
-  .msla-collapsed-editor-validation {
-    width: 50%;
-    position: absolute;
-    color: rgb(224, 2, 2);
-    left: 4px;
-    font-size: 14px;
-  }
 }

libs/designer-ui/src/lib/arrayeditor/collapsedarray.tsx

@@ -69,7 +69,6 @@ export const CollapsedArray = ({
           onBlur={onBlur}
         >
           <CollapsedArrayValidation
-            className={'msla-collapsed-editor-validation'}
             itemSchema={itemSchema}
             isComplex={isComplex}
             setCollapsedValue={setCollapsedValue}

libs/designer-ui/src/lib/arrayeditor/plugins/CollapsedArrayValidation.tsx

@@ -7,7 +7,6 @@ import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import type { EditorState } from 'lexical';
 
 export interface CollapsedArrayValidationProps {
-  className?: string;
   itemSchema: ArrayItemSchema;
   isComplex: boolean;
   setIsValid: (b: boolean) => void;
@@ -16,7 +15,6 @@ export interface CollapsedArrayValidationProps {
 }
 
 export const CollapsedArrayValidation = ({
-  className,
   itemSchema,
   isComplex,
   setIsValid,
@@ -36,9 +34,5 @@ export const CollapsedArrayValidation = ({
     });
   };
 
-  return (
-    <div className={className ?? 'msla-base-editor-validation'}>
-      <OnChangePlugin ignoreSelectionChange onChange={onChange} />
-    </div>
-  );
+  return <OnChangePlugin ignoreSelectionChange onChange={onChange} />;
 };

libs/designer-ui/src/lib/dictionary/collapsedDictionary.tsx

@@ -7,7 +7,6 @@ import { CollapsedDictionaryValidation } from './plugins/CollapsedDictionaryVali
 import { useIntl } from 'react-intl';
 
 export type CollapsedDictionaryProps = {
-  isValid?: boolean;
   readonly?: boolean;
   collapsedValue: ValueSegment[];
   keyType?: string;
@@ -23,7 +22,6 @@ export type CollapsedDictionaryProps = {
 };
 
 export const CollapsedDictionary = ({
-  isValid,
   collapsedValue,
   keyType,
   valueType,
@@ -54,13 +52,10 @@ export const CollapsedDictionary = ({
           onBlur={onBlur}
         >
           <CollapsedDictionaryValidation
-            className={'msla-collapsed-editor-validation'}
-            isValid={isValid}
             setIsValid={setIsValid}
             keyType={keyType}
             valueType={valueType}
             setItems={setItems}
-            collapsedValue={collapsedValue}
             setCollapsedValue={setCollapsedValue}
           />
         </EditorWrapper>

libs/designer-ui/src/lib/dictionary/dictionaryeditor.less

@@ -143,12 +143,4 @@
       }
     }
   }
-
-  .msla-collapsed-editor-validation {
-    width: 50%;
-    position: relative;
-    color: rgb(224, 2, 2);
-    left: 4px;
-    font-size: 14px;
-  }
 }

libs/designer-ui/src/lib/dictionary/index.tsx

@@ -80,7 +80,6 @@ export const DictionaryEditor: React.FC<DictionaryEditorProps> = ({
     <div className="msla-dictionary-editor-container" data-automation-id={baseEditorProps.dataAutomationId}>
       {collapsed && !(dictionaryType === DictionaryType.TABLE) ? (
         <CollapsedDictionary
-          isValid={isValid}
           readonly={baseEditorProps.readonly}
           collapsedValue={collapsedValue}
           keyType={keyType}

libs/designer-ui/src/lib/dictionary/plugins/CollapsedDictionaryValidation.tsx

@@ -2,9 +2,8 @@ import type { DictionaryEditorItemProps } from '..';
 import type { ValueSegment } from '../../editor';
 import { ValueSegmentType } from '../../editor';
 import { serializeEditorState } from '../../editor/base/utils/editorToSegment';
-import { getChildrenNodes, showCollapsedValidation } from '../../editor/base/utils/helper';
+import { getChildrenNodes } from '../../editor/base/utils/helper';
 import { serializeDictionary } from '../util/serializecollapseddictionary';
-import { css } from '@fluentui/react';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
 import { guid } from '@microsoft/utils-logic-apps';
@@ -13,9 +12,6 @@ import { $getRoot } from 'lexical';
 import { useEffect } from 'react';
 
 export interface CollapsedDictionaryValidationProps {
-  className?: string;
-  isValid?: boolean;
-  collapsedValue?: ValueSegment[];
   keyType?: string;
   valueType?: string;
   setIsValid: (b: boolean) => void;
@@ -24,13 +20,10 @@ export interface CollapsedDictionaryValidationProps {
 }
 
 export const CollapsedDictionaryValidation = ({
-  className,
-  isValid,
   keyType,
   valueType,
   setIsValid,
   setItems,
-  collapsedValue,
   setCollapsedValue,
 }: CollapsedDictionaryValidationProps): JSX.Element => {
   const [editor] = useLexicalComposerContext();
@@ -61,14 +54,5 @@ export const CollapsedDictionaryValidation = ({
     });
   };
 
-  return (
-    <div
-      className={css(
-        className ?? 'msla-base-editor-validation',
-        isValid || (collapsedValue && showCollapsedValidation(collapsedValue)) ? 'hidden' : undefined
-      )}
-    >
-      <OnChangePlugin ignoreSelectionChange onChange={onChange} />
-    </div>
-  );
+  return <OnChangePlugin ignoreSelectionChange onChange={onChange} />;
 };

libs/designer-ui/src/lib/dropdown/index.tsx

@@ -23,6 +23,8 @@ interface DropdownEditorProps {
   label?: string;
   dataAutomationId?: string;
   onChange?: ChangeHandler;
+  // to be used if we don't want to convert result to valueSegmentArray
+  customOnChangeHandler?: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
 }
 
 export interface DropdownItem {
@@ -44,6 +46,7 @@ export const DropdownEditor = ({
   label,
   dataAutomationId,
   onChange,
+  customOnChangeHandler,
 }: DropdownEditorProps): JSX.Element => {
   const [selectedKey, setSelectedKey] = useState<string | undefined>(multiSelect ? undefined : getSelectedKey(options, initialValue));
   const [selectedKeys, setSelectedKeys] = useState<string[] | undefined>(
@@ -105,7 +108,10 @@ export const DropdownEditor = ({
         multiSelectDelimiter={serialization?.separator}
         selectedKey={selectedKey}
         selectedKeys={selectedKeys}
-        onChange={multiSelect ? handleOptionMultiSelect : handleOptionSelect}
+        onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
+          customOnChangeHandler?.(event, option);
+          multiSelect ? handleOptionMultiSelect(event, option) : handleOptionSelect(event, option);
+        }}
       />
     </div>
   );
@@ -114,14 +120,14 @@ export const DropdownEditor = ({
 const getOptions = (options: DropdownItem[]): IDropdownOption[] => {
   return [
     ...options.map((option: DropdownItem) => {
-      const { key, displayName, disabled, type } = option;
+      const { key, displayName, disabled, type, value } = option;
       switch (key) {
         case 'divider':
           return { key: key, text: displayName, itemType: SelectableOptionMenuItemType.Divider, disabled: disabled, data: type };
         case 'header':
           return { key: key, text: displayName, itemType: SelectableOptionMenuItemType.Header, data: type, disabed: disabled };
         default:
-          return { key: key, text: displayName, disabled: disabled, data: type };
+          return { key: key, text: displayName, disabled: disabled, data: type, value: value };
       }
     }),
   ];

libs/designer-ui/src/lib/staticResult/StaticResult.tsx

@@ -1,8 +1,9 @@
 import type { StaticResultRootSchemaType } from '.';
 import constants from '../constants';
 import { StaticResultProperties } from './staticResultProperties';
-import { Icon, useTheme } from '@fluentui/react';
+import { Icon, IconButton, useTheme } from '@fluentui/react';
 import type { OpenAPIV2 } from '@microsoft/utils-logic-apps';
+import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
 import { useIntl } from 'react-intl';
 
@@ -13,7 +14,7 @@ export interface StaticResultProps {
   propertiesSchema?: OpenAPIV2.SchemaObject;
   additionalPropertiesSchema?: boolean | OpenAPIV2.IJsonSchema;
   propertyValues: OpenAPIV2.SchemaObject;
-  setPropertyValues: (newPropertyValue: OpenAPIV2.SchemaObject) => void;
+  setPropertyValues: Dispatch<SetStateAction<OpenAPIV2.SchemaObject>>;
 }
 
 export const StaticResult = ({
@@ -38,6 +39,11 @@ export const StaticResult = ({
     defaultMessage: 'Collapse Static Result',
     description: 'An accessible label for collapse toggle icon',
   });
+
+  const infoButtonLabel = intl.formatMessage({
+    defaultMessage: 'Click for more information on Static Result',
+    description: 'button label to show more information on static result',
+  });
   return (
     <div className="msla-static-result-container">
       {!isRoot ? (
@@ -54,6 +60,13 @@ export const StaticResult = ({
         <div>
           <div className="msla-static-result-container-header-root">
             <div className="msla-static-result-container-header-text">{title}</div>
+            <a
+              href="https://learn.microsoft.com/en-us/azure/logic-apps/test-logic-apps-mock-data-static-results?tabs=standard"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <IconButton className="static-result-info-icon" iconProps={{ iconName: 'info' }} title={infoButtonLabel} />
+            </a>
           </div>
         </div>
       )}