Migrate editing, polling and resizing functionality

.vscode/settings.json

@@ -6,7 +6,8 @@
 {
     "editor.formatOnSave": true,
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "explicit"
+        "source.fixAll.eslint": "explicit",
+        "source.organizeImports": "explicit"
     },
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"

eslint.config.mjs

@@ -5,10 +5,10 @@
  * terms of the MIT License as outlined in the LICENSE file.
  **********************************************************************************/
 
-import globals from 'globals';
 import eslint from '@eslint/js';
-import tseslint from 'typescript-eslint';
 import header from 'eslint-plugin-header';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
 
 header.rules.header.meta.schema = false;
 
@@ -32,13 +32,7 @@ export default tseslint.config(
             // ESLint Convention
             quotes: ['error', 'single'],
             semi: ['error', 'always'],
-            indent: [
-                'error',
-                4,
-                {
-                    SwitchCase: 1
-                }
-            ],
+
             'block-spacing': ['error', 'always'],
             'brace-style': [
                 'error',

package.json

@@ -23,7 +23,7 @@
         "@vscode/codicons": "0.0.20",
         "@vscode/webview-ui-toolkit": "^1.4.0",
         "antd": "^5.22.1",
-        "primeflex": "^3.3.1",
+        "re-resizable": "^6.11.2",
         "react-markdown": "^9.0.1",
         "remark-gfm": "^4.0.0",
         "throttle-debounce": "5.0.2",

src/base/style-utils.ts

@@ -1,21 +1,23 @@
 /**********************************************************************************
- * Copyright (c) 2025 Company and others.
+ * Copyright (c) 2025 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.
  **********************************************************************************/
 
-export function classNames(...classes: (string | Record<string, boolean>)[]): string {
+export function classNames(...classes: (string | Record<string, boolean> | undefined)[]): string {
     return classes
-        .filter(c => c !== undefined)
-        .map(c => {
-            if (typeof c === 'string') {
-                return c;
+        .map(className => {
+            if (!className) {
+                return '';
             }
-
-            return Object.entries(c)
+            if (typeof className === 'string') {
+                return className;
+            }
+            return Object.entries(className)
                 .filter(([, value]) => value)
                 .map(([key]) => key);
         })
+        .filter(className => className.length > 0)
         .join(' ');
 }

src/label/label-helpers.tsx

@@ -1,5 +1,5 @@
 /**********************************************************************************
- * Copyright (c) 2025 Company and others.
+ * Copyright (c) 2025 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.
@@ -8,7 +8,7 @@
 import React from 'react';
 import Markdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../tooltip/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip/tooltip';
 
 export function createHighlightedText(label?: string, highlights?: [number, number][]): React.JSX.Element {
     if (label === undefined) {
@@ -48,7 +48,7 @@ export function createHighlightedText(label?: string, highlights?: [number, numb
 }
 
 export function createLabelWithTooltip(child: React.JSX.Element, tooltip?: string): React.JSX.Element {
-    const label = <div className='tree-label flex-auto flex align-items-center'>{child}</div>;
+    const label = <div className='tree-label'>{child}</div>;
 
     if (tooltip === undefined) {
         return label;

src/tree/browser/components/cells/ActionCell.tsx

@@ -0,0 +1,44 @@
+/**********************************************************************************
+ * Copyright (c) 2025 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.
+ **********************************************************************************/
+
+import React from 'react';
+import { CommandDefinition } from '../../../../vscode/webview-types';
+import { CDTTreeItem, CDTTreeItemResource, CDTTreeTableActionColumn, CDTTreeTableActionColumnCommand } from '../../../common';
+
+export interface ActionCellProps<T extends CDTTreeItemResource> {
+    column: CDTTreeTableActionColumn;
+    record: CDTTreeItem<T>;
+    actions: CDTTreeTableActionColumnCommand[];
+    onAction?: (event: React.UIEvent, command: CommandDefinition, value: unknown, record: CDTTreeItem<T>) => void;
+}
+
+const ActionCell = <T extends CDTTreeItemResource>({ record, actions, onAction }: ActionCellProps<T>) => {
+    return (
+        <div className='tree-actions'>
+            {actions.map(action => {
+                const handleAction = (e: React.MouseEvent | React.KeyboardEvent) => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    onAction?.(e, action, action.value, record);
+                };
+                return (
+                    <i
+                        key={action.commandId}
+                        title={action.title}
+                        className={`codicon codicon-${action.icon}`}
+                        onClick={handleAction}
+                        role='button'
+                        tabIndex={0}
+                        onKeyDown={e => e.key === 'Enter' && handleAction(e)}
+                    />
+                );
+            })}
+        </div>
+    );
+};
+
+export default ActionCell;

src/tree/browser/components/cells/EditableStringCell.tsx

@@ -0,0 +1,157 @@
+/**********************************************************************************
+ * Copyright (c) 2025 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.
+ **********************************************************************************/
+
+import '../../../../../style/tree/editable-string-cell.css';
+
+import { Checkbox, Input, Select } from 'antd';
+import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import React, { useCallback, useEffect, useRef } from 'react';
+import { CDTTreeItem, CDTTreeItemResource, EditableCDTTreeTableStringColumn } from '../../../common';
+import LabelCell from './LabelCell';
+
+interface EditableLabelCellProps<T extends CDTTreeItemResource> {
+    column: EditableCDTTreeTableStringColumn;
+    record: CDTTreeItem<T>;
+    editing: boolean;
+    autoFocus: boolean;
+    onSubmit: (newValue: string) => void;
+    onCancel: () => void;
+    onEdit?: (edit: boolean) => void;
+}
+
+const EditableLabelCell = <T extends CDTTreeItemResource>({
+    column,
+    record,
+    editing,
+    autoFocus,
+    onSubmit,
+    onCancel,
+    onEdit
+}: EditableLabelCellProps<T>) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const editorRef = useRef<any>(null);
+
+    const commitEdit = useCallback(
+        (newValue: string, event?: { stopPropagation: () => void; preventDefault: () => void }) => {
+            event?.stopPropagation();
+            event?.preventDefault();
+            onSubmit(newValue);
+            onEdit?.(false);
+        },
+        [onSubmit]
+    );
+
+    const cancelEdit = useCallback(() => {
+        onCancel();
+        onEdit?.(false);
+    }, [column.edit.value, onCancel, onEdit]);
+
+    // Cancel the edit only if focus leaves the entire container.
+    const handleBlur = useCallback(() => {
+        setTimeout(() => {
+            if (containerRef.current && document.activeElement && !containerRef.current.contains(document.activeElement)) {
+                cancelEdit();
+            }
+        }, 0);
+    }, [cancelEdit]);
+
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                cancelEdit();
+            }
+            e.stopPropagation();
+        },
+        [cancelEdit]
+    );
+
+    // Consume the double-click event so no other handler is triggered.
+    const handleDoubleClick = useCallback(
+        (e: React.MouseEvent) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onEdit?.(true);
+        },
+        [column, onEdit]
+    );
+
+    // Focus the editor when entering edit mode.
+    useEffect(() => {
+        if (editing && editorRef.current && autoFocus) {
+            editorRef.current.focus();
+        }
+    }, [editing, autoFocus]);
+
+    if (editing) {
+        return (
+            <div className='edit-field-container' ref={containerRef}>
+                {(() => {
+                    switch (column.edit.type) {
+                        case 'text':
+                            return (
+                                <Input
+                                    ref={editorRef}
+                                    className={'text-field-cell'}
+                                    defaultValue={column.edit.value}
+                                    onPressEnter={e => commitEdit(e.currentTarget.value, e)}
+                                    onBlur={handleBlur}
+                                    onClick={e => e.stopPropagation()}
+                                    onKeyDown={handleKeyDown}
+                                />
+                            );
+                        case 'boolean': {
+                            const checked = column.edit.value === '1';
+                            return (
+                                <Checkbox
+                                    ref={editorRef}
+                                    checked={checked}
+                                    onChange={(e: CheckboxChangeEvent) => commitEdit(e.target.checked ? '1' : '0', e)}
+                                    onBlur={handleBlur}
+                                    onClick={e => e.stopPropagation()}
+                                    onKeyDown={handleKeyDown}
+                                />
+                            );
+                        }
+                        case 'enum': {
+                            return (
+                                <Select
+                                    ref={editorRef}
+                                    className={'enum-field-cell'}
+                                    placeholder={column.label}
+                                    value={column.label} // we want to use 'Write Only' as value even if it is not an option
+                                    onChange={newValue => commitEdit(newValue)}
+                                    onBlur={handleBlur}
+                                    onClick={e => e.stopPropagation()}
+                                    onKeyDown={handleKeyDown}
+                                >
+                                    {column.edit.options.map(opt => {
+                                        return (
+                                            <Select.Option key={opt.value} value={opt.value}>
+                                                {opt.label}
+                                            </Select.Option>
+                                        );
+                                    })}
+                                </Select>
+                            );
+                        }
+                        default:
+                            return null;
+                    }
+                })()}
+            </div>
+        );
+    }
+
+    return (
+        <div className='editable-string-cell' onDoubleClick={handleDoubleClick}>
+            <LabelCell record={record} column={column} />
+        </div>
+    );
+};
+
+export default React.memo(EditableLabelCell);

