@opensumi/ide-debug 2.24.6-rc-1685671765.0 → 2.25.0

package/src/browser/preferences/launch.view.tsx

@@ -0,0 +1,494 @@
+import { IChangeEvent, withTheme } from '@rjsf/core';
+import { GenericObjectType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import validator from '@rjsf/validator-ajv8';
+import cls from 'classnames';
+import lodashGet from 'lodash/get';
+import throttle from 'lodash/throttle';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import { Button, ComponentContextProvider, RecycleList } from '@opensumi/ide-components';
+import {
+  localize,
+  getIcon,
+  useInjectable,
+  IJSONSchemaRegistry,
+  ISchemaContributions,
+  IJSONSchema,
+  IJSONSchemaSnippet,
+  IJSONSchemaMap,
+  isUndefined,
+  Disposable,
+  Schemes,
+  CommandService,
+  isObject,
+} from '@opensumi/ide-core-browser';
+import { EDITOR_COMMANDS } 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 { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser/index';
+
+import { DebugConfiguration } from '../../common/debug-configuration';
+import { launchExtensionSchemaUri } from '../../common/debug-schema';
+import { ILaunchService } from '../../common/debug-service';
+import { DebugConfigurationManager } from '../debug-configuration-manager';
+import { parseSnippet } from '../debugUtils';
+
+import { CheckboxWidget } from './components/checkbox-widget';
+import { AnyOfField } from './components/fields/any-of-field';
+import { ArrayField } from './components/fields/array-field';
+import { ObjectField } from './components/fields/object-filed';
+import { TitleField } from './components/fields/title-field';
+import { SelectWidget } from './components/select-widget';
+import { TextWidget } from './components/text-widget';
+import styles from './launch.module.less';
+import { LaunchService } from './launch.service';
+import { ConfigurationItemsModel } from './model/configuration-items';
+import { WrapIfAdditionalTemplate } from './templates/additional-template';
+import { ArrayFieldItemTemplate } from './templates/array-field-item-template';
+import { ArrayFieldTemplate } from './templates/array-field-template';
+import { BaseInputTemplate } from './templates/base-input-template';
+import {
+  MoveUpButton,
+  MoveDownButton,
+  RemoveButton,
+  AddItemButton,
+  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: ReactEditorComponent<any> = ({ resource }) => {
+  const { uri } = resource;
+  const schemaRegistry = useInjectable<IJSONSchemaRegistry>(IJSONSchemaRegistry);
+  const debugConfigurationManager = useInjectable<DebugConfigurationManager>(DebugConfigurationManager);
+  const launchService = useInjectable<LaunchService>(ILaunchService);
+  const commandService = useInjectable<CommandService>(CommandService);
+
+  const [currentConfigurationIndex, serCurrentConfigurationIndex] = useState<number>();
+  const [schemaContributions, setSchemaContributions] = useState<IJSONSchema>();
+  const [inputConfigurationItems, setInputConfigurationItems] = useState<ConfigurationItemsModel[]>([]);
+
+  useEffect(() => {
+    const disposed = new Disposable();
+
+    disposed.addDispose(
+      schemaRegistry.onDidChangeSchema((uri: string) => {
+        if (uri === launchExtensionSchemaUri) {
+          handleSchemaSnippets(schemaRegistry.getSchemaContributions());
+        }
+      }),
+    );
+
+    disposed.addDispose(
+      debugConfigurationManager.onDidChange(async () => {
+        handleInputConfigurationItems();
+      }),
+    );
+
+    handleSchemaSnippets(schemaRegistry.getSchemaContributions());
+    handleInputConfigurationItems();
+
+    return () => disposed.dispose();
+  }, []);
+
+  const fileUri = useMemo(() => uri.withScheme(Schemes.file), [uri]);
+
+  const handleSchemaSnippets = useCallback(
+    (contributions: ISchemaContributions) => {
+      const launchExtension = contributions.schemas[launchExtensionSchemaUri];
+
+      if (!launchExtension) {
+        return;
+      }
+
+      setSchemaContributions(launchExtension);
+    },
+    [schemaContributions],
+  );
+
+  const handleInputConfigurationItems = useCallback(() => {
+    const all = debugConfigurationManager.all;
+    if (!Array.isArray(all)) {
+      return;
+    }
+
+    setInputConfigurationItems(
+      all.map((config) => new ConfigurationItemsModel(config.configuration.name, config.configuration)),
+    );
+  }, []);
+
+  const snippetItems = useMemo(() => {
+    if (!schemaContributions) {
+      return [];
+    }
+
+    const snippets: IJSONSchemaSnippet[] = lodashGet(schemaContributions, [
+      'properties',
+      'configurations',
+      'items',
+      'defaultSnippets',
+    ] as (keyof IJSONSchema)[]);
+    return snippets || [];
+  }, [schemaContributions]);
+
+  const onSelectedConfiguration = useCallback((current: ConfigurationItemsModel, index: number) => {
+    const { configuration } = current;
+    if (!configuration) {
+      return;
+    }
+
+    launchService.nextNewFormData(configuration, false);
+
+    serCurrentConfigurationIndex(index);
+  }, []);
+
+  const currentSnippetItem = useMemo(() => {
+    if (inputConfigurationItems && !isUndefined(currentConfigurationIndex)) {
+      const current = inputConfigurationItems[currentConfigurationIndex];
+      if (!current) {
+        return undefined;
+      }
+
+      const { configuration, description, label } = current;
+      if (!configuration) {
+        return;
+      }
+
+      return {
+        body: configuration,
+        description,
+        label,
+      };
+    }
+    return undefined;
+  }, [inputConfigurationItems, currentConfigurationIndex]);
+
+  const onAddConfigurationItems = useCallback(
+    async (newItems: ConfigurationItemsModel) => {
+      const { configuration } = newItems;
+      await debugConfigurationManager.insertConfiguration(fileUri, configuration);
+      commandService.executeCommand(EDITOR_COMMANDS.SAVE_URI.id, fileUri);
+    },
+    [snippetItems],
+  );
+
+  const scheduleUpdateConfigurationsInResource = throttle(
+    async (data, currentConfigurationIndex) =>
+      await launchService.modifyConfigurationsInResource(fileUri, data, currentConfigurationIndex),
+    100,
+  );
+
+  const onFormChange = useCallback(
+    async (data: IChangeEvent) => {
+      const { formData } = data;
+      if (!formData || isUndefined(currentConfigurationIndex)) {
+        return;
+      }
+
+      scheduleUpdateConfigurationsInResource(data, currentConfigurationIndex);
+    },
+    [currentConfigurationIndex, currentSnippetItem],
+  );
+
+  return (
+    <ComponentContextProvider value={{ getIcon, localize }}>
+      <div className={styles.launch_container}>
+        <SplitPanel
+          id='launch-container'
+          resizeHandleClassName={styles.devider}
+          className={styles.launch_panel}
+          direction={EDirection.LeftToRight}
+        >
+          <LaunchIndexs
+            data-sp-defaultSize={240}
+            data-sp-minSize={150}
+            inputConfigurationItems={inputConfigurationItems}
+            snippetItems={snippetItems}
+            onSelectedConfiguration={onSelectedConfiguration}
+            onAddConfigurationItems={onAddConfigurationItems}
+            currentConfigurationIndex={currentConfigurationIndex}
+          />
+          <LaunchBody
+            data-sp-flex={1}
+            snippetItem={currentSnippetItem}
+            schemaContributions={schemaContributions}
+            onChange={onFormChange}
+          />
+        </SplitPanel>
+      </div>
+    </ComponentContextProvider>
+  );
+};
+
+const LaunchIndexs = ({
+  snippetItems,
+  onSelectedConfiguration,
+  onAddConfigurationItems,
+  inputConfigurationItems,
+  currentConfigurationIndex,
+}: {
+  snippetItems: IJSONSchemaSnippet[];
+  onSelectedConfiguration: (data: ConfigurationItemsModel, index: number) => void;
+  onAddConfigurationItems: (data: ConfigurationItemsModel) => void;
+  inputConfigurationItems: ConfigurationItemsModel[];
+  currentConfigurationIndex: number | undefined;
+}) => {
+  const [menuOpen, setMenuOpen] = React.useState<boolean>(false);
+  const [configurationItems, setConfigurationItems] = useState<ConfigurationItemsModel[]>(inputConfigurationItems);
+
+  useEffect(() => {
+    setConfigurationItems([...inputConfigurationItems]);
+  }, [inputConfigurationItems]);
+
+  const handleConfigurationItemsClick = useCallback((data: ConfigurationItemsModel, index: number) => {
+    onSelectedConfiguration(data, index);
+  }, []);
+
+  const template = ({ data, index }) => (
+    <div
+      key={index}
+      className={cls(styles.configuration_item, currentConfigurationIndex === index ? styles.selected : '')}
+      onClick={() => handleConfigurationItemsClick(data, index)}
+    >
+      <div className={styles.configuration_wrapper}>
+        <span className={styles.configuration_description}>{(data as ConfigurationItemsModel).label}</span>
+      </div>
+    </div>
+  );
+
+  const handleMenuItemClick = useCallback(
+    (item: LabelMenuItemNode) => {
+      setMenuOpen(false);
+
+      const { label } = item;
+      const findItem = snippetItems.find((snippet) => snippet.label === label);
+      if (!findItem) {
+        return;
+      }
+
+      const { body } = findItem;
+      if (!isObject(body)) {
+        return;
+      }
+
+      // 将 body 里一些形如 ${1:xxxx} 这样的符号给过滤掉
+      const parseBody: DebugConfiguration = Object.keys(body).reduce((pre: DebugConfiguration, cur: string) => {
+        const curValue = body[cur];
+
+        if (typeof curValue === 'string') {
+          pre[cur] = parseSnippet(curValue);
+        } else if (Array.isArray(curValue)) {
+          pre[cur] = curValue.map((value: any) => {
+            if (typeof value == 'string') {
+              return parseSnippet(value);
+            }
+            return value;
+          });
+        }
+
+        return pre;
+      }, body);
+
+      const itemModel = new ConfigurationItemsModel(findItem.label!, parseBody);
+      itemModel.setDescription(findItem.description || '');
+
+      onAddConfigurationItems(itemModel);
+    },
+    [configurationItems, snippetItems],
+  );
+
+  const handleVisibleChange = (visible: boolean) => {
+    setMenuOpen(visible);
+  };
+
+  const snippetMenu = useMemo(
+    () => (
+      <MenuActionList
+        data={snippetItems.map((item) => new LabelMenuItemNode(item.label!))}
+        afterClick={(item: LabelMenuItemNode) => handleMenuItemClick(item)}
+      />
+    ),
+    [snippetItems, configurationItems],
+  );
+
+  return (
+    <div className={styles.launch_indexes_container}>
+      <AutoSizer className={styles.configuration_items_box}>
+        {({ width, height }) =>
+          configurationItems.length === 0 ? (
+            <div style={{ width }} className={styles.not_configuration_content}>
+              {localize('debug.action.no.configuration')}
+            </div>
+          ) : (
+            <RecycleList width={width} height={height} data={configurationItems} template={template} />
+          )
+        }
+      </AutoSizer>
+      <div className={styles.foot_box}>
+        <Button
+          className={styles.button}
+          placement={'topCenter'}
+          menu={snippetMenu}
+          moreVisible={menuOpen}
+          onVisibleChange={handleVisibleChange}
+        >
+          {localize('debug.action.add.configuration')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const Form = withTheme({
+  widgets: {
+    TextWidget,
+    SelectWidget,
+    CheckboxWidget,
+  },
+  fields: {
+    ObjectField,
+  },
+});
+
+const LaunchBody = ({
+  snippetItem,
+  schemaContributions,
+  onChange,
+}: {
+  snippetItem?: IJSONSchemaSnippet;
+  schemaContributions?: IJSONSchema;
+  onChange: (data: IChangeEvent, id?: string) => void;
+}) => {
+  if (!snippetItem) {
+    return <div className={styles.no_onfiguration}>{localize('debug.action.no.configuration')}</div>;
+  }
+
+  const launchService = useInjectable<LaunchService>(ILaunchService);
+
+  const schemaProperties: IJSONSchema | undefined = useMemo(() => {
+    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) {
+      launchService.setRawSchemaProperties(findOneOf);
+      return findOneOf;
+    }
+
+    return;
+  }, [snippetItem, schemaContributions]);
+
+  const schema: RJSFSchema | undefined = useMemo(() => {
+    if (!(schemaProperties && schemaProperties.properties)) {
+      return;
+    }
+
+    const { label, body, description } = snippetItem;
+    const { properties, required } = schemaProperties;
+
+    const snippetProperties = Object.keys(body).reduce((pre: IJSONSchemaMap, cur: string) => {
+      const curProp = properties![cur];
+
+      if (curProp?.type === 'array' && isUndefined(curProp?.items)) {
+        curProp.items = { type: 'string' };
+      }
+
+      // 如果 type 是数组，则取第一个
+      if (Array.isArray(curProp?.type)) {
+        curProp.type = curProp.type![0] || 'string';
+      }
+
+      // 去掉 anyof 中的空对象
+      if (Array.isArray(curProp?.anyOf)) {
+        curProp.anyOf = curProp.anyOf.filter((c) => Object.keys(c).length > 0);
+      }
+
+      // 如果 type 是 object 且存在 additionalProperties 时，固定将其设置为 additionalProperties: { type: 'string' }
+      if (curProp?.type === 'object' && !isUndefined(curProp?.additionalProperties)) {
+        curProp.additionalProperties = { type: 'string' };
+      }
+
+      // 将 markdownDescription 赋给 description
+      if (!curProp?.description && curProp?.markdownDescription) {
+        curProp.description = curProp.markdownDescription;
+      }
+
+      pre[cur] = curProp;
+      return pre;
+    }, {});
+
+    const schema = {
+      title: label,
+      type: 'object',
+      required,
+      description,
+      properties: snippetProperties,
+    } as StrictRJSFSchema;
+
+    launchService.nextNewSchema(schema);
+
+    return schema;
+  }, [snippetItem, schemaProperties]);
+
+  const hanldeAddItem = useCallback(
+    (item: LabelMenuItemNode) => {
+      if (!(schemaProperties && schemaProperties.properties)) {
+        return;
+      }
+
+      if (!(schema && schema.properties)) {
+        return;
+      }
+
+      const { label } = item;
+      launchService.addNewItem(label);
+    },
+    [snippetItem, schemaProperties, schema],
+  );
+
+  return (
+    <div className={styles.launch_schema_body_container}>
+      {schema && schemaProperties && (
+        <Form
+          formData={snippetItem.body}
+          schema={schema}
+          validator={validator}
+          fields={{ AnyOfField, OneOfField: AnyOfField, ArrayField }}
+          onChange={onChange}
+          templates={{
+            ArrayFieldTemplate,
+            ArrayFieldItemTemplate,
+            DescriptionFieldTemplate,
+            FieldTemplate,
+            ObjectFieldTemplate,
+            WrapIfAdditionalTemplate,
+            BaseInputTemplate,
+            TitleFieldTemplate: TitleField,
+            ButtonTemplates: {
+              MoveUpButton,
+              MoveDownButton,
+              RemoveButton,
+              SubmitButton: (
+                props: React.PropsWithChildren<SubmitButtonProps<unknown, RJSFSchema, GenericObjectType>>,
+              ) => <AddItemButton {...props} onAddClick={hanldeAddItem}></AddItemButton>,
+              AddButton,
+              CopyButton,
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/browser/preferences/model/configuration-items.ts

@@ -0,0 +1,24 @@
+import { uuid } from '@opensumi/ide-core-common';
+
+import { DebugConfiguration } from '../../../common';
+
+export class ConfigurationItemsModel {
+  private _uniqueID: string;
+  private _description: string;
+
+  public get uniqueID(): string {
+    return this._uniqueID;
+  }
+
+  public get description(): string {
+    return this._description;
+  }
+
+  constructor(readonly label: string, readonly configuration: DebugConfiguration) {
+    this._uniqueID = uuid(6);
+  }
+
+  public setDescription(data: string): void {
+    this._description = data;
+  }
+}

package/src/browser/preferences/templates/additional-template.tsx

@@ -0,0 +1,77 @@
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+import React, { FocusEvent, useCallback } from 'react';
+
+import { Input } from '@opensumi/ide-components';
+import { formatLocalize } from '@opensumi/ide-core-common';
+
+import styles from './json-templates.module.less';
+
+export const WrapIfAdditionalTemplate = <
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(
+  props: WrapIfAdditionalTemplateProps<T, S, F>,
+) => {
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onKeyChange,
+    onDropPropertyClick,
+    readonly,
+    registry,
+    schema,
+  } = props;
+  const { readonlyAsDisabled = true } = registry.formContext;
+  const { templates } = registry;
+  const { RemoveButton } = templates.ButtonTemplates;
+  // 如果是用户手动添加 property 则存在该标识
+  const isPropertyFlag = ADDITIONAL_PROPERTY_FLAG in schema;
+
+  if (!isPropertyFlag) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  const handleBlur = useCallback(
+    ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value),
+    [onKeyChange],
+  );
+
+  return (
+    <div className={classNames} style={style}>
+      <div className={styles.additional_field_template}>
+        <div className={styles.form_additional_container}>
+          <div className={styles.form_additional}>
+            <Input
+              className={styles.form_control}
+              defaultValue={label}
+              value={label}
+              placeholder={formatLocalize('debug.launch.view.template.input.placeholder', 'Key')}
+              disabled={disabled || (readonlyAsDisabled && readonly)}
+              id={`${id}-key`}
+              name={`${id}-key`}
+              onBlur={!readonly ? handleBlur : undefined}
+              type='text'
+            />
+          </div>
+          <div className={styles.form_additional_children}>{children}</div>
+          <RemoveButton disabled={disabled || readonly} onClick={onDropPropertyClick(label)} registry={registry} />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/browser/preferences/templates/array-field-item-template.tsx

@@ -0,0 +1,90 @@
+import {
+  ArrayFieldTemplateItemType,
+  FieldTemplateProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import cls from 'classnames';
+import React, { Fragment, useMemo } from 'react';
+
+import styles from './json-templates.module.less';
+
+const BTN_GRP_STYLE = {
+  width: '100%',
+};
+
+const BTN_STYLE = {
+  width: 'calc(100% / 4)',
+};
+
+export const ArrayFieldItemTemplate = <
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(
+  props: ArrayFieldTemplateItemType<T, S, F>,
+) => {
+  const {
+    className,
+    children,
+    disabled,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    hasToolbar,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    registry,
+  } = props;
+  const { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } = registry.templates.ButtonTemplates;
+
+  const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
+  const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
+  const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
+  const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
+
+  return (
+    <div key={`array-item-${index}`} className={cls(className, styles.array_field_item_template)}>
+      <div className={styles.control_field}>{React.cloneElement(children, { name: '' })}</div>
+
+      {hasToolbar && (
+        <div className={styles.toolbar}>
+          <div style={BTN_GRP_STYLE}>
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveUpButton
+                disabled={disabled || readonly || !hasMoveUp}
+                onClick={onArrowUpClick}
+                style={BTN_STYLE}
+                registry={registry}
+              />
+            )}
+            {(hasMoveUp || hasMoveDown) && (
+              <MoveDownButton
+                disabled={disabled || readonly || !hasMoveDown}
+                onClick={onArrowDownClick}
+                style={BTN_STYLE}
+                registry={registry}
+              />
+            )}
+            {hasCopy && (
+              <CopyButton disabled={disabled || readonly} onClick={onCopyClick} style={BTN_STYLE} registry={registry} />
+            )}
+            {hasRemove && (
+              <RemoveButton
+                disabled={disabled || readonly}
+                onClick={onRemoveClick}
+                style={BTN_STYLE}
+                registry={registry}
+              />
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};