@opensumi/ide-preferences 2.21.13 → 2.22.0

package/src/browser/preferences.view.tsx

@@ -0,0 +1,388 @@
+import debounce from 'lodash/debounce';
+import { observer } from 'mobx-react-lite';
+import React, { useState } from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+import {
+  Input,
+  ComponentContextProvider,
+  Tabs,
+  IIconResourceOptions,
+  BasicRecycleTree,
+  IBasicTreeData,
+} from '@opensumi/ide-components';
+import { VirtualList } from '@opensumi/ide-components/lib/virtual-list';
+import { IVirtualListRange } from '@opensumi/ide-components/lib/virtual-list/types';
+import {
+  useInjectable,
+  localize,
+  formatLocalize,
+  ISettingGroup,
+  IPreferenceSettingsService,
+  ISettingSection,
+  getIcon,
+  URI,
+  LabelService,
+  IResolvedSettingSection,
+} from '@opensumi/ide-core-browser';
+import { SplitPanel } from '@opensumi/ide-core-browser/lib/components/layout/split-panel';
+import useThrottleFn from '@opensumi/ide-core-browser/lib/react-hooks/useThrottleFn';
+import { ReactEditorComponent } from '@opensumi/ide-editor/lib/browser';
+
+import { ESectionItemKind, ISectionItemData, toNormalCase } from '../common';
+
+import { PreferenceSettingsService } from './preference-settings.service';
+import { NextPreferenceItem } from './preferenceItem.view';
+import styles from './preferences.module.less';
+
+interface IPreferenceTreeData extends IBasicTreeData {
+  section?: string;
+  groupId?: string;
+  order?: number;
+}
+
+const TREE_NAME = 'preferenceViewIndexTree';
+
+export const PreferenceView: ReactEditorComponent<null> = observer(() => {
+  const preferenceService: PreferenceSettingsService = useInjectable(IPreferenceSettingsService);
+  const labelService = useInjectable<LabelService>(LabelService);
+  const getResourceIcon = React.useCallback(
+    (uri: string, options: IIconResourceOptions) => labelService.getIcon(URI.parse(uri), options),
+    [],
+  );
+
+  const inputRef = React.useRef<HTMLInputElement | null>(null);
+  const [focusItem, setFocusItem] = useState<string | undefined>(undefined);
+
+  const debouncedSearch = debounce(
+    (value: string) => {
+      preferenceService.search(value);
+    },
+    100,
+    { maxWait: 300 },
+  );
+
+  React.useEffect(() => {
+    const focusDispose = preferenceService.onFocus(() => {
+      if (inputRef && inputRef.current) {
+        inputRef.current.focus();
+      }
+    });
+    return () => {
+      focusDispose.dispose();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (focusItem && preferenceService.treeHandler?.focusItem) {
+      preferenceService.treeHandler.focusItem(focusItem);
+    }
+  }, [preferenceService.tabIndex, preferenceService.treeHandler, focusItem]);
+
+  const treeData = React.useMemo(() => {
+    if (!preferenceService.groups) {
+      return [];
+    }
+
+    const parseTreeData = (id: string, section: ISettingSection, i: number) => {
+      let innerTreeData: IPreferenceTreeData | undefined;
+      if (section.title) {
+        innerTreeData = {
+          label: section.title,
+          section: section.title,
+          groupId: id,
+          order: i,
+        } as IPreferenceTreeData;
+      }
+      const subTreeData = [] as IPreferenceTreeData[];
+      if (section.subSections) {
+        section.subSections.forEach((v, _i) => {
+          const _treeData = parseTreeData(id, v, _i);
+          _treeData && subTreeData.push(_treeData);
+        });
+      }
+      if (innerTreeData && subTreeData && subTreeData.length > 0) {
+        innerTreeData.children = subTreeData;
+        innerTreeData.expandable = true;
+      }
+      return innerTreeData;
+    };
+
+    const basicTreeData = [] as IPreferenceTreeData[];
+    for (let index = 0; index < preferenceService.groups.length; index++) {
+      const { id, title, iconClass } = preferenceService.groups[index];
+      const data = {
+        label: toNormalCase(title),
+        iconClassName: iconClass,
+        groupId: id,
+        order: index,
+      } as IPreferenceTreeData;
+      const children = [] as IPreferenceTreeData[];
+      const sections = preferenceService.getResolvedSections(
+        id,
+        preferenceService.currentScope,
+        preferenceService.currentSearch,
+      );
+      sections.forEach((sec, i) => {
+        const _treeData = parseTreeData(id, sec, i);
+        if (_treeData) {
+          children.push(_treeData);
+        }
+      });
+      // 要传这个，让 BasicTree 认为这是文件夹以保持排列顺序
+      data.children = children;
+      if (children.length > 0) {
+        data.expandable = true;
+      }
+      basicTreeData.push(data);
+    }
+
+    return basicTreeData;
+  }, [preferenceService.groups, preferenceService.getResolvedSections]);
+
+  const items = React.useMemo(() => {
+    // 如果是搜索模式，是只展示用户左侧选择的组的内容
+    const result: ISectionItemData[] = [];
+    preferenceService.groups.forEach((v) => {
+      result.push(...collectGroup(v));
+    });
+    return result;
+
+    function collectGroup(group: ISettingGroup) {
+      const groupItems = [] as ISectionItemData[];
+      const sections = preferenceService.getResolvedSections(
+        group.id,
+        preferenceService.currentScope,
+        preferenceService.currentSearch,
+      );
+
+      const collectItem = (section: IResolvedSettingSection, prefix = '') => {
+        let currentItemPath = prefix;
+        if (section.title) {
+          currentItemPath = prefix + '/' + section.title;
+        }
+
+        const innerItems = [] as ISectionItemData[];
+
+        if (section.component) {
+          innerItems.push({
+            component: section.component,
+            scope: preferenceService.currentScope,
+          });
+        } else if (section.preferences) {
+          innerItems.push(
+            ...section.preferences.map((pre) => ({
+              id: ESectionItemKind.Preference + pre.id,
+              preference: pre,
+              scope: preferenceService.currentScope,
+              _path: currentItemPath,
+            })),
+          );
+        } else if (section.subSections) {
+          section.subSections.forEach((v) => {
+            const _items = collectItem(v, currentItemPath);
+            innerItems.push(..._items);
+          });
+        }
+
+        // 如果该 section 有选项，填入一个 title
+        if (innerItems.length > 0 && section.title) {
+          innerItems.unshift({
+            id: ESectionItemKind.Section + section.title,
+            title: section.title,
+            scope: preferenceService.currentScope,
+            _path: currentItemPath,
+          });
+        }
+
+        return innerItems;
+      };
+
+      for (const section of sections) {
+        const _items = collectItem(section, group.title);
+        groupItems.push(..._items);
+      }
+
+      // 如果该 group 有选项，填入一个 title
+      if (groupItems.length > 0 && group.title) {
+        groupItems.unshift({
+          title: group.title,
+          id: ESectionItemKind.Group + group.id,
+          scope: preferenceService.currentScope,
+          _path: group.title,
+        });
+      }
+      return groupItems;
+    }
+  }, [preferenceService.groups, preferenceService.currentScope, preferenceService.currentSearch]);
+
+  const navigateTo = (id: string) => {
+    if (id) {
+      const index = items.findIndex((item) => item.id === id);
+      if (index >= 0) {
+        preferenceService.listHandler?.scrollToIndex({
+          index,
+          behavior: 'auto',
+          align: 'start',
+        });
+      }
+    }
+  };
+
+  const onRangeChanged = useThrottleFn(
+    (range: IVirtualListRange) => {
+      // 我们通过第一个 item 来变更左侧文件树的选择状态
+      // 当我们点击左侧的 section 的时候，我们的设计是让每一个 section 的 title 滚到顶部
+      // 此时仍然会触发该事件，但有时可能因为计算取整等原因，它上报的 startIndex 是 title 的上一个 index。
+      // 我们在这里 +1 就是防止因为计算错误而取到上一个章节的 _path 的情况。
+      const item = items[range.startIndex + 1];
+      if (item && item._path) {
+        setFocusItem(item._path);
+      }
+    },
+    16 * 3,
+    {
+      leading: true,
+      trailing: true,
+    },
+  );
+
+  React.useEffect(() => {
+    if (preferenceService.currentSelectId) {
+      navigateTo(preferenceService.currentSelectId);
+    }
+  }, [items, preferenceService.currentSelectId]);
+
+  return (
+    <ComponentContextProvider value={{ getIcon, localize, getResourceIcon }}>
+      <div className={styles.preferences}>
+        <div className={styles.preferences_header}>
+          <Tabs
+            className={styles.tabs}
+            value={preferenceService.tabIndex}
+            onChange={(index: number) => {
+              preferenceService.tabIndex = index;
+            }}
+            tabs={preferenceService.tabList.map((n) => localize(n.label))}
+          />
+          <div className={styles.search_pref}>
+            <Input
+              autoFocus
+              value={preferenceService.currentSearch}
+              placeholder={localize('preference.searchPlaceholder')}
+              onValueChange={debouncedSearch}
+              ref={inputRef}
+              hasClear
+            />
+          </div>
+        </div>
+        {preferenceService.groups.length > 0 ? (
+          <SplitPanel
+            id='preference-panel'
+            resizeHandleClassName={styles.devider}
+            className={styles.preferences_body}
+            direction='left-to-right'
+          >
+            <AutoSizer className={styles.preferences_indexes} data-sp-defaultSize={180} data-sp-minSize={150}>
+              {({ width, height }) => (
+                <BasicRecycleTree
+                  treeName={TREE_NAME}
+                  sortComparator={(a: IPreferenceTreeData, b: IPreferenceTreeData) => {
+                    if (typeof a.order !== 'undefined' && typeof b.order !== 'undefined') {
+                      return a.order > b.order ? 1 : a.order < b.order ? -1 : 0;
+                    }
+                    return undefined;
+                  }}
+                  height={height}
+                  width={width}
+                  itemHeight={26}
+                  getItemClassName={(item) => {
+                    if (item?.depth === 1) {
+                      return styles.group_item;
+                    }
+                    return styles.index_item;
+                  }}
+                  baseIndent={8}
+                  treeData={treeData}
+                  onClick={(_e, node) => {
+                    const treeData = node && ((node as any)._raw as IPreferenceTreeData);
+                    if (treeData) {
+                      if (treeData.section) {
+                        preferenceService.scrollToSection(treeData.section);
+                      } else if (treeData.groupId) {
+                        preferenceService.scrollToGroup(treeData.groupId);
+                      }
+                    }
+                  }}
+                  onReady={(handler) => {
+                    preferenceService.handleTreeHandler(handler);
+                  }}
+                />
+              )}
+            </AutoSizer>
+            <div className={styles.preferences_items} data-sp-flex={1}>
+              <PreferenceBody
+                items={items}
+                onReady={preferenceService.handleListHandler}
+                onRangeChanged={onRangeChanged.run}
+              />
+            </div>
+          </SplitPanel>
+        ) : (
+          <div className={styles.preference_noResults}>
+            {preferenceService.currentSearch
+              ? formatLocalize('preference.noResults', preferenceService.currentSearch)
+              : formatLocalize('preference.empty')}
+          </div>
+        )}
+      </div>
+    </ComponentContextProvider>
+  );
+});
+
+export const PreferenceItem = ({ data, index }: { data: ISectionItemData; index: number }) => {
+  if (data.title) {
+    if (data.id?.startsWith(ESectionItemKind.Group)) {
+      return (
+        <div className={styles.group_title} id={data.id}>
+          {data.title}
+        </div>
+      );
+    }
+    return (
+      <div className={styles.section_title} id={data.id}>
+        {data.title}
+      </div>
+    );
+  } else if (data.component) {
+    return <data.component scope={data.scope} />;
+  } else if (data.preference) {
+    return (
+      <NextPreferenceItem
+        key={`${index} - ${data.preference.id} - ${data.scope}`}
+        preference={data.preference}
+        preferenceId={data.preference.id}
+        localizedName={data.preference.label}
+        scope={data.scope}
+      />
+    );
+  }
+};
+
+export const PreferenceBody = ({
+  items,
+  onReady,
+  onRangeChanged,
+}: {
+  items: ISectionItemData[];
+  onReady: (handler: any) => void;
+  onRangeChanged: (props: IVirtualListRange) => any;
+}) => (
+  <VirtualList
+    data={items}
+    template={PreferenceItem as React.FunctionComponent<{ data: ISectionItemData; index: number }>}
+    className={styles.preference_section}
+    refSetter={onReady}
+    onRangeChanged={onRangeChanged}
+  />
+);

package/src/browser/user-preference-provider.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@opensumi/di';
+import { Schemes, URI } from '@opensumi/ide-core-browser';
+import { PreferenceScope } from '@opensumi/ide-core-browser/lib/preferences';
+
+import { AbstractResourcePreferenceProvider } from './abstract-resource-preference-provider';
+
+export const USER_PREFERENCE_URI = new URI().withScheme(Schemes.userStorage).withPath('settings.json');
+
+@Injectable()
+export class UserPreferenceProvider extends AbstractResourcePreferenceProvider {
+  protected getUri(): URI {
+    return USER_PREFERENCE_URI;
+  }
+
+  protected getScope() {
+    return PreferenceScope.User;
+  }
+}

package/src/browser/userstorage/index.ts

@@ -0,0 +1,2 @@
+export * from './user-storage.service';
+export * from './user-storage.contribution';

package/src/browser/userstorage/user-storage.contribution.ts

@@ -0,0 +1,19 @@
+import { Autowired } from '@opensumi/di';
+import { Domain, ClientAppContribution, Schemes } from '@opensumi/ide-core-browser';
+import { IFileServiceClient } from '@opensumi/ide-file-service';
+import { FileServiceClient } from '@opensumi/ide-file-service/lib/browser/file-service-client';
+
+import { IUserStorageService } from '../../common';
+
+@Domain(ClientAppContribution)
+export class UserStorageContribution implements ClientAppContribution {
+  @Autowired(IUserStorageService)
+  private readonly userStorageService: IUserStorageService;
+
+  @Autowired(IFileServiceClient)
+  protected readonly fileSystem: FileServiceClient;
+
+  initialize() {
+    this.fileSystem.registerProvider(Schemes.userStorage, this.userStorageService);
+  }
+}

package/src/browser/userstorage/user-storage.service.ts

@@ -0,0 +1,192 @@
+import merge from 'lodash/merge';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  DisposableCollection,
+  ILogger,
+  Emitter,
+  URI,
+  AppConfig,
+  Uri,
+  FileType,
+  FileChangeEvent,
+} from '@opensumi/ide-core-browser';
+import { Event, FileSystemProviderCapabilities, Schemes } from '@opensumi/ide-core-common';
+import { FileSetContentOptions } from '@opensumi/ide-file-service/lib/common';
+import { IFileServiceClient } from '@opensumi/ide-file-service/lib/common';
+
+import { IUserStorageService } from '../../common';
+
+export const DEFAULT_USER_STORAGE_FOLDER = '.sumi';
+
+const DEFAULT_WATCH_OPTIONS = { recursive: false, excludes: ['**/logs/**'] };
+
+@Injectable()
+export class UserStorageServiceImpl implements IUserStorageService {
+  capabilities: FileSystemProviderCapabilities = FileSystemProviderCapabilities.FileReadWrite;
+  onDidChangeCapabilities = Event.None;
+  /**
+   * 基于用户存储路径创建文件路径
+   * @param userStorageFolderUri 存储目录路径，如 file://{home}/
+   * @param fsPath 文件系统路径
+   */
+  public static toUserStorageUri(userStorageFolderUri: URI, rawUri: URI): URI {
+    const userStorageRelativePath = this.getRelativeUserStoragePath(userStorageFolderUri, rawUri);
+    return new URI('')
+      .withScheme(Schemes.userStorage)
+      .withPath(userStorageRelativePath)
+      .withFragment(rawUri.fragment)
+      .withQuery(rawUri.query);
+  }
+
+  /**
+   * 返回相对存储路径
+   * 如传入 'file://{path_to_userhome}/.sumi', 'file://{path_to_userhome}/.sumi/settings.json',
+   * 则返回 'settings.json'
+   * @param userStorageFolderUri 存储目录路径，如 file://{path_to_userhome}/
+   * @param fileUri 文件路径
+   */
+  private static getRelativeUserStoragePath(userStorageFolderUri: URI, fileUri: URI): string {
+    // 返回虚拟用户协议下的路径，去掉头部的/，如返回settings.json而不是/settings.json
+    return fileUri.toString().slice(userStorageFolderUri.toString().length + 1);
+  }
+
+  /**
+   * 返回用户路径下的文件绝对路径
+   * @param userStorageFolderUri 存储目录路径，如 file://{home}/.sumi
+   * @param userStorageUri 存储文件路径，如 file://{home}/.sumi/settings.json
+   */
+  public static toFilesystemURI(userStorageFolderUri: URI, userStorageUri: URI): URI {
+    return userStorageFolderUri.withPath(userStorageFolderUri.path.join(userStorageUri.path.toString()));
+  }
+
+  protected readonly toDispose = new DisposableCollection();
+  protected readonly onDidChangeFileEmitter = new Emitter<FileChangeEvent>();
+  private _whenReady: Promise<void>;
+  private userStorageFolder: URI;
+
+  @Autowired(IFileServiceClient)
+  protected readonly fileServiceClient: IFileServiceClient;
+  @Autowired(ILogger)
+  protected readonly logger: ILogger;
+  @Autowired(AppConfig)
+  protected readonly appConfig: AppConfig;
+
+  constructor() {
+    this._whenReady = this.init();
+  }
+
+  get whenReady() {
+    return this._whenReady;
+  }
+
+  get onDidChangeFile() {
+    return this.onDidChangeFileEmitter.event;
+  }
+
+  async init() {
+    // 请求用户路径并存储
+    const home = await this.fileServiceClient.getCurrentUserHome();
+    if (home) {
+      const userStorageFolderUri = new URI(home.uri).resolve(
+        this.appConfig.userPreferenceDirName || this.appConfig.preferenceDirName || DEFAULT_USER_STORAGE_FOLDER,
+      );
+      if (!(await this.fileServiceClient.access(userStorageFolderUri.toString()))) {
+        await this.fileServiceClient.createFolder(userStorageFolderUri.toString());
+      }
+      this.userStorageFolder = userStorageFolderUri;
+    }
+    this.toDispose.push(this.onDidChangeFileEmitter);
+  }
+
+  readDirectory(uri: Uri): [string, FileType][] | Promise<[string, FileType][]> {
+    throw new Error('Method not implemented.');
+  }
+
+  createDirectory(uri: Uri) {
+    throw new Error('Method not implemented.');
+  }
+
+  async watch(uri: Uri, options: { recursive: boolean; excludes: string[] }) {
+    await this.whenReady;
+    const target = UserStorageServiceImpl.toFilesystemURI(this.userStorageFolder, URI.from(uri));
+    const watchOptions = merge(DEFAULT_WATCH_OPTIONS, options);
+    const watcher = await this.fileServiceClient.watchFileChanges(target.parent, watchOptions.excludes);
+    this.toDispose.push(watcher);
+    this.toDispose.push(
+      watcher.onFilesChanged((changes) => {
+        const effectedChanges: FileChangeEvent = [];
+        for (const change of changes) {
+          // 在UserStorage的监听模式下，只会存在一个独立的 Change 事件
+          // 故在获取到变更事件时直接推出遍历
+          if (change.uri === target.toString()) {
+            effectedChanges.push(change);
+          }
+        }
+        if (effectedChanges.length > 0) {
+          this.onDidChangeFileEmitter.fire(
+            effectedChanges.map((change) => ({
+              uri: UserStorageServiceImpl.toUserStorageUri(this.userStorageFolder, new URI(change.uri)).toString(),
+              type: change.type,
+            })),
+          );
+        }
+      }),
+    );
+    return watcher.watchId;
+  }
+
+  async readFile(uri: Uri) {
+    await this.whenReady;
+    const target = UserStorageServiceImpl.toFilesystemURI(this.userStorageFolder, URI.from(uri));
+    try {
+      const { content } = await this.fileServiceClient.readFile(target.toString());
+      return content.buffer;
+    } catch (e) {
+      throw new Error(e);
+    }
+  }
+
+  async writeFile(uri: Uri, content: Uint8Array, options?: FileSetContentOptions) {
+    await this.whenReady;
+    const target = UserStorageServiceImpl.toFilesystemURI(this.userStorageFolder, URI.from(uri));
+    try {
+      let fileStat = await this.fileServiceClient.getFileStat(target.toString());
+      if (fileStat) {
+        await this.fileServiceClient.setContent(fileStat, content, options);
+      } else {
+        fileStat = await this.fileServiceClient.createFile(target.toString());
+        await this.fileServiceClient.setContent(fileStat, content, options);
+      }
+    } catch (e) {
+      throw new Error(e);
+    }
+  }
+
+  delete(uri: Uri, options: { recursive: boolean; moveToTrash?: boolean }) {
+    throw new Error('Method not implemented.');
+  }
+
+  rename(oldUri: Uri, newUri: Uri, options: { overwrite: boolean }) {
+    throw new Error('Method not implemented.');
+  }
+
+  copy(source: Uri, destination: Uri, options: { overwrite: boolean }) {
+    throw new Error('Method not implemented.');
+  }
+
+  async stat(uri: Uri) {
+    await this.whenReady;
+    const target = UserStorageServiceImpl.toFilesystemURI(this.userStorageFolder, URI.from(uri));
+    const stat = await this.fileServiceClient.getFileStat(target.toString());
+    if (stat) {
+      return stat;
+    }
+  }
+
+  async access(uri: Uri, mode: number) {
+    await this.whenReady;
+    const target = UserStorageServiceImpl.toFilesystemURI(this.userStorageFolder, URI.from(uri));
+    return this.fileServiceClient.access(target.toString(), mode);
+  }
+}