src/tree/browser/components/cells/LabelCell.tsx

@@ -0,0 +1,33 @@
+/**********************************************************************************
+ * Copyright (c) 2025 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.
+ **********************************************************************************/
+
+import classNames from 'classnames';
+import React from 'react';
+import { createHighlightedText, createLabelWithTooltip } from '../../../../label/label-helpers';
+import { CDTTreeItem, CDTTreeItemResource, CDTTreeTableStringColumn } from '../../../common';
+
+export interface LabelCellProps<T extends CDTTreeItemResource> {
+    column: CDTTreeTableStringColumn;
+    record: CDTTreeItem<T>;
+}
+
+const LabelCell = <T extends CDTTreeItemResource>({ column }: LabelCellProps<T>) => {
+    const icon = column.icon && <i className={classNames('cell-icon', column.icon)} />;
+
+    const content = column.tooltip
+        ? createLabelWithTooltip(<span>{createHighlightedText(column.label, column.highlight)}</span>, column.tooltip)
+        : createHighlightedText(column.label, column.highlight);
+
+    return (
+        <div className='tree-cell ant-table-cell-ellipsis' tabIndex={0}>
+            {icon}
+            {content}
+        </div>
+    );
+};
+
+export default React.memo(LabelCell);

src/tree/browser/components/cells/StringCell.tsx

