Add esc keybinding to all modals, add update button in About modal (#514)

* Add esc keybinding to all modals, add update button in About modal

* move import

src/app/common/elements/modal.tsx

@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as React from "react";
-import * as mobx from "mobx";
 import { If } from "tsx-control-statements/components";
 import ReactDOM from "react-dom";
 import { Button } from "./button";
@@ -14,11 +13,15 @@ import { boundMethod } from "autobind-decorator";
 
 interface ModalHeaderProps {
     onClose?: () => void;
+    keybindings?: boolean;
     title: string;
 }
 
-const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, title }) => (
+const ModalHeader: React.FC<ModalHeaderProps> = ({ onClose, keybindings = true, title }) => (
     <div className="wave-modal-header">
+        <If condition={keybindings && onClose}>
+            <ModalKeybindings onCancel={onClose}></ModalKeybindings>
+        </If>
         {<div className="wave-modal-title">{title}</div>}
         <If condition={onClose}>
             <Button className="secondary ghost" onClick={onClose}>
@@ -36,23 +39,27 @@ interface ModalFooterProps {
     keybindings?: boolean;
 }
 
-class ModalKeybindings extends React.Component<{ onOk; onCancel }, {}> {
+class ModalKeybindings extends React.Component<{ onOk?: () => void; onCancel?: () => void }, {}> {
     curId: string;
 
     @boundMethod
     componentDidMount(): void {
         this.curId = uuidv4();
-        let domain = "modal-" + this.curId;
+        const domain = "modal-" + this.curId;
-        let keybindManager = GlobalModel.keybindManager;
+        const keybindManager = GlobalModel.keybindManager;
         if (this.props.onOk) {
             keybindManager.registerKeybinding("modal", domain, "generic:confirm", (waveEvent) => {
+                if (this.props.onOk) {
                     this.props.onOk();
+                }
                 return true;
             });
         }
         if (this.props.onCancel) {
             keybindManager.registerKeybinding("modal", domain, "generic:cancel", (waveEvent) => {
+                if (this.props.onCancel) {
                     this.props.onCancel();
+                }
                 return true;
             });
         }

src/app/common/modals/about.less

@@ -63,18 +63,6 @@
                     }
                 }
 
-                .status.updated {
-                    div {
-                        display: flex;
-                        align-items: center;
-                        margin-bottom: 5px;
-
-                        i {
-                            color: var(--app-success-color);
-                        }
-                    }
-                }
-
                 .status.outdated {
                     div {
                         i {

src/app/common/modals/about.tsx

@@ -5,10 +5,12 @@ import * as React from "react";
 import * as mobxReact from "mobx-react";
 import * as mobx from "mobx";
 import { boundMethod } from "autobind-decorator";
-import { GlobalModel } from "@/models";
+import { GlobalModel, getApi } from "@/models";
 import { Modal, LinkButton } from "@/elements";
 import * as util from "@/util/util";
 import * as appconst from "@/app/appconst";
+import cn from "classnames";
+import { If } from "tsx-control-statements/components";
 
 import logo from "@/assets/waveterm-logo-with-bg.svg";
 import "./about.less";
@@ -22,54 +24,35 @@ class AboutModal extends React.Component<{}, {}> {
         })();
     }
 
-    @boundMethod
-    isUpToDate(): boolean {
-        return true;
-    }
-
     @boundMethod
     updateApp(): void {
-        // GlobalCommandRunner.updateApp();
+        getApi().installAppUpdate();
     }
 
     @boundMethod
-    getStatus(isUpToDate: boolean): JSX.Element {
+    getClientVersion(): JSX.Element {
-        // TODO no up-to-date status reporting
+        const clientData: ClientDataType = GlobalModel.clientData.get();
-        return (
+        const showUpdateStatus = clientData.clientopts.noreleasecheck !== true;
-            <div className="status updated">
+        const isUpToDate = !showUpdateStatus || GlobalModel.appUpdateStatus.get() !== "ready";
-                <div className="text-selectable">
-                    Client Version {appconst.VERSION} ({appconst.BUILD})
-                </div>
-            </div>
-        );
 
-        if (isUpToDate) {
         return (
-                <div className="status updated">
+            <div className={cn("status", { outdated: !isUpToDate })}>
-                    <div>
+                <If condition={!isUpToDate}>
-                        <i className="fa-sharp fa-solid fa-circle-check" />
-                        <span>Up to Date</span>
-                    </div>
-                    <div className="selectable">
-                        Client Version {appconst.VERSION} ({appconst.BUILD})
-                    </div>
-                </div>
-            );
-        }
-        return (
-            <div className="status outdated">
                     <div>
                         <i className="fa-sharp fa-solid fa-triangle-exclamation" />
                         <span>Outdated Version</span>
                     </div>
+                </If>
                 <div className="selectable">
                     Client Version {appconst.VERSION} ({appconst.BUILD})
                 </div>
+                <If condition={!isUpToDate}>
                     <div>
                         <button onClick={this.updateApp} className="button color-green text-secondary">
-                        Update
+                            Restart to Update
                         </button>
                     </div>
+                </If>
             </div>
         );
     }
@@ -93,7 +76,7 @@ class AboutModal extends React.Component<{}, {}> {
                             </div>
                         </div>
                     </div>
-                    <div className="about-section text-standard">{this.getStatus(this.isUpToDate())}</div>
+                    <div className="about-section text-standard">{this.getClientVersion()}</div>
                     <div className="about-section">
                         <LinkButton
                             className="secondary solid"