Merge branch 'master' into issue-3383-menu-position-bug

src/renderer/api/catalog-entity-registry.ts

@@ -31,7 +31,7 @@ import { once } from "lodash";
 export type EntityFilter = (entity: CatalogEntity) => any;
 
 export class CatalogEntityRegistry {
-  @observable.ref activeEntity: CatalogEntity;
+  @observable protected activeEntityId: string | undefined = undefined;
   protected _entities = observable.map<string, CatalogEntity>([], { deep: true });
   protected filters = observable.set<EntityFilter>([], {
     deep: false,
@@ -46,6 +46,22 @@ export class CatalogEntityRegistry {
     makeObservable(this);
   }
 
+  get activeEntity(): CatalogEntity | null {
+    return this._entities.get(this.activeEntityId) || null;
+  }
+
+  set activeEntity(raw: CatalogEntity | string | null) {
+    if (raw) {
+      const id = typeof raw === "string"
+        ? raw
+        : raw.getId();
+
+      this.activeEntityId = id;
+    } else {
+      this.activeEntityId = undefined;
+    }
+  }
+
   init() {
     ipcRendererOn("catalog:items", (event, items: (CatalogEntityData & CatalogEntityKindData)[]) => {
       this.updateItems(items);

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

@@ -50,11 +50,4 @@
     display: block;
     padding-top: 6px;
   }
-
-  .actions-panel {
-    .Spinner {
-      vertical-align: middle;
-      margin-left: $spacing;
-    }
-  }
 }

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

@@ -24,7 +24,7 @@ import "./add-cluster.scss";
 import type { KubeConfig } from "@kubernetes/client-node";
 import fse from "fs-extra";
 import { debounce } from "lodash";
-import { action, computed, observable, makeObservable, runInAction } from "mobx";
+import { action, computed, observable, makeObservable } from "mobx";
 import { observer } from "mobx-react";
 import path from "path";
 import React from "react";
@@ -41,7 +41,6 @@ import { SettingLayout } from "../layout/setting-layout";
 import MonacoEditor from "react-monaco-editor";
 import { ThemeStore } from "../../theme.store";
 import { UserStore } from "../../../common/user-store";
-import { Spinner } from "../spinner";
 
 interface Option {
   config: KubeConfig;
@@ -63,8 +62,7 @@ export class AddCluster extends React.Component {
   @observable kubeContexts = observable.map<string, Option>();
   @observable customConfig = "";
   @observable isWaiting = false;
-  @observable isCheckingInput = false;
-  @observable errorText: string;
+  @observable errors: string[] = [];
 
   constructor(props: {}) {
     super(props);
@@ -77,40 +75,26 @@ export class AddCluster extends React.Component {
 
   @computed get allErrors(): string[] {
     return [
-      this.errorText,
+      ...this.errors,
       ...iter.map(this.kubeContexts.values(), ({ error }) => error)
     ].filter(Boolean);
   }
 
-  _refreshContexts = debounce(() => {
-    runInAction(() => {
-      try {
-        const text = this.customConfig.trim();
+  @action
+  refreshContexts = debounce(() => {
+    const { config, error } = loadConfigFromString(this.customConfig.trim() || "{}");
 
-        if (!text) {
-          return this.kubeContexts.clear();
-        }
+    this.kubeContexts.replace(getContexts(config));
+    
+    if (error) {
+      this.errors.push(error.toString());
+    }
 
-        const { config, error } = loadConfigFromString(text);
-
-        this.kubeContexts.replace(getContexts(config));
-        this.errorText = error?.toString();
-      } catch (error) {
-        this.kubeContexts.clear();
-        this.errorText = error?.toString() || "An error occured";
-      } finally {
-        this.isCheckingInput = false;
-      }
-    });
+    if (config.contexts.length === 0) {
+      this.errors.push('No contexts defined, either missing the "contexts" field, or it is empty.');
+    }
   }, 500);
 
-  refreshContexts = () => {
-    // Clear the kubeContexts immediately
-    this.isCheckingInput = true;
-    this.kubeContexts.clear();
-    this._refreshContexts();
-  };
-
   @action
   addClusters = async () => {
     this.isWaiting = true;
@@ -147,7 +131,7 @@ export class AddCluster extends React.Component {
             value={this.customConfig}
             onChange={value => {
               this.customConfig = value;
-              this.errorText = "";
+              this.errors.length = 0;
               this.refreshContexts();
             }}
           />
@@ -168,7 +152,6 @@ export class AddCluster extends React.Component {
             tooltip={this.kubeContexts.size === 0 || "Paste in at least one cluster to add."}
             tooltipOverrideDisabled
           />
-          {this.isCheckingInput && <Spinner />}
         </div>
       </SettingLayout>
     );

src/renderer/components/+entity-settings/entity-settings.module.css

@@ -19,26 +19,12 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-.EntitySettings {
-  $spacing: $padding * 3;
-
-
-  // TODO: move sub-component styles to separate files
-  .admin-note {
-    font-size: small;
-    opacity: 0.5;
-    margin-left: $margin;
-  }
-
-  .button-area {
-    margin-top: $margin * 2;
-  }
-
-  .file-loader {
-    margin-top: $margin * 2;
-  }
-
-  .Input, .Select {
-    margin-top: $padding;
-  }
-}
+.entityName {
+  @apply font-bold overflow-hidden;
+  word-break: break-word;
+  color: var(--textColorAccent);
+  display: -webkit-box;
+  /* Simulate text-overflow:ellipsis styles but for multiple text lines */
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+}

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

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import "./entity-settings.scss";
+import styles from "./entity-settings.module.css";
 
 import React from "react";
 import { observable, makeObservable } from "mobx";
@@ -98,7 +98,9 @@ export class EntitySettings extends React.Component<Props> {
             source={this.entity.metadata.source}
             src={this.entity.spec.icon?.src}
           />
-          <h2>{this.entity.metadata.name}</h2>
+          <div className={styles.entityName}>
+            {this.entity.metadata.name}
+          </div>
         </div>
         <Tabs className="flex column" scrollable={false} onChange={this.onTabChange} value={this.activeTab}>
           { groups.map((group, groupIndex) => (
@@ -138,7 +140,6 @@ export class EntitySettings extends React.Component<Props> {
 
     return (
       <SettingLayout
-        className="CatalogEntitySettings"
         navigation={this.renderNavigation()}
         contentGaps={false}
       >

src/renderer/components/activate-entity-command/activate-entity-command.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { computed } from "mobx";
+import { observer } from "mobx-react";
+import React from "react";
+import { CatalogEntity, catalogEntityRunContext } from "../../api/catalog-entity";
+import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
+import { CommandOverlay } from "../command-palette";
+import { Select } from "../select";
+
+@observer
+export class ActivateEntityCommand extends React.Component {
+  @computed get options() {
+    return catalogEntityRegistry.items.map(entity => ({
+      label: `${entity.kind}: ${entity.getName()}`,
+      value: entity,
+    }));
+  }
+
+  onSelect(entity: CatalogEntity): void {
+    entity.onRun?.(catalogEntityRunContext);
+    CommandOverlay.close();
+  }
+
+  render() {
+    return (
+      <Select
+        menuPortalTarget={null}
+        onChange={(v) => this.onSelect(v.value)}
+        components={{ DropdownIndicator: null, IndicatorSeparator: null }}
+        menuIsOpen={true}
+        options={this.options}
+        autoFocus={true}
+        escapeClearsValue={false}
+        placeholder="Activate entity ..."
+      />
+    );
+  }
+}

src/renderer/components/activate-entity-command/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+export * from "./activate-entity-command";

src/renderer/components/app.tsx

@@ -19,7 +19,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 import React from "react";
-import { observable, makeObservable, reaction } from "mobx";
+import { observable, makeObservable } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { Redirect, Route, Router, Switch } from "react-router";
 import { history } from "../navigation";
@@ -97,13 +97,7 @@ export class App extends React.Component {
 
     await cluster.whenReady; // cluster.activate() is done at this point
 
-    const activeEntityDisposer = reaction(() => catalogEntityRegistry.getById(App.clusterId), (entity) => {
-      if (!entity) {
-        return;
-      }
-      catalogEntityRegistry.activeEntity = entity;
-      activeEntityDisposer();
-    }, {fireImmediately: true});
+    catalogEntityRegistry.activeEntity = App.clusterId;
 
     ExtensionLoader.getInstance().loadOnClusterRenderer();
     setTimeout(() => {

src/renderer/components/hotbar/hotbar-icon.scss

@@ -31,12 +31,20 @@
 }
 
 .HotbarIcon {
+  --iconActiveShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+  --iconHoverShadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
+
   border-radius: 6px;
   user-select: none;
   cursor: pointer;
   transition: none;
   text-shadow: 0 0 4px #0000008f;
   position: relative;
+  z-index: 0; // allows to catch state of :active pseudo-selector
+
+  &:active .MuiAvatar-root {
+    box-shadow: var(--iconActiveShadow) !important;
+  }
 
   div.MuiAvatar-colorDefault {
     font-weight:500;
@@ -64,20 +72,17 @@
     box-shadow: none;
   }
 
-  div.MuiAvatar-root {
+  .MuiAvatar-root {
     width: var(--size);
     height: var(--size);
+    border-radius: 6px;
 
     &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
+      box-shadow: var(--iconActiveShadow);
     }
 
-    &.interactive {
-      &:hover {
-        &:not(.active) {
-          box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-        }
-      }
+    &.interactive:not(.active):hover {
+      box-shadow: var(--iconHoverShadow);
     }
   }
 
@@ -117,20 +122,6 @@
     }
   }
 
-  img {
-    border-radius: 6px;
-
-    &.active {
-      box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px var(--textColorAccent);
-    }
-
-    &:hover {
-      &:not(.active) {
-        box-shadow: 0 0 0px 3px var(--clusterMenuBackground), 0 0 0px 6px #ffffff50;
-      }
-    }
-  }
-
   .materialIcon {
     margin-left: 1px;
     margin-top: 1px;

src/renderer/components/input/input.tsx

@@ -91,7 +91,7 @@ const defaultProps: Partial<InputProps> = {
 export class Input extends React.Component<InputProps, State> {
   static defaultProps = defaultProps as object;
 
-  public input: InputElement;
+  public input: InputElement | null = null;
   public validators: InputValidator[] = [];
 
   public state: State = {
@@ -191,7 +191,7 @@ export class Input extends React.Component<InputProps, State> {
       }
     }
 
-    this.input.setCustomValidity(errors.length ? errors[0].toString() : "");
+    this.input?.setCustomValidity(errors.length ? errors[0].toString() : "");
   }
 
   setValidation(errors: React.ReactNode[]) {

src/renderer/components/kubeconfig-dialog/kubeconfig-dialog.tsx

@@ -153,7 +153,7 @@ export function openServiceAccountKubeConfig(account: ServiceAccount) {
   const namespace = account.getNs();
 
   KubeConfigDialog.open({
-    title: "{accountName} kubeconfig",
+    title: `${accountName} kubeconfig`,
     loader: () => apiBase.get(`/kubeconfig/service-account/${namespace}/${accountName}`)
   });
 }

src/renderer/components/layout/sidebar.tsx

@@ -32,7 +32,7 @@ import { Storage } from "../+storage";
 import { Network } from "../+network";
 import { crdStore } from "../+custom-resources/crd.store";
 import { CustomResources } from "../+custom-resources/custom-resources";
-import { isActiveRoute } from "../../navigation";
+import { isActiveRoute, navigate } from "../../navigation";
 import { isAllowedResource } from "../../../common/utils/allowed-resource";
 import { Spinner } from "../spinner";
 import { ClusterPageMenuRegistration, ClusterPageMenuRegistry, ClusterPageRegistry, getExtensionPageUrl } from "../../../extensions/registries";
@@ -110,7 +110,7 @@ export class Sidebar extends React.Component<Props> {
 
     const routes: TabLayoutRoute[] = [];
     const subMenus = ClusterPageMenuRegistry.getInstance().getSubItems(menu);
-    const clusterPageRegistry= ClusterPageRegistry.getInstance();
+    const clusterPageRegistry = ClusterPageRegistry.getInstance();
 
     for (const subMenu of subMenus) {
       const page = clusterPageRegistry.getByPageTarget(subMenu.target);
@@ -193,6 +193,7 @@ export class Sidebar extends React.Component<Props> {
           source={metadata.source}
           src={spec.icon?.src}
           className="mr-5"
+          onClick={() => navigate(routes.clusterURL())}
         />
         <div className={styles.clusterName}>
           {metadata.name}

src/renderer/initializers/command-registry.tsx

@@ -30,6 +30,7 @@ import { HotbarRemoveCommand } from "../components/hotbar/hotbar-remove-command"
 import { HotbarSwitchCommand } from "../components/hotbar/hotbar-switch-command";
 import { navigate } from "../navigation";
 import { HotbarRenameCommand } from "../components/hotbar/hotbar-rename-command";
+import { ActivateEntityCommand } from "../components/activate-entity-command";
 
 export function initCommandRegistry() {
   CommandRegistry.getInstance()
@@ -196,5 +197,11 @@ export function initCommandRegistry() {
         scope: "global",
         action: () => CommandOverlay.open(<HotbarRenameCommand />)
       },
+      {
+        id: "catalog.searchEntities",
+        title: "Catalog: Activate Entity ...",
+        scope: "global",
+        action: () => CommandOverlay.open(<ActivateEntityCommand />)
+      },
     ]);
 }