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

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

@@ -0,0 +1,92 @@
+import {
+  getTemplate,
+  getUiOptions,
+  ArrayFieldTemplateProps,
+  ArrayFieldTemplateItemType,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import cls from 'classnames';
+import React from 'react';
+
+import styles from './json-templates.module.less';
+
+export const ArrayFieldTemplate = <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: ArrayFieldTemplateProps<T, S, F>,
+) => {
+  const {
+    canAdd,
+    className,
+    disabled,
+    formContext,
+    idSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title,
+    uiSchema,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate<'ArrayFieldDescriptionTemplate', T, S, F>(
+    'ArrayFieldDescriptionTemplate',
+    registry,
+    uiOptions,
+  );
+  const ArrayFieldItemTemplate = getTemplate<'ArrayFieldItemTemplate', T, S, F>(
+    'ArrayFieldItemTemplate',
+    registry,
+    uiOptions,
+  );
+  const ArrayFieldTitleTemplate = getTemplate<'ArrayFieldTitleTemplate', T, S, F>(
+    'ArrayFieldTitleTemplate',
+    registry,
+    uiOptions,
+  );
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  return (
+    <fieldset className={cls(className)} id={idSchema.$id}>
+      <div className={styles.array_field_template}>
+        {(uiOptions.title || title) && (
+          <div className={styles.array_item_label}>
+            <ArrayFieldTitleTemplate
+              idSchema={idSchema}
+              required={required}
+              title={uiOptions.title || title}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </div>
+        )}
+        {(uiOptions.description || schema.description) && (
+          <div className={styles.array_item_description}>
+            <ArrayFieldDescriptionTemplate
+              description={uiOptions.description || schema.description}
+              idSchema={idSchema}
+              schema={schema}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </div>
+        )}
+        {items &&
+          items.map(({ key, ...itemProps }: ArrayFieldTemplateItemType<T, S, F>) => (
+            <ArrayFieldItemTemplate key={key} {...itemProps} />
+          ))}
+
+        {canAdd && (
+          <div className={styles.array_item_add}>
+            <AddButton disabled={disabled || readonly} onClick={onAddClick} registry={registry} />
+          </div>
+        )}
+      </div>
+    </fieldset>
+  );
+};

package/src/browser/preferences/templates/base-input-template.tsx

@@ -0,0 +1,79 @@
+import {
+  ariaDescribedByIds,
+  BaseInputTemplateProps,
+  examplesId,
+  getInputProps,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import React, { ChangeEvent, FocusEvent } from 'react';
+
+import { Input } from '@opensumi/ide-components';
+
+const INPUT_STYLE = {
+  width: '100%',
+};
+
+export const BaseInputTemplate = <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: BaseInputTemplateProps<T, S, F>,
+) => {
+  const {
+    disabled,
+    formContext,
+    id,
+    onBlur,
+    onChange,
+    onChangeOverride,
+    onFocus,
+    options,
+    placeholder,
+    readonly,
+    schema,
+    value,
+    type,
+  } = props;
+  const inputProps = getInputProps<T, S, F>(schema, type, options, false);
+  const { readonlyAsDisabled = true } = formContext as GenericObjectType;
+
+  const handleNumberChange = (nextValue: number | null) => onChange(nextValue);
+
+  const handleTextChange = onChangeOverride
+    ? onChangeOverride
+    : ({ target }: ChangeEvent<HTMLInputElement>) => onChange(target.value === '' ? options.emptyValue : target.value);
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target.value);
+
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target.value);
+
+  const input = (
+    <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}
+      list={schema.examples ? examplesId<T>(id) : undefined}
+      {...inputProps}
+      value={value}
+      aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+    />
+  );
+
+  return (
+    <>
+      {input}
+      {Array.isArray(schema.examples) && (
+        <datalist id={examplesId<T>(id)}>
+          {(schema.examples as string[])
+            .concat(schema.default && !schema.examples.includes(schema.default) ? ([schema.default] as string[]) : [])
+            .map((example) => <option key={example} value={example} />)}
+        </datalist>
+      )}
+    </>
+  );
+};

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

