respond to review comments

Signed-off-by: Sebastian Malton <sebastian@malton.name>

docs/extensions/capabilities/color-reference.md

@@ -43,6 +43,7 @@ You can use theme-based CSS Variables to style an extension according to the act
 ## Button Colors
 - `--buttonPrimaryBackground`: button background color for primary actions.
 - `--buttonDefaultBackground`: default button background color.
+- `--buttonLightBackground`: light button background color.
 - `--buttonAccentBackground`: accent button background color.
 - `--buttonDisabledBackground`: disabled button background color.
 

src/common/ipc/ipc.ts

@@ -11,7 +11,6 @@ import { ClusterFrameInfo, clusterFrameMap } from "../cluster-frames";
 const subFramesChannel = "ipc:get-sub-frames";
 
 export type HandlerEvent<EM extends EventEmitter> = Parameters<Parameters<EM["on"]>[1]>[0];
-export type EventListener<E extends EventEmitter, T extends any[]> = (event: HandlerEvent<E>, ...args: T) => any;
 
 export function handleRequest(channel: string, listener: (event: Electron.IpcMainInvokeEvent, ...args: any[]) => any) {
   ipcMain.handle(channel, listener);
@@ -32,18 +31,23 @@ export function onceCorrect<
   EM extends EventEmitter,
   T extends any[],
   L extends (event: HandlerEvent<EM>, ...args: T) => any
->(
+>({
+  source,
+  channel,
+  listener,
+  verifier,
+}: {
   source: EM,
   channel: string | symbol,
   listener: L,
-  verifier: (args: unknown[]) => args is T
-): void {
+  verifier: (args: unknown[]) => args is T,
+}): void {
   function handler(event: HandlerEvent<EM>, ...args: unknown[]): void {
     if (verifier(args)) {
       source.removeListener(channel, handler); // remove immediately
 
-      Promise.resolve(listener(event, ...args)) // might return a promise
-        .catch(error => logger.error("[IPC]: channel once handler threw error", { channel, error }));
+      (async () => (listener(event, ...args)))() // might return a promise, or throw, or reject
+        .catch((error: any) => logger.error("[IPC]: channel once handler threw error", { channel, error }));
     } else {
       logger.error("[IPC]: channel was sent to with invalid data", { channel, args });
     }
@@ -62,15 +66,20 @@ export function onCorrect<
   EM extends EventEmitter,
   T extends any[],
   L extends (event: HandlerEvent<EM>, ...args: T) => any
->(
+>({
+  source,
+  channel,
+  listener,
+  verifier,
+}: {
   source: EM,
   channel: string | symbol,
   listener: L,
-  verifier: (args: unknown[]) => args is T
-): void {
+  verifier: (args: unknown[]) => args is T,
+}): void {
   source.on(channel, (event, ...args: unknown[]) => {
     if (verifier(args)) {
-      Promise.resolve(listener(event, ...args)) // might return a promise
+      (async () => (listener(event, ...args)))() // might return a promise, or throw, or reject
         .catch(error => logger.error("[IPC]: channel on handler threw error", { channel, error }));
     } else {
       logger.error("[IPC]: channel was sent to with invalid data", { channel, args });

src/main/app-updater.ts

@@ -3,7 +3,6 @@ import logger from "./logger";
 import { isDevelopment, isTestEnv } from "../common/vars";
 import { delay } from "../common/utils";
 import { areArgsUpdateAvailableToBackchannel, AutoUpdateLogPrefix, broadcastMessage, onceCorrect, UpdateAvailableChannel, UpdateAvailableToBackchannel } from "../common/ipc";
-import * as uuid from "uuid";
 import { ipcMain } from "electron";
 
 function handleAutoUpdateBackChannel(event: Electron.IpcMainEvent, ...[arg]: UpdateAvailableToBackchannel) {
@@ -40,11 +39,17 @@ export function startUpdateChecking(interval = 1000 * 60 * 60 * 24): void {
   autoUpdater
     .on("update-available", (args: UpdateInfo) => {
       try {
-        // use a UUID so that this back-channel is harder to discover
-        const backchannel = uuid.v4();
+        const backchannel = `auto-update:${args.version}`;
+
+        ipcMain.removeAllListeners(backchannel); // only one handler should be present
 
         // make sure that the handler is in place before broadcasting (prevent race-condition)
-        onceCorrect(ipcMain, backchannel, handleAutoUpdateBackChannel, areArgsUpdateAvailableToBackchannel);
+        onceCorrect({
+          source: ipcMain,
+          channel: backchannel,
+          listener: handleAutoUpdateBackChannel,
+          verifier: areArgsUpdateAvailableToBackchannel,
+        });
         logger.info(`${AutoUpdateLogPrefix}: broadcasting update available`, { backchannel, version: args.version });
         broadcastMessage(UpdateAvailableChannel, backchannel, args);
       } catch (error) {

src/renderer/components/button/button.scss

@@ -27,7 +27,7 @@
   }
 
   &.light {
-    background-color: white;
+    background-color: $buttonLightBackground;
     color: #505050;
   }
 
@@ -51,7 +51,6 @@
   &.outlined {
     color: inherit;
     background: transparent;
-    border: 1px solid;
 
     &.active,
     &:focus {

src/renderer/ipc/index.tsx

@@ -6,52 +6,56 @@ import { Button, ButtonPannel } from "../components/button";
 import { isMac } from "../../common/vars";
 import * as uuid from "uuid";
 
+function sendToBackchannel(backchannel: string, notificationId: string, data: BackchannelArg): void {
+  notificationsStore.remove(notificationId);
+  ipcRenderer.send(backchannel, data);
+}
+
+function RenderYesButtons(props: { backchannel: string, notificationId: string }) {
+  if (isMac) {
+    /**
+     * auto-updater's "installOnQuit" is not applicable for macOS as per their docs.
+     *
+     * See: https://github.com/electron-userland/electron-builder/blob/master/packages/electron-updater/src/AppUpdater.ts#L27-L32
+     */
+    return <Button light label="Yes" onClick={() => sendToBackchannel(props.backchannel, props.notificationId, { doUpdate: true, now: true })} />;
+  }
+
+  return (
+    <>
+      <Button light label="Yes, now" onClick={() => sendToBackchannel(props.backchannel, props.notificationId, { doUpdate: true, now: true })} />
+      <Button active outlined label="Yes, later" onClick={() => sendToBackchannel(props.backchannel, props.notificationId, { doUpdate: true, now: false })} />
+    </>
+  );
+}
+
 function UpdateAvailableHandler(event: IpcRendererEvent, ...[backchannel, updateInfo]: UpdateAvailableFromMain): void {
   const notificationId = uuid.v4();
 
-  function sendToBackchannel(data: BackchannelArg): void {
-    notificationsStore.remove(notificationId);
-    console.log("sending to backchanel", { backchannel, data });
-    ipcRenderer.send(backchannel, data);
-  }
-
-  function renderYesButtons() {
-    if (isMac) {
-      /**
-       * auto-updater's "installOnQuit" is not applicable for macOS as per their docs.
-       *
-       * See: https://github.com/electron-userland/electron-builder/blob/master/packages/electron-updater/src/AppUpdater.ts#L27-L32
-       */
-      return <Button light label="Yes" onClick={() => sendToBackchannel({ doUpdate: true, now: true })} />;
-    }
-
-    return (
-      <>
-        <Button light label="Yes, now" onClick={() => sendToBackchannel({ doUpdate: true, now: true })} />
-        <Button primary outlined label="Yes, later" onClick={() => sendToBackchannel({ doUpdate: true, now: false })} />
-      </>
-    );
-  }
-
   Notifications.info(
     (
       <>
         <b>Update Available</b>
         <p>Version {updateInfo.version} of Lens IDE is now available. Would you like to update?</p>
         <ButtonPannel>
-          {renderYesButtons()}
-          <Button primary outlined label="No" onClick={() => sendToBackchannel({ doUpdate: false })} />
+          <RenderYesButtons backchannel={backchannel} notificationId={notificationId} />
+          <Button active outlined label="No" onClick={() => sendToBackchannel(backchannel, notificationId, { doUpdate: false })} />
         </ButtonPannel>
       </>
     ), {
       id: notificationId,
       onClose() {
-        sendToBackchannel({ doUpdate: false });
+        sendToBackchannel(backchannel, notificationId, { doUpdate: false });
       }
     }
   );
 }
 
 export function registerIpcHandlers() {
-  onCorrect(ipcRenderer, UpdateAvailableChannel, UpdateAvailableHandler, areArgsUpdateAvailableFromMain);
+  onCorrect({
+    source: ipcRenderer,
+    channel: UpdateAvailableChannel,
+    listener: UpdateAvailableHandler,
+    verifier: areArgsUpdateAvailableFromMain,
+  });
 }

src/renderer/themes/lens-dark.json

@@ -25,6 +25,7 @@
     "sidebarSubmenuActiveColor": "#ffffff",
     "buttonPrimaryBackground": "#3d90ce",
     "buttonDefaultBackground": "#414448",
+    "buttonLightBackground": "#f1f1f1",
     "buttonAccentBackground": "#e85555",
     "buttonDisabledBackground": "#808080",
     "tableBgcStripe": "#2a2d33",

src/renderer/themes/lens-light.json

@@ -26,6 +26,7 @@
     "sidebarBackground": "#e8e8e8",
     "buttonPrimaryBackground": "#3d90ce",
     "buttonDefaultBackground": "#414448",
+    "buttonLightBackground": "#f1f1f1",
     "buttonAccentBackground": "#e85555",
     "buttonDisabledBackground": "#808080",
     "tableBgcStripe": "#f8f8f8",

src/renderer/themes/theme-vars.scss

@@ -34,6 +34,7 @@ $sidebarBackground: var(--sidebarBackground);
 // Elements
 $buttonPrimaryBackground: var(--buttonPrimaryBackground);
 $buttonDefaultBackground: var(--buttonDefaultBackground);
+$buttonLightBackground: var(--buttonLightBackground);
 $buttonAccentBackground: var(--buttonAccentBackground);
 $buttonDisabledBackground: var(--buttonDisabledBackground);
 
@@ -131,4 +132,4 @@ $selectOptionHoveredColor: var(--selectOptionHoveredColor);
 $lineProgressBackground: var(--lineProgressBackground);
 $radioActiveBackground: var(--radioActiveBackground);
 $menuActiveBackground: var(--menuActiveBackground);
-$menuSelectedOptionBgc: var(--menuSelectedOptionBgc);
+$menuSelectedOptionBgc: var(--menuSelectedOptionBgc);