workspaces: extract bottom-bar to separated component

Signed-off-by: Roman <ixrock@gmail.com>

src/common/cluster-store.ts

@@ -1,4 +1,4 @@
-import { action, observable, toJS } from "mobx";
+import { action, computed, observable, toJS } from "mobx";
 import { v4 as uuid } from "uuid"
 import { BaseStore } from "./base-store";
 import { Cluster } from "../main/cluster";
@@ -38,10 +38,6 @@ export interface ClusterPreferences {
 }
 
 export class ClusterStore extends BaseStore<ClusterStoreModel> {
-  @observable activeCluster: ClusterId;
-  @observable clusters = observable.map<ClusterId, Cluster>();
-  @observable removedClusters = observable.map<ClusterId, Cluster>();
-
   private constructor() {
     super({
       configName: "lens-cluster-store",
@@ -52,14 +48,20 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
     });
   }
 
+  @observable activeCluster: ClusterId;
+  @observable removedClusters = observable.map<ClusterId, Cluster>();
+  @observable clusters = observable.map<ClusterId, Cluster>();
+
+  @computed get clustersList() {
+    return Array.from(this.clusters.values());
+  }
+
   getById(id: ClusterId): Cluster {
     return this.clusters.get(id);
   }
 
   getByWorkspaceId(workspaceId: string): Cluster[] {
-    return Array.from(this.clusters.values()).filter(cluster => {
-      return cluster.workspace === workspaceId;
-    })
+    return this.clustersList.filter(cluster => cluster.workspace === workspaceId)
   }
 
   @action
@@ -116,10 +118,9 @@ export class ClusterStore extends BaseStore<ClusterStoreModel> {
   }
 
   toJSON(): ClusterStoreModel {
-    const clusters = Array.from(this.clusters).map(([id, cluster]) => cluster.toJSON());
     return toJS({
       activeCluster: this.activeCluster,
-      clusters: clusters,
+      clusters: this.clustersList.map(cluster => cluster.toJSON()),
     }, {
       recurseEverything: true
     })

src/common/user-store.ts

@@ -20,16 +20,7 @@ export interface UserPreferences {
 }
 
 export class UserStore extends BaseStore<UserStoreModel> {
-  @observable lastSeenAppVersion = "0.0.0"
-  @observable seenContexts = observable.set();
-
-  @observable preferences: UserPreferences = {
-    allowTelemetry: true,
-    colorTheme: "dark",
-    downloadMirror: "default",
-  };
-
-  protected constructor() {
+  private constructor() {
     super({
       configName: "lens-user-store",
       confOptions: {
@@ -43,6 +34,14 @@ export class UserStore extends BaseStore<UserStoreModel> {
     });
   }
 
+  @observable lastSeenAppVersion = "0.0.0"
+  @observable seenContexts = observable.set();
+  @observable preferences: UserPreferences = {
+    allowTelemetry: true,
+    colorTheme: "dark",
+    downloadMirror: "default",
+  };
+
   get hasNewAppVersion() {
     return semver.gt(getAppVersion(), this.lastSeenAppVersion);
   }

src/common/workspace-store.ts

@@ -1,4 +1,4 @@
-import { action, observable } from "mobx";
+import { action, computed, observable, toJS } from "mobx";
 import { BaseStore } from "./base-store";
 import { clusterStore } from "./cluster-store"
 
@@ -18,6 +18,12 @@ export interface Workspace {
 export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
   static readonly defaultId: WorkspaceId = "default"
 
+  private constructor() {
+    super({
+      configName: "lens-workspace-store",
+    });
+  }
+
   @observable currentWorkspace = WorkspaceStore.defaultId;
 
   @observable workspaces = observable.map<WorkspaceId, Workspace>({
@@ -27,10 +33,8 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
     }
   });
 
-  private constructor() {
-    super({
-      configName: "lens-workspace-store",
-    });
+  @computed get workspacesList() {
+    return Array.from(this.workspaces.values());
   }
 
   getById(id: WorkspaceId): Workspace {
@@ -82,11 +86,12 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
   }
 
   toJSON(): WorkspaceStoreModel {
-    const { currentWorkspace, workspaces } = this;
-    return {
-      currentWorkspace: currentWorkspace,
-      workspaces: Array.from(workspaces.values()),
-    }
+    return toJS({
+      currentWorkspace: this.currentWorkspace,
+      workspaces: this.workspacesList,
+    }, {
+      recurseEverything: true
+    })
   }
 }