Hotbar command palette + switching (#2552)

* fix initial hotbar not showing

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* hotbar command palette + switching

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* lint fix

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* add clickable index to switcher

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* cleanup

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* refactor

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix typo

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fixes

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* remote notifications

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix add to hotbar

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* don't show remove-from-hotbar on catalog context menu

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

* fix bad merge

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

package.json

@@ -2,7 +2,7 @@
   "name": "open-lens",
   "productName": "OpenLens",
   "description": "OpenLens - Open Source IDE for Kubernetes",
-  "version": "5.0.0-alpha.1",
+  "version": "5.0.0-alpha.2",
   "main": "static/build/main.js",
   "copyright": "© 2021 OpenLens Authors",
   "license": "MIT",

src/common/__tests__/hotbar-store.test.ts

@@ -21,4 +21,14 @@ describe("HotbarStore", () => {
       expect(HotbarStore.getInstance().hotbars.length).toEqual(1);
     });
   });
+
+  describe("add", () => {
+    it("adds a hotbar", () => {
+      const hotbarStore = HotbarStore.getInstanceOrCreate();
+
+      hotbarStore.load();
+      hotbarStore.add({ name: "hottest" });
+      expect(hotbarStore.hotbars.length).toEqual(2);
+    });
+  });
 });

src/common/hotbar-store.ts

