fix(desinger): made utfLength Expressions optional based on host opti…

…ons (#4231)

* made utfexpressions optional

* comments

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

@@ -3,7 +3,7 @@ import { ValueSegmentType } from '../editor';
 import type { BaseEditorProps } from '../editor/base';
 import TokenPickerButtonLegacy from '../editor/base/plugins/TokenPickerButtonLegacy';
 import type { EditorContentChangedEventArgs, EditorLanguage } from '../editor/monaco';
-import { MonacoEditor as Editor } from '../editor/monaco';
+import { MonacoEditor } from '../editor/monaco';
 import { useId } from '../useId';
 import { buildInlineCodeTextFromToken, getEditorHeight, getInitialValue } from './util';
 import { useFunctionalState } from '@react-hookz/web';
@@ -91,7 +91,7 @@ export function CodeEditor({
 
   return (
     <div className="msla-code-editor-body" id={editorId}>
-      <Editor
+      <MonacoEditor
         label={getLabel(label)}
         ref={codeEditorRef}
         height={editorHeight}

libs/designer-ui/src/lib/editor/monaco/index.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@fluentui/react';
 import Editor, { loader } from '@monaco-editor/react';
 import type { IScrollEvent, editor } from 'monaco-editor';
 import type { MutableRefObject } from 'react';
-import { useState, useEffect, forwardRef, useRef } from 'react';
+import { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
 
 export interface EditorContentChangedEventArgs extends editor.IModelContentChangedEvent {
   value?: string;
@@ -60,6 +60,7 @@ export interface MonacoOptions {
   lineHeight?: number;
   minimapEnabled?: boolean;
   scrollBeyondLastLine?: boolean;
+  hideUTFExpressions?: boolean;
   wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded';
   wordWrapColumn?: number;
   contextMenu?: boolean;
@@ -82,6 +83,7 @@ export const MonacoEditor = forwardRef<editor.IStandaloneCodeEditor, MonacoProps
       minimapEnabled = false,
       value,
       scrollBeyondLastLine = false,
+      hideUTFExpressions,
       height,
       width,
       lineNumbersMinChars,
@@ -115,21 +117,21 @@ export const MonacoEditor = forwardRef<editor.IStandaloneCodeEditor, MonacoProps
     const [canRender, setCanRender] = useState(false);
     const currentRef = useRef<editor.IStandaloneCodeEditor>();
 
-    const initTemplateLanguage = async () => {
+    const initTemplateLanguage = useCallback(async () => {
       const { languages, editor } = await loader.init();
       if (!languages.getLanguages().some((lang: any) => lang.id === Constants.LANGUAGE_NAMES.WORKFLOW)) {
-        registerWorkflowLanguageProviders(languages, editor);
+        registerWorkflowLanguageProviders(languages, editor, hideUTFExpressions);
       }
       setCanRender(true);
-    };
+    }, [hideUTFExpressions]);
 
     useEffect(() => {
       if (language === EditorLanguage.templateExpressionLanguage) {
         initTemplateLanguage();
       } else {
         setCanRender(true);
       }
-    }, [language]);
+    }, [initTemplateLanguage, language]);
 
     const handleContextMenu = (e: editor.IEditorMouseEvent) => {
       onContextMenu?.(e);

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

@@ -1,4 +1,4 @@
-import { MonacoEditor as Editor, EditorLanguage } from '../editor/monaco';
+import { MonacoEditor, EditorLanguage } from '../editor/monaco';
 import type { EventHandler } from '../eventhandler';
 import { clamp } from '@microsoft/utils-logic-apps';
 import type { editor } from 'monaco-editor';
@@ -14,6 +14,7 @@ export interface ExpressionEditorEvent {
 export interface ExpressionEditorProps {
   initialValue: string;
   editorRef?: MutableRefObject<editor.IStandaloneCodeEditor | null>;
+  hideUTFExpressions?: boolean;
   isDragging: boolean;
   dragDistance?: number;
   currentHeight: number;
@@ -26,11 +27,12 @@ export interface ExpressionEditorProps {
 export function ExpressionEditor({
   initialValue,
   editorRef,
-  onBlur,
+  hideUTFExpressions,
   isDragging,
   dragDistance,
   currentHeight,
   setCurrentHeight,
+  onBlur,
   setIsDragging,
   setExpressionEditorError,
 }: ExpressionEditorProps): JSX.Element {
@@ -62,9 +64,10 @@ export function ExpressionEditor({
 
   return (
     <div className="msla-expression-editor-container" style={{ height: currentHeight }}>
-      <Editor
+      <MonacoEditor
         ref={editorRef}
         language={EditorLanguage.templateExpressionLanguage}
+        hideUTFExpressions={hideUTFExpressions}
         lineNumbers="off"
         value={initialValue}
         scrollbar={{ horizontal: 'hidden', vertical: 'hidden' }}

libs/designer-ui/src/lib/index.ts

@@ -90,3 +90,4 @@ export * from './workflowparameters';
 export * from './useId';
 export { FunctionGroupDefinitions as TemplateFunctions } from './workflow/languageservice/templatefunctions';
 export type { FunctionDefinition } from './workflow/languageservice/templatefunctions';
+export { removeUTFExpressions } from './workflow/languageservice/workflowlanguageservice';

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

@@ -1,4 +1,4 @@
-import { MonacoEditor as Editor, EditorLanguage } from '../editor/monaco';
+import { MonacoEditor, EditorLanguage } from '../editor/monaco';
 import { PrimaryButton } from '@fluentui/react/lib/Button';
 import { useIntl } from 'react-intl';
 
@@ -25,7 +25,7 @@ export function Peek({ input, onOKClick }: PeekProps): JSX.Element {
   return (
     <div className="msla-card-inner-body msla-peek">
       <div className="msla-peek-json">
-        <Editor
+        <MonacoEditor
           className={'msla-monaco-peek'}
           value={input}
           fontSize={options.fontSize}

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

@@ -3,7 +3,7 @@ import type { ValueSegment } from '../editor';
 import { ValueSegmentType } from '../editor';
 import type { ChangeHandler } from '../editor/base';
 import type { EditorContentChangedEventArgs } from '../editor/monaco';
-import { MonacoEditor as Editor, EditorLanguage } from '../editor/monaco';
+import { MonacoEditor, EditorLanguage } from '../editor/monaco';
 import { ModalDialog } from '../modaldialog';
 import { generateSchemaFromJsonString } from '../workflow/schema/generator';
 import type { IDialogStyles, IStyle } from '@fluentui/react';
@@ -121,7 +121,7 @@ export function SchemaEditor({ readonly, label, initialValue, onChange, onFocus
 
   return (
     <div className="msla-schema-editor-body">
-      <Editor
+      <MonacoEditor
         label={label}
         height={editorHeight}
         value={getCurrentValue()}
@@ -149,7 +149,7 @@ export function SchemaEditor({ readonly, label, initialValue, onChange, onFocus
         onDismiss={closeModal}
       >
         <div className="msla-schema-editor-modal-body">
-          <Editor
+          <MonacoEditor
             ref={modalEditorRef}
             fontSize={13}
             language={EditorLanguage.json}

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

@@ -42,7 +42,7 @@
 .msla-static-result-container-header-root {
   display: flex;
   width: 100%;
-  align-items: end;
+  align-items: flex-end;
   border: none;
   .msla-static-result-container-header-text {
     border: none;

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

@@ -51,6 +51,7 @@ export interface TokenPickerProps {
   setIsTokenPickerOpened?: (b: boolean) => void;
   // tokenClickedCallback is used for the code Editor TokenPicker(Legacy Token Picker)
   tokenClickedCallback?: (token: ValueSegment) => void;
+  hideUTFExpressions?: boolean;
 }
 export function TokenPicker({
   editorId,
@@ -59,6 +60,7 @@ export function TokenPicker({
   filteredTokenGroup,
   expressionGroup,
   initialMode,
+  hideUTFExpressions,
   setIsTokenPickerOpened,
   getValueSegmentFromToken,
   tokenClickedCallback,
@@ -231,6 +233,7 @@ export function TokenPicker({
                     currentHeight={expressionEditorCurrentHeight}
                     setCurrentHeight={setExpressionEditorCurrentHeight}
                     setExpressionEditorError={setExpressionEditorError}
+                    hideUTFExpressions={hideUTFExpressions}
                   />
                   <div className="msla-token-picker-expression-editor-error">{expressionEditorError}</div>
                   <TokenPickerPivot selectedKey={selectedKey} selectKey={handleSelectKey} hideExpressions={!!tokenClickedCallback} />

libs/designer-ui/src/lib/workflow/languageservice/workflowlanguageservice.ts

@@ -4,7 +4,7 @@ import type { FunctionDefinition, SignatureInfo } from './templatefunctions';
 import { FunctionGroupDefinitions } from './templatefunctions';
 import { ExpressionScanner, ExpressionTokenType } from '@microsoft/parsers-logic-apps';
 import type { ExpressionToken } from '@microsoft/parsers-logic-apps';
-import { first, getPropertyValue, map } from '@microsoft/utils-logic-apps';
+import { equals, first, getPropertyValue, map } from '@microsoft/utils-logic-apps';
 import type { languages, editor, Position } from 'monaco-editor';
 
 type CompletionList = languages.CompletionList;
@@ -70,9 +70,13 @@ interface IdentifierTokenInfo {
   argumentsCovered: number;
 }
 
-export function registerWorkflowLanguageProviders(monacoLanguages: typeof languages, monacoEditor: typeof editor): void {
+export function registerWorkflowLanguageProviders(
+  monacoLanguages: typeof languages,
+  monacoEditor: typeof editor,
+  hideUTFExpressions?: boolean
+): void {
   const languageName = Constants.LANGUAGE_NAMES.WORKFLOW;
-  const templateFunctions = getTemplateFunctions();
+  const templateFunctions = getTemplateFunctions(hideUTFExpressions);
 
   monacoLanguages.register({ id: languageName });
 
@@ -434,10 +438,10 @@ function parseExpression(value: string, position: Position, templateFunctions: R
   };
 }
 
-export function getTemplateFunctions(): FunctionDefinition[] {
+export function getTemplateFunctions(hideUTFExpressions?: boolean): FunctionDefinition[] {
   const templateFunctions: FunctionDefinition[] = [];
   for (const functionGroup of FunctionGroupDefinitions) {
-    templateFunctions.push(...functionGroup.functions);
+    templateFunctions.push(...(hideUTFExpressions ? removeUTFExpressions(functionGroup.functions) : functionGroup.functions));
   }
 
   return templateFunctions;
@@ -446,3 +450,7 @@ export function getTemplateFunctions(): FunctionDefinition[] {
 function signatureHasVariableParameters(signature: SignatureInfo): boolean {
   return signature.parameters.some((parameter) => !!parameter.isVariable);
 }
+
+export function removeUTFExpressions(functionGroupFunctions: FunctionDefinition[]): FunctionDefinition[] {
+  return functionGroupFunctions.filter((func) => !equals(func.name, 'utf8Length') && !equals(func.name, 'utf16Length'));
+}

libs/designer/src/lib/core/state/designerOptions/designerOptionsInterfaces.ts

@@ -35,6 +35,7 @@ export interface DesignerOptionsState {
     suppressCastingForSerialize?: boolean; // suppress casting for serialize
     recurrenceInterval?: LogicApps.Recurrence;
     forceEnableSplitOn?: boolean; // force enable split on (by default it is disabled on stateless workflows)
+    hideUTFExpressions?: boolean; // hide UTF expressions in template functions
   };
   nodeSelectAdditionalCallback?: (nodeId: string) => any;
   showConnectionsPanel?: boolean;

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

@@ -36,7 +36,7 @@ import { getSplitOnValue, hasSecureOutputs } from './setting';
 import { getVariableTokens } from './variables';
 import { OperationManifestService } from '@microsoft/designer-client-services-logic-apps';
 import type { FunctionDefinition, OutputToken, Token, ValueSegment } from '@microsoft/designer-ui';
-import { UIConstants, TemplateFunctions, TokenType } from '@microsoft/designer-ui';
+import { UIConstants, TemplateFunctions, TokenType, removeUTFExpressions } from '@microsoft/designer-ui';
 import { getIntl } from '@microsoft/intl-logic-apps';
 import { getKnownTitles, OutputKeys } from '@microsoft/parsers-logic-apps';
 import type { BuiltInOutput, OperationManifest } from '@microsoft/utils-logic-apps';
@@ -171,11 +171,12 @@ export const convertOutputsToTokens = (
   });
 };
 
-export const getExpressionTokenSections = (): TokenGroup[] => {
+export const getExpressionTokenSections = (hideUTFExpressions?: boolean): TokenGroup[] => {
   return TemplateFunctions.map((functionGroup) => {
     const { id, name, functions } = functionGroup;
     const hasAdvanced = functions.some((func) => func.isAdvanced);
-    const tokens = functions.map(({ name, defaultSignature, description, isAdvanced }: FunctionDefinition) => ({
+    const filteredFunctions = hideUTFExpressions ? removeUTFExpressions(functions) : functions;
+    const tokens = filteredFunctions.map(({ name, defaultSignature, description, isAdvanced }: FunctionDefinition) => ({
       key: name,
       brandColor: FxBrandColor,
       icon: FxIcon,

libs/designer/src/lib/ui/panel/nodeDetailsPanel/tabs/parametersTab/index.tsx

@@ -73,7 +73,7 @@ export const ParametersTab = () => {
   const showConnectionDisplay = useAllowUserToChangeConnection(operationInfo);
   const showIdentitySelector = useShowIdentitySelectorQuery(selectedNodeId);
   const errorInfo = useOperationErrorInfo(selectedNodeId);
-
+  const { hideUTFExpressions } = useHostOptions();
   const replacedIds = useReplacedIds();
 
   const emptyParametersMessage = useIntl().formatMessage({
@@ -105,7 +105,7 @@ export const ParametersTab = () => {
   }
 
   const tokenGroup = getOutputTokenSections(selectedNodeId, nodeType, tokenState, workflowParametersState, replacedIds);
-  const expressionGroup = getExpressionTokenSections();
+  const expressionGroup = getExpressionTokenSections(hideUTFExpressions);
 
   return (
     <>
@@ -196,7 +196,7 @@ const ParameterSection = ({
   const displayNameResult = useConnectorName(operationInfo);
   const panelLocation = usePanelLocation();
 
-  const { suppressCastingForSerialize } = useHostOptions();
+  const { suppressCastingForSerialize, hideUTFExpressions } = useHostOptions();
 
   const [tokenMapping, setTokenMapping] = useState<Record<string, ValueSegment>>({});
 
@@ -352,6 +352,7 @@ const ParameterSection = ({
         tokenGroup={tokenGroup}
         filteredTokenGroup={filteredTokenGroup}
         expressionGroup={expressionGroup}
+        hideUTFExpressions={hideUTFExpressions}
         setIsTokenPickerOpened={setIsTokenPickerOpened}
         initialMode={tokenPickerMode}
         getValueSegmentFromToken={(token: OutputToken, addImplicitForeach: boolean) =>