feat(Designer): Add Custom Editor for Vs-Code To Display DM Editor (#4592)

* addeddraft using http connector

* added logic for displaytext

* removed console logs

* cleaned up

* moved displayText to editorOptions

* added flag to only display for vscode

* changed structure and passed workflowService

* added vscode extension commands

* fixed typo

* removed unused code

* changed based on suggestions

* removed unused markdown

* changed back unwanted change

* nit

* connected services

* removed previous non custom editor logic

* removed manifest sample change from http

* fixed nit

---------

Co-authored-by: Travis Harris <[email protected]>

Author: Elaina-Lee

apps/vs-code-designer/src/app/commands/workflows/openDesigner/openDesignerForLocalProject.ts

@@ -22,6 +22,7 @@ import {
 import { saveWorkflowParameter } from '../../../utils/codeless/parameter';
 import { startDesignTimeApi } from '../../../utils/codeless/startDesignTimeApi';
 import { sendRequest } from '../../../utils/requestUtils';
+import { createNewDataMapCmd } from '../../dataMapper/dataMapper';
 import { OpenDesignerBase } from './openDesignerBase';
 import { HTTP_METHODS } from '@microsoft/logic-apps-shared';
 import type { IActionContext } from '@microsoft/vscode-azext-utils';
@@ -212,6 +213,13 @@ export default class OpenDesignerForLocalProject extends OpenDesignerBase {
         break;
       }
 
+      case ExtensionCommand.openRelativeLink: {
+        if (msg.content === '/dataMapper') {
+          createNewDataMapCmd(this.context);
+        }
+        break;
+      }
+
       default:
         break;
     }

apps/vs-code-react/src/app/designer/customEditorService.tsx

@@ -0,0 +1,52 @@
+import type { IEditorParameterInfo, IEditorProps, IEditorService } from '@microsoft/logic-apps-shared';
+import { Link } from '@fluentui/react';
+
+export interface CustomEditorServiceOptions {
+  areCustomEditorsEnabled?: boolean;
+  openRelativeLink?: (relativeLink: string) => void;
+}
+
+export class CustomEditorService implements IEditorService {
+  _areCustomEditorsEnabled = true;
+
+  constructor(public readonly options: CustomEditorServiceOptions) {
+    const { areCustomEditorsEnabled } = options;
+    this._areCustomEditorsEnabled = areCustomEditorsEnabled ?? true;
+  }
+
+  public getEditor = (props: IEditorParameterInfo) => {
+    if (!this._areCustomEditorsEnabled) {
+      return undefined;
+    }
+
+    const { operationInfo, parameter } = props;
+    const { connectorId, operationId } = operationInfo ?? {};
+    const { parameterName, editor, editorOptions } = parameter ?? {};
+
+    if (connectorId === 'connectionProviders/dataMapperOperations' && operationId === 'xsltTransform' && parameterName === 'text') {
+      return {
+        EditorComponent: this.DisplayTextEditor,
+        hideLabel: true,
+        editor,
+        editorOptions,
+      };
+    }
+
+    return undefined;
+  };
+
+  DisplayTextEditor = ({ editorOptions }: IEditorProps) => {
+    return (
+      <>
+        {editorOptions?.displayText?.text}
+        <Link
+          onClick={() => {
+            this.options?.openRelativeLink?.(editorOptions?.displayText?.relativeLink ?? '');
+          }}
+        >
+          {editorOptions?.displayText?.relativeLinkText}
+        </Link>
+      </>
+    );
+  };
+}

apps/vs-code-react/src/app/designer/servicesHelper.ts

@@ -27,6 +27,7 @@ import type { ConnectionAndAppSetting, ConnectionsData, IDesignerPanelMetadata }
 import { ExtensionCommand, HttpClient } from '@microsoft/vscode-extension-logic-apps';
 import type { QueryClient } from 'react-query';
 import type { WebviewApi } from 'vscode-webview';
+import { CustomEditorService } from './customEditorService';
 
 export const getDesignerServices = (
   baseUrl: string,
@@ -50,6 +51,7 @@ export const getDesignerServices = (
   workflowService: IWorkflowService;
   hostService: IHostService;
   runService: StandardRunService;
+  editorService: CustomEditorService;
   apimService: BaseApiManagementService;
   functionService: BaseFunctionService;
 } => {
@@ -283,6 +285,16 @@ export const getDesignerServices = (
     httpClient,
   });
 
+  const editorService = new CustomEditorService({
+    areCustomEditorsEnabled: true,
+    openRelativeLink: (relativeLink: string) => {
+      return vscode.postMessage({
+        command: ExtensionCommand.openRelativeLink,
+        content: relativeLink,
+      });
+    },
+  });
+
   return {
     connectionService,
     connectorService,
@@ -293,6 +305,7 @@ export const getDesignerServices = (
     workflowService,
     hostService,
     runService,
+    editorService,
     apimService,
     functionService,
   };

libs/designer-ui/src/lib/settings/settingsection/customTokenField.tsx

@@ -8,7 +8,7 @@ import type {
   IEditorProps,
   IRenderDefaultEditorParams,
 } from '@microsoft/logic-apps-shared';
-import { equals } from '@microsoft/logic-apps-shared';
+import { equals, isObject } from '@microsoft/logic-apps-shared';
 import { useCallback } from 'react';
 
 export type CustomTokenFieldProps = Omit<TokenFieldProps, 'editor' | 'editorOptions'> & ICustomEditorAndOptions;
@@ -26,7 +26,7 @@ export const CustomTokenField = (props: CustomTokenFieldProps) => {
     renderDefaultEditor,
     disabled: props.readOnly,
   };
-  return <EditorComponent {...customEditorProps} />;
+  return EditorComponent ? <EditorComponent {...customEditorProps} /> : <></>;
 };
 
 function useRenderDefaultEditor(tokenFieldProps: Omit<TokenFieldProps, 'editor' | 'editorOptions' | 'value' | 'onValueChange'>) {
@@ -51,13 +51,15 @@ const customEditorName = 'internal-custom-editor';
 
 export type ICustomEditorAndOptions = { editor: typeof customEditorName; editorOptions: ICustomEditorOptions };
 
-export const isCustomEditor = (props: { editor?: string | undefined; editorOptions?: unknown }): props is ICustomEditorAndOptions => {
+export const isCustomEditor = (props: { editor?: string | undefined; editorOptions?: any }): props is ICustomEditorAndOptions => {
   const { editor, editorOptions } = props;
+
   return (
-    equals(editor, customEditorName) &&
-    typeof editorOptions === 'object' &&
-    !!editorOptions &&
-    typeof (editorOptions as { EditorComponent: unknown }).EditorComponent === 'function'
+    editorOptions?.visibility === 'custom' ||
+    (equals(editor, customEditorName) &&
+      isObject(editorOptions) &&
+      !!editorOptions &&
+      typeof (editorOptions as { EditorComponent: unknown }).EditorComponent === 'function')
   );
 };
 

libs/designer-ui/src/lib/settings/settingsection/settingTokenField.tsx

@@ -65,6 +65,7 @@ export const SettingTokenField = ({ ...props }: SettingTokenFieldProps) => {
   const labelId = useId('msla-editor-label');
   const hideLabel =
     (isCustomEditor(props) && props.editorOptions?.hideLabel === true) || equals(props.editor?.toLowerCase(), 'floatingactionmenu');
+
   return (
     <>
       {!hideLabel && (

libs/vscode-extension/src/lib/models/extensioncommand.ts

@@ -39,6 +39,7 @@ export const ExtensionCommand = {
   completeOauthLogin: 'CompleteOauthLogin',
   webviewLoaded: 'webviewLoaded',
   webviewRscLoadError: 'webviewRscLoadError',
+  openRelativeLink: 'openRelativeLink',
 } as const;
 export type ExtensionCommand = (typeof ExtensionCommand)[keyof typeof ExtensionCommand];