Add reactive tray icon for when update is available (#5567)

src/renderer/components/icon/icon.tsx

@@ -29,6 +29,7 @@ import Spinner from "./spinner.svg";
 import Ssh from "./ssh.svg";
 import Storage from "./storage.svg";
 import Terminal from "./terminal.svg";
+import Notice from "./notice.svg";
 import User from "./user.svg";
 import Users from "./users.svg";
 import Wheel from "./wheel.svg";
@@ -58,6 +59,7 @@ const localSvgIcons = new Map([
   ["ssh", Ssh],
   ["storage", Storage],
   ["terminal", Terminal],
+  ["notice", Notice],
   ["user", User],
   ["users", Users],
   ["wheel", Wheel],

src/renderer/components/icon/notice.svg

@@ -0,0 +1,30 @@
+<svg xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
+  xmlns:dc="http://purl.org/dc/elements/1.1/"
+  xmlns:cc="http://creativecommons.org/ns#"
+  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+  xmlns:svg="http://www.w3.org/2000/svg"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" sodipodi:docname="notice.svg" inkscape:version="1.0 (4035a4f, 2020-05-01)" id="notice" version="1.1" viewBox="0 0 135.46666 135.46666" height="512" width="512">
+  <defs id="defs2">
+    <rect id="rect2785" height="134.1693" width="135.23837" y="0.26726951" x="-0.53453903" />
+    <linearGradient osb:paint="solid" id="linearGradient837">
+      <stop id="stop835" offset="0" style="stop-color:#000000;stop-opacity:1;" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview inkscape:window-maximized="0" inkscape:window-y="0" inkscape:window-x="0" inkscape:window-height="1080" inkscape:window-width="1920" inkscape:pagecheckerboard="true" units="px" showgrid="false" inkscape:document-rotation="0" inkscape:current-layer="layer1" inkscape:document-units="px" inkscape:cy="263.00246" inkscape:cx="240.74335" inkscape:zoom="2.0359339" inkscape:pageshadow="2" inkscape:pageopacity="0.0" borderopacity="1.0" bordercolor="#666666" pagecolor="#ffffff" id="base" />
+  <metadata id="metadata5">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g id="layer1" inkscape:groupmode="layer" inkscape:label="Layer 1">
+    <ellipse ry="59.764721" rx="59.764713" cy="67.73333" cx="67.733345" id="path10" style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:15.9372;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <path id="path2807" d="M 58.707956,29.522524 H 76.674473 L 76.739452,43.330427 73.23062,71.076192 62.054343,71.043701 58.740444,43.427894 Z" style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+    <rect y="83.204803" x="59.292759" height="14.815064" width="16.861885" id="rect2809" style="fill:#000000;fill-opacity:1;stroke:none;" />
+  </g>
+</svg>

src/renderer/components/test-utils/get-application-builder.tsx

@@ -24,12 +24,12 @@ import type { ClusterStore } from "../../../common/cluster-store/cluster-store";
 import mainExtensionsInjectable from "../../../extensions/main-extensions.injectable";
 import currentRouteComponentInjectable from "../../routes/current-route-component.injectable";
 import { pipeline } from "@ogre-tools/fp";
-import { flatMap, compact, join, get, filter, find, map, matches } from "lodash/fp";
+import { flatMap, compact, join, get, filter, map, matches, find } from "lodash/fp";
 import preferenceNavigationItemsInjectable from "../+preferences/preferences-navigation/preference-navigation-items.injectable";
 import navigateToPreferencesInjectable from "../../../common/front-end-routing/routes/preferences/navigate-to-preferences.injectable";
 import type { MenuItemOpts } from "../../../main/menu/application-menu-items.injectable";
 import applicationMenuItemsInjectable from "../../../main/menu/application-menu-items.injectable";
-import type { MenuItem, MenuItemConstructorOptions } from "electron";
+import type { MenuItemConstructorOptions, MenuItem } from "electron";
 import storesAndApisCanBeCreatedInjectable from "../../stores-apis-can-be-created.injectable";
 import navigateToHelmChartsInjectable from "../../../common/front-end-routing/routes/cluster/helm/charts/navigate-to-helm-charts.injectable";
 import hostedClusterInjectable from "../../../common/cluster-store/hosted-cluster.injectable";
@@ -43,7 +43,6 @@ import { flushPromises } from "../../../common/test-utils/flush-promises";
 import type { NamespaceStore } from "../+namespaces/store";
 import namespaceStoreInjectable from "../+namespaces/store.injectable";
 import historyInjectable from "../../navigation/history.injectable";
-import type { TrayMenuItem } from "../../../main/tray/tray-menu-item/tray-menu-item-injection-token";
 import electronTrayInjectable from "../../../main/tray/electron-tray/electron-tray.injectable";
 import applicationWindowInjectable from "../../../main/start-main-application/lens-window/application-window/application-window.injectable";
 import { Notifications } from "../notifications/notifications";
@@ -51,6 +50,8 @@ import broadcastThatRootFrameIsRenderedInjectable from "../../frames/root-frame/
 import { getDiForUnitTesting as getRendererDi } from "../../getDiForUnitTesting";
 import { getDiForUnitTesting as getMainDi } from "../../../main/getDiForUnitTesting";
 import { overrideChannels } from "../../../test-utils/channel-fakes/override-channels";
+import type { TrayMenuItem } from "../../../main/tray/tray-menu-item/tray-menu-item-injection-token";
+import trayIconPathsInjectable from "../../../main/tray/tray-icon-path.injectable";
 
 type Callback = (dis: DiContainers) => void | Promise<void>;
 
@@ -65,7 +66,8 @@ export interface ApplicationBuilder {
 
   tray: {
     click: (id: string) => Promise<void>;
-    get: (id: string) => TrayMenuItem | undefined;
+    get: (id: string) => TrayMenuItem | null;
+    getIconPath: () => string;
   };
 
   applicationMenu: {
@@ -166,15 +168,22 @@ export const getApplicationBuilder = () => {
     computed(() => []),
   );
 
+  const iconPaths = mainDi.inject(trayIconPathsInjectable);
+
   let trayMenuItemsStateFake: TrayMenuItem[];
+  let trayMenuIconPath: string;
 
   mainDi.override(electronTrayInjectable, () => ({
-    start: () => {},
+    start: () => {
+      trayMenuIconPath = iconPaths.normal;
+    },
     stop: () => {},
-
     setMenuItems: (items) => {
       trayMenuItemsStateFake = items;
     },
+    setIconPath: (path) => {
+      trayMenuIconPath = path;
+    },
   }));
 
   let allowedResourcesState: IObservableArray<KubeResource>;
@@ -222,9 +231,9 @@ export const getApplicationBuilder = () => {
 
     tray: {
       get: (id: string) => {
-        return trayMenuItemsStateFake.find(matches({ id }));
+        return trayMenuItemsStateFake.find(matches({ id })) ?? null;
       },
-
+      getIconPath: () => trayMenuIconPath,
       click: async (id: string) => {
         const menuItem = pipeline(
           trayMenuItemsStateFake,