fix: codeflare terminal should restart pty on exit

Author: starpit

plugins/plugin-codeflare/src/components/RestartableTerminal.tsx

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2022 The Kubernetes Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { PassThrough } from "stream"
+import { Loading } from "@kui-shell/plugin-client-common"
+import { Arguments, Job, isResizable } from "@kui-shell/core"
+
+import Terminal from "./Terminal"
+
+/**
+ * This is our impl of the `watch` property that our Terminal
+ * component needs, in order to support live updates.
+ */
+function watch(stream: PassThrough, job: Job) {
+  return {
+    on: stream.on.bind(stream), // data from pty to terminal
+    onInput: job.write.bind(job), // user input from terminal to pty
+    unwatch: job.abort.bind(job), // unmount, abort pty job
+    onResize: isResizable(job) ? job.resize.bind(job) : undefined,
+  }
+}
+
+type Props = {
+  cmdline: string
+  env: Record<string, string>
+  tab: Arguments["tab"]
+  repl: Arguments["REPL"]
+}
+
+type State = {
+  startCount?: number
+  job?: Job
+  watch?: () => ReturnType<typeof watch>
+  catastrophicError?: unknown
+}
+
+/**
+ * A wrapper around <Terminal/> that handles pty exits. It restarts
+ * tne pty and recreates the terminal if this happens.
+ */
+export default class RestartableTerminal extends React.PureComponent<Props, State> {
+  private async initPty() {
+    try {
+      // we need this to wire the pty output through to the Terminal
+      // component, which expects something stream-like
+      const passthrough = new PassThrough()
+
+      await this.props.repl.qexec(this.props.cmdline, undefined, undefined, {
+        tab: this.props.tab,
+        env: this.props.env,
+        quiet: true, // strange i know, but this forces PTY execution
+        onExit: () => {
+          // restart
+          this.initPty()
+        },
+        onInit: () => (_) => {
+          // hooks pty output to our passthrough stream
+          passthrough.write(_)
+        },
+        onReady: (job) => {
+          this.setState((curState) => ({
+            job,
+            watch: () => watch(passthrough, job),
+            startCount: !curState || curState.startCount === undefined ? 0 : curState.startCount + 1,
+          }))
+        },
+      })
+    } catch (err) {
+      console.error("Error in RestartableTerminal", err)
+      // this.setState({ catastrophicError: err })
+    }
+  }
+
+  public componentDidMount() {
+    this.initPty()
+  }
+
+  public componentWillUnmount() {
+    if (this.state.job) {
+      this.state.job.abort()
+    }
+  }
+
+  public render() {
+    if (!this.state) {
+      return <Loading />
+    }
+
+    const { watch, catastrophicError } = this.state
+
+    if (catastrophicError) {
+      return "Internal Error"
+    } else if (!watch) {
+      return <Loading />
+    } else {
+      // force a new Terminal every restart
+      const key = !this.state || !this.state.startCount ? 0 : this.state.startCount
+
+      return (
+        <div
+          className="kui--inverted-color-context flex-fill flex-layout flex-align-stretch"
+          style={{ backgroundColor: "var(--color-sidecar-background-02)" }}
+        >
+          <Terminal watch={watch} key={key} />
+        </div>
+      )
+    }
+  }
+}

plugins/plugin-codeflare/src/controller/terminal.tsx

@@ -14,67 +14,22 @@
  * limitations under the License.
  */
 
-import { Arguments, Job, ReactResponse, encodeComponent, isResizable } from "@kui-shell/core"
-
 import React from "react"
-import { PassThrough } from "stream"
+import { Arguments, encodeComponent } from "@kui-shell/core"
 
 import respawn from "./respawn"
-import Terminal from "../components/Terminal"
-
-/**
- * This is our impl of the `watch` property that our Terminal
- * component needs, in order to support live updates.
- */
-function watch(stream: PassThrough, job: Job) {
-  return {
-    on: stream.on.bind(stream), // data from pty to terminal
-    onInput: job.write.bind(job), // user input from terminal to pty
-    unwatch: job.abort.bind(job), // unmount, abort pty job
-    onResize: isResizable(job) ? job.resize.bind(job) : undefined,
-  }
-}
+import Terminal from "../components/RestartableTerminal"
 
 /**
  * This is a command handler that opens up a terminal. The expectation
  * is that the command line to be executed is the "rest" after:
  * `codeflare terminal <rest...>`.
  */
 export default function openTerminal(args: Arguments) {
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise<ReactResponse>(async (resolve, reject) => {
-    try {
-      // we need this to wire the pty output through to the Terminal
-      // component, which expects something stream-like
-      const passthrough = new PassThrough()
-
-      // respawn, meaning launch it with codeflare
-      const { argv, env } = respawn(args.argv.slice(2))
-      const cmdline = argv.map((_) => encodeComponent(_)).join(" ")
-
-      await args.REPL.qexec(cmdline, undefined, undefined, {
-        tab: args.tab,
-        env,
-        quiet: true,
-        onInit: () => (_) => {
-          // hooks pty output to our passthrough stream
-          passthrough.write(_)
-        },
-        onReady: (job) => {
-          resolve({
-            react: (
-              <div
-                className="kui--inverted-color-context flex-fill flex-layout flex-align-stretch"
-                style={{ backgroundColor: "var(--color-sidecar-background-02)" }}
-              >
-                <Terminal watch={() => watch(passthrough, job)} />
-              </div>
-            ),
-          })
-        },
-      })
-    } catch (err) {
-      reject(err)
-    }
-  })
+  // respawn, meaning launch it with codeflare
+  const { argv, env } = respawn(args.argv.slice(2))
+  const cmdline = argv.map((_) => encodeComponent(_)).join(" ")
+  return {
+    react: <Terminal cmdline={cmdline} env={env} repl={args.REPL} tab={args.tab} />,
+  }
 }