[core] add a new React-based dialog type ReactDialog

This makes it easy to make react-based dialogs, by introducing an abstract class called
`ReactDialog` that extends `AbstractDialog` for making dialogs with React, similar to how
`ReactWidget` extends `BaseWidget`.

Signed-off-by: Samuel Frylmark <samuel.frylmark@ericsson.com>

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## v0.16.0
 
+- [core] added a new React-based dialog type `ReactDialog` [#6855](https://github.com/eclipse-theia/theia/pull/6855)
+
 Breaking changes:
 
 - [core] fixed typo (highligh -> highlight) in caption highlight fragment [#7050](https://github.com/eclipse-theia/theia/pull/7050)

packages/core/src/browser/about-dialog.tsx

@@ -0,0 +1,83 @@
+/********************************************************************************
+ * Copyright (C) 2018 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import * as React from 'react';
+import { inject, injectable, postConstruct } from 'inversify';
+import { DialogProps } from './dialogs';
+import { ReactDialog } from './dialogs/react-dialog';
+import { ApplicationServer, ApplicationInfo, ExtensionInfo } from '../common/application-protocol';
+
+export const ABOUT_CONTENT_CLASS = 'theia-aboutDialog';
+export const ABOUT_EXTENSIONS_CLASS = 'theia-aboutExtensions';
+
+@injectable()
+export class AboutDialogProps extends DialogProps {
+}
+
+@injectable()
+export class AboutDialog extends ReactDialog<void> {
+    protected applicationInfo: ApplicationInfo | undefined;
+    protected extensionsInfos: ExtensionInfo[] = [];
+    protected readonly okButton: HTMLButtonElement;
+
+    @inject(ApplicationServer)
+    protected readonly appServer: ApplicationServer;
+
+    constructor(
+        @inject(AboutDialogProps) protected readonly props: AboutDialogProps
+    ) {
+        super({
+            title: props.title
+        });
+        this.appendAcceptButton('Ok');
+    }
+
+    @postConstruct()
+    protected async init(): Promise<void> {
+        this.applicationInfo = await this.appServer.getApplicationInfo();
+        this.extensionsInfos = await this.appServer.getExtensionsInfos();
+        this.update();
+    }
+
+    protected renderHeader(): React.ReactNode {
+        const applicationInfo = this.applicationInfo;
+        return applicationInfo && <h3>{applicationInfo.name} {applicationInfo.version}</h3>;
+    }
+
+    protected renderExtensions(): React.ReactNode {
+        const extensionsInfos = this.extensionsInfos;
+        return <>
+            <h3>List of extensions</h3>
+
+            <ul className={ABOUT_EXTENSIONS_CLASS}>
+                {
+                    extensionsInfos
+                        .sort((a: ExtensionInfo, b: ExtensionInfo) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+                        .map((extension: ExtensionInfo) => <li key={extension.name}>{extension.name} {extension.version}</li>)
+                }
+            </ul>
+        </>;
+    }
+
+    protected render(): React.ReactNode {
+        return <div className={ABOUT_CONTENT_CLASS}>
+            {this.renderHeader()}
+            {this.renderExtensions()}
+        </div>;
+    }
+
+    get value(): undefined { return undefined; }
+}

packages/core/src/browser/dialogs/react-dialog.tsx

@@ -0,0 +1,49 @@
+/********************************************************************************
+ * Copyright (C) 2019 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { injectable, inject } from 'inversify';
+import { Disposable, DisposableCollection } from '../../common';
+import { Message } from '../widgets';
+import { AbstractDialog, DialogProps } from '../dialogs';
+
+@injectable()
+export abstract class ReactDialog<T> extends AbstractDialog<T> {
+    protected readonly onRender = new DisposableCollection();
+
+    constructor(
+        @inject(DialogProps) protected readonly props: DialogProps
+    ) {
+        super(props);
+        this.toDispose.push(Disposable.create(() => {
+            ReactDOM.unmountComponentAtNode(this.contentNode);
+        }));
+    }
+
+    protected onUpdateRequest(msg: Message): void {
+        super.onUpdateRequest(msg);
+        ReactDOM.render(<>{this.render()}</>, this.contentNode, () => this.onRender.dispose());
+    }
+
+    /**
+     * Render the React widget in the DOM.
+     * - If the widget has been previously rendered,
+     * any subsequent calls will perform an update and only
+     * change the DOM if absolutely necessary.
+     */
+    protected abstract render(): React.ReactNode;
+}

packages/core/src/browser/style/about.css

@@ -14,6 +14,10 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+ ul.theia-aboutDialog {
+    flex: 1 100%;
+    padding-bottom: calc(var(--theia-ui-padding) * 3);
+ }
  ul.theia-aboutExtensions {
     height: 200px;
     overflow: hidden;