feat: support launch editor UI (#2574)

* feat: implement the base launch UI

* chore: improve code

* feat: implement launch json editor (#2598)

* feat: implement launch json schema editor

* feat: implement launch json editor

* chore: improve code

* chore: improve select widget and beauty styles (#2635)

* chore: support anyof field

* feat: support additional and anyof/oneof field (#2692)

* feat: support additional and anyof/oneof field

* chore: improve code

* fix: use i18n

* feat: support add new properties (#2712)

* feat: launch UI support delete properties (#2736)

* feat: launch UI support delete properties

* fix: bug

* feat: support for mutual open between launch.json and launch editor (#2738)

* fix: module error

* feat: support json and launch editor data linkage (#2746)

* feat: support json and launch editor data linkage

* feat: implement add configuration

* fix: typo

* feat: support snippet items data linkage (#2755)

* fix: enter keyboard remove array field

* fix: additional template code

* feat: implement configuration items data linkage

* fix: array field undefined

* fix: add lock

* fix: ci

* fix: ci

* chore: improve styles

Author: Ricbet

packages/components/src/button/index.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 import { Dropdown } from '../dropdown';
+import { Placement } from '../dropdown/dropdown';
 import { Icon, DefaultIconKeys, getIcon } from '../icon';
 import './style.less';
 
@@ -27,6 +28,8 @@ interface MoreActionProps {
   more?: boolean;
   moreIconClass?: string;
   menu?: React.ReactNode;
+  moreVisible?: boolean;
+  placement?: Placement;
   onVisibleChange?: (visible: boolean) => void;
 }
 
@@ -95,6 +98,8 @@ export const Button = React.memo(
     more,
     moreIconClass,
     menu,
+    moreVisible,
+    placement,
     title,
     onVisibleChange,
     ...otherProps
@@ -127,9 +132,16 @@ export const Button = React.memo(
 
     const iconNode = iconClass ? <Icon iconClass={iconClass} disabled={disabled} /> : null;
 
-    if (more) {
+    if (menu) {
       return (
-        <Dropdown className={'kt-menu'} overlay={menu} trigger={['click']} onVisibleChange={onVisibleChange}>
+        <Dropdown
+          visible={moreVisible}
+          className={'kt-menu'}
+          overlay={menu}
+          trigger={['click']}
+          onVisibleChange={onVisibleChange}
+          placement={placement}
+        >
           <button
             {...otherProps}
             disabled={disabled}

packages/components/src/button/style.less

@@ -182,7 +182,7 @@
   color: var(--kt-button-disableForeground) !important;
   background-color: var(--kt-button-disableBackground) !important;
   // 这里是用 box-shadow 来实现边框的，因为 border 会破坏盒模型
-  box-shadow: var(--kt-button-disableBorder) 0px 0px 0px 1px;
+  box-shadow: var(--kt-button-disableBorder) 0px 0px 0px 1px inset;
   cursor: not-allowed;
 
   & > .@{prefix}-button-secondary-more {

packages/components/src/dropdown/dropdown.tsx

@@ -7,7 +7,7 @@ import { tuple } from '../utils/type';
 import { warning } from '../utils/warning';
 
 const Placements = tuple('topLeft', 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight');
-type Placement = (typeof Placements)[number];
+export type Placement = (typeof Placements)[number];
 
 type OverlayFunc = () => React.ReactNode;
 

packages/core-browser/src/common/common.command.ts

@@ -282,6 +282,7 @@ export namespace COMMON_COMMANDS {
 
   export const OPEN_LAUNCH_CONFIGURATION: Command = {
     id: 'core.launchConfiguration.open',
+    label: '%debug.action.open.configuration%',
   };
 
   export const ENVIRONMENT_VARIABLE: Command = {

packages/core-browser/src/menu/next/menu.interface.ts

@@ -201,6 +201,18 @@ export class SeparatorMenuItemNode extends MenuNode {
   }
 }
 
+// 只展示 label 的 menu node
+export class LabelMenuItemNode extends MenuNode {
+  static readonly ID = 'menu.item.node.label';
+
+  constructor(label: string) {
+    super({
+      id: LabelMenuItemNode.ID,
+      label,
+    });
+  }
+}
+
 export interface IMenu extends IDisposable {
   /**
    * menu-id

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/__tests__/browser/debug-configuration-manager.test.ts

@@ -12,6 +12,7 @@ import { DebugConfigurationManager } from '@opensumi/ide-debug/lib/browser/debug
 import { DebugPreferences } from '@opensumi/ide-debug/lib/browser/debug-preferences';
 import { createBrowserInjector } from '@opensumi/ide-dev-tool/src/injector-helper';
 import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
 import { IFileServiceClient } from '@opensumi/ide-file-service';
 import { IWorkspaceService } from '@opensumi/ide-workspace';
 
@@ -35,6 +36,11 @@ describe('Debug Configuration Manager', () => {
   const mockMonacoEditorModel = {
     getLineLastNonWhitespaceColumn: jest.fn(),
     getPositionAt: jest.fn(() => 1),
+    getValue: jest.fn(
+      () => `{
+      "version": "0.2.0",
+      "configurations": [`,
+    ),
   };
 
   const mockMonacoEditor = {
@@ -165,6 +171,21 @@ describe('Debug Configuration Manager', () => {
       useValue: () => mockDebugStorage,
     });
 
+    mockInjector.overrideProviders({
+      token: IEditorDocumentModelService,
+      useValue: {
+        createModelReference: (uri) => ({
+          instance: {
+            uri,
+            getMonacoModel: () => ({
+              getValue: jest.fn(() => ''),
+            }),
+          },
+          dispose: jest.fn(),
+        }),
+      },
+    });
+
     debugConfigurationManager = mockInjector.get(DebugConfigurationManager);
 
     await debugConfigurationManager.whenReady;

packages/debug/__tests__/browser/editor/debug-model-manager.test.ts

@@ -6,6 +6,7 @@ import { DebugPreferences } from '@opensumi/ide-debug/lib/browser/debug-preferen
 import { DebugModelManager } from '@opensumi/ide-debug/lib/browser/editor';
 import { createBrowserInjector } from '@opensumi/ide-dev-tool/src/injector-helper';
 import { EditorCollectionService, WorkbenchEditorService } from '@opensumi/ide-editor';
+import { IEditorDocumentModelService } from '@opensumi/ide-editor/lib/browser';
 import { IFileServiceClient } from '@opensumi/ide-file-service';
 import { IWorkspaceStorageService, IWorkspaceService } from '@opensumi/ide-workspace';
 
@@ -82,6 +83,11 @@ describe('Debug Model Manager', () => {
       useValue: {},
     });
 
+    mockInjector.overrideProviders({
+      token: IEditorDocumentModelService,
+      useValue: {},
+    });
+
     debugModelManager = mockInjector.get(DebugModelManager);
   });
 

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/components/floating-click-widget/index.module.less

@@ -2,4 +2,8 @@
   position: absolute;
   right: 50px;
   bottom: 30px;
+
+  * + * {
+    margin-left: 12px;
+  }
 }