Fix managed Workspaces and overview

- Workspaces that are managed can now be enabled without the store
  removing that flag unconditionally via a roundtrip to the FS

- Workspace overview should be reactive to the current workspace

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/common/workspace-store.ts

@@ -114,7 +114,7 @@ export class Workspace implements WorkspaceModel, WorkspaceState {
   /**
    * Push state
    *
-   * @interal
+   * @internal
    * @param state workspace state
    */
   pushState(state = this.getState()) {
@@ -130,6 +130,10 @@ export class Workspace implements WorkspaceModel, WorkspaceState {
     Object.assign(this, state);
   }
 
+  @action updateModel(model: WorkspaceModel) {
+    Object.assign(this, model);
+  }
+
   toJSON(): WorkspaceModel {
     return toJS({
       id: this.id,
@@ -247,9 +251,10 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
 
   @action
   addWorkspace(workspace: Workspace) {
+    workspace.name = workspace.name.trim();
     const { id, name } = workspace;
 
-    if (!name.trim() || this.getByName(name.trim())) {
+    if (!name || this.getByName(name)) {
       return;
     }
     this.workspaces.set(id, workspace);
@@ -303,16 +308,14 @@ export class WorkspaceStore extends BaseStore<WorkspaceStoreModel> {
       this.currentWorkspaceId = currentWorkspace;
     }
 
-    if (workspaces.length) {
+    for (const workspaceModel of workspaces) {
-      this.workspaces.clear();
+      const oldWorkspace = this.workspaces.get(workspaceModel.id);
-      workspaces.forEach(ws => {
-        const workspace = new Workspace(ws);
 
-        if (!workspace.isManaged) {
+      if (oldWorkspace) {
-          workspace.enabled = true;
+        oldWorkspace.updateModel(workspaceModel);
-        }
+      } else {
-        this.workspaces.set(workspace.id, workspace);
+        this.workspaces.set(workspaceModel.id, new Workspace(workspaceModel));
-      });
+      }
     }
   }
 

src/renderer/components/+landing-page/workspace-overview.tsx

@@ -1,8 +1,7 @@
 import "./workspace-overview.scss";
 
 import React, { Component } from "react";
-import { Workspace } from "../../../common/workspace-store";
+import { disposeOnUnmount, observer } from "mobx-react";
-import { observer } from "mobx-react";
 import { ItemListLayout } from "../item-object-list/item-list-layout";
 import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store";
 import { navigate } from "../../navigation";
@@ -10,9 +9,8 @@ import { clusterViewURL } from "../cluster-manager/cluster-view.route";
 import { WorkspaceClusterMenu } from "./workspace-cluster-menu";
 import { kebabCase } from "lodash";
 import { addClusterURL } from "../+add-cluster";
-interface Props {
+import { observable, reaction } from "mobx";
-  workspace: Workspace;
+import { workspaceStore } from "../../../common/workspace-store";
-}
 
 enum sortBy {
     name = "name",
@@ -22,20 +20,30 @@ enum sortBy {
 }
 
 @observer
-export class WorkspaceOverview extends Component<Props> {
+export class WorkspaceOverview extends Component {
-  private workspaceClusterStore = new WorkspaceClusterStore(this.props.workspace.id);
+  @observable private workspaceClusterStore?: WorkspaceClusterStore;
 
   componentDidMount() {
-    this.workspaceClusterStore.loadAll();
+    disposeOnUnmount(this, [
+      reaction(() => workspaceStore.currentWorkspaceId, workspaceId => {
+        this.workspaceClusterStore = new WorkspaceClusterStore(workspaceId);
+        this.workspaceClusterStore.loadAll().catch(error => console.log("workspaceClusterStore.loadAll", error));
+      }, {
+        fireImmediately: true,
+      })
+    ]);
   }
 
-
   showCluster = ({ clusterId }: ClusterItem) => {
     navigate(clusterViewURL({ params: { clusterId } }));
   };
 
   render() {
-    const { workspace } = this.props;
+    const { workspaceClusterStore } = this;
+
+    if (!workspaceClusterStore) {
+      return null;
+    }
 
     return (
       <ItemListLayout
@@ -44,7 +52,7 @@ export class WorkspaceOverview extends Component<Props> {
         isSearchable={false}
         isSelectable={false}
         className="WorkspaceOverview"
-        store={this.workspaceClusterStore}
+        store={workspaceClusterStore}
         sortingCallbacks={{
           [sortBy.name]: (item: ClusterItem) => item.name,
           [sortBy.distribution]: (item: ClusterItem) => item.distribution,
@@ -69,7 +77,7 @@ export class WorkspaceOverview extends Component<Props> {
           onAdd: () => navigate(addClusterURL()),
         }}
         renderItemMenu={(clusterItem: ClusterItem) => (
-          <WorkspaceClusterMenu clusterItem={clusterItem} workspace={workspace} workspaceClusterStore={this.workspaceClusterStore}/>
+          <WorkspaceClusterMenu clusterItem={clusterItem} workspace={workspaceStore.currentWorkspace} workspaceClusterStore={workspaceClusterStore}/>
         )}
       />
     );