fix: tray menu does not appear in production builds

- The headless webpack config ignores pngs. This PR pulls in a fix from Kui for that.
- The tray.ts logic for expressing the path to the tray icon currently assumes a dev file layout.

This PR also adds the original codeflare-favicon.svg vector source.

Author: starpit

bin/codeflare

@@ -162,4 +162,5 @@ fi
 trap 'pkill -P $$; exit 1;' TERM INT
 
 # otherwise, we launch the UI version
+export CODEFLARE_HEADLESS=$HEADLESS
 "$NODE" "$HEADLESS"/codeflare.min.js -- codeflare $EXTRAPREFIX "$@"

package-lock.json

@@ -86,10 +86,10 @@
     "printWidth": 120
   },
   "devDependencies": {
-    "@kui-shell/builder": "11.5.0-dev-20220715-170302",
-    "@kui-shell/proxy": "11.5.0-dev-20220715-170302",
-    "@kui-shell/react": "11.5.0-dev-20220715-170302",
-    "@kui-shell/webpack": "11.5.0-dev-20220715-170302",
+    "@kui-shell/builder": "11.5.0-dev-20220715-111236",
+    "@kui-shell/proxy": "11.5.0-dev-20220715-111236",
+    "@kui-shell/react": "11.5.0-dev-20220715-111236",
+    "@kui-shell/webpack": "11.5.0-dev-20220715-111236",
     "@playwright/test": "^1.23.2",
     "@types/debug": "^4.1.7",
     "@types/node": "14.11.8",
@@ -113,16 +113,16 @@
   },
   "dependencies": {
     "@kui-shell/client": "file:./plugins/plugin-client-default",
-    "@kui-shell/core": "11.5.0-dev-20220715-170302",
-    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220715-170302",
-    "@kui-shell/plugin-client-common": "11.5.0-dev-20220715-170302",
+    "@kui-shell/core": "11.5.0-dev-20220715-111236",
+    "@kui-shell/plugin-bash-like": "11.5.0-dev-20220715-111236",
+    "@kui-shell/plugin-client-common": "11.5.0-dev-20220715-111236",
     "@kui-shell/plugin-codeflare": "file:./plugins/plugin-codeflare",
-    "@kui-shell/plugin-core-support": "11.5.0-dev-20220715-170302",
-    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220715-170302",
-    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220715-170302",
+    "@kui-shell/plugin-core-support": "11.5.0-dev-20220715-111236",
+    "@kui-shell/plugin-electron-components": "11.5.0-dev-20220715-111236",
+    "@kui-shell/plugin-kubectl": "11.5.0-dev-20220715-111236",
     "@kui-shell/plugin-madwizard": "file:./plugins/plugin-madwizard",
-    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220715-170302",
-    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220715-170302",
-    "@kui-shell/plugin-s3": "11.5.0-dev-20220715-170302"
+    "@kui-shell/plugin-patternfly4-themes": "11.5.0-dev-20220715-111236",
+    "@kui-shell/plugin-proxy-support": "11.5.0-dev-20220715-111236",
+    "@kui-shell/plugin-s3": "11.5.0-dev-20220715-111236"
   }
 }

package.json

@@ -0,0 +1,5 @@
+These are needed if you want to import svg or png as ES6 imports. See
+plugin-client-default/src/index.tsx for an example.
+
+These are also in @kui-shell/plugin-client-common/src/@types... I wish
+we could just use those. Maybe we can find a way?

plugins/plugin-client-default/icons/svg/codeflare-favicon.svg

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+  const content: string
+  export default content
+}
+
+declare module "*.png" {
+  const content: string
+  export default content
+}

plugins/plugin-codeflare/src/@types/README.md

@@ -15,12 +15,16 @@
  */
 
 import open from "open"
+import { join } from "path"
 import { Choices, Profiles } from "madwizard"
 import { MenuItemConstructorOptions } from "electron"
 
 import { productName } from "@kui-shell/client/config.d/name.json"
 import { bugs, version } from "@kui-shell/client/package.json"
 
+import icon from "@kui-shell/client/icons/png/codeflareTemplate.png"
+import icon2x from "@kui-shell/client/icons/png/codeflareTemplate@2x.png"
+
 let tray: null | InstanceType<typeof import("electron").Tray> = null
 
 function profileMenu(state: Choices.ChoiceState): MenuItemConstructorOptions {
@@ -71,10 +75,20 @@ export async function main(createWindow: (argv: string[]) => void) {
     .then(async () => {
       try {
         const { Tray } = await import("electron")
-        tray = new Tray(require.resolve("@kui-shell/build/icons/png/codeflareTemplate.png"))
 
-        tray.setToolTip(productName)
-        tray.setContextMenu(await buildContextMenu(createWindow))
+        const iconHome = process.env.CODEFLARE_HEADLESS || join(process.argv0, "../../Resources/app/dist/headless")
+        if (iconHome) {
+          // this forces webpack to include the @2x template images in
+          // the build
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const fake = "dist/headless/" + icon2x
+
+          tray = new Tray(join(iconHome, icon))
+          tray.setToolTip(productName)
+          tray.setContextMenu(await buildContextMenu(createWindow))
+        } else {
+          console.error("Cannot register electron tray menu, because CODEFLARE_HEADLESS environment variable is absent")
+        }
       } catch (err) {
         console.error("Error registering electron tray menu", err)
       }