include the hotbar index in the label displayed for a hotbar (#2770)

* include the hotbar index in the label displayed for a hotbar

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* address review comments for hotbarDisplayLabel()

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

* tweaks to hotbarDisplayLabel()

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/common/hotbar-store.ts

@@ -81,8 +81,12 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }
   }
 
+  hotbarIndex(id: string) {
+    return this.hotbars.findIndex((hotbar) => hotbar.id === id);
+  }
+
   get activeHotbarIndex() {
-    return this.hotbars.findIndex((hotbar) => hotbar.id === this.activeHotbarId);
+    return this.hotbarIndex(this.activeHotbarId);
   }
 
   get initialItems() {

src/renderer/components/hotbar/hotbar-display-label.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 { HotbarStore } from "../../../common/hotbar-store";
+
+function hotbarIndex(id: string) {
+  return HotbarStore.getInstance().hotbarIndex(id) + 1;
+}
+
+export function hotbarDisplayLabel(id: string) : string {
+  const hotbar = HotbarStore.getInstance().getById(id);
+
+  return `${hotbarIndex(id)}: ${hotbar.name}`;
+}
+
+export function hotbarDisplayIndex(id: string) : string {
+  return hotbarIndex(id).toString();
+}

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

@@ -24,6 +24,7 @@ import { observer } from "mobx-react";
 import { Select } from "../select";
 import { computed } from "mobx";
 import { HotbarStore } from "../../../common/hotbar-store";
+import { hotbarDisplayLabel } from "./hotbar-display-label";
 import { CommandOverlay } from "../command-palette";
 import { ConfirmDialog } from "../confirm-dialog";
 
@@ -31,7 +32,7 @@ import { ConfirmDialog } from "../confirm-dialog";
 export class HotbarRemoveCommand extends React.Component {
   @computed get options() {
     return HotbarStore.getInstance().hotbars.map((hotbar) => {
-      return { value: hotbar.id, label: hotbar.name };
+      return { value: hotbar.id, label: hotbarDisplayLabel(hotbar.id) };
     });
   }
 

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

@@ -26,6 +26,7 @@ import { Badge } from "../badge";
 import { Hotbar, HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { HotbarSwitchCommand } from "./hotbar-switch-command";
+import { hotbarDisplayIndex } from "./hotbar-display-label";
 import { MaterialTooltip } from "../+catalog/material-tooltip/material-tooltip";
 
 interface Props {
@@ -34,7 +35,6 @@ interface Props {
 
 export function HotbarSelector({ hotbar }: Props) {
   const store = HotbarStore.getInstance();
-  const activeIndexDisplay = store.activeHotbarIndex + 1;
 
   return (
     <div className="HotbarSelector flex align-center">
@@ -44,7 +44,7 @@ export function HotbarSelector({ hotbar }: Props) {
           <Badge
             id="hotbarIndex"
             small
-            label={activeIndexDisplay}
+            label={hotbarDisplayIndex(store.activeHotbarId)}
             onClick={() => CommandOverlay.open(<HotbarSwitchCommand />)}
           />
         </MaterialTooltip>

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

@@ -27,6 +27,7 @@ import { HotbarStore } from "../../../common/hotbar-store";
 import { CommandOverlay } from "../command-palette";
 import { HotbarAddCommand } from "./hotbar-add-command";
 import { HotbarRemoveCommand } from "./hotbar-remove-command";
+import { hotbarDisplayLabel } from "./hotbar-display-label";
 
 @observer
 export class HotbarSwitchCommand extends React.Component {
@@ -36,7 +37,7 @@ export class HotbarSwitchCommand extends React.Component {
   @computed get options() {
     const hotbarStore = HotbarStore.getInstance();
     const options = hotbarStore.hotbars.map((hotbar) => {
-      return { value: hotbar.id, label: hotbar.name };
+      return { value: hotbar.id, label: hotbarDisplayLabel(hotbar.id) };
     });
 
     options.push({ value: HotbarSwitchCommand.addActionId, label: "Add hotbar ..." });