Draft: Terminal Manager

examples/browser/package.json

@@ -50,6 +50,7 @@
     "@theia/secondary-window": "1.39.0",
     "@theia/task": "1.39.0",
     "@theia/terminal": "1.39.0",
+    "@theia/terminal-manager": "1.39.0",
     "@theia/timeline": "1.39.0",
     "@theia/toolbar": "1.39.0",
     "@theia/typehierarchy": "1.39.0",

examples/browser/tsconfig.json

@@ -113,6 +113,9 @@
     {
       "path": "../../packages/terminal"
     },
+    {
+      "path": "../../packages/terminal-manager"
+    },
     {
       "path": "../../packages/timeline"
     },

examples/electron/package.json

@@ -52,6 +52,7 @@
     "@theia/task": "1.39.0",
     "@theia/terminal": "1.39.0",
     "@theia/timeline": "1.39.0",
+    "@theia/terminal-manager": "1.39.0",
     "@theia/toolbar": "1.39.0",
     "@theia/typehierarchy": "1.39.0",
     "@theia/userstorage": "1.39.0",

examples/electron/tsconfig.json

@@ -116,6 +116,9 @@
     {
       "path": "../../packages/terminal"
     },
+    {
+      "path": "../../packages/terminal-manager"
+    },
     {
       "path": "../../packages/timeline"
     },

packages/terminal-manager/.eslintrc.js

@@ -0,0 +1,10 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+    extends: [
+        '../../configs/build.eslintrc.json'
+    ],
+    parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: 'tsconfig.json'
+    }
+};