@@ -0,0 +1,53 @@
+/**********************************************************************************
+ * Copyright (c) 2025 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.
+ **********************************************************************************/
+
+import React, { useCallback } from 'react';
+import { CDTTreeItem, CDTTreeItemResource, CDTTreeTableStringColumn, EditableCDTTreeTableStringColumn } from '../../../common';
+import EditableStringCell from './EditableStringCell';
+import LabelCell from './LabelCell';
+
+interface StringCellProps<T extends CDTTreeItemResource> {
+    column: CDTTreeTableStringColumn;
+    record: CDTTreeItem<T>;
+    editing?: boolean;
+    autoFocus?: boolean;
+    onSubmit?: (record: CDTTreeItem<T>, newValue: string) => void;
+    onCancel?: (record: CDTTreeItem<T>) => void;
+    onEdit?: (record: CDTTreeItem<T>, edit: boolean) => void;
+}
+
+const StringCell = <T extends CDTTreeItemResource>({
+    column,
+    record,
+    editing = false,
+    autoFocus = false,
+    onSubmit,
+    onCancel,
+    onEdit
+}: StringCellProps<T>) => {
+    const handleSubmit = useCallback((newValue: string) => onSubmit?.(record, newValue), [record, onSubmit]);
+
+    const handleCancel = useCallback(() => onCancel?.(record), [record, onCancel]);
+
+    const handleEdit = useCallback((edit: boolean) => onEdit?.(record, edit), [record, onEdit]);
+
+    return column.edit && onSubmit ? (
+        <EditableStringCell
+            record={record}
+            column={column as EditableCDTTreeTableStringColumn}
+            onSubmit={handleSubmit}
+            onCancel={handleCancel}
+            onEdit={handleEdit}
+            editing={editing}
+            autoFocus={autoFocus}
+        />
+    ) : (
+        <LabelCell record={record} column={column} />
+    );
+};
+
+export default StringCell;