fix: improve style and fix breakpoints view init (#2583)

* fix: improve style and fix breakpoints view init

* chore: fix build

* chore: fix test

* fix: init storage correctly

* chore: fix build

Author: erha19

packages/components/src/recycle-tree/basic/tree-node.tsx

@@ -1,12 +1,15 @@
 import cls from 'classnames';
 import React, { useCallback } from 'react';
 
+import { isDefined } from '@opensumi/ide-utils';
+
 import { Button } from '../../button';
 import { Icon } from '../../icon';
 import { Loading } from '../../loading';
 
 import { BasicCompositeTreeNode, BasicTreeNode } from './tree-node.define';
 import { IBasicInlineMenuPosition, IBasicNodeRendererProps, DECORATIONS } from './types';
+
 import './styles.less';
 
 export const BasicTreeNodeRenderer: React.FC<
@@ -67,19 +70,23 @@ export const BasicTreeNodeRenderer: React.FC<
     },
     [onClick, onTwistierClick],
   );
-  const paddingLeft = `${(item.depth || 0) * (indent || 0)}px`;
+  // 14 * 2 = Toggle Icon Size + Icon Size
+  const paddingLeft = BasicCompositeTreeNode.is(item)
+    ? `${(item.depth || 0) * (indent || 0)}px`
+    : `${(item.depth || 0) * (indent || 0) + 14 * 2}px`;
 