@@ -1,6 +1,7 @@
 import { action, comparer, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import migrations from "../migrations/hotbar-store";
+import * as uuid from "uuid";
 
 export interface HotbarItem {
   entity: {
@@ -12,16 +13,25 @@ export interface HotbarItem {
 }
 
 export interface Hotbar {
+  id: string;
   name: string;
   items: HotbarItem[];
 }
 
+export interface HotbarCreateOptions {
+  id?: string;
+  name: string;
+  items?: HotbarItem[];
+}
+
 export interface HotbarStoreModel {
   hotbars: Hotbar[];
+  activeHotbarId: string;
 }
 
 export class HotbarStore extends BaseStore<HotbarStoreModel> {
   @observable hotbars: Hotbar[] = [];
+  @observable private _activeHotbarId: string;
 
   constructor() {
     super({
@@ -34,32 +44,103 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     });
   }
 
+  get activeHotbarId() {
+    return this._activeHotbarId;
+  }
+
+  set activeHotbarId(id: string) {
+    if (this.getById(id)) {
+      this._activeHotbarId = id;
+    }
+  }
+
+  get activeHotbarIndex() {
+    return this.hotbars.findIndex((hotbar) => hotbar.id === this.activeHotbarId);
+  }
+
   @action protected async fromStore(data: Partial<HotbarStoreModel> = {}) {
     if (data.hotbars?.length === 0) {
       this.hotbars = [{
-        name: "default",
+        id: uuid.v4(),
+        name: "Default",
         items: []
       }];
     } else {
       this.hotbars = data.hotbars;
     }
+
+    if (data.activeHotbarId) {
+      if (this.getById(data.activeHotbarId)) {
+        this.activeHotbarId = data.activeHotbarId;
+      }
+    }
+
+    if (!this.activeHotbarId) {
+      this.activeHotbarId = this.hotbars[0].id;
+    }
+  }
+
+  getActive() {
+    return this.getById(this.activeHotbarId);
   }
 
   getByName(name: string) {
     return this.hotbars.find((hotbar) => hotbar.name === name);
   }
 
-  add(hotbar: Hotbar) {
-    this.hotbars.push(hotbar);
+  getById(id: string) {
+    return this.hotbars.find((hotbar) => hotbar.id === id);
   }
 
+  add(data: HotbarCreateOptions) {
+    const {
+      id = uuid.v4(),
+      items = [],
+      name,
+    } = data;
+
+    const hotbar = { id, name, items };
+
+    this.hotbars.push(hotbar as Hotbar);
+
+    return hotbar as Hotbar;
+  }
+
+  @action
   remove(hotbar: Hotbar) {
     this.hotbars = this.hotbars.filter((h) => h !== hotbar);
+
+    if (this.activeHotbarId === hotbar.id) {
+      this.activeHotbarId = this.hotbars[0].id;
+    }
+  }
+
+  switchToPrevious() {
+    const hotbarStore = HotbarStore.getInstance();
+    let index = hotbarStore.activeHotbarIndex - 1;
+
+    if (index < 0) {
+      index = hotbarStore.hotbars.length - 1;
+    }
+
+    hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id;
+  }
+
+  switchToNext() {
+    const hotbarStore = HotbarStore.getInstance();
+    let index = hotbarStore.activeHotbarIndex + 1;
+
+    if (index >= hotbarStore.hotbars.length) {
+      index = 0;
+    }
+
+    hotbarStore.activeHotbarId = hotbarStore.hotbars[index].id;
   }
 
   toJSON(): HotbarStoreModel {
     const model: HotbarStoreModel = {
-      hotbars: this.hotbars
+      hotbars: this.hotbars,
+      activeHotbarId: this.activeHotbarId
     };
 
     return toJS(model, {

src/migrations/hotbar-store/5.0.0-alpha.0.ts

@@ -2,6 +2,7 @@
 import { Hotbar } from "../../common/hotbar-store";
 import { ClusterStore } from "../../common/cluster-store";
 import { migration } from "../migration-wrapper";
+import { v4 as uuid } from "uuid";
 
 export default migration({
   version: "5.0.0-alpha.0",
@@ -9,11 +10,14 @@ export default migration({
     const hotbars: Hotbar[] = [];
 
     ClusterStore.getInstance().enabledClustersList.forEach((cluster: any) => {
-      const name = cluster.workspace || "default";
+      const name = cluster.workspace;
+
+      if (!name) return;
+
       let hotbar = hotbars.find((h) => h.name === name);
 
       if (!hotbar) {
-        hotbar = { name, items: [] };
+        hotbar = { id: uuid(), name, items: [] };
         hotbars.push(hotbar);
       }
 

src/migrations/hotbar-store/5.0.0-alpha.2.ts

@@ -0,0 +1,16 @@
+// Cleans up a store that had the state related data stored
+import { Hotbar } from "../../common/hotbar-store";
+import { migration } from "../migration-wrapper";
+import * as uuid from "uuid";
+
+export default migration({
+  version: "5.0.0-alpha.2",
+  run(store) {
+    const hotbars = (store.get("hotbars") || []) as Hotbar[];
+
+    store.set("hotbars", hotbars.map((hotbar) => ({
+      id: uuid.v4(),
+      ...hotbar
+    })));
+  }
+});

src/migrations/hotbar-store/index.ts

@@ -1,7 +1,9 @@
 // Hotbar store migrations
 
 import version500alpha0 from "./5.0.0-alpha.0";
+import version500alpha2 from "./5.0.0-alpha.2";
 
 export default {
   ...version500alpha0,
+  ...version500alpha2
 };

src/renderer/components/+catalog/catalog.tsx

@@ -57,7 +57,7 @@ export class Catalog extends React.Component {
   }
 
   addToHotbar(item: CatalogEntityItem) {
-    const hotbar = HotbarStore.getInstance().getByName("default"); // FIXME
+    const hotbar = HotbarStore.getInstance().getActive();
 
     if (!hotbar) {
       return;
@@ -66,16 +66,6 @@ export class Catalog extends React.Component {
     hotbar.items.push({ entity: { uid: item.id }});
   }
 
-  removeFromHotbar(item: CatalogEntityItem) {
-    const hotbar = HotbarStore.getInstance().getByName("default"); // FIXME
-
-    if (!hotbar) {
-      return;
-    }
-
-    hotbar.items = hotbar.items.filter((i) => i.entity.uid !== item.id);
-  }
-
   onDetails(item: CatalogEntityItem) {
     item.onRun(catalogEntityRunContext);
   }
@@ -137,9 +127,6 @@ export class Catalog extends React.Component {
         <MenuItem key="add-to-hotbar" onClick={() => this.addToHotbar(item) }>
           <Icon material="add" small interactive={true} title="Add to hotbar"/> Add to Hotbar
         </MenuItem>
-        <MenuItem key="remove-from-hotbar" onClick={() => this.removeFromHotbar(item) }>
-          <Icon material="clear" small interactive={true} title="Remove from hotbar"/> Remove from Hotbar
-        </MenuItem>
         { menuItems.map((menuItem, index) => {
           return (
             <MenuItem key={index} onClick={() => this.onMenuItemClick(menuItem)}>

src/renderer/components/hotbar/hotbar-add-command.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { HotbarStore } from "../../../common/hotbar-store";
+import { CommandOverlay } from "../command-palette";
+import { Input, InputValidator } from "../input";
+
+const uniqueHotbarName: InputValidator = {
+  condition: ({ required }) => required,
+  message: () => "Hotbar with this name already exists",
+  validate: value => !HotbarStore.getInstance().getByName(value),
+};
+
+@observer
+export class HotbarAddCommand extends React.Component {
+
+  onSubmit(name: string) {
+    if (!name.trim()) {
+      return;
+    }
+
+    const hotbarStore = HotbarStore.getInstance();
+
+    const hotbar = hotbarStore.add({
+      name
+    });
+
+    hotbarStore.activeHotbarId = hotbar.id;
+
+    CommandOverlay.close();
+  }
+
+  render() {
+    return (
+      <>
+        <Input
+          placeholder="Hotbar name"
+          autoFocus={true}
+          theme="round-black"
+          data-test-id="command-palette-hotbar-add-name"
+          validators={[uniqueHotbarName]}
+          onSubmit={(v) => this.onSubmit(v)}
+          dirty={true}
+          showValidationLine={true} />
+        <small className="hint">
+          Please provide a new hotbar name (Press &quot;Enter&quot; to confirm or &quot;Escape&quot; to cancel)
+        </small>
+      </>
+    );
+  }
+}

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

@@ -60,7 +60,7 @@ export class HotbarIcon extends React.Component<Props> {
   }
 
   removeFromHotbar(item: CatalogEntity) {
-    const hotbar = HotbarStore.getInstance().getByName("default"); // FIXME
+    const hotbar = HotbarStore.getInstance().getActive();
 
     if (!hotbar) {
       return;

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

@@ -22,4 +22,14 @@
       display: none;
     }
   }
+
+  .HotbarSelector {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+
+    .Badge {
+      cursor: pointer;
+    }
+  }
 }

src/renderer/components/hotbar/hotbar-menu.tsx

@@ -1,4 +1,5 @@
 import "./hotbar-menu.scss";
+import "./hotbar.commands";
 
 import React from "react";
 import { observer } from "mobx-react";
@@ -7,6 +8,10 @@ import { cssNames, IClassName } from "../../utils";
 import { catalogEntityRegistry } from "../../api/catalog-entity-registry";
 import { HotbarStore } from "../../../common/hotbar-store";
 import { catalogEntityRunContext } from "../../api/catalog-entity";
+import { Icon } from "../icon";
+import { Badge } from "../badge";
+import { CommandOverlay } from "../command-palette";
+import { HotbarSwitchCommand } from "./hotbar-switch-command";
 
 interface Props {
   className?: IClassName;
@@ -14,9 +19,8 @@ interface Props {
 
 @observer
 export class HotbarMenu extends React.Component<Props> {
-
   get hotbarItems() {
-    const hotbar = HotbarStore.getInstance().getByName("default"); // FIXME
+    const hotbar = HotbarStore.getInstance().getActive();
 
     if (!hotbar) {
       return [];
@@ -25,8 +29,21 @@ export class HotbarMenu extends React.Component<Props> {
     return hotbar.items.map((item) => catalogEntityRegistry.items.find((entity) => entity.metadata.uid === item.entity.uid)).filter(Boolean);
   }
 
+  previous() {
+    HotbarStore.getInstance().switchToPrevious();
+  }
+
+  next() {
+    HotbarStore.getInstance().switchToNext();
+  }
+
+  openSelector() {
+    CommandOverlay.open(<HotbarSwitchCommand />);
+  }
+
   render() {
     const { className } = this.props;
+    const hotbarIndex = HotbarStore.getInstance().activeHotbarIndex + 1;
 
     return (
       <div className={cssNames("HotbarMenu flex column", className)}>
@@ -43,6 +60,13 @@ export class HotbarMenu extends React.Component<Props> {
             );
           })}
         </div>
+        <div className="HotbarSelector flex gaps auto">
+          <Icon material="chevron_left" className="previous box" onClick={() => this.previous()} />
+          <div className="box">
+            <Badge small label={hotbarIndex} onClick={() => this.openSelector()} />
+          </div>
+          <Icon material="chevron_right" className="next box" onClick={() => this.next()} />
+        </div>
       </div>
     );
   }

src/renderer/components/hotbar/hotbar-remove-command.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Select } from "../select";
+import { computed } from "mobx";
+import { HotbarStore } from "../../../common/hotbar-store";
+import { CommandOverlay } from "../command-palette";
+import { ConfirmDialog } from "../confirm-dialog";
+
+@observer
+export class HotbarRemoveCommand extends React.Component {
+  @computed get options() {
+    return HotbarStore.getInstance().hotbars.map((hotbar) => {
+      return { value: hotbar.id, label: hotbar.name };
+    });
+  }
+
+  onChange(id: string): void {
+    const hotbarStore = HotbarStore.getInstance();
+    const hotbar = hotbarStore.getById(id);
+
+    if (!hotbar) {
+      return;
+    }
+
+    CommandOverlay.close();
+    ConfirmDialog.open({
+      okButtonProps: {
+        label: `Remove Hotbar`,
+        primary: false,
+        accent: true,
+      },
+      ok: () => {
+        hotbarStore.remove(hotbar);
+      },
+      message: (
+        <div className="confirm flex column gaps">
+          <p>
+            Are you sure you want remove hotbar <b>{hotbar.name}</b>?
+          </p>
+        </div>
+      ),
+    });
+  }
+
+  render() {
+    return (
+      <Select
+        onChange={(v) => this.onChange(v.value)}
+        components={{ DropdownIndicator: null, IndicatorSeparator: null }}
+        menuIsOpen={true}
+        options={this.options}
+        autoFocus={true}
+        escapeClearsValue={false}
+        placeholder="Remove hotbar" />
+    );
+  }
+}

src/renderer/components/hotbar/hotbar-switch-command.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { observer } from "mobx-react";
+import { Select } from "../select";
+import { computed } from "mobx";
+import { HotbarStore } from "../../../common/hotbar-store";
+import { CommandOverlay } from "../command-palette";
+import { HotbarAddCommand } from "./hotbar-add-command";
+import { HotbarRemoveCommand } from "./hotbar-remove-command";
+
+@observer
+export class HotbarSwitchCommand extends React.Component {
+  private static addActionId = "__add__";
+  private static removeActionId = "__remove__";
+
+  @computed get options() {
+    const hotbarStore = HotbarStore.getInstance();
+    const options = hotbarStore.hotbars.map((hotbar) => {
+      return { value: hotbar.id, label: hotbar.name };
+    });
+
+    options.push({ value: HotbarSwitchCommand.addActionId, label: "Add hotbar ..." });
+
+    if (hotbarStore.hotbars.length > 1) {
+      options.push({ value: HotbarSwitchCommand.removeActionId, label: "Remove hotbar ..." });
+    }
+
+    return options;
+  }
+
+  onChange(idOrAction: string): void {
+    switch(idOrAction) {
+      case HotbarSwitchCommand.addActionId:
+        CommandOverlay.open(<HotbarAddCommand />);
+
+        return;
+      case HotbarSwitchCommand.removeActionId:
+        CommandOverlay.open(<HotbarRemoveCommand />);
+
+        return;
+      default:
+        HotbarStore.getInstance().activeHotbarId = idOrAction;
+        CommandOverlay.close();
+    }
+  }
+
+  render() {
+    return (
+      <Select
+        onChange={(v) => this.onChange(v.value)}
+        components={{ DropdownIndicator: null, IndicatorSeparator: null }}
+        menuIsOpen={true}
+        options={this.options}
+        autoFocus={true}
+        escapeClearsValue={false}
+        placeholder="Switch to hotbar" />
+    );
+  }
+}

src/renderer/components/hotbar/hotbar.commands.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { commandRegistry } from "../../../extensions/registries";
+import { CommandOverlay } from "../command-palette";
+import { HotbarAddCommand } from "./hotbar-add-command";
+import { HotbarRemoveCommand } from "./hotbar-remove-command";
+import { HotbarSwitchCommand } from "./hotbar-switch-command";
+
+commandRegistry.add({
+  id: "hotbar.switchHotbar",
+  title: "Hotbar: Switch ...",
+  scope: "global",
+  action: () => CommandOverlay.open(<HotbarSwitchCommand />)
+});
+
+commandRegistry.add({
+  id: "hotbar.addHotbar",
+  title: "Hotbar: Add Hotbar ...",
+  scope: "global",
+  action: () => CommandOverlay.open(<HotbarAddCommand />)
+});
+
+commandRegistry.add({
+  id: "hotbar.removeHotbar",
+  title: "Hotbar: Remove Hotbar ...",
+  scope: "global",
+  action: () => CommandOverlay.open(<HotbarRemoveCommand />)
+});