feat: implement launch json editor (#2598)

* feat: implement launch json schema editor

* feat: implement launch json editor

* chore: improve code

Author: Ricbet

packages/core-browser/src/utils/schema.ts

@@ -0,0 +1,11 @@
+import type { Ajv } from 'ajv';
+
+let _ajv;
+export const acquireAjv = (): Ajv | undefined => {
+  if (!_ajv) {
+    const Ajv = require('ajv');
+    _ajv = new Ajv();
+    return _ajv;
+  }
+  return _ajv;
+};

packages/debug/package.json

@@ -23,6 +23,9 @@
     "@opensumi/ide-file-service": "workspace:*",
     "@opensumi/ide-task": "workspace:*",
     "@opensumi/ide-terminal-next": "workspace:*",
+    "@rjsf/core": "^5.5.2",
+    "@rjsf/utils": "^5.5.2",
+    "@rjsf/validator-ajv8": "^5.5.2",
     "anser": "^1.4.9",
     "btoa": "^1.2.1"
   },

packages/debug/src/browser/preferences/components/select-widget.tsx

@@ -0,0 +1,23 @@
+import { WidgetProps } from '@rjsf/utils';
+import React, { useMemo } from 'react';
+
+import { Option, Select } from '@opensumi/ide-components';
+
+export const SelectWidget = (props: WidgetProps) => {
+  const { schema, value } = props;
+
+  const enumValue = useMemo(() => {
+    if (schema && schema.enum) {
+      return schema.enum;
+    }
+    return [];
+  }, [schema, schema.enum]);
+
+  return (
+    <Select value={value}>
+      {enumValue.forEach((data: string) => {
+        <Option value={data}>{data}</Option>;
+      })}
+    </Select>
+  );
+};

packages/debug/src/browser/preferences/components/text-widget.tsx

@@ -0,0 +1,36 @@
+import { WidgetProps } from '@rjsf/utils';
+import React from 'react';
+
+import { Input } from '@opensumi/ide-components';
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+export const TextWidget = (props: WidgetProps) => {
+  const { disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, schema, value } = props;
+  const { readonlyAsDisabled = true } = formContext;
+
+  const handleTextChange = ({ target }: React.ChangeEvent<HTMLInputElement>) =>
+    onChange(target.value === '' ? options.emptyValue : target.value);
+
+  const handleBlur = ({ target }: React.FocusEvent<HTMLInputElement>) => onBlur(id, target.value);
+
+  const handleFocus = ({ target }: React.FocusEvent<HTMLInputElement>) => onFocus(id, target.value);
+
+  return schema.type === 'string' ? (
+    <Input
+      disabled={disabled || (readonlyAsDisabled && readonly)}
+      id={id}
+      name={id}
+      onBlur={!readonly ? handleBlur : undefined}
+      onChange={!readonly ? handleTextChange : undefined}
+      onFocus={!readonly ? handleFocus : undefined}
+      placeholder={placeholder}
+      style={INPUT_STYLE}
+      type={(options.inputType || 'text') as string}
+      value={value}
+      autoComplete='off'
+    />
+  ) : null;
+};

packages/debug/src/browser/preferences/launch-preferences-contribution.ts

@@ -29,7 +29,6 @@ export class LaunchResourceProvider implements IResourceProvider {
   readonly scheme: string = LAUNCH_VIEW_SCHEME;
 
   provideResource(uri: URI): MaybePromise<IResource<any>> {
-    // 获取文件类型 getFileType: (path: string) => string
     return {
       supportsRevive: true,
       name: localize('menu-bar.title.debug'),
@@ -38,11 +37,11 @@ export class LaunchResourceProvider implements IResourceProvider {
     };
   }
 
-  provideResourceSubname(resource: IResource, groupResources: IResource[]): string | null {
+  provideResourceSubname(): string | null {
     return null;
   }
 
-  async shouldCloseResource(resource: IResource, openedResources: IResource[][]): Promise<boolean> {
+  async shouldCloseResource(): Promise<boolean> {
     return true;
   }
 }

packages/debug/src/browser/preferences/launch.module.less

@@ -59,6 +59,12 @@
         }
       }
     }
+
+    .launch_schema_body_container {
+      overflow: auto;
+      height: 100%;
+      padding: 0 16px 12px 16px;
+    }
   }
 }
 

packages/debug/src/browser/preferences/launch.view.tsx

