feat: improved support for selecting profiles from the profile explorer

Including having the `codeflare` terminal pay attention to the selected profile

Author: starpit

package-lock.json

@@ -44,7 +44,7 @@ and machine learning pipelines on the cloud.
     outputOnly: true
     maximize: true
     ---
-    codeflare terminal codeflare
+    codeflare terminal codeflare -p ${SELECTED_PROFILE}
     ```
 
 === "Gallery"

plugins/plugin-client-default/notebooks/hello.md

@@ -0,0 +1,139 @@
+/*
+ * 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 prettyMillis from "pretty-ms"
+import { EventEmitter } from "events"
+import { Profiles } from "madwizard"
+import { Loading } from "@kui-shell/plugin-client-common"
+import { Grid, GridItem, Tile } from "@patternfly/react-core"
+
+import ProfileWatcher from "../tray/watchers/profile/list"
+
+import PlusIcon from "@patternfly/react-icons/dist/esm/icons/user-plus-icon"
+// import ProfileIcon from "@patternfly/react-icons/dist/esm/icons/user-icon"
+
+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 = Record<string, never>
+
+type State = {
+  watcher: ProfileWatcher
+  selectedProfile?: string
+  profiles?: Profiles.Profile[]
+  catastrophicError?: unknown
+}
+
+export default class ProfileExplorer extends React.PureComponent<Props, State> {
+  public constructor(props: Props) {
+    super(props)
+    this.init()
+  }
+
+  private readonly updateFn = () => {
+    // slice to force a render; TODO we could do a comparison to avoid
+    // false re-renders if we want to get fancy
+    this.setState((curState) => {
+      const profiles = curState.watcher.profiles.slice()
+      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)
+      }
+      return {
+        profiles,
+      }
+    })
+  }
+
+  private async init() {
+    try {
+      const watcher = await new ProfileWatcher(this.updateFn, await Profiles.profilesPath({}, true)).init()
+      this.setState({
+        watcher,
+        profiles: [],
+      })
+    } catch (err) {
+      console.error(err)
+      this.setState({ catastrophicError: err })
+    }
+  }
+
+  public componentWillUnmount() {
+    if (this.state && this.state.watcher) {
+      this.state.watcher.close()
+    }
+  }
+
+  /** User has clicked to select a profile */
+  private readonly onSelect = async (evt: React.MouseEvent<HTMLElement>) => {
+    const selectedProfile = evt.currentTarget.getAttribute("data-profile")
+    evt.currentTarget.scrollIntoView(true)
+    if (selectedProfile) {
+      if (await Profiles.bumpLastUsedTime(selectedProfile)) {
+        emitSelectProfile(selectedProfile)
+        this.setState({ selectedProfile })
+      }
+    }
+  }
+
+  public render() {
+    if (this.state && this.state.catastrophicError) {
+      return "Internal Error"
+    } else if (!this.state || !this.state.profiles) {
+      return <Loading />
+    } else {
+      return (
+        <Grid className="codeflare--gallery-grid flex-fill sans-serif top-pad left-pad right-pad bottom-pad" hasGutter>
+          {this.state.profiles.map((_, idx) => (
+            <GridItem key={_.name}>
+              <Tile
+                className="codeflare--tile"
+                data-profile={_.name}
+                title={_.name}
+                isSelected={!this.state.selectedProfile ? idx === 0 : this.state.selectedProfile === _.name}
+                onClick={this.onSelect}
+              >
+                {`Last used ${prettyMillis(Date.now() - _.lastUsedTime, { compact: true })} ago`}
+              </Tile>
+            </GridItem>
+          ))}
+
+          {
+            <GridItem>
+              <Tile className="codeflare--tile codeflare--tile-new" title="New Profile" icon={<PlusIcon />} isStacked>
+                Customize a profile
+              </Tile>
+            </GridItem>
+          }
+        </Grid>
+      )
+    }
+  }
+}

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

@@ -34,7 +34,7 @@ function watch(stream: PassThrough, job: Job) {
   }
 }
 
-type Props = {
+export type Props = {
   cmdline: string
   env: Record<string, string>
   tab: Arguments["tab"]

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

@@ -0,0 +1,65 @@
+/*
+ * 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 { Profiles } from "madwizard"
+import { Loading } from "@kui-shell/plugin-client-common"
+
+import Terminal, { Props } from "./RestartableTerminal"
+import { onSelectProfile, offSelectProfile } from "./ProfileExplorer"
+
+type State = {
+  cmdline?: string
+}
+
+export default class SelectedProfileTerminal extends React.PureComponent<Props, State> {
+  public static readonly selectedProfilePattern = /\$\{SELECTED_PROFILE\}/g
+
+  public constructor(props: Props) {
+    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 })
+  }
+
+  private async init() {
+    const cmdline = await this.cmdline()
+    this.setState({ cmdline })
+  }
+
+  private async cmdline(selectedProfile?: string) {
+    return this.props.cmdline.replace(
+      SelectedProfileTerminal.selectedProfilePattern,
+      selectedProfile || (await Profiles.lastUsed())
+    )
+  }
+
+  public render() {
+    if (!this.state || !this.state.cmdline) {
+      return <Loading />
+    } else {
+      return <Terminal key={this.state.cmdline} {...this.props} cmdline={this.state.cmdline} />
+    }
+  }
+}

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

@@ -15,87 +15,8 @@
  */
 
 import React from "react"
-import prettyMillis from "pretty-ms"
-import { Profiles } from "madwizard"
-import { Loading } from "@kui-shell/plugin-client-common"
-import { Grid, GridItem, Tile } from "@patternfly/react-core"
+import ProfileExplorer from "../../components/ProfileExplorer"
 
-import ProfileWatcher from "../../tray/watchers/profile/list"
-
-import PlusIcon from "@patternfly/react-icons/dist/esm/icons/user-plus-icon"
-import ProfileIcon from "@patternfly/react-icons/dist/esm/icons/user-icon"
-
-type Props = Record<string, never>
-
-type State = {
-  watcher: ProfileWatcher
-  profiles: Profiles.Profile[]
-  catastrophicError?: unknown
-}
-
-class ProfileExplorer extends React.PureComponent<Props, State> {
-  public constructor(props: Props) {
-    super(props)
-    this.init()
-  }
-
-  private readonly updateFn = () => {
-    // slice to force a render; TODO we could do a comparison to avoid
-    // false re-renders if we want to get fancy
-    this.setState((curState) => ({
-      profiles: curState.watcher.profiles.slice(),
-    }))
-  }
-
-  private async init() {
-    try {
-      const watcher = await new ProfileWatcher(this.updateFn, await Profiles.profilesPath({}, true)).init()
-      this.setState({
-        watcher,
-        profiles: [],
-      })
-    } catch (err) {
-      console.error(err)
-      this.setState({ catastrophicError: err })
-    }
-  }
-
-  public componentWillUnmount() {
-    if (this.state && this.state.watcher) {
-      this.state.watcher.close()
-    }
-  }
-
-  public render() {
-    if (this.state && this.state.catastrophicError) {
-      return "Internal Error"
-    } else if (!this.state || !this.state.profiles) {
-      return <Loading />
-    } else {
-      return (
-        <Grid className="codeflare--gallery-grid flex-fill sans-serif top-pad left-pad right-pad bottom-pad" hasGutter>
-          {this.state.profiles.map((_) => (
-            <GridItem key={_.name}>
-              <Tile className="codeflare--tile" title={_.name} icon={<ProfileIcon />} isStacked>
-                {`Last used ${prettyMillis(Date.now() - _.lastUsedTime, { compact: true })} ago`}
-              </Tile>
-            </GridItem>
-          ))}
-
-          {
-            <GridItem>
-              <Tile className="codeflare--tile codeflare--tile-new" title="New Profile" icon={<PlusIcon />} isStacked>
-                Customize a profile
-              </Tile>
-            </GridItem>
-          }
-        </Grid>
-      )
-    }
-  }
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default async function getProfiles() {
   return {
     react: <ProfileExplorer />,

plugins/plugin-codeflare/src/controller/profile/get.tsx

@@ -18,7 +18,9 @@ import React from "react"
 import { Arguments, encodeComponent } from "@kui-shell/core"
 
 import respawn from "./respawn"
+
 import Terminal from "../components/RestartableTerminal"
+import SelectedProfileTerminal from "../components/SelectedProfileTerminal"
 
 /**
  * This is a command handler that opens up a terminal. The expectation
@@ -29,7 +31,11 @@ export default function openTerminal(args: Arguments) {
   // 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} />,
+    react: React.createElement(
+      SelectedProfileTerminal.selectedProfilePattern.test(args.command) ? SelectedProfileTerminal : Terminal,
+      { cmdline, env, repl: args.REPL, tab: args.tab }
+    ),
   }
 }