packages/terminal-manager/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@theia/terminal-manager",
+  "version": "1.39.0",
+  "description": "Theia - Terminal Manager Extension",
+  "keywords": [
+    "theia-extension"
+  ],
+  "homepage": "https://github.com/eclipse-theia/theia",
+  "license": "EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/eclipse-theia/theia.git"
+  },
+  "author": "Ericsson",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "build": "theiaext build",
+    "clean": "theiaext clean",
+    "compile": "theiaext compile",
+    "lint": "theiaext lint",
+    "test": "theiaext test",
+    "watch": "theiaext watch"
+  },
+  "dependencies": {
+    "@theia/core": "1.39.0",
+    "@theia/preferences": "1.39.0",
+    "@theia/terminal": "1.39.0"
+  },
+  "theiaExtensions": [
+    {
+      "frontend": "lib/browser/terminal-manager-frontend-module"
+    }
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/terminal-manager/src/browser/terminal-manager-alert-dialog.tsx

@@ -0,0 +1,115 @@
+// *****************************************************************************
+// Copyright (C) 2023 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import * as React from '@theia/core/shared/react';
+import { ReactDialog } from '@theia/core/lib/browser/dialogs/react-dialog';
+import { injectable, inject, interfaces } from '@theia/core/shared/inversify';
+import { codicon, DialogProps } from '@theia/core/lib/browser';
+
+export const AlertDialogSettings = Symbol('AlertDialogSettings');
+export interface AlertDialogSettings {
+    message: string;
+    title: string;
+    className: string;
+    type: 'error' | 'warning' | 'info'
+    primaryButtons: string[],
+    secondaryButton: string,
+}
+
+export const AlertDialogFactory = Symbol('AlertDialogFactory');
+export interface AlertDialogFactory {
+    (settings: AlertDialogSettings): AlertDialog;
+}
+
+@injectable()
+export class AlertDialog extends ReactDialog<string | 'close'> {
+    protected selectedValue: string | 'close' = '';
+
+    constructor(
+        @inject(DialogProps) protected override readonly props: DialogProps,
+        @inject(AlertDialogSettings) protected readonly dialogSettings: AlertDialogSettings,
+    ) {
+        super(props);
+        this.addClass('theia-alert-dialog');
+        this.addClass(dialogSettings.type);
+        this.addClass(dialogSettings.className);
+    }
+
+    protected render(): React.ReactNode {
+        const { className, type, message, primaryButtons, secondaryButton } = this.dialogSettings;
+        return (
+            <div className={`theia-alert-dialog-content-wrapper ${type} ${className}`}>
+                <div className='theia-alert-dialog-message-wrapper'>
+                    <div className={`${codicon(type)} alert-icon`} />
+                    <div className='message-container'>
+                        <div className='message'>{message}</div>
+                    </div>
+                </div>
+                <div className={`theia-alert-dialog-buttons-wrapper ${className}`}>
+                    {
+                        primaryButtons.map(button => (
+                            <button
+                                className='theia-button'
+                                onClick={this.handleButton}
+                                type='button'
+                                key={button}
+                                data-id={button}
+                            >
+                                {button}
+                            </button>
+                        ))
+                    }
+                    <button
+                        className='theia-button secondary'
+                        onClick={this.handleButton}
+                        type='button'
+                        key={secondaryButton}
+                        data-id={secondaryButton}
+                    >
+                        {secondaryButton}
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    protected handleButton = (e: React.MouseEvent<HTMLButtonElement>): void => this.doHandleButton(e);
+    protected doHandleButton(e: React.MouseEvent<HTMLButtonElement>): void {
+        const buttonText = e.currentTarget.getAttribute('data-id');
+        if (buttonText) {
+            this.selectedValue = buttonText;
+        }
+        this.accept();
+    }
+
+    get value(): string | 'close' {
+        return this.selectedValue;
+    }
+}
+
+export const bindGenericErrorDialogFactory = (bind: interfaces.Bind): void => {
+    bind(AlertDialogFactory)
+        .toFactory(({ container }) => (settings: AlertDialogSettings): AlertDialog => {
+            const child = container.createChild();
+            child.bind(DialogProps).toConstantValue({
+                title: settings.title,
+                wordWrap: 'break-word',
+            });
+            child.bind(AlertDialogSettings).toConstantValue(settings);
+            child.bind(AlertDialog).toSelf().inSingletonScope();
+            return child.get(AlertDialog);
+        });
+};

packages/terminal-manager/src/browser/terminal-manager-frontend-module.ts

@@ -0,0 +1,62 @@
+// *****************************************************************************
+// Copyright (C) 2023 Ericsson and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+import { ContainerModule, interfaces } from '@theia/core/shared/inversify';
+import {
+    bindViewContribution,
+    PreferenceContribution,
+    WidgetFactory,
+    WidgetManager,
+} from '@theia/core/lib/browser';
+import { TabBarToolbarContribution } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
+import { PreferenceProxyFactory } from '@theia/core/lib/browser/preferences/injectable-preference-proxy';
+import { TerminalManagerWidget } from './terminal-manager-widget';
+import { TerminalManagerFrontendViewContribution } from './terminal-manager-frontend-view-contribution';
+import { TerminalManagerPreferenceContribution, TerminalManagerPreferences, TerminalManagerPreferenceSchema } from './terminal-manager-preferences';
+import { TerminalManagerTreeWidget } from './terminal-manager-tree-widget';
+import { bindGenericErrorDialogFactory } from './terminal-manager-alert-dialog';
+import '../../src/browser/terminal-manager.css';
+
+export default new ContainerModule((bind: interfaces.Bind) => {
+    bindViewContribution(bind, TerminalManagerFrontendViewContribution);
+    bind(TabBarToolbarContribution).toService(TerminalManagerFrontendViewContribution);
+
+    bind(WidgetFactory).toDynamicValue(({ container }) => ({
+        id: TerminalManagerTreeWidget.ID,
+        createWidget: () => TerminalManagerTreeWidget.createWidget(container),
+    })).inSingletonScope();
+
+    bind(WidgetFactory).toDynamicValue(({ container }) => ({
+        id: TerminalManagerWidget.ID,
+        createWidget: async () => {
+            const child = container.createChild();
+            const widgetManager = container.get(WidgetManager);
+            const terminalManagerTreeWidget = await widgetManager.getOrCreateWidget<TerminalManagerTreeWidget>(TerminalManagerTreeWidget.ID);
+            child.bind(TerminalManagerTreeWidget).toConstantValue(terminalManagerTreeWidget);
+            return TerminalManagerWidget.createWidget(child);
+        },
+    }));
+
+    bindGenericErrorDialogFactory(bind);
+
+    bind(TerminalManagerPreferences).toDynamicValue(ctx => {
+        const factory = ctx.container.get<PreferenceProxyFactory>(PreferenceProxyFactory);
+        return factory(TerminalManagerPreferenceSchema);
+    }).inSingletonScope();
+    bind(TerminalManagerPreferenceContribution).toConstantValue({ schema: TerminalManagerPreferenceSchema });
+    bind(PreferenceContribution).toService(TerminalManagerPreferenceContribution);
+});
+