Add ability to rename hotbars (#3469)

Signed-off-by: vshakirova <vshakirova@mirantis.com>

src/common/hotbar-store.ts

@@ -153,6 +153,19 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }
   }
 
+  @action
+  setHotbarName(id: string, name: string) {
+    const index = this.hotbars.findIndex((hotbar) => hotbar.id === id);
+
+    if(index < 0) {
+      console.warn(`[HOTBAR-STORE]: cannot setHotbarName: unknown id`, { id });
+
+      return;
+    }
+
+    this.hotbars[index].name = name;
+  }
+
   @action
   remove(hotbar: Hotbar) {
     this.hotbars = this.hotbars.filter((h) => h !== hotbar);

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

@@ -25,7 +25,7 @@ import { HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { Input, InputValidator } from "../input";
 
-const uniqueHotbarName: InputValidator = {
+export const uniqueHotbarName: InputValidator = {
   condition: ({ required }) => required,
   message: () => "Hotbar with this name already exists",
   validate: value => !HotbarStore.getInstance().getByName(value),

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

@@ -0,0 +1,114 @@
+/**
+ * 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 React from "react";
+import { observer } from "mobx-react";
+import { Select } from "../select";
+import { action, computed, makeObservable, observable } from "mobx";
+import { HotbarStore } from "../../../common/hotbar-store";
+import { hotbarDisplayLabel } from "./hotbar-display-label";
+import { Input } from "../input";
+import { uniqueHotbarName } from "./hotbar-add-command";
+import { CommandOverlay } from "../command-palette";
+
+@observer
+export class HotbarRenameCommand extends React.Component {
+  @observable hotbarId = "";
+  @observable hotbarName = "";
+
+  constructor(props: {}) {
+    super(props);
+    makeObservable(this);
+  }
+
+  @computed get options() {
+    return HotbarStore.getInstance().hotbars.map((hotbar) => {
+      return { value: hotbar.id, label: hotbarDisplayLabel(hotbar.id) };
+    });
+  }
+
+  @action onSelect = (id: string) => {
+    this.hotbarId = id;
+    this.hotbarName = HotbarStore.getInstance().getById(this.hotbarId).name;
+  };
+
+  onSubmit = (name: string) => {
+    if (!name.trim()) {
+      return;
+    }
+
+    const hotbarStore = HotbarStore.getInstance();
+    const hotbar = HotbarStore.getInstance().getById(this.hotbarId);
+
+    if (!hotbar) {
+      return;
+    }
+
+    hotbarStore.setHotbarName(this.hotbarId, name);
+    CommandOverlay.close();
+  };
+
+  renderHotbarList() {
+    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="Rename hotbar"/>
+      </>
+    );
+  }
+
+  renderNameInput() {
+    return (
+      <>
+        <Input
+          trim={true}
+          value={this.hotbarName}
+          onChange={v => this.hotbarName = v}
+          placeholder="New hotbar name"
+          autoFocus={true}
+          theme="round-black"
+          validators={uniqueHotbarName}
+          onSubmit={this.onSubmit}
+          showValidationLine={true}
+        />
+        <small className="hint">
+          Please provide a new hotbar name (Press &quot;Enter&quot; to confirm or &quot;Escape&quot; to cancel)
+        </small>
+      </>
+    );
+  }
+
+  render() {
+
+    return (
+      <>
+        {!this.hotbarId ? this.renderHotbarList() : this.renderNameInput()}
+      </>
+    );
+  }
+}

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

@@ -28,12 +28,13 @@ import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
 import { hotbarDisplayIndex } from "./hotbar-display-label";
 import { TooltipPosition } from "../tooltip";
+import { observer } from "mobx-react";
 
 interface Props {
   hotbar: Hotbar;
 }
 
-export function HotbarSelector({ hotbar }: Props) {
+export const HotbarSelector = observer(({ hotbar }: Props) => {
   const store = HotbarStore.getInstance();
 
   return (
@@ -55,4 +56,4 @@ export function HotbarSelector({ hotbar }: Props) {
       <Icon material="play_arrow" className="next box" onClick={() => store.switchToNext()} />
     </div>
   );
-}
+});

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

@@ -28,11 +28,13 @@ import { CommandOverlay } from "../command-palette";
 import { HotbarAddCommand } from "./hotbar-add-command";
 import { HotbarRemoveCommand } from "./hotbar-remove-command";
 import { hotbarDisplayLabel } from "./hotbar-display-label";
+import { HotbarRenameCommand } from "./hotbar-rename-command";
 
 @observer
 export class HotbarSwitchCommand extends React.Component {
   private static addActionId = "__add__";
   private static removeActionId = "__remove__";
+  private static renameActionId = "__rename__";
 
   constructor(props: {}) {
     super(props);
@@ -51,11 +53,13 @@ export class HotbarSwitchCommand extends React.Component {
       options.push({ value: HotbarSwitchCommand.removeActionId, label: "Remove hotbar ..." });
     }
 
+    options.push({ value: HotbarSwitchCommand.renameActionId, label: "Rename hotbar ..." });
+
     return options;
   }
 
   onChange(idOrAction: string): void {
-    switch(idOrAction) {
+    switch (idOrAction) {
       case HotbarSwitchCommand.addActionId:
         CommandOverlay.open(<HotbarAddCommand />);
 
@@ -63,6 +67,10 @@ export class HotbarSwitchCommand extends React.Component {
       case HotbarSwitchCommand.removeActionId:
         CommandOverlay.open(<HotbarRemoveCommand />);
 
+        return;
+      case HotbarSwitchCommand.renameActionId:
+        CommandOverlay.open(<HotbarRenameCommand />);
+
         return;
       default:
         HotbarStore.getInstance().activeHotbarId = idOrAction;

src/renderer/initializers/command-registry.tsx

@@ -29,6 +29,7 @@ import { HotbarAddCommand } from "../components/hotbar/hotbar-add-command";
 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";
 
 export function initCommandRegistry() {
   CommandRegistry.getInstance()
@@ -189,5 +190,11 @@ export function initCommandRegistry() {
         scope: "global",
         action: () => CommandOverlay.open(<HotbarRemoveCommand />)
       },
+      {
+        id: "hotbar.renameHotbar",
+        title: "Hotbar: Rename Hotbar ...",
+        scope: "global",
+        action: () => CommandOverlay.open(<HotbarRenameCommand />)
+      },
     ]);
 }