Hotbar disabled items (#2710)

* Saving more entity data to HotbarItem

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Adding generic MaterialTooltip component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Move HotbarCell to separate component

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Abstract out HotbarEntityIcon from HotbarIcon

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Styling disabled hotbar items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Migration for adding extra data to hotbar items

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Testing migration

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Some cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Bump migration version

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Bump app version in package.json

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

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

@@ -24,6 +24,27 @@ import { CatalogEntityItem } from "../../renderer/components/+catalog/catalog-en
 import { ClusterStore } from "../cluster-store";
 import { HotbarStore } from "../hotbar-store";
 
+jest.mock("../../renderer/api/catalog-entity-registry", () => ({
+  catalogEntityRegistry: {
+    items: [
+      {
+        metadata: {
+          uid: "1dfa26e2ebab15780a3547e9c7fa785c",
+          name: "mycluster",
+          source: "local"
+        }
+      },
+      {
+        metadata: {
+          uid: "55b42c3c7ba3b04193416cda405269a5",
+          name: "my_shiny_cluster",
+          source: "remote"
+        }
+      }
+    ]
+  }
+}));
+
 const testCluster = {
   uid: "test",
   name: "test",
@@ -87,6 +108,17 @@ const awsCluster = {
   }
 };
 
+jest.mock("electron", () => {
+  return {
+    app: {
+      getVersion: () => "99.99.99",
+      getPath: () => "tmp",
+      getLocale: () => "en",
+      setLoginItemSettings: (): void => void 0,
+    }
+  };
+});
+
 describe("HotbarStore", () => {
   beforeEach(() => {
     ClusterStore.resetInstance();
@@ -264,4 +296,111 @@ describe("HotbarStore", () => {
       console.error = err;
     });
   });
+
+  describe("pre beta-5 migrations", () => {
+    beforeEach(() => {
+      HotbarStore.resetInstance();
+      const mockOpts = {
+        "tmp": {
+          "lens-hotbar-store.json": JSON.stringify({
+            __internal__: {
+              migrations: {
+                version: "5.0.0-beta.3"
+              }
+            },
+            "hotbars": [
+              {
+                "id": "3caac17f-aec2-4723-9694-ad204465d935",
+                "name": "myhotbar",
+                "items": [
+                  {
+                    "entity": {
+                      "uid": "1dfa26e2ebab15780a3547e9c7fa785c"
+                    }
+                  },
+                  {
+                    "entity": {
+                      "uid": "55b42c3c7ba3b04193416cda405269a5"
+                    }
+                  },
+                  {
+                    "entity": {
+                      "uid": "176fd331968660832f62283219d7eb6e"
+                    }
+                  },
+                  {
+                    "entity": {
+                      "uid": "61c4fb45528840ebad1badc25da41d14",
+                      "name": "user1-context",
+                      "source": "local"
+                    }
+                  },
+                  {
+                    "entity": {
+                      "uid": "27d6f99fe9e7548a6e306760bfe19969",
+                      "name": "foo2",
+                      "source": "local"
+                    }
+                  },
+                  null,
+                  {
+                    "entity": {
+                      "uid": "c0b20040646849bb4dcf773e43a0bf27",
+                      "name": "multinode-demo",
+                      "source": "local"
+                    }
+                  },
+                  null,
+                  null,
+                  null,
+                  null,
+                  null
+                ]
+              }
+            ],
+          })
+        }
+      };
+
+      mockFs(mockOpts);
+
+      return HotbarStore.createInstance().load();
+    });
+
+    afterEach(() => {
+      mockFs.restore();
+    });
+
+    it("allows to retrieve a hotbar", () => {
+      const hotbar = HotbarStore.getInstance().getById("3caac17f-aec2-4723-9694-ad204465d935");
+
+      expect(hotbar.id).toBe("3caac17f-aec2-4723-9694-ad204465d935");
+    });
+
+    it("clears cells without entity", () => {
+      const items = HotbarStore.getInstance().hotbars[0].items;
+
+      expect(items[2]).toBeNull();
+    });
+
+    it("adds extra data to cells with according entity", () => {
+      const items = HotbarStore.getInstance().hotbars[0].items;
+
+      expect(items[0]).toEqual({
+        entity: {
+          name: "mycluster",
+          source: "local",
+          uid: "1dfa26e2ebab15780a3547e9c7fa785c"
+        }
+      });
+
+      expect(items[1]).toEqual({
+        entity: {
+          name: "my_shiny_cluster",
+          source: "remote",
+          uid: "55b42c3c7ba3b04193416cda405269a5"
+        }
+      });
+    });
+  });
 });

src/common/hotbar-store.ts

@@ -29,6 +29,8 @@ import isNull from "lodash/isNull";
 export interface HotbarItem {
   entity: {
     uid: string;
+    name?: string;
+    source?: string;
   };
   params?: {
     [key: string]: string;
@@ -144,9 +146,14 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }
   }
 
+  @action
   addToHotbar(item: CatalogEntityItem, cellIndex = -1) {
     const hotbar = this.getActive();
-    const newItem = { entity: { uid: item.id }};
+    const newItem = { entity: {
+      uid: item.id,
+      name: item.name,
+      source: item.source
+    }};
 
     if (hotbar.items.find(i => i?.entity.uid === item.id)) {
       return;
@@ -167,6 +174,7 @@ export class HotbarStore extends BaseStore<HotbarStoreModel> {
     }
   }
 
+  @action
   removeFromHotbar(uid: string) {
     const hotbar = this.getActive();
     const index = hotbar.items.findIndex((i) => i?.entity.uid === uid);