@@ -1,3 +1,6 @@
+import { withTheme } from '@rjsf/core';
+import { RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
 import cls from 'classnames';
 import lodashGet from 'lodash/get';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -12,18 +15,37 @@ import {
   ISchemaContributions,
   IJSONSchema,
   IJSONSchemaSnippet,
+  IJSONSchemaMap,
+  isUndefined,
 } from '@opensumi/ide-core-browser';
 import { EDirection, SplitPanel } from '@opensumi/ide-core-browser/lib/components';
 import { MenuActionList } from '@opensumi/ide-core-browser/lib/components/actions/index';
 import { LabelMenuItemNode } from '@opensumi/ide-core-browser/lib/menu/next/menu.interface';
+import { acquireAjv } from '@opensumi/ide-core-browser/lib/utils/schema';
 
 import { launchExtensionSchemaUri } from '../../common/debug-schema';
 
+import { SelectWidget } from './components/select-widget';
+import { TextWidget } from './components/text-widget';
 import styles from './launch.module.less';
+import { ArrayFieldItemTemplate } from './templates/array-field-item-template';
+import { ArrayFieldTemplate } from './templates/array-field-template';
+import {
+  MoveUpButton,
+  MoveDownButton,
+  RemoveButton,
+  SubmitButton,
+  AddButton,
+  CopyButton,
+} from './templates/button-template';
+import { DescriptionFieldTemplate } from './templates/description-field-template';
+import { FieldTemplate } from './templates/field-template';
+import { ObjectFieldTemplate } from './templates/object-field-template';
 
 export const LaunchViewContainer = () => {
   const schemaRegistry = useInjectable<IJSONSchemaRegistry>(IJSONSchemaRegistry);
-  const [snippetItems, setSnippetItems] = useState<IJSONSchemaSnippet[]>([]);
+  const [schemaContributions, setSchemaContributions] = useState<IJSONSchema>();
+  const [currentSnippetItem, setCurrentSnippetItem] = useState<IJSONSchemaSnippet>();
 
   useEffect(() => {
     const disposed = schemaRegistry.onDidChangeSchema((uri: string) => {
@@ -37,23 +59,41 @@ export const LaunchViewContainer = () => {
     return () => disposed.dispose();
   }, []);
 
-  const handleSchemaSnippets = (contributions: ISchemaContributions) => {
-    const launchExtension = contributions.schemas[launchExtensionSchemaUri];
+  const handleSchemaSnippets = useCallback(
+    (contributions: ISchemaContributions) => {
+      const launchExtension = contributions.schemas[launchExtensionSchemaUri];
 
-    if (!launchExtension) {
-      return;
+      if (!launchExtension) {
+        return;
+      }
+
+      setSchemaContributions(launchExtension);
+    },
+    [schemaContributions],
+  );
+
+  const snippetItems = useMemo(() => {
+    if (!schemaContributions) {
+      return [];
     }
 
-    const snippets: IJSONSchemaSnippet[] = lodashGet(launchExtension, [
+    const snippets: IJSONSchemaSnippet[] = lodashGet(schemaContributions, [
       'properties',
       'configurations',
       'items',
       'defaultSnippets',
     ] as (keyof IJSONSchema)[]);
-    setSnippetItems(snippets.filter((s) => s.label));
-  };
+    return snippets.filter((s) => s.label);
+  }, [schemaContributions]);
 
-  const onSelectedConfiguration = (current: string) => {};
+  const onSelectedConfiguration = (current: string) => {
+    const findItems = snippetItems.find(({ label }) => label === current);
+    if (!findItems) {
+      return;
+    }
+
+    setCurrentSnippetItem(findItems);
+  };
 
   return (
     <ComponentContextProvider value={{ getIcon, localize }}>
@@ -70,7 +110,7 @@ export const LaunchViewContainer = () => {
             snippetItems={snippetItems}
             onSelectedConfiguration={onSelectedConfiguration}
           />
-          <LaunchBody data-sp-flex={1} />
+          <LaunchBody data-sp-flex={1} snippetItem={currentSnippetItem} schemaContributions={schemaContributions} />
         </SplitPanel>
       </div>
     </ComponentContextProvider>
@@ -152,4 +192,97 @@ const LaunchIndexs = ({
   );
 };
 
-const LaunchBody = () => <div>body</div>;
+const Form = withTheme({
+  widgets: {
+    TextWidget,
+    SelectWidget,
+  },
+});
+
+const LaunchBody = ({
+  snippetItem,
+  schemaContributions,
+}: {
+  snippetItem?: IJSONSchemaSnippet;
+  schemaContributions?: IJSONSchema;
+}) => {
+  if (!snippetItem) {
+    return <div>{localize('debug.action.no.configuration')}</div>;
+  }
+
+  const [schemaProperties, setSchemaProperties] = useState<IJSONSchema>();
+
+  useEffect(() => {
+    const ajv = acquireAjv();
+    // 1. 先从 schema 中找出 oneOf 池
+    const oneOfPool: IJSONSchema[] =
+      lodashGet(schemaContributions, ['properties', 'configurations', 'items', 'oneOf'] as (keyof IJSONSchema)[]) || [];
+
+    // 2. 再从 snippetItem body 中找出符合条件的 oneOf（可能存在多个，如果有多个就只取第一个）
+    const findOneOf = oneOfPool.find((oneOf) => {
+      const { body } = snippetItem;
+      return ajv!.validate(oneOf, body);
+    });
+
+    if (findOneOf) {
+      setSchemaProperties(findOneOf);
+    }
+  }, [snippetItem, schemaContributions]);
+
+  const schema: RJSFSchema | undefined = useMemo(() => {
+    if (!(schemaProperties && schemaProperties.properties)) {
+      return;
+    }
+
+    const { label, body, description } = snippetItem;
+    const { properties } = schemaProperties;
+
+    const snippetProperties = Object.keys(body).reduce((pre: IJSONSchemaMap, cur: string) => {
+      if (properties![cur]?.type === 'array' && isUndefined(properties![cur].items)) {
+        properties![cur].items = { type: 'string' };
+      }
+
+      // 如果 type 是数组，则取第一个
+      if (Array.isArray(properties![cur]?.type)) {
+        properties![cur].type = properties![cur]?.type![0] || 'string';
+      }
+
+      pre[cur] = properties![cur];
+      return pre;
+    }, {});
+
+    return {
+      title: label,
+      type: 'object',
+      description,
+      properties: snippetProperties,
+    } as StrictRJSFSchema;
+  }, [snippetItem, schemaProperties]);
+
+  return (
+    <div className={styles.launch_schema_body_container}>
+      {schema && (
+        <Form
+          formData={snippetItem.body}
+          schema={schema}
+          validator={validator}
+          templates={{
+            ArrayFieldTemplate,
+            ArrayFieldItemTemplate,
+            DescriptionFieldTemplate,
+            FieldTemplate,
+            ObjectFieldTemplate,
+            ButtonTemplates: {
+              MoveUpButton,
+              MoveDownButton,
+              RemoveButton,
+              SubmitButton,
+              AddButton,
+              CopyButton,
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+};