feat: update profiles ui component to use profile watching logic

We already had this profile watching logic for the tray menu. This PR updates the profiles UI component to use the same.

Author: starpit

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

@@ -17,34 +17,87 @@
 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 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() {
-  const profiles = await Profiles.list({})
-
   return {
-    react: (
-      <Grid className="codeflare--gallery-grid flex-fill sans-serif top-pad left-pad right-pad bottom-pad" hasGutter>
-        {profiles.map((_) => (
-          <GridItem key={_.profile.name}>
-            <Tile className="codeflare--tile" title={_.profile.name} icon={<ProfileIcon />} isStacked>
-              {`Last used ${prettyMillis(Date.now() - _.profile.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>
-    ),
+    react: <ProfileExplorer />,
   }
 }

plugins/plugin-codeflare/src/tray/menus/profiles/index.ts

@@ -56,6 +56,16 @@ export default async function profilesMenu(
 ): Promise<MenuItemConstructorOptions[]> {
   if (!watcher) {
     watcher = new ProfileWatcher(updateFn, await Profiles.profilesPath({}, true))
+
+    // we need to close the chokidar watcher before exit, otherwise
+    // electron-main dies with SIGABRT
+    import("electron").then((_) =>
+      _.app.on("will-quit", async () => {
+        if (watcher) {
+          await watcher.close()
+        }
+      })
+    )
   }
 
   // one-time initialization of the watcher, if needed; we need to do

plugins/plugin-codeflare/src/tray/watchers/profile/list.ts

@@ -32,14 +32,10 @@ export default class ProfileWatcher {
     private readonly updateFn: UpdateFunction,
     private readonly profilesPath: string,
     private readonly watcher = chokidar.watch(profilesPath, { depth: 1 })
-  ) {
-    // we need to close the chokidar watcher before exit, otherwise
-    // electron-main dies with SIGABRT
-    import("electron").then((_) =>
-      _.app.on("will-quit", async () => {
-        await this.watcher.close()
-      })
-    )
+  ) {}
+
+  public async close() {
+    await this.watcher.close()
   }
 
   /** Initialize `this._profiles` model */