-  const editorNodeStyle = {
+  const treeNodeStyle = {
     height: itemHeight,
     lineHeight: `${itemHeight}px`,
     paddingLeft,
   } as React.CSSProperties;
 
   const renderIcon = useCallback(
-    (node: BasicCompositeTreeNode | BasicTreeNode) => (
-      // 图标的最大高度设置为 `itemHeight - 8`, 这样在视觉上看起来有一种 padding 的效果
-      <Icon icon={node.icon} className={cls('icon', node.iconClassName)} style={{ maxHeight: itemHeight - 8 }} />
-    ),
+    (node: BasicCompositeTreeNode | BasicTreeNode) =>
+      node.iconClassName ? (
+        // 图标的最大高度设置为 `itemHeight - 8`, 这样在视觉上看起来有一种 padding 的效果
+        <Icon icon={node.icon} className={cls('icon', node.iconClassName)} style={{ maxHeight: itemHeight - 8 }} />
+      ) : null,
     [],
   );
 
@@ -163,7 +170,11 @@ export const BasicTreeNodeRenderer: React.FC<
   };
 
   const renderTwice = (item: BasicCompositeTreeNode | BasicTreeNode) => {
-    if (!(item as BasicCompositeTreeNode).expandable) {
+    if (isDefined((item as BasicCompositeTreeNode).expandable)) {
+      if (!(item as BasicCompositeTreeNode).expandable) {
+        return <div className={cls('segment', 'expansion_toggle')}></div>;
+      }
+    } else {
       return null;
     }
 
@@ -179,7 +190,7 @@ export const BasicTreeNodeRenderer: React.FC<
       onDoubleClick={handleDbClick}
       onContextMenu={handleContextMenu}
       className={cls('tree_node', className, decorations ? decorations.classlist : null)}
-      style={editorNodeStyle}
+      style={treeNodeStyle}
       data-id={item.id}
     >
       <div className='content'>

packages/core-browser/src/services/storage-service.ts

@@ -99,6 +99,9 @@ abstract class BaseBrowserStorageService implements StorageService {
     } catch (e) {
       this.logger.error(`storage getDate error: ${e}, use defaultValue as result.`);
     }
+    if (defaultValue && isObject(defaultValue)) {
+      delete defaultValue['expires'];
+    }
     return defaultValue;
   }
 

packages/debug/__tests__/browser/view/breakpoint/debug-breakpoints.service.test.ts

@@ -44,6 +44,7 @@ describe('Debug Breakpoints Service', () => {
     updateBreakpoint: jest.fn(),
     updateExceptionBreakpoints: jest.fn(),
     cleanAllMarkers: jest.fn(),
+    whenReady: Promise.resolve(),
   };
 
   const mockContextKeyService = {
@@ -111,7 +112,7 @@ describe('Debug Breakpoints Service', () => {
     expect(typeof debugBreakpointsService.toggleBreakpoints).toBe('function');
   });
 
-  it('should init success', () => {
+  it('should init success', async () => {
     expect(mockBreakpointManager.onDidChangeBreakpoints).toBeCalledTimes(1);
     expect(mockBreakpointManager.onDidChangeExceptionsBreakpoints).toBeCalledTimes(1);
     expect(mockContextKeyService.onDidChangeContext).toBeCalledTimes(1);

packages/debug/src/browser/view/breakpoints/debug-breakpoints.module.less

@@ -40,6 +40,7 @@
   width: 19px;
   height: 19px;
   min-width: 19px;
+  margin-right: 3px;
 }
 
 .debug_breakpoints_badge {
@@ -67,5 +68,5 @@
 }
 
 .debug_breakpoints_item_tree_node {
-  padding-left: 22px !important;
+  padding-left: 27px !important;
 }

packages/debug/src/browser/view/breakpoints/debug-breakpoints.service.ts

@@ -89,7 +89,6 @@ export class DebugBreakpointsService extends WithEventBus {
 
   async init() {
     await this.updateRoots();
-    await this.updateBreakpoints();
     this.workspaceService.onWorkspaceChanged(async () => {
       this.updateRoots();
       this.updateBreakpoints();
@@ -100,6 +99,9 @@ export class DebugBreakpointsService extends WithEventBus {
     this.breakpoints.onDidChangeExceptionsBreakpoints(() => {
       this.updateBreakpoints();
     });
+    this.breakpoints.whenReady.then(() => {
+      this.updateBreakpoints();
+    });
     this.contextKeyService.onDidChangeContext((e) => {
       if (e.payload.affectsSome(new Set([CONTEXT_IN_DEBUG_MODE_KEY]))) {
         runInAction(() => {
@@ -190,7 +192,6 @@ export class DebugBreakpointsService extends WithEventBus {
         this.treeNodeMap.set(uri.toString(), getTreeNodes);
       }
     });
-
     this._onDidChangeBreakpointsTreeNode.fire(this.treeNodeMap);
   }
 

packages/debug/src/browser/view/breakpoints/debug-breakpoints.view.tsx

@@ -1,14 +1,8 @@
 import cls from 'classnames';
 import { observer } from 'mobx-react-lite';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import {
-  BasicRecycleTree,
-  CheckBox,
-  IBasicTreeData,
-  ICompositeTreeNode,
-  ITreeNodeOrCompositeTreeNode,
-} from '@opensumi/ide-components';
+import { BasicRecycleTree, CheckBox, IBasicTreeData, ICompositeTreeNode } from '@opensumi/ide-components';
 import { Badge } from '@opensumi/ide-components';
 import {
   useInjectable,
@@ -19,6 +13,7 @@ import {
   Disposable,
   ViewState,
   Event,
+  isUndefined,
 } from '@opensumi/ide-core-browser';
 import { DebugProtocol } from '@opensumi/vscode-debugprotocol/lib/debugProtocol';
 
@@ -33,6 +28,7 @@ import {
 } from '../../breakpoint';
 import { DebugSessionManager } from '../../debug-session-manager';
 
+import { BreakpointsTreeNode } from './debug-breakpoints-tree.model';
 import styles from './debug-breakpoints.module.less';
 import { DebugBreakpointsService } from './debug-breakpoints.service';
 
@@ -47,66 +43,74 @@ export interface BreakpointItem {
 export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
   const debugBreakpointsService: DebugBreakpointsService = useInjectable(DebugBreakpointsService);
   const { enable, toggleBreakpointEnable } = debugBreakpointsService;
+  const isDisposed = useRef<boolean>(false);
   const [treeData, setTreeData] = useState<IBasicTreeData[]>([]);
 
-  useEffect(() => {
-    const dispose = new Disposable();
-
-    dispose.addDispose(
-      debugBreakpointsService.onDidChangeBreakpointsTreeNode((nodes) => {
-        const { roots } = debugBreakpointsService;
-        const breakpointTreeData: IBasicTreeData[] = [];
-
-        Array.from(nodes.entries()).forEach(([uri, items]) => {
-          const isException = EXCEPTION_BREAKPOINT_URI.toString() === uri;
-
-          if (isException) {
-            items.forEach((item) => {
-              breakpointTreeData.push({
-                label: '',
-                expandable: false,
-                children: [],
-                description: (
-                  <BreakpointItem
-                    toggle={() => toggleBreakpointEnable(item.breakpoint)}
-                    breakpointEnabled={enable}
-                    data={item.rawData}
-                    isDebugMode={debugBreakpointsService.inDebugMode}
-                  ></BreakpointItem>
-                ),
-              });
-            });
-          } else {
-            const toURI = URI.parse(uri);
-            const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
-
+  const updateTreeData = useCallback(
+    (nodes: [string, BreakpointsTreeNode[]][]) => {
+      const { roots } = debugBreakpointsService;
+      const breakpointTreeData: IBasicTreeData[] = [];
+      nodes.forEach(([uri, items]) => {
+        const isException = EXCEPTION_BREAKPOINT_URI.toString() === uri;
+        if (isException) {
+          items.forEach((item) => {
             breakpointTreeData.push({
-              label: parent ? parent.relative(toURI)!.toString() : URI.parse(uri).displayName,
-              expandable: true,
-              iconClassName: getIcon('file-text'),
-              expanded: true,
-              children: items.map((item) => ({
-                ...item,
-                label: '',
-                expandable: false,
-                description: (
-                  <BreakpointItem
-                    toggle={() => toggleBreakpointEnable(item.breakpoint)}
-                    breakpointEnabled={enable}
-                    data={item.rawData}
-                    isDebugMode={debugBreakpointsService.inDebugMode}
-                  ></BreakpointItem>
-                ),
-              })),
+              label: '',
+              expandable: false,
+              children: [],
+              description: (
+                <BreakpointItem
+                  toggle={() => toggleBreakpointEnable(item.breakpoint)}
+                  breakpointEnabled={enable}
+                  data={item.rawData}
+                  isDebugMode={debugBreakpointsService.inDebugMode}
+                ></BreakpointItem>
+              ),
             });
-          }
-        });
+          });
+        } else {
+          const toURI = URI.parse(uri);
+          const parent = roots.filter((root) => root.isEqualOrParent(toURI))[0];
 
+          breakpointTreeData.push({
+            label: parent ? parent.relative(toURI)?.toString() || '' : URI.parse(uri).displayName,
+            expandable: true,
+            iconClassName: getIcon('file-text'),
+            expanded: true,
+            children: items.map((item) => ({
+              ...item,
+              label: '',
+              expandable: false,
+              description: (
+                <BreakpointItem
+                  toggle={() => toggleBreakpointEnable(item.breakpoint)}
+                  breakpointEnabled={enable}
+                  data={item.rawData}
+                  isDebugMode={debugBreakpointsService.inDebugMode}
+                ></BreakpointItem>
+              ),
+            })),
+          });
+        }
+      });
+      if (!isDisposed.current) {
         setTreeData(breakpointTreeData);
+      }
+    },
+    [treeData],
+  );
+
+  useEffect(() => {
+    const dispose = new Disposable();
+    updateTreeData(Array.from(debugBreakpointsService.treeNodeMap.entries()));
+    dispose.addDispose(
+      debugBreakpointsService.onDidChangeBreakpointsTreeNode((nodes: Map<string, BreakpointsTreeNode[]>) => {
+        updateTreeData(Array.from(nodes.entries()));
       }),
     );
 
     return () => {
+      isDisposed.current = true;
       dispose.dispose();
     };
   }, []);
@@ -120,11 +124,10 @@ export const DebugBreakpointView = observer(({ viewState }: React.PropsWithChild
   }, [treeData]);
 
   const getItemClassName = useCallback((item: ICompositeTreeNode) => {
-    if (!item.children) {
+    if (!item.children && isUndefined((item as any).expandable)) {
       return styles.debug_breakpoints_item_tree_node;
     }
   }, []);
-
   return (
     <div className={cls(styles.debug_breakpoints, !enable && styles.debug_breakpoints_disabled)}>
       <BasicRecycleTree treeData={treeData} height={viewState.height} getItemClassName={getItemClassName} />

packages/preferences/src/browser/preference-settings.service.ts

@@ -513,6 +513,11 @@ export const defaultSettingGroup: ISettingGroup[] = [
     title: '%settings.group.general%',
     iconClass: getIcon('setting'),
   },
+  {
+    id: PreferenceSettingId.Terminal,
+    title: '%settings.group.terminal%',
+    iconClass: getIcon('terminal'),
+  },
   {
     id: PreferenceSettingId.Editor,
     title: '%settings.group.editor%',
@@ -523,11 +528,6 @@ export const defaultSettingGroup: ISettingGroup[] = [
     title: '%settings.group.view%',
     iconClass: getIcon('detail'),
   },
-  {
-    id: PreferenceSettingId.Terminal,
-    title: '%settings.group.terminal%',
-    iconClass: getIcon('terminal'),
-  },
   {
     id: PreferenceSettingId.Feature,
     title: '%settings.group.feature%',

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

@@ -233,6 +233,8 @@ const PreferenceIndexes = observer(() => {
       data.children = children;
       if (children.length > 0) {
         data.expandable = true;
+      } else {
+        data.expandable = false;
       }
       basicTreeData.push(data);
     }