Responding to review comments

- use moment instead of dateformat

- remove unused code

- moved formatting notification buttons to renderer

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

package.json

@@ -162,7 +162,6 @@
     "@hapi/subtext": "^7.0.3",
     "@kubernetes/client-node": "^0.12.0",
     "@types/crypto-js": "^3.1.47",
-    "@types/dateformat": "^3.0.1",
     "@types/electron-window-state": "^2.0.34",
     "@types/fs-extra": "^9.0.1",
     "@types/http-proxy": "^1.17.4",
@@ -180,7 +179,6 @@
     "chalk": "^4.1.0",
     "conf": "^7.0.1",
     "crypto-js": "^4.0.0",
-    "dateformat": "^4.3.1",
     "electron-updater": "^4.3.1",
     "electron-window-state": "^5.0.3",
     "file-type": "^14.7.1",

src/common/user-store.ts

@@ -2,7 +2,7 @@ import type { ThemeId } from "../renderer/theme.store";
 import { app, remote } from 'electron';
 import semver from "semver"
 import { readFile } from "fs-extra"
-import { action, IReactionDisposer, observable, reaction, toJS } from "mobx";
+import { action, observable, reaction, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/user-store"
 import { getAppVersion } from "./utils/app-version";

src/main/app-updater.ts

@@ -1,10 +1,10 @@
 import { autoUpdater, UpdateInfo } from "electron-updater";
 import logger from "./logger";
-import dateFormat from "dateformat";
 import { broadcastIpc, IpcChannel, NotificationChannelAdd, NotificationChannelPrefix } from "../common/ipc";
 import { ipcMain } from "electron";
 import { isDevelopment } from "../common/vars";
 import { SemVer } from "semver";
+import moment from "moment";
 
 function delay(duration: number): Promise<void> {
   return new Promise(resolve => setTimeout(resolve, duration));
@@ -20,24 +20,6 @@ class NotificationBackchannel {
 
 const title = "Lens Updater";
 
-async function autoUpdateNow(): Promise<void> {
-  const body = "Downloading and installing update.";
-  broadcastIpc({
-    channel: NotificationChannelAdd,
-    args: [{
-      title,
-      body,
-      status: "info",
-      timeout: 5000,
-    }]
-  })
-
-  logger.info("[UPDATE CHECKER]: update downloaded started");
-  await autoUpdater.downloadUpdate();
-  logger.info("[UPDATE CHECKER]: update downloadeded");
-  autoUpdater.quitAndInstall();
-}
-
 async function autoUpdateCheck(args: UpdateInfo): Promise<void> {
   return new Promise(async resolve => {
     const body = "Install and restart Lens?";
@@ -83,23 +65,17 @@ async function autoUpdateCheck(args: UpdateInfo): Promise<void> {
           {
             label: "Yes, now",
             backchannel: yesNowChannel,
-            style: {
+            action: true,
-              background: "green",
-              marginRight: "10px"
-            }
           },
           {
             label: "Yes, on quit",
             backchannel: yesLaterChannel,
-            style: {
+            action: true,
-              background: "green",
-              marginRight: "10px"
-            }
           },
           {
             label: "No",
             backchannel: noChannel,
-            accent: true
+            secondary: true
           }
         ],
         closeChannel: noChannel,
@@ -122,8 +98,8 @@ export function startUpdateChecking(interval = 1000 * 60 * 60 * 24): void {
   autoUpdater
     .on("update-available", async (args: UpdateInfo) => {
       try {
-        const releaseDate = new Date(args.releaseDate);
+        const releaseDate = moment(args.releaseDate);
-        const body = `Version ${args.version} was release on ${dateFormat(releaseDate, "dddd, mmmm dS, yyyy")}.`;
+        const body = `Version ${args.version} was release on ${releaseDate.format("dddd, mmmm dS, yyyy")}.`;
         broadcastIpc({
           channel: NotificationChannelAdd,
           args: [{
@@ -142,7 +118,7 @@ export function startUpdateChecking(interval = 1000 * 60 * 60 * 24): void {
     .on("update-not-available", (args: UpdateInfo) => {
       try {
         const version = new SemVer(args.version);
-        const stream = version.prerelease !== null ? "prerelease" : "stable";
+        const stream = version.prerelease === null ? "stable" : "prerelease";
         const body = `Lens is running the latest ${stream} version.`;
         broadcastIpc({
           channel: NotificationChannelAdd,

src/renderer/components/button/button.scss

@@ -20,10 +20,19 @@
   &.primary {
     background: $buttonPrimaryBackground;
   }
+
   &.accent {
     background: $buttonAccentBackground;
   }
 
+  &.action {
+    background: $buttonActionBackground;
+  }
+
+  &.secondary {
+    background: $buttonSecondaryBackground;
+  }
+
   &.plain {
     color: inherit;
     background: transparent;

src/renderer/components/button/button.tsx

@@ -8,6 +8,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<any>, TooltipDecorator
   waiting?: boolean;
   primary?: boolean;
   accent?: boolean;
+  secondary?: boolean;
+  action?: boolean;
   plain?: boolean;
   hidden?: boolean;
   active?: boolean;
@@ -23,12 +25,15 @@ export class Button extends React.PureComponent<ButtonProps, {}> {
   private button: HTMLButtonElement;
 
   render() {
-    const { className, waiting, label, primary, accent, plain, hidden, active, big, round, tooltip, children, ...props } = this.props;
+    const {
+      className, waiting, label, primary, accent, plain, hidden, active, big,
+      round, tooltip, children, secondary, action, ...props
+    } = this.props;
     const btnProps = props as Partial<ButtonProps>;
     if (hidden) return null;
 
     btnProps.className = cssNames('Button', className, {
-      waiting, primary, accent, plain, active, big, round,
+      waiting, primary, accent, plain, active, big, round, secondary, action,
     });
 
     const btnContent: ReactNode = (

src/renderer/components/notifications/notifications.scss

@@ -25,6 +25,12 @@
       margin-bottom: $margin * 2;
     }
 
+    > .button {
+      &:not(:last-of-type) {
+        margin-right: $margin;
+      }
+    }
+
     > .message {
       white-space: pre-line;
       padding-left: $padding;

src/renderer/themes/kontena-dark.json

@@ -26,6 +26,8 @@
     "buttonPrimaryBackground": "#3d90ce",
     "buttonDefaultBackground": "#414448",
     "buttonAccentBackground": "#e85555",
+    "buttonActionBackground": "#1dcc1f",
+    "buttonSecondaryBackground": "#edd70c",
     "buttonDisabledBackground": "#808080",
     "tableBgcStripe": "#2a2d33",
     "tableBgcSelected": "#383c42",

src/renderer/themes/kontena-light.json

@@ -27,6 +27,8 @@
     "buttonPrimaryBackground": "#3d90ce",
     "buttonDefaultBackground": "#414448",
     "buttonAccentBackground": "#e85555",
+    "buttonActionBackground": "#1dcc1f",
+    "buttonSecondaryBackground": "#edd70c",
     "buttonDisabledBackground": "#808080",
     "tableBgcStripe": "#f8f8f8",
     "tableBgcSelected": "#f4f5f5",

src/renderer/themes/theme-vars.scss

@@ -35,6 +35,8 @@ $sidebarBackground: var(--sidebarBackground);
 $buttonPrimaryBackground: var(--buttonPrimaryBackground);
 $buttonDefaultBackground: var(--buttonDefaultBackground);
 $buttonAccentBackground: var(--buttonAccentBackground);
+$buttonSecondaryBackground: var(--buttonSecondaryBackground);
+$buttonActionBackground: var(--buttonActionBackground);
 $buttonDisabledBackground: var(--buttonDisabledBackground);
 
 // Tables
@@ -125,4 +127,4 @@ $filterAreaBackground: var(--filterAreaBackground);
 $selectOptionHoveredColor: var(--selectOptionHoveredColor);
 $lineProgressBackground: var(--lineProgressBackground);
 $radioActiveBackground: var(--radioActiveBackground);
-$menuActiveBackground: var(--menuActiveBackground);
+$menuActiveBackground: var(--menuActiveBackground);

yarn.lock

@@ -1723,11 +1723,6 @@
   resolved "https://registry.yarnpkg.com/@types/crypto-js/-/crypto-js-3.1.47.tgz#36e549dd3f1322742a3a738e7c113ebe48221860"
   integrity sha512-eI6gvpcGHLk3dAuHYnRCAjX+41gMv1nz/VP55wAe5HtmAKDOoPSfr3f6vkMc08ov1S0NsjvUBxDtHHxqQY1LGA==
 
-"@types/dateformat@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/dateformat/-/dateformat-3.0.1.tgz#98d747a2e5e9a56070c6bf14e27bff56204e34cc"
-  integrity sha512-KlPPdikagvL6ELjWsljbyDIPzNCeliYkqRpI+zea99vBBbCIA5JNshZAwQKTON139c87y9qvTFVgkFd14rtS4g==
-
 "@types/debug@^4.1.5":
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/@types/debug/-/debug-4.1.5.tgz#b14efa8852b7768d898906613c23f688713e02cd"
@@ -4311,11 +4306,6 @@ date-fns@^2.0.1, date-fns@^2.14.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.14.0.tgz#359a87a265bb34ef2e38f93ecf63ac453f9bc7ba"
   integrity sha512-1zD+68jhFgDIM0rF05rcwYO8cExdNqxjq4xP1QKM60Q45mnO6zaMWB4tOzrIr4M4GSLntsKeE4c9Bdl2jhL/yw==
 
-dateformat@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.3.1.tgz#e010ca5915f0c7d47e5b4e4287dd5ecb41125a96"
-  integrity sha512-xhq1wI5BQ0TMJDvio0BLP8lNeYlhAvmh/7H52H9n6kfzqSmRpIhH5KEIjJ7onFEAh5CQVrAP2MAG8wZ6j0BKzQ==
-
 debounce-fn@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/debounce-fn/-/debounce-fn-4.0.0.tgz#ed76d206d8a50e60de0dd66d494d82835ffe61c7"