Introduce PrimeReact (eclipse-cdt-cloud#24)

Co-authored-by: jreineckearm <[email protected]> Co-authored-by: Martin Fleck <[email protected]>
eclipsesource · Sep 3, 2024 · 61550b2 · 61550b2
1 parent 35e8206
commit 61550b2
Show file tree

Hide file tree

Showing 43 changed files with 3,621 additions and 313 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -10,6 +10,7 @@
         "plugin:@typescript-eslint/recommended"
     ],
     "rules": {
+        "@typescript-eslint/no-namespace": "off",
         "@typescript-eslint/no-unused-vars": [
             "warn",
             {

diff --git a/.vscode/peripheral-inspector.code-snippets b/.vscode/peripheral-inspector.code-snippets
@@ -0,0 +1,16 @@
+{
+    "Copyright": {
+        "prefix": [
+            "header",
+            "copyright"
+        ],
+        "body": "/********************************************************************************\n * Copyright (C) $CURRENT_YEAR ${YourCompany} and others.\n *\n * This program and the accompanying materials are made available under the\n * terms of the MIT License as outlined in the LICENSE File\n ********************************************************************************/\n\n$0",
+        "description": "Adds the copyright...",
+        "scope": "css,javascript,javascriptreact,typescript,typescriptreact"
+    },
+    "Import VSCode": {
+        "prefix": "codeimport",
+        "body": "import * as vscode from 'vscode';",
+        "scope": "typescript,javascript"
+    }
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,11 @@
+// If one would like to add/remove/modify user preferences without modifying the content of the
+// workspace settings file, then one would need to modify the `settings.json` under here:
+// - Windows: %APPDATA%\Code\User\settings.json
+// - Linux: $HOME/.config/Code/User/settings.json
+// - Mac: $HOME/Library/Application Support/Code/User/settings.json
+{
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": "explicit"
+    }
+}
diff --git a/.vscodeignore b/.vscodeignore
@@ -3,3 +3,5 @@
 node_modules
 src
 *.vsix
+!node_modules/@vscode/codicons/dist/codicon.css
+!node_modules/@vscode/codicons/dist/codicon.ttf
diff --git a/package.json b/package.json
@@ -38,23 +38,40 @@
     "serve": "serve --cors -p 9000"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.17",
+    "@vscode/codicons": "0.0.20",
+    "@vscode/webview-ui-toolkit": "^1.4.0",
     "jszip": "^3.10.1",
     "node-fetch": "^2.6.7",
+    "primeflex": "^3.3.1",
+    "primereact": "^10.8.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "vscode-messenger": "^0.4.5",
+    "vscode-messenger-common": "^0.4.5",
+    "vscode-messenger-webview": "^0.4.5",
     "xml2js": "^0.4.23"
   },
   "devDependencies": {
     "@types/node": "^12.20.0",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@types/vscode": "^1.63.2",
+    "@types/vscode-webview": "^1.57.0",
     "@types/xml2js": "^0.4.9",
     "@typescript-eslint/eslint-plugin": "^5.49.0",
     "@typescript-eslint/parser": "^5.49.0",
     "@vscode/debugprotocol": "^1.59.0",
     "@vscode/vsce": "^2.17.0",
     "buffer": "^6.0.3",
+    "css-loader": "^6.9.0",
     "eslint": "^8.33.0",
     "path-browserify": "1.0.1",
     "serve": "^14.0.1",
     "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.4",
     "timers-browserify": "^2.0.12",
     "ts-loader": "^9.2.6",
     "typescript": "^4.9.4",
@@ -65,7 +82,8 @@
     "views": {
       "debug": [
         {
-          "id": "peripheral-inspector.svd",
+          "type": "webview",
+          "id": "peripheral-inspector.peripheral-tree",
           "name": "Peripherals",
           "when": "peripheral-inspector.svd.hasData"
         }
@@ -106,6 +124,11 @@
         "command": "peripheral-inspector.svd.refreshAll",
         "title": "Refresh All",
         "icon": "$(refresh)"
+      },
+      {
+        "command": "peripheral-inspector.svd.collapseAll",
+        "title": "Collapse All",
+        "icon": "$(collapse-all)"
       }
     ],
     "menus": {
@@ -168,7 +191,12 @@
       "view/title": [
         {
           "command": "peripheral-inspector.svd.refreshAll",
-          "when": "view == peripheral-inspector.svd && debugState == stopped",
+          "when": "view == peripheral-inspector.peripheral-tree && debugState == stopped",
+          "group": "navigation"
+        },
+        {
+          "command": "peripheral-inspector.svd.collapseAll",
+          "when": "view == peripheral-inspector.peripheral-tree && debugState == stopped",
           "group": "navigation"
         }
       ],
@@ -243,6 +271,13 @@
           "when": "view == peripheral-inspector.svd",
           "group": "navigation"
         }
+      ],
+      "webview/context": [
+        {
+          "command": "peripheral-inspector.svd.setFormat",
+          "when": "webviewId == peripheral-inspector.peripheral-tree && webviewSection == tree-item",
+          "group": "navigation"
+        }
       ]
     },
     "configuration": {

diff --git a/src/commands.ts b/src/commands.ts
@@ -6,33 +6,39 @@
  ********************************************************************************/
 
 import * as vscode from 'vscode';
-import * as manifest from './manifest';
-import { PeripheralBaseNode } from './views/nodes/basenode';
-import { PeripheralTreeProvider } from './views/peripheral';
 import { NumberFormat } from './common';
+import { PeripheralBaseNode } from './plugin/peripheral/nodes';
+import { PeripheralDataTracker } from './plugin/peripheral/tree/peripheral-data-tracker';
+import { Commands } from './manifest';
+import { CTDTreeWebviewContext } from './components/tree/types';
 
-export class Commands {
-    public constructor(protected peripheralProvider: PeripheralTreeProvider) {
+export class PeripheralCommands {
+    public constructor(
+        protected readonly dataTracker: PeripheralDataTracker) {
     }
 
     public async activate(context: vscode.ExtensionContext): Promise<void> {
         context.subscriptions.push(
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.updateNode`, node => this.peripheralsUpdateNode(node)),
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.copyValue`, node => this.peripheralsCopyValue(node)),
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.setFormat`, node => this.peripheralsSetFormat(node)),
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.forceRefresh`, node => this.peripheralsForceRefresh(node)),
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.pin`, node => this.peripheralsTogglePin(node)),
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.unpin`, node => this.peripheralsTogglePin(node)),
-            vscode.commands.registerCommand(`${manifest.PACKAGE_NAME}.svd.refreshAll`, () => this.peripheralsForceRefresh()),
+            vscode.commands.registerCommand(Commands.UPDATE_NODE_COMMAND.commandId, node => this.peripheralsUpdateNode(node)),
+            vscode.commands.registerCommand(Commands.COPY_VALUE_COMMAND.commandId, node => this.peripheralsCopyValue(node)),
+            vscode.commands.registerCommand(Commands.SET_FORMAT_COMMAND.commandId, node => this.peripheralsSetFormat(node)),
+            vscode.commands.registerCommand(Commands.FORCE_REFRESH_COMMAND.commandId, node => this.peripheralsForceRefresh(node)),
+            vscode.commands.registerCommand(Commands.PIN_COMMAND.commandId, node => this.peripheralsTogglePin(node)),
+            vscode.commands.registerCommand(Commands.UNPIN_COMMAND.commandId, node => this.peripheralsTogglePin(node)),
+            vscode.commands.registerCommand(Commands.REFRESH_ALL_COMMAND.commandId, () => this.peripheralsForceRefresh()),
+            vscode.commands.registerCommand(Commands.COLLAPSE_ALL_COMMAND.commandId, () => this.collapseAll()),
         );
     }
 
     private async peripheralsUpdateNode(node: PeripheralBaseNode): Promise<void> {
         try {
             const result = await node.performUpdate();
             if (result) {
-                this.peripheralsForceRefresh();
+                await this.peripheralsForceRefresh();
+            } else {
+                this.dataTracker.refresh();
             }
+
         } catch (error) {
             vscode.debug.activeDebugConsole.appendLine(`Unable to update value: ${(error as Error).message}`);
         }
@@ -45,7 +51,11 @@ export class Commands {
         }
     }
 
-    private async peripheralsSetFormat(node: PeripheralBaseNode): Promise<void> {
+    private collapseAll(): void {
+        this.dataTracker.collapseAll();
+    }
+
+    private async peripheralsSetFormat(context: PeripheralBaseNode | CTDTreeWebviewContext): Promise<void> {
         const result = await vscode.window.showQuickPick([
             { label: 'Auto', description: 'Automatically choose format (Inherits from parent)', value: NumberFormat.Auto },
             { label: 'Hex', description: 'Format value in hexadecimal', value: NumberFormat.Hexadecimal },
@@ -56,8 +66,15 @@ export class Commands {
             return;
         }
 
+        let node: PeripheralBaseNode;
+        if (CTDTreeWebviewContext.is(context)) {
+            node = this.dataTracker.getNodeByPath(context.cdtTreeItemPath);
+        } else {
+            node = context;
+        }
+
         node.format = result.value;
-        this.peripheralProvider.refresh();
+        this.dataTracker.refresh();
     }
 
     private async peripheralsForceRefresh(node?: PeripheralBaseNode): Promise<void> {
@@ -66,13 +83,14 @@ export class Commands {
             if (p) {
                 await p.updateData();
             }
+
+            this.dataTracker.refresh();
         } else {
-            this.peripheralProvider.updateData();
+            await this.dataTracker.updateData();
         }
     }
 
     private peripheralsTogglePin(node: PeripheralBaseNode): void {
-        this.peripheralProvider.togglePinPeripheral(node);
-        this.peripheralProvider.refresh();
+        this.dataTracker.togglePin(node);
     }
 }
diff --git a/src/common.ts b/src/common.ts
@@ -5,6 +5,7 @@
  * terms of the MIT License as outlined in the LICENSE File
  ********************************************************************************/
 
+
 export enum NumberFormat {
     Auto = 0,
     Hexadecimal,
@@ -54,5 +55,20 @@ export function toStringDecHexOctBin(val: number/* should be an integer*/): stri
         str = str.slice(0, -8);
     }
     ret += `\nbin: ${tmp}`;
-    return ret ;
+    return ret;
+}
+
+
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] }
+
+export interface CommandDefinition {
+    commandId: string;
+    icon: string;
+    title?: string;
+}
+
+export interface VscodeContext {
+    'data-vscode-context': string;
 }
+
+export type MaybePromise<T> = T | Promise<T>
diff --git a/src/components/tooltip/tooltip.css b/src/components/tooltip/tooltip.css
@@ -0,0 +1,28 @@
+/********************************************************************************
+ * Copyright (C) 2024 EclipseSource and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the MIT License as outlined in the LICENSE File
+ ********************************************************************************/
+
+.tooltip {
+  background: var(--vscode-editorHoverWidget-background);
+  border: 1px solid var(--vscode-editorHoverWidget-border);
+  border-radius: 3px;
+  box-shadow: 0 2px 8px var(--vscode-widget-shadow);
+  max-width: 700px;
+  max-height: 375px;
+  padding: 0;
+}
+
+.tooltip .tooltip-content {
+  background: var(--vscode-editorHoverWidget-background);
+  color: var(--vscode-editorHoverWidget-foreground);
+  font-size: 12px;
+  padding: 2px 8px;
+  max-width: var(--vscode-hover-maxWidth, 500px);
+  word-wrap: break-word;
+  white-space: unset;
+  display: block;
+  flex-direction: column;
+}