Tray icon (#1005)

* Tray icon #833 -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

* Tray icon #833 -- part 2

Signed-off-by: Roman <ixrock@gmail.com>

* Tray icon #833 -- part 3

Signed-off-by: Roman <ixrock@gmail.com>

* Tray icon #833 -- part 4

Signed-off-by: Roman <ixrock@gmail.com>

* fix: lint / linux build failed

Signed-off-by: Roman <ixrock@gmail.com>

* allow to disable tray from preferences

Signed-off-by: Roman <ixrock@gmail.com>

* allow to tweak svg-icon before applying as tray-icon

Signed-off-by: Roman <ixrock@gmail.com>

* add checkbox indication, setActive workspace on cluster select

Signed-off-by: Roman <ixrock@gmail.com>

* fix build version (cannon find module 'react')

Signed-off-by: Roman <ixrock@gmail.com>

* - switching dark/light icon depending on os-x theme settings
- optimization: don't re-create tray icon on menu udpates (avoid blinking)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: refresh icon after turning on/off + switching dark-mode

Signed-off-by: Roman <ixrock@gmail.com>

* allow to close main window and re-open from dock or tray icon

Signed-off-by: Roman <ixrock@gmail.com>

* small fix

Signed-off-by: Roman <ixrock@gmail.com>

* fix: ensure main-window from global menu

Signed-off-by: Roman <ixrock@gmail.com>

* chore

Signed-off-by: Roman <ixrock@gmail.com>

* fix: hide traffic-light buttons for tray window

Signed-off-by: Roman <ixrock@gmail.com>

* removed redundant tray window

Signed-off-by: Roman <ixrock@gmail.com>

* removed delay from base-store

Signed-off-by: Roman <ixrock@gmail.com>

* adding cluster fix (reverted changes from master)

Signed-off-by: Roman <ixrock@gmail.com>

* - hide icon in dock when main-window closed (mac-os only)
- added preferences checkbox to open app at system start-up

Signed-off-by: Roman <ixrock@gmail.com>

* handle quit app action from tray menu

Signed-off-by: Roman <ixrock@gmail.com>

* moved generating tray icons to build step

Signed-off-by: Roman <ixrock@gmail.com>

* Fix integration tests (#1080)

* Fix integration tests

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

* Update integration/helpers/utils.ts

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>

* fix-build: invisible app icon when there are more files within "build/icons/*.png"

Signed-off-by: Roman <ixrock@gmail.com>

* chore

Signed-off-by: Roman <ixrock@gmail.com>

* yarn i18n.extract

Signed-off-by: Roman <ixrock@gmail.com>

* clean-up

Signed-off-by: Roman <ixrock@gmail.com>

* navigation refactoring, move out `buildUrl` to common/utils so `react` and `react-router` not required as package.json dependecies in runtime (main)

Signed-off-by: Roman <ixrock@gmail.com>

* Ignore namespace query param on integration tests (#1109)

Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com>

* merge-conflicts fixes

Signed-off-by: Roman <ixrock@gmail.com>

* support page fixes

Signed-off-by: Roman <ixrock@gmail.com>

* make eslint happy again

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Sebastian Malton <sebastian@malton.name>

src/renderer/components/+add-cluster/add-cluster.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const addClusterRoute: RouteProps = {
   path: "/add-cluster"

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -46,6 +46,7 @@ export class AddCluster extends React.Component {
   @observable dropAreaActive = false;
 
   componentDidMount() {
+    clusterStore.setActive(null);
     this.setKubeConfig(userStore.kubeConfigPath);
   }
 
@@ -118,17 +119,16 @@ export class AddCluster extends React.Component {
     }
   }
 
+  @action
   addClusters = () => {
-    const configValidationErrors:string[] = [];
     let newClusters: ClusterModel[] = [];
-
     try {
       if (!this.selectedContexts.length) {
         this.error = <Trans>Please select at least one cluster context</Trans>
         return;
       }
       this.error = ""
-      this.isWaiting = true      
+      this.isWaiting = true
 
       newClusters = this.selectedContexts.filter(context => {
         try {
@@ -138,8 +138,8 @@ export class AddCluster extends React.Component {
         } catch (err) {
           this.error = String(err.message)
           if (err instanceof ExecValidationNotFoundError ) {
-            Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>); 
-            return false; 
+            Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
+            return false;
           } else {
             throw new Error(err);
           }
@@ -169,7 +169,7 @@ export class AddCluster extends React.Component {
           clusterStore.setActive(clusterId);
           navigate(clusterViewURL({ params: { clusterId } }));
         } else {
-          if (newClusters.length > 1) { 
+          if (newClusters.length > 1) {
             Notifications.ok(
               <Trans>Successfully imported <b>{newClusters.length}</b> cluster(s)</Trans>
             );

src/renderer/components/+apps-helm-charts/helm-charts.route.ts

@@ -1,6 +1,6 @@
-import { RouteProps } from "react-router"
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 import { appsRoute } from "../+apps/apps.route";
-import { buildURL } from "../../navigation";
 
 export const helmChartsRoute: RouteProps = {
   path: appsRoute.path + "/charts/:repo?/:chartName?"

src/renderer/components/+apps-releases/release.route.ts

@@ -1,6 +1,6 @@
-import { RouteProps } from "react-router"
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 import { appsRoute } from "../+apps/apps.route";
-import { buildURL } from "../../navigation";
 
 export const releaseRoute: RouteProps = {
   path: appsRoute.path + "/releases/:namespace?/:name?"

src/renderer/components/+apps/apps.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const appsRoute: RouteProps = {
   path: "/apps",

src/renderer/components/+cluster-settings/cluster-settings.route.ts

@@ -1,6 +1,6 @@
 import type { IClusterViewRouteParams } from "../cluster-manager/cluster-view.route";
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export interface IClusterSettingsRouteParams extends IClusterViewRouteParams {
 }

src/renderer/components/+cluster-settings/cluster-settings.tsx

@@ -1,8 +1,9 @@
 import "./cluster-settings.scss";
 
 import React from "react";
-import { autorun } from "mobx";
-import { disposeOnUnmount, observer } from "mobx-react";
+import { reaction } from "mobx";
+import { RouteComponentProps } from "react-router";
+import { observer, disposeOnUnmount } from "mobx-react";
 import { Features } from "./features";
 import { Removal } from "./removal";
 import { Status } from "./status";
@@ -11,7 +12,6 @@ import { Cluster } from "../../../main/cluster";
 import { ClusterIcon } from "../cluster-icon";
 import { IClusterSettingsRouteParams } from "./cluster-settings.route";
 import { clusterStore } from "../../../common/cluster-store";
-import { RouteComponentProps } from "react-router";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { PageLayout } from "../layout/page-layout";
 
@@ -20,16 +20,23 @@ interface Props extends RouteComponentProps<IClusterSettingsRouteParams> {
 
 @observer
 export class ClusterSettings extends React.Component<Props> {
-  get cluster(): Cluster {
-    return clusterStore.getById(this.props.match.params.clusterId);
+  get clusterId() {
+    return this.props.match.params.clusterId
   }
 
-  async componentDidMount() {
-    disposeOnUnmount(this,
-      autorun(() => {
-        this.refreshCluster();
+  get cluster(): Cluster {
+    return clusterStore.getById(this.clusterId);
+  }
+
+  componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.cluster, this.refreshCluster, {
+        fireImmediately: true,
+      }),
+      reaction(() => this.clusterId, clusterId => clusterStore.setActive(clusterId), {
+        fireImmediately: true,
       })
-    )
+    ])
   }
 
   refreshCluster = async () => {

src/renderer/components/+cluster/cluster.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const clusterRoute: RouteProps = {
   path: "/cluster"

src/renderer/components/+config-autoscalers/hpa.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const hpaRoute: RouteProps = {
   path: "/hpa"

src/renderer/components/+config-maps/config-maps.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const configMapsRoute: RouteProps = {
   path: "/configmaps"

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const pdbRoute: RouteProps = {
   path: "/poddisruptionbudgets"

src/renderer/components/+config-resource-quotas/resource-quotas.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const resourceQuotaRoute: RouteProps = {
   path: "/resourcequotas"

src/renderer/components/+config-secrets/secrets.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const secretsRoute: RouteProps = {
   path: "/secrets"

src/renderer/components/+config/config.route.ts

@@ -1,7 +1,7 @@
 import { RouteProps } from "react-router";
-import { configMapsURL } from "../+config-maps";
 import { Config } from "./config";
-import { IURLParams } from "../../navigation";
+import { IURLParams } from "../../../common/utils/buildUrl";
+import { configMapsURL } from "../+config-maps/config-maps.route";
 
 export const configRoute: RouteProps = {
   get path() {

src/renderer/components/+config/config.tsx

@@ -10,8 +10,8 @@ import { resourceQuotaRoute, ResourceQuotas, resourceQuotaURL } from "../+config
 import { PodDisruptionBudgets, pdbRoute, pdbURL } from "../+config-pod-disruption-budgets";
 import { configURL } from "./config.route";
 import { HorizontalPodAutoscalers, hpaRoute, hpaURL } from "../+config-autoscalers";
-import { buildURL } from "../../navigation";
 import { isAllowedResource } from "../../../common/rbac"
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const certificatesURL = buildURL("/certificates");
 export const issuersURL = buildURL("/issuers");

src/renderer/components/+custom-resources/crd.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const crdRoute: RouteProps = {
   path: "/crd"

src/renderer/components/+events/events.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const eventRoute: RouteProps = {
   path: "/events"

src/renderer/components/+landing-page/landing-page.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const landingRoute: RouteProps = {
   path: "/landing"

src/renderer/components/+namespaces/namespaces.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const namespacesRoute: RouteProps = {
   path: "/namespaces"

src/renderer/components/+network-endpoints/endpoints.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const endpointRoute: RouteProps = {
   path: "/endpoints"

src/renderer/components/+network-ingresses/ingresses.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const ingressRoute: RouteProps = {
   path: "/ingresses"

src/renderer/components/+network-policies/network-policies.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const networkPoliciesRoute: RouteProps = {
   path: "/network-policies"

src/renderer/components/+network-services/services.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const servicesRoute: RouteProps = {
   path: "/services"

src/renderer/components/+network/network.route.ts

@@ -1,7 +1,7 @@
 import { RouteProps } from "react-router"
 import { Network } from "./network";
 import { servicesURL } from "../+network-services";
-import { IURLParams } from "../../navigation";
+import { IURLParams } from "../../../common/utils/buildUrl";
 
 export const networkRoute: RouteProps = {
   get path() {

src/renderer/components/+nodes/nodes.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const nodesRoute: RouteProps = {
   path: "/nodes"

src/renderer/components/+pod-security-policies/pod-security-policies.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const podSecurityPoliciesRoute: RouteProps = {
   path: "/pod-security-policies"

src/renderer/components/+preferences/preferences.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const preferencesRoute: RouteProps = {
   path: "/preferences"

src/renderer/components/+preferences/preferences.scss

@@ -21,4 +21,8 @@
       display: none;
     }
   }
+
+  .Checkbox {
+    align-self: start; // limit clickable area to checkbox + text
+  }
 }

src/renderer/components/+preferences/preferences.tsx

@@ -156,6 +156,13 @@ export class Preferences extends React.Component {
           })}
         </div>
 
+        <h2><Trans>Auto start-up</Trans></h2>
+        <Checkbox
+          label={<Trans>Automatically start Lens on login</Trans>}
+          value={preferences.openAtLogin}
+          onChange={v => preferences.openAtLogin = v}
+        />
+
         <h2><Trans>Certificate Trust</Trans></h2>
         <Checkbox
           label={<Trans>Allow untrusted Certificate Authorities</Trans>}

src/renderer/components/+storage-classes/storage-classes.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const storageClassesRoute: RouteProps = {
   path: "/storage-classes"

src/renderer/components/+storage-volume-claims/volume-claims.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const volumeClaimsRoute: RouteProps = {
   path: "/persistent-volume-claims"

src/renderer/components/+storage-volumes/volumes.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router"
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const volumesRoute: RouteProps = {
   path: "/persistent-volumes"

src/renderer/components/+storage/storage.route.ts

@@ -1,7 +1,7 @@
 import { RouteProps } from "react-router"
 import { volumeClaimsURL } from "../+storage-volume-claims";
 import { Storage } from "./storage";
-import { IURLParams } from "../../navigation";
+import { IURLParams } from "../../../common/utils/buildUrl";
 
 export const storageRoute: RouteProps = {
   get path() {

src/renderer/components/+user-management/user-management.route.ts

@@ -1,6 +1,6 @@
-import { RouteProps } from "react-router";
+import type { RouteProps } from "react-router";
+import { buildURL, IURLParams } from "../../../common/utils/buildUrl";
 import { UserManagement } from "./user-management"
-import { buildURL, IURLParams } from "../../navigation";
 
 export const usersManagementRoute: RouteProps = {
   get path() {
@@ -30,9 +30,7 @@ export interface IRolesRouteParams {
 }
 
 // URL-builders
+export const usersManagementURL = (params?: IURLParams) => serviceAccountsURL(params);
 export const serviceAccountsURL = buildURL<IServiceAccountsRouteParams>(serviceAccountsRoute.path)
 export const roleBindingsURL = buildURL<IRoleBindingsRouteParams>(roleBindingsRoute.path)
 export const rolesURL = buildURL<IRoleBindingsRouteParams>(rolesRoute.path)
-export const usersManagementURL = (params?: IURLParams) => {
-  return serviceAccountsURL(params);
-};

src/renderer/components/+whats-new/whats-new.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const whatsNewRoute: RouteProps = {
   path: "/what-s-new"

src/renderer/components/+workloads/workloads.route.ts

@@ -1,7 +1,7 @@
-import { RouteProps } from "react-router"
-import { Workloads } from "./workloads";
-import { buildURL, IURLParams } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL, IURLParams } from "../../../common/utils/buildUrl";
 import { KubeResource } from "../../../common/rbac";
+import { Workloads } from "./workloads";
 
 export const workloadsRoute: RouteProps = {
   get path() {

src/renderer/components/+workspaces/workspaces.route.ts

@@ -1,5 +1,5 @@
-import { RouteProps } from "react-router";
-import { buildURL } from "../../navigation";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export const workspacesRoute: RouteProps = {
   path: "/workspaces"

src/renderer/components/cluster-manager/cluster-manager.tsx

@@ -1,4 +1,5 @@
 import "./cluster-manager.scss"
+
 import React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { comparer, reaction } from "mobx";
@@ -11,14 +12,17 @@ import { Workspaces, workspacesRoute } from "../+workspaces";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
-import { clusterViewRoute, clusterViewURL, getMatchedCluster, getMatchedClusterId } from "./cluster-view.route";
+import { clusterViewRoute, clusterViewURL } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
 import { globalPageRegistry } from "../../../extensions/registries/page-registry";
+import { getMatchedClusterId } from "../../navigation";
 
 @observer
 export class ClusterManager extends React.Component {
   componentDidMount() {
+    const getMatchedCluster = () => clusterStore.getById(getMatchedClusterId());
+
     disposeOnUnmount(this, [
       reaction(getMatchedClusterId, initView, {
         fireImmediately: true
@@ -55,7 +59,7 @@ export class ClusterManager extends React.Component {
     return (
       <div className="ClusterManager">
         <main>
-          <div id="lens-views" />
+          <div id="lens-views"/>
           <Switch>
             <Route component={LandingPage} {...landingRoute} />
             <Route component={Preferences} {...preferencesRoute} />
@@ -66,11 +70,11 @@ export class ClusterManager extends React.Component {
             {globalPageRegistry.getItems().map(({ path, url = String(path), components: { Page } }) => {
               return <Route key={url} path={path} component={Page}/>
             })}
-            <Redirect exact to={this.startUrl} />
+            <Redirect exact to={this.startUrl}/>
           </Switch>
         </main>
-        <ClustersMenu />
-        <BottomBar />
+        <ClustersMenu/>
+        <BottomBar/>
       </div>
     )
   }

src/renderer/components/cluster-manager/cluster-view.route.ts

@@ -1,8 +1,5 @@
-import { reaction } from "mobx";
-import { ipcRenderer } from "electron";
-import { matchPath, RouteProps } from "react-router";
-import { buildURL, navigation } from "../../navigation";
-import { clusterStore } from "../../../common/cluster-store";
+import type { RouteProps } from "react-router";
+import { buildURL } from "../../../common/utils/buildUrl";
 
 export interface IClusterViewRouteParams {
   clusterId: string;
@@ -14,33 +11,3 @@ export const clusterViewRoute: RouteProps = {
 }
 
 export const clusterViewURL = buildURL<IClusterViewRouteParams>(clusterViewRoute.path)
-
-export function getMatchedClusterId(): string {
-  const matched = matchPath<IClusterViewRouteParams>(navigation.location.pathname, {
-    exact: true,
-    path: clusterViewRoute.path
-  })
-  if (matched) {
-    return matched.params.clusterId;
-  }
-}
-
-export function getMatchedCluster() {
-  return clusterStore.getById(getMatchedClusterId())
-}
-
-if (ipcRenderer) {
-  if (process.isMainFrame) {
-    // Keep track of active cluster-id for handling IPC/menus/etc.
-    reaction(() => getMatchedClusterId(), clusterId => {
-      ipcRenderer.send("cluster-view:current-id", clusterId);
-    }, {
-      fireImmediately: true
-    })
-  }
-
-  // Reload dashboard
-  ipcRenderer.on("menu:reload", () => {
-    location.reload();
-  });
-}

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -1,14 +1,37 @@
 import "./cluster-view.scss"
 import React from "react";
-import { observer } from "mobx-react";
-import { getMatchedCluster } from "./cluster-view.route";
+import { reaction } from "mobx";
+import { disposeOnUnmount, observer } from "mobx-react";
+import { RouteComponentProps } from "react-router";
+import { IClusterViewRouteParams } from "./cluster-view.route";
 import { ClusterStatus } from "./cluster-status";
 import { hasLoadedView } from "./lens-views";
+import { Cluster } from "../../../main/cluster";
+import { clusterStore } from "../../../common/cluster-store";
+
+interface Props extends RouteComponentProps<IClusterViewRouteParams> {
+}
 
 @observer
-export class ClusterView extends React.Component {
+export class ClusterView extends React.Component<Props> {
+  get clusterId() {
+    return this.props.match.params.clusterId;
+  }
+
+  get cluster(): Cluster {
+    return clusterStore.getById(this.clusterId);
+  }
+
+  async componentDidMount() {
+    disposeOnUnmount(this, [
+      reaction(() => this.clusterId, clusterId => clusterStore.setActive(clusterId), {
+        fireImmediately: true,
+      })
+    ])
+  }
+
   render() {
-    const cluster = getMatchedCluster();
+    const { cluster } = this;
     const showStatus = cluster && (!cluster.available || !hasLoadedView(cluster.id) || !cluster.ready)
     return (
       <div className="ClusterView">

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -1,8 +1,9 @@
-import type { Cluster } from "../../../main/cluster";
 import "./clusters-menu.scss"
 
-import { remote } from "electron"
 import React from "react";
+import { remote } from "electron"
+import type { Cluster } from "../../../main/cluster";
+import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
 import { observer } from "mobx-react";
 import { _i18n } from "../../i18n";
 import { t, Trans } from "@lingui/macro";
@@ -21,7 +22,6 @@ import { Tooltip } from "../tooltip";
 import { ConfirmDialog } from "../confirm-dialog";
 import { clusterIpc } from "../../../common/cluster-ipc";
 import { clusterViewURL } from "./cluster-view.route";
-import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
 import { globalPageRegistry } from "../../../extensions/registries/page-registry";
 
 interface Props {
@@ -31,13 +31,11 @@ interface Props {
 @observer
 export class ClustersMenu extends React.Component<Props> {
   showCluster = (clusterId: ClusterId) => {
-    clusterStore.setActive(clusterId);
     navigate(clusterViewURL({ params: { clusterId } }));
   }
 
   addCluster = () => {
     navigate(addClusterURL());
-    clusterStore.setActive(null);
   }
 
   showContextMenu = (cluster: Cluster) => {
@@ -47,7 +45,6 @@ export class ClustersMenu extends React.Component<Props> {
     menu.append(new MenuItem({
       label: _i18n._(t`Settings`),
       click: () => {
-        clusterStore.setActive(cluster.id);
         navigate(clusterSettingsURL({
           params: {
             clusterId: cluster.id
@@ -112,21 +109,14 @@ export class ClustersMenu extends React.Component<Props> {
         <div className="clusters flex column gaps">
           <DragDropContext onDragEnd={this.swapClusterIconOrder}>
             <Droppable droppableId="cluster-menu" type="CLUSTER">
-              {(provided: DroppableProvided) => (
-                <div
-                  ref={provided.innerRef}
-                  {...provided.droppableProps}
-                >
+              {({ innerRef, droppableProps, placeholder }: DroppableProvided) => (
+                <div ref={innerRef} {...droppableProps}>
                   {clusters.map((cluster, index) => {
                     const isActive = cluster.id === clusterStore.activeClusterId;
                     return (
                       <Draggable draggableId={cluster.id} index={index} key={cluster.id}>
-                        {(provided: DraggableProvided) => (
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                          >
+                        {({ draggableProps, dragHandleProps, innerRef }: DraggableProvided) => (
+                          <div ref={innerRef} {...draggableProps} {...dragHandleProps}>
                             <ClusterIcon
                               key={cluster.id}
                               showErrors={true}
@@ -138,9 +128,9 @@ export class ClustersMenu extends React.Component<Props> {
                           </div>
                         )}
                       </Draggable>
-                    )}
-                  )}
-                  {provided.placeholder}
+                    )
+                  })}
+                  {placeholder}
                 </div>
               )}
             </Droppable>
@@ -150,16 +140,14 @@ export class ClustersMenu extends React.Component<Props> {
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>
           </Tooltip>
-          <Icon big material="add" id="add-cluster-icon" />
+          <Icon big material="add" id="add-cluster-icon"/>
           {newContexts.size > 0 && (
-            <Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>} />
+            <Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>}/>
           )}
         </div>
         <div className="extensions">
           {globalPageRegistry.getItems().map(({ path, url = String(path), hideInMenu, components: { MenuIcon } }) => {
-            if (!MenuIcon || hideInMenu) {
-              return;
-            }
+            if (!MenuIcon || hideInMenu) return;
             return <MenuIcon key={url} onClick={() => navigate(url)}/>
           })}
         </div>

src/renderer/components/cluster-manager/lens-views.ts

@@ -1,6 +1,6 @@
 import { observable, when } from "mobx";
 import { ClusterId, clusterStore, getClusterFrameUrl } from "../../../common/cluster-store";
-import { getMatchedCluster } from "./cluster-view.route"
+import { getMatchedClusterId } from "../../navigation";
 import logger from "../../../main/logger";
 
 export interface LensView {
@@ -51,7 +51,7 @@ export async function autoCleanOnRemove(clusterId: ClusterId, iframe: HTMLIFrame
 }
 
 export function refreshViews() {
-  const cluster = getMatchedCluster();
+  const cluster = clusterStore.getById(getMatchedClusterId());
   lensViews.forEach(({ clusterId, view, isLoaded }) => {
     const isCurrent = clusterId === cluster?.id;
     const isReady = cluster?.available && cluster?.ready;

src/renderer/components/icon/logo.svg

@@ -1,7 +0,0 @@
-<svg id="Layer_1" viewBox="0 0 194 219" xmlns="http://www.w3.org/2000/svg">
-  <g fill="#fff">
-    <polygon points="98 12.4 71 28.3 44 44.1 17 60 17 91.8 17 123.6 17 155.4 44 171.3 44 139.5 44 107.7 44 75.9 71 60 71 91.8 71 91.8 71 123.6 98 107.7 98 107.7 125 91.8 125 60 152 44.1 125 28.3 98 12.4"/>
-    <polygon points="152 44.1 152 75.9 152 107.7 125 123.6 152 139.5 152 171.3 179 155.4 179 123.6 179 91.8 179 60 152 44.1"/>
-    <polygon points="98 139.5 71 155.4 71 155.4 71 187.2 98 203.1 125 187.2 125 155.4 98 139.5"/>
-  </g>
-</svg>

src/renderer/components/layout/sidebar.tsx

@@ -80,7 +80,7 @@ export class Sidebar extends React.Component<Props> {
         <div className={cssNames("Sidebar flex column", className, { pinned: isPinned })}>
           <div className="header flex align-center">
             <NavLink exact to="/" className="box grow">
-              <Icon svg="logo-full" className="logo-icon"/>
+              <Icon svg="logo-lens" className="logo-icon"/>
               <div className="logo-text">Lens</div>
             </NavLink>
             <Icon