fix: selected profiles in the ProfileExplorer are erratic

Author: starpit

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

@@ -15,7 +15,6 @@
  */
 
 import React from "react"
-import { EventEmitter } from "events"
 import { Profiles } from "madwizard"
 import { Loading } from "@kui-shell/plugin-client-common"
 import {
@@ -44,22 +43,10 @@ import { handleBoot, handleShutdown } from "../controller/profile/actions"
 import "../../web/scss/components/Dashboard/Description.scss"
 import "../../web/scss/components/ProfileExplorer/_index.scss"
 
-const events = new EventEmitter()
-
-function emitSelectProfile(profile: string) {
-  events.emit("/profile/select", profile)
-}
-
-export function onSelectProfile(cb: (profile: string) => void) {
-  events.on("/profile/select", cb)
-}
-
-export function offSelectProfile(cb: (profile: string) => void) {
-  events.off("/profile/select", cb)
+type Props = {
+  onSelectProfile?(profile: string): void
 }
 
-type Props = Record<string, never>
-
 type State = {
   watcher: ProfileWatcher
   selectedProfile?: string
@@ -75,7 +62,10 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
 
   private readonly _handleProfileSelection = (selectedProfile: string) => {
     this.setState({ selectedProfile })
-    emitSelectProfile(selectedProfile)
+
+    if (this.props.onSelectProfile) {
+      this.props.onSelectProfile(selectedProfile)
+    }
   }
 
   private updateDebouncer: null | ReturnType<typeof setTimeout> = null
@@ -99,14 +89,22 @@ export default class ProfileExplorer extends React.PureComponent<Props, State> {
 
         let selectedProfile = curState.selectedProfile
         if (!curState || !curState.profiles || curState.profiles.length === 0) {
-          // sort the first time we get a list of profiles; TODO should
-          // we re-sort if the list changes? what we want to avoid is
-          // resorting simply because the selection changed
-          profiles.sort((a, b) => b.lastUsedTime - a.lastUsedTime)
+          // use the last-used profile by default
+          const newSelectedProfile = profiles.slice(1).reduce((lastUsed, profile) => {
+            if (lastUsed.lastUsedTime < profile.lastUsedTime) {
+              return profile
+            } else {
+              return lastUsed
+            }
+          }, profiles[0])
 
           // also emit an initial profile selection event
-          selectedProfile = profiles[0].name
-          emitSelectProfile(selectedProfile)
+          if (newSelectedProfile) {
+            selectedProfile = newSelectedProfile.name
+            if (this.props.onSelectProfile) {
+              this.props.onSelectProfile(newSelectedProfile.name)
+            }
+          }
         }
 
         return {

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

@@ -70,8 +70,10 @@ export default class RestartableTerminal extends React.PureComponent<Props, Stat
         env: this.props.env,
         quiet: true, // strange i know, but this forces PTY execution
         onExit: () => {
-          // restart
-          this.initPty()
+          if (this.mounted) {
+            // restart, if still mounted
+            this.initPty()
+          }
         },
         onInit: () => (_) => {
           // hooks pty output to our passthrough stream

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

@@ -15,47 +15,32 @@
  */
 
 import React from "react"
-import { Loading } from "@kui-shell/plugin-client-common"
 
 import RestartableTerminal, { Props } from "./RestartableTerminal"
-import { onSelectProfile, offSelectProfile } from "./ProfileExplorer"
+
+type MyProps = Props & {
+  selectedProfile: string
+}
 
 type State = {
-  cmdline?: string
+  cmdline: string
 }
 
-export default class SelectedProfileTerminal extends React.PureComponent<Props, State> {
+export default class SelectedProfileTerminal extends React.PureComponent<MyProps, State> {
   public static readonly selectedProfilePattern = /\$\{SELECTED_PROFILE\}/g
 
-  public constructor(props: Props) {
+  public constructor(props: MyProps) {
     super(props)
-    onSelectProfile(this.onSelect)
-    // this.init()
-  }
-
-  public componentWillUnmount() {
-    offSelectProfile(this.onSelect)
-  }
-
-  private readonly onSelect = async (selectedProfile: string) => {
-    const cmdline = await this.cmdline(selectedProfile)
-    this.setState({ cmdline })
+    this.state = {
+      cmdline: this.cmdline(props.selectedProfile),
+    }
   }
 
-  /* private async init() {
-    const cmdline = await this.cmdline()
-    this.setState({ cmdline })
-  } */
-
-  private async cmdline(selectedProfile: string) {
+  private cmdline(selectedProfile: string) {
     return this.props.cmdline.replace(SelectedProfileTerminal.selectedProfilePattern, selectedProfile)
   }
 
   public render() {
-    if (!this.state || !this.state.cmdline) {
-      return <Loading />
-    } else {
-      return <RestartableTerminal key={this.state.cmdline} {...this.props} cmdline={this.state.cmdline} />
-    }
+    return <RestartableTerminal key={this.state.cmdline} {...this.props} cmdline={this.state.cmdline} />
   }
 }

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

@@ -16,6 +16,7 @@
 
 import React from "react"
 import { Allotment } from "allotment"
+import { Loading } from "@kui-shell/plugin-client-common"
 import { Arguments, encodeComponent } from "@kui-shell/core"
 
 import respawn from "./respawn"
@@ -42,8 +43,11 @@ export function shell(args: Arguments) {
 }
 
 type Props = Pick<BaseProps, "tab" | "repl">
-type State = Pick<BaseProps, "cmdline" | "env"> & { error?: boolean }
+type State = Pick<BaseProps, "cmdline" | "env"> & { error?: boolean; selectedProfile?: string }
 class TaskTerminal extends React.PureComponent<Props, State> {
+  /** Allotment initial split sizes */
+  private readonly sizes = [35, 65]
+
   private readonly tasks = [{ label: "Run a Job", argv: ["codeflare", "-p", "${SELECTED_PROFILE}"] }]
 
   public constructor(props: Props) {
@@ -59,26 +63,36 @@ class TaskTerminal extends React.PureComponent<Props, State> {
     }
   }
 
+  private readonly onSelectProfile = (selectedProfile: string) => this.setState({ selectedProfile })
+
   public static getDerivedStateFromError() {
     return { error: true }
   }
   public componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     console.error("catastrophic error", error, errorInfo)
   }
 
-  private readonly sizes = [35, 65]
-
   public render() {
     if (this.state.error) {
       return "Internal Error"
     }
     return (
       <Allotment defaultSizes={this.sizes} snap>
         <Allotment.Pane className="flex-fill flex-layout flex-align-stretch" minSize={400}>
-          <ProfileExplorer />
+          <ProfileExplorer onSelectProfile={this.onSelectProfile} />
         </Allotment.Pane>
         <Allotment.Pane className="flex-fill flex-layout flex-align-stretch">
-          <SelectedProfileTerminal cmdline={this.state.cmdline} env={this.state.env} {...this.props} />
+          {!this.state.selectedProfile ? (
+            <Loading />
+          ) : (
+            <SelectedProfileTerminal
+              key={this.state.cmdline + "-" + this.state.selectedProfile}
+              cmdline={this.state.cmdline}
+              env={this.state.env}
+              {...this.props}
+              selectedProfile={this.state.selectedProfile}
+            />
+          )}
         </Allotment.Pane>
       </Allotment>
     )