package/src/browser/workspace-file-preference-provider.ts

@@ -0,0 +1,50 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { URI } from '@opensumi/ide-core-browser';
+import { PreferenceScope } from '@opensumi/ide-core-browser/lib/preferences';
+import { IWorkspaceService } from '@opensumi/ide-workspace';
+import { WorkspaceData } from '@opensumi/ide-workspace/lib/browser/workspace-data';
+
+import { AbstractResourcePreferenceProvider } from './abstract-resource-preference-provider';
+
+@Injectable()
+export class WorkspaceFilePreferenceProviderOptions {
+  workspaceUri: URI;
+}
+
+export const WorkspaceFilePreferenceProviderFactory = Symbol('WorkspaceFilePreferenceProviderFactory');
+export type WorkspaceFilePreferenceProviderFactory = (
+  options: WorkspaceFilePreferenceProviderOptions,
+) => WorkspaceFilePreferenceProvider;
+
+@Injectable()
+export class WorkspaceFilePreferenceProvider extends AbstractResourcePreferenceProvider {
+  @Autowired(IWorkspaceService)
+  protected readonly workspaceService: IWorkspaceService;
+
+  @Autowired(WorkspaceFilePreferenceProviderOptions)
+  protected readonly options: WorkspaceFilePreferenceProviderOptions;
+
+  protected getUri(): URI {
+    return this.options.workspaceUri;
+  }
+
+  protected parse(content: string): any {
+    const data = super.parse(content);
+    if (WorkspaceData.is(data)) {
+      return data.settings || {};
+    }
+    return {};
+  }
+
+  protected getPath(preferenceName: string): string[] {
+    return ['settings', preferenceName];
+  }
+
+  protected getScope(): PreferenceScope {
+    return PreferenceScope.Workspace;
+  }
+
+  getDomain(): string[] {
+    return this.workspaceService.tryGetRoots().map((r) => r.uri);
+  }
+}