@@ -0,0 +1,107 @@
+import { IconButtonProps, SubmitButtonProps } from '@rjsf/utils';
+import React, { useCallback, useEffect, useMemo } from 'react';
+
+import { Button, ButtonProps, getIcon } from '@opensumi/ide-components';
+import { defaultIconfont } from '@opensumi/ide-components/lib/icon/iconfont/iconMap';
+import { useInjectable } from '@opensumi/ide-core-browser';
+import { MenuActionList } from '@opensumi/ide-core-browser/lib/components/actions/index';
+import { MenuNode } from '@opensumi/ide-core-browser/lib/menu/next/base';
+import { LabelMenuItemNode } from '@opensumi/ide-core-browser/lib/menu/next/menu.interface';
+import { Disposable, localize } from '@opensumi/ide-core-common';
+
+import { ILaunchService } from '../../../common';
+import { LaunchService } from '../launch.service';
+
+import styles from './json-templates.module.less';
+
+export const MoveUpButton = (props: IconButtonProps) => (
+  <Button {...props} type='primary' icon={defaultIconfont.arrowup}>
+    <span className={getIcon(defaultIconfont.arrowup)}></span>
+  </Button>
+);
+
+export const MoveDownButton = (props: IconButtonProps) => (
+  <Button {...props} type='primary' icon={defaultIconfont.arrowdown}>
+    <span className={getIcon(defaultIconfont.arrowdown)}></span>
+  </Button>
+);
+
+export const RemoveButton = (props: IconButtonProps) => (
+  <Button {...props} type='danger' icon={defaultIconfont.delete}>
+    <span className={getIcon(defaultIconfont.delete)}></span>
+  </Button>
+);
+
+export const AddButton = (props: IconButtonProps) => (
+  <Button {...props} type='primary' icon={defaultIconfont.plus}>
+    <span className={getIcon(defaultIconfont.plus)}></span> {localize('debug.launch.view.template.button.addItem')}
+  </Button>
+);
+
+export const CopyButton = (props: IconButtonProps) => (
+  <Button {...props} type='primary' icon={defaultIconfont['file-copy']}>
+    <span className={getIcon(defaultIconfont['file-copy'])}></span>
+  </Button>
+);
+
+export const AddItemButton = (props: SubmitButtonProps & { onAddClick: (item: LabelMenuItemNode) => void }) => {
+  const {
+    registry: { rootSchema },
+    onAddClick,
+  } = props;
+  const launchService = useInjectable<LaunchService>(ILaunchService);
+  const [menuOpen, setMenuOpen] = React.useState<boolean>(false);
+  const [snippetMenu, setSnippetMenu] = React.useState<MenuNode[]>([]);
+  const { rawSchemaProperties: schemaProperties } = launchService;
+
+  const handleVisibleChange = useCallback((visible: boolean) => setMenuOpen(visible), []);
+
+  const handleMenuItemClick = useCallback((item: LabelMenuItemNode) => {
+    setMenuOpen(false);
+    onAddClick(item);
+  }, []);
+
+  const handleSnippetMenu = useCallback(() => {
+    const { properties } = schemaProperties;
+    const { properties: existedProperties } = rootSchema;
+
+    if (!properties || !existedProperties) {
+      return;
+    }
+    // schema
+    const menuItemNode = Object.keys(properties)
+      // 过滤已存在于视图中的 properties
+      .filter((key) => !Object.hasOwn(existedProperties, key))
+      .map((item) => new LabelMenuItemNode(item));
+
+    setSnippetMenu(menuItemNode);
+  }, [rootSchema, schemaProperties]);
+
+  useEffect(() => {
+    const disposable = new Disposable();
+
+    disposable.addDispose(
+      launchService.onChangeSchema(() => {
+        requestAnimationFrame(() => {
+          handleSnippetMenu();
+        });
+      }),
+    );
+    handleSnippetMenu();
+
+    return () => disposable.dispose();
+  }, [schemaProperties, rootSchema]);
+
+  return (
+    <Button
+      type='secondary'
+      icon={defaultIconfont.plus}
+      className={styles.add_new_field}
+      menu={<MenuActionList afterClick={handleMenuItemClick} data={snippetMenu} style={{ maxHeight: 600 }} />}
+      moreVisible={menuOpen}
+      onVisibleChange={handleVisibleChange}
+    >
+      <span className={getIcon(defaultIconfont.plus)}></span> {localize('debug.launch.view.template.button.submit')}
+    </Button>
+  );
+};

package/src/browser/preferences/templates/description-field-template.tsx

