feat: improve problems panel (#242)

* feat: problem panel support to render more informations

* feat: panel container support to focus

Author: mortalYoung

src/components/tree/index.tsx

@@ -108,13 +108,13 @@ const TreeView = ({
                 // take id as backup
                 key = id || `${index}_${indent}`,
                 icon,
-                children,
+                children = [],
                 isLeaf: itemIsLeaf,
             } = item;
             const isLeaf =
                 typeof itemIsLeaf === 'boolean'
                     ? itemIsLeaf
-                    : item.fileType === FileTypes.File;
+                    : item.fileType === FileTypes.File || children.length === 0;
             const IconComponent =
                 typeof icon === 'string' ? <Icon type={icon} /> : icon;
             return (

src/extensions/theme-defaults/themes/dark_defaults.json

@@ -15,6 +15,7 @@
         "list.inactiveSelectionBackground": "#37373D",
         "list.focusOutline": "#007FD4",
         "activityBarBadge.background": "#007ACC",
+        "activityBar.inactiveForeground": "#ffffff66",
         "sidebarTitle.foreground": "#BBBBBB",
         "sideBarSectionHeader.border": "#ccc3",
         "input.placeholderForeground": "#A6A6A6",

src/extensions/theme-defaults/themes/light_defaults.json

@@ -11,6 +11,7 @@
         "editor.selectionHighlightBackground": "#ADD6FF80",
         "editorSuggestWidget.background": "#F3F3F3",
         "activityBarBadge.background": "#007ACC",
+        "activityBar.inactiveForeground": "#ffffff66",
         "sidebarTitle.foreground": "#6F6F6F",
         "sideBarSectionHeader.border": "#61616130",
         "list.hoverBackground": "#E8E8E8",

src/i18n/source/en.ts

@@ -52,6 +52,8 @@ export default {
         'panel.toolbox.closePanel': 'Close Panel',
         'panel.toolbox.maximize': 'Maximize Panel Size',
         'panel.problems.title': 'Problems',
+        'panel.problems.empty':
+            'No problems have been detected in the workspace.',
         'notification.title': 'Notifications',
         'notification.title.no': 'No new notifications',
         'editor.closeToRight': 'Close To Right',

src/i18n/source/zh-CN.json

@@ -48,6 +48,7 @@
         "toolbar.collapseAll": "折叠所有",
         "panel.output.title": "输出",
         "panel.problems.title": "问题",
+        "panel.problems.empty": "未在工作区检测到问题",
         "panel.toolbox.closePanel": "关闭面板",
         "panel.toolbox.maximize": "最大化面板",
         "notification.title": "通知",

src/workbench/panel/panel.tsx

@@ -36,7 +36,9 @@ export function Panel(props: IPanel & IPanelController) {
                     onClick={onToolbarClick}
                 />
             </div>
-            <div className={panelContainerClassName}>{content}</div>
+            <div className={panelContainerClassName} tabIndex={0}>
+                {content}
+            </div>
         </div>
     );
 }

src/workbench/panel/style.scss

@@ -38,12 +38,18 @@
     }
 
     &__container {
+        border: 1px solid transparent;
         bottom: 0;
+        box-sizing: border-box;
         left: 0;
         position: absolute;
         right: 0;
         top: 35px;
         width: 100%;
+
+        &:focus {
+            border-color: var(--list-focusOutline);
+        }
     }
 
     &__toolbar {

src/workbench/problems/paneView/index.tsx

@@ -1,23 +1,53 @@
 import * as React from 'react';
-import { prefixClaName } from 'mo/common/className';
+import { getBEMElement, prefixClaName } from 'mo/common/className';
 import TreeView from 'mo/components/tree';
+import { localize } from 'mo/i18n/localize';
 
 const defaultClassName = prefixClaName('problems');
+const treeClassName = getBEMElement(defaultClassName, 'treeview');
+const treeNodeClassName = getBEMElement(treeClassName, 'treeNode');
+const treeNodeBadgeClassName = getBEMElement(treeNodeClassName, 'badge');
+const treeLeafClassName = getBEMElement(treeClassName, 'treeLeaf');
+const treeLeafSubInfoClassName = getBEMElement(treeLeafClassName, 'subInfo');
 
 function ProblemsPaneView(props: any) {
     const { data } = props;
-    const renderTitle = (item: any): any => {
-        const { name, children, value } = item;
+    if (!data?.length)
         return (
-            <span>
-                {children && children.length ? name : value.code}{' '}
-                <span>({children.length})</span>
-            </span>
+            <div style={{ margin: '0 18px', userSelect: 'none' }}>
+                {localize(
+                    'panel.problems.empty',
+                    'No problems have been detected in the workspace.'
+                )}
+            </div>
         );
-    };
+
     return (
         <div className={defaultClassName}>
-            <TreeView data={data} renderTitle={renderTitle} />
+            <TreeView
+                className={treeClassName}
+                data={data}
+                renderTitle={({ children, name, value }, _, isLeaf) => {
+                    return !isLeaf ? (
+                        <span className={treeNodeClassName}>
+                            {value.code}
+                            <span className={treeNodeBadgeClassName}>
+                                {children?.length}
+                            </span>
+                        </span>
+                    ) : (
+                        <span className={treeLeafClassName}>
+                            {value.message}
+                            <span className={treeLeafSubInfoClassName}>
+                                {value.code}
+                            </span>
+                            <span className={treeLeafSubInfoClassName}>
+                                [{value.startLineNumber}, {value.startColumn}]
+                            </span>
+                        </span>
+                    );
+                }}
+            />
         </div>
     );
 }

src/workbench/problems/style.scss

@@ -1,5 +1,33 @@
 @import 'mo/style/common';
 
+$badge-size: 18px;
+
 #{$problems} {
     margin: 0 18px;
+
+    &__treeview {
+        &__treeNode {
+            align-items: center;
+            display: flex;
+
+            &__badge {
+                background: var(--badge-background);
+                border-radius: 50%;
+                color: var(--badge-foreground);
+                display: inline-block;
+                height: $badge-size;
+                line-height: $badge-size;
+                margin-left: 10px;
+                text-align: center;
+                width: $badge-size;
+            }
+        }
+
+        &__treeLeaf {
+            &__subInfo {
+                color: var(--activityBar-inactiveForeground);
+                margin-left: 5px;
+            }
+        }
+    }
 }