fix: update madwizard to not show guidebook title in terminal section

Instead, display "Logs will appear here".

Also, use 14px font size in terminal, now that it isn't a main source of user interaction.

Author: starpit

package-lock.json

@@ -28,6 +28,7 @@
     "@patternfly/react-core": "^4.239.0",
     "allotment": "^1.17.0",
     "asciinema-player": "^3.0.1",
+    "chalk": "^5.1.2",
     "chokidar": "^3.5.3",
     "json-diff": "^1.0.0",
     "needle": "^3.1.0",

plugins/plugin-codeflare/package.json

@@ -15,6 +15,7 @@
  */
 
 import React from "react"
+import { Chalk } from "chalk"
 import stripAnsi from "strip-ansi"
 import { Prompts } from "madwizard"
 import { Job } from "@kui-shell/core"
@@ -219,10 +220,14 @@ export default class AskingTerminal extends React.PureComponent<Props, State> {
     }
   }
 
+  private readonly initialContent = new Chalk({ level: 2 }).dim.italic("Logs will appear here")
+
   private terminal() {
     return (
       <SelectedProfileTerminal
         searchable={false}
+        initialContent={this.initialContent}
+        fontSizeAdjust={1 /* relative to 14px */}
         key={
           this.state.myInitCount +
           "_" +

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

@@ -162,6 +162,7 @@ export default class RestartableTerminal extends React.PureComponent<Props, Stat
             key={key}
             searchable={this.props.searchable}
             fontSizeAdjust={this.props.fontSizeAdjust}
+            initialContent={this.props.initialContent}
           />
         </div>
       )

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

@@ -55,12 +55,12 @@ export type TerminalOptions = ClassName & {
 
   /** Font size scaling factor from the stock font size from Kui [default: 16/14] */
   fontSizeAdjust?: number
-}
 
-type Props = TerminalOptions & {
-  /** If given, the initial terminal output to render */
+  /** Initial content to display in the terminal */
   initialContent?: string
+}
 
+type Props = TerminalOptions & {
   /**
    * Commence/recommence streaming. Will be invoked on mount.
    */
@@ -82,13 +82,13 @@ interface State extends ClassName {
 }
 
 export default class XTerm extends React.PureComponent<Props, State> {
-  private terminal: Terminal = new Terminal({
+  private readonly terminal: Terminal = new Terminal({
     convertEol: true,
     scrollback: 5000,
     allowProposedApi: true,
   })
 
-  private searchAddon = new SearchAddon()
+  private readonly searchAddon = new SearchAddon()
 
   private readonly cleaners: (() => void)[] = []
   private readonly container = React.createRef<HTMLDivElement>()
@@ -110,24 +110,24 @@ export default class XTerm extends React.PureComponent<Props, State> {
   }
 
   public componentDidMount() {
-    this.mountTerminal()
-
-    if (this.props.watch) {
-      const streamer = this.props.watch()
-      streamer.on("data", this.terminal.write.bind(this.terminal))
+    if (this.mountTerminal()) {
+      if (this.props.watch) {
+        const streamer = this.props.watch()
+        streamer.on("data", this.terminal.write.bind(this.terminal))
+
+        if (streamer.onInput) {
+          // pass user input from the terminal to the watcher
+          this.terminal.onData(streamer.onInput)
+          this.terminal.focus()
+        }
 
-      if (streamer.onInput) {
-        // pass user input from the terminal to the watcher
-        this.terminal.onData(streamer.onInput)
-        this.terminal.focus()
-      }
+        if (streamer.onResize) {
+          const onResize = streamer.onResize
+          this.terminal.onResize(({ rows, cols }) => onResize(rows, cols))
+        }
 
-      if (streamer.onResize) {
-        const onResize = streamer.onResize
-        this.terminal.onResize(({ rows, cols }) => onResize(rows, cols))
+        this.setState({ streamer })
       }
-
-      this.setState({ streamer })
     }
   }
 
@@ -150,7 +150,8 @@ export default class XTerm extends React.PureComponent<Props, State> {
   private mountTerminal() {
     const xtermContainer = this.container.current
     if (!xtermContainer) {
-      return
+      // no, we are not yet ready to initialize the terminal
+      return false
     }
 
     const fitAddon = new FitAddon()
@@ -203,6 +204,9 @@ export default class XTerm extends React.PureComponent<Props, State> {
     })
     observer.observe(xtermContainer)
     this.cleaners.push(() => observer.disconnect())
+
+    // yes, we have initialized the terminal
+    return true
   }
 
   /**

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

@@ -145,7 +145,14 @@ export class WorkloadDesigner extends React.PureComponent<Props, State> {
         cmdline,
         hideTerminal: false,
         initCount: curState.initCount + 1,
-        env: Object.assign({}, env, { MWCLEAR_INITIAL: "true" }, this.state.extraEnv),
+        env: Object.assign(
+          {},
+          env,
+          {
+            /* MWCLEAR_INITIAL: "true" */
+          },
+          this.state.extraEnv
+        ),
       }))
     } catch (error) {
       console.error("Error initializing command line", error)

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

@@ -23,7 +23,7 @@
     "access": "public"
   },
   "dependencies": {
-    "madwizard": "^1.8.3",
+    "madwizard": "^1.8.5",
     "@guidebooks/store": "^0.17.7"
   }
 }