@@ -0,0 +1,29 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import React, { useMemo } from 'react';
+
+import { IJSONSchema } from '@opensumi/ide-core-common';
+
+import styles from './json-templates.module.less';
+
+export const DescriptionFieldTemplate = <
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(
+  props: DescriptionFieldProps<T, S, F>,
+) => {
+  const { id, schema } = props;
+  const description = useMemo(
+    () => schema.description ?? (schema as IJSONSchema).markdownDescription,
+    [schema, schema.description, (schema as IJSONSchema).markdownDescription],
+  );
+
+  if (!description) {
+    return null;
+  }
+  return (
+    <span id={id} className={styles.description_field_template}>
+      {description}
+    </span>
+  );
+};

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

@@ -0,0 +1,71 @@
+import {
+  FieldTemplateProps,
+  FormContextType,
+  GenericObjectType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import cls from 'classnames';
+import React from 'react';
+
+export const FieldTemplate = <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: FieldTemplateProps<T, S, F>,
+) => {
+  const {
+    classNames,
+    style,
+    children,
+    id,
+    schema,
+    label,
+    hidden,
+    formContext,
+    uiSchema,
+    registry,
+    disabled,
+    onDropPropertyClick,
+    onKeyChange,
+    required,
+    readonly,
+  } = props;
+
+  const { wrapperStyle } = formContext as GenericObjectType;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions,
+  );
+
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      style={style}
+      disabled={disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      {id === 'root' ? (
+        children
+      ) : (
+        <div className={cls(classNames)} style={wrapperStyle}>
+          {children}
+        </div>
+      )}
+    </WrapIfAdditionalTemplate>
+  );
+};

package/src/browser/preferences/templates/json-templates.module.less

