add drag and drop capabilities for the order of cluster icons on the side bar (#623)

* add drag and drop capabilities for the order of cluster icons on the side bar

* add type annotations for better clarity

* fix clusters staying in previously icon reordered workspaces

* add some tests to cluster-store

Signed-off-by: Sebastian Malton <smalton@mirantis.com>

Co-authored-by: Sebastian Malton <smalton@mirantis.com>

src/common/cluster-store.ts

@@ -1,4 +1,4 @@
-import type { WorkspaceId } from "./workspace-store";
+import { WorkspaceId, workspaceStore } from "./workspace-store";
 import path from "path";
 import { app, ipcRenderer, remote } from "electron";
 import { unlink } from "fs-extra";
@@ -11,6 +11,9 @@ import { tracker } from "./tracker";
 import { dumpConfigYaml } from "./kube-helpers";
 import { saveToAppFiles } from "./utils/saveToAppFiles";
 import { KubeConfig } from "@kubernetes/client-node";
+import _ from "lodash";
+import move from "array-move";
+import { is } from "immer/dist/internal";
 
 export interface ClusterIconUpload {
   clusterId: string;
@@ -48,6 +51,7 @@ export interface ClusterPreferences {
   prometheusProvider?: {
     type: string;
   };
+  iconOrder?: number;
   icon?: string;
   httpsProxy?: string;
 }
@@ -101,6 +105,20 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     this.activeClusterId = id;
   }
 
+  @action
+  swapIconOrders(workspace: WorkspaceId, from: number, to: number) {
+    const clusters = this.getByWorkspaceId(workspace);
+    if (from < 0 || to < 0 || from >= clusters.length || to >= clusters.length || isNaN(from) || isNaN(to)) {
+      throw new Error(`invalid from<->to arguments`)
+    }
+
+    move.mutate(clusters, from, to);
+    for (const i in clusters) {
+      // This resets the iconOrder to the current display order
+      clusters[i].preferences.iconOrder = +i;
+    }
+  }
+
   hasClusters() {
     return this.clusters.size > 0;
   }
@@ -114,7 +132,9 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   }
 
   getByWorkspaceId(workspaceId: string): Cluster[] {
-    return this.clustersList.filter(cluster => cluster.workspace === workspaceId)
+    const clusters = Array.from(this.clusters.values())
+      .filter(cluster => cluster.workspace === workspaceId);
+    return _.sortBy(clusters, cluster => cluster.preferences.iconOrder)
   }
 
   @action
@@ -156,7 +176,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     const removedClusters = new Map<ClusterId, Cluster>();
 
     // update new clusters
-    clusters.forEach(clusterModel => {
+    for (const clusterModel of clusters) {
       let cluster = currentClusters.get(clusterModel.id);
       if (cluster) {
         cluster.updateModel(clusterModel);
@@ -164,7 +184,7 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
         cluster = new Cluster(clusterModel);
       }
       newClusters.set(clusterModel.id, cluster);
-    });
+    }
 
     // update removed clusters
     currentClusters.forEach(cluster => {

src/common/cluster-store_test.ts

@@ -93,6 +93,34 @@ describe("empty config", () => {
     expect(fs.readFileSync(file, "utf8")).toBe("kubeconfig");
   })
 
+  it("check if reorderring works for same from and to", () => {
+    clusterStore.swapIconOrders("workstation", 1, 1)
+
+    const clusters = clusterStore.getByWorkspaceId("workstation");
+    expect(clusters[0].id).toBe("prod")
+    expect(clusters[0].preferences.iconOrder).toBe(0)
+    expect(clusters[1].id).toBe("dev")
+    expect(clusters[1].preferences.iconOrder).toBe(1)
+  });
+
+  it("check if reorderring works for different from and to", () => {
+    clusterStore.swapIconOrders("workstation", 0, 1)
+
+    const clusters = clusterStore.getByWorkspaceId("workstation");
+    expect(clusters[0].id).toBe("dev")
+    expect(clusters[0].preferences.iconOrder).toBe(0)
+    expect(clusters[1].id).toBe("prod")
+    expect(clusters[1].preferences.iconOrder).toBe(1)
+  });
+
+  it("check if after icon reordering, changing workspaces still works", () => {
+    clusterStore.swapIconOrders("workstation", 1, 1)
+    clusterStore.getById("prod").workspace = "default"
+
+    expect(clusterStore.getByWorkspaceId("workstation").length).toBe(1);
+    expect(clusterStore.getByWorkspaceId("default").length).toBe(2);
+  });
+
   it("removes cluster from store", async () => {
     await clusterStore.removeById("foo");
     expect(clusterStore.getById("foo")).toBeUndefined();