@@ -0,0 +1,133 @@
+.array_field_item_template {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+
+  .control_field {
+    margin-right: 8px;
+    min-width: 180px;
+  }
+
+  .toolbar {
+    button {
+      border-radius: 0;
+    }
+  }
+}
+
+.field_template {
+  display: flex;
+  flex-direction: column;
+}
+
+.array_field_template {
+  display: flex;
+  flex-direction: column;
+
+  .array_item_description {
+    margin-bottom: 8px;
+  }
+}
+
+.object_field_template {
+  .object_field_container {
+    .root_property_wrapper {
+      margin-bottom: 0;
+    }
+
+    &.root_object_field_container {
+      margin-bottom: 16px;
+
+      > .object_title {
+        padding-left: 16px;
+      }
+
+      .root_property_wrapper {
+        padding: 16px;
+        position: relative;
+
+        .wrapper_delete {
+          display: none;
+          position: absolute;
+          cursor: pointer;
+          right: 16px;
+          top: 16px;
+
+          .close_icon {
+            font-size: 21px;
+            color: var(--kt-dangerButton-background);
+          }
+        }
+
+        &:hover {
+          background-color: var(--kt-tree-hoverBackground);
+
+          .wrapper_delete {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+}
+
+.description_field_template {
+  display: inline-block;
+  margin-bottom: 10px;
+  font-size: 14px;
+  opacity: 0.75;
+  white-space: pre-wrap;
+  color: var(--descriptionForeground);
+}
+
+.add_new_field {
+  min-width: 300px;
+  max-width: 500px;
+  width: 100%;
+  border-style: dashed;
+  margin-left: 16px;
+}
+
+.additional_field_template {
+  display: flex;
+  flex-direction: column;
+
+  .form_additional_container {
+    display: flex;
+    min-width: 300px;
+    max-width: 500px;
+    width: 100%;
+    margin-bottom: 8px;
+
+    .form_additional_children {
+      label[class*='field_label'] {
+        display: none;
+      }
+    }
+
+    .form_additional,
+    .form_additional_children {
+      margin-right: 16px;
+    }
+  }
+
+  .children_field {
+    position: relative;
+
+    .object_title,
+    .object_description {
+      display: none;
+    }
+
+    .dividing {
+      width: 2px;
+      background-color: var(--editorGroup-border);
+      height: 100%;
+      position: absolute;
+    }
+
+    .children_container {
+      margin-left: 16px;
+    }
+  }
+}

package/src/browser/preferences/templates/object-field-template.tsx

@@ -0,0 +1,156 @@
+import {
+  ObjectFieldTemplateProps,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  descriptionId,
+  canExpand,
+  titleId,
+  ADDITIONAL_PROPERTY_FLAG,
+  ObjectFieldTemplatePropertyType,
+} from '@rjsf/utils';
+import cls from 'classnames';
+import React, { useCallback, useMemo } from 'react';
+
+import { getIcon } from '@opensumi/ide-components';
+import { IJSONSchema, useInjectable } from '@opensumi/ide-core-browser';
+import { Key } from '@opensumi/ide-core-browser';
+
+import { ILaunchService } from '../../../common/debug-service';
+import { LaunchService } from '../launch.service';
+
+import styles from './json-templates.module.less';
+
+/**
+ * 情况一: properties 为空则表明该属性的值是任意的 key:value 对象组合，所以需要显示添加按钮
+ * 情况二: 如果 properties 当中存在 ADDITIONAL_PROPERTY_FLAG 字段，则允许继续添加
+ */
+const extendCanExpand = <T, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: ObjectFieldTemplateProps<T, S, F>,
+) => {
+  const { schema, uiSchema, formData } = props;
+  const { properties } = schema;
+
+  if (!properties) {
+    return false;
+  }
+
+  if (Object.keys(properties).length === 0) {
+    return true;
+  }
+
+  if (!Object.values(properties).some((item) => item[ADDITIONAL_PROPERTY_FLAG])) {
+    return false;
+  }
+
+  return canExpand(schema, uiSchema, formData);
+};
+
+export const ObjectFieldTemplate = <T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: ObjectFieldTemplateProps<T, S, F>,
+) => {
+  const { schema, uiSchema, required, registry, idSchema, title, disabled, readonly, properties, onAddClick } = props;
+  const launchService = useInjectable<LaunchService>(ILaunchService);
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions,
+  );
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  const description = useMemo(() => props.description ?? (schema as IJSONSchema).markdownDescription, [props.description, schema]);
+
+  const fieldContainerClass = useMemo(
+    () =>
+      idSchema.$id === 'root'
+        ? cls(styles.object_field_container, styles.root_object_field_container)
+        : styles.object_field_container,
+    [idSchema],
+  );
+
+  const propertyWrapperClass = useMemo(
+    () =>
+      idSchema.$id === 'root' ? cls(styles.property_wrapper, styles.root_property_wrapper) : styles.property_wrapper,
+    [idSchema],
+  );
+
+  const handleDelProperties = useCallback((node: ObjectFieldTemplatePropertyType) => {
+    const { name } = node;
+    launchService.delItem(name);
+  }, []);
+
+  const renderProperties = useCallback(
+    (node: ObjectFieldTemplatePropertyType) => {
+      const { rawSchemaProperties: schemaProperties } = launchService;
+      if (!schemaProperties) {
+        return null;
+      }
+
+      const required = schemaProperties.required || [];
+
+      return (
+        <div
+          key={node.name}
+          className={propertyWrapperClass}
+          onKeyDown={(event) => {
+            if (event.key === Key.ENTER.code) {
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          }}
+        >
+          {node.content}
+          {/* 非 root 节点不允许删除 */}
+          {required.includes(node.name) || idSchema.$id !== 'root' ? null : (
+            <div className={styles.wrapper_delete} onClick={() => handleDelProperties(node)}>
+              <span className={cls(getIcon('close-circle'), styles.close_icon)}></span>
+            </div>
+          )}
+        </div>
+      );
+    },
+    [properties, launchService.rawSchemaProperties, idSchema],
+  );
+
+  return (
+    <div className={styles.object_field_template}>
+      <fieldset>
+        <div className={fieldContainerClass}>
+          {title && (
+            <div className={styles.object_title}>
+              <TitleFieldTemplate
+                id={titleId<T>(idSchema)}
+                title={title}
+                required={required}
+                schema={schema}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </div>
+          )}
+          {description && (
+            <div className={styles.object_description}>
+              <DescriptionFieldTemplate
+                id={descriptionId<T>(idSchema)}
+                description={description}
+                schema={schema}
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </div>
+          )}
+          {properties.filter((e) => !e.hidden).map((element) => renderProperties(element))}
+        </div>
+        {extendCanExpand<T, S, F>(props) && (
+          <AddButton onClick={onAddClick(schema)} disabled={disabled || readonly} registry={registry} />
+        )}
+      </fieldset>
+    </div>
+  );
+};