Improve how extensions can manage cluster/workspace stores (#1176)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/components/+add-cluster/add-cluster.tsx

@@ -163,7 +163,7 @@ export class AddCluster extends React.Component {
       })
 
       runInAction(() => {
-        clusterStore.addCluster(...newClusters);
+        clusterStore.addClusters(...newClusters);
         if (newClusters.length === 1) {
           const clusterId = newClusters[0].id;
           clusterStore.setActive(clusterId);

src/renderer/components/+cluster-settings/components/cluster-workspace-setting.tsx

@@ -26,11 +26,11 @@ export class ClusterWorkspaceSetting extends React.Component<Props> {
         <Select
           value={this.props.cluster.workspace}
           onChange={({value}) => this.props.cluster.workspace = value}
-          options={workspaceStore.workspacesList.map(w =>
+          options={workspaceStore.enabledWorkspacesList.map(w =>
             ({value: w.id, label: w.name})
           )}
         />
       </>
     );
   }
-}
+}

src/renderer/components/+cluster-settings/components/remove-cluster-button.tsx

@@ -22,16 +22,17 @@ export class RemoveClusterButton extends React.Component<Props> {
       labelOk: <Trans>Yes</Trans>,
       labelCancel: <Trans>No</Trans>,
       ok: async () => {
-        await clusterStore.removeById(cluster.id); 
+        await clusterStore.removeById(cluster.id);
       }
     })
   }
 
   render() {
+    const { cluster } = this.props;
     return (
-      <Button accent onClick={this.confirmRemoveCluster} className="button-area">
+      <Button accent onClick={this.confirmRemoveCluster} className="button-area" disabled={cluster.isManaged}>
         Remove Cluster
       </Button>
     );
   }
-}
+}

src/renderer/components/+workspaces/workspace-menu.tsx

@@ -19,7 +19,7 @@ export class WorkspaceMenu extends React.Component<Props> {
 
   render() {
     const { className, ...menuProps } = this.props;
-    const { workspacesList, currentWorkspace } = workspaceStore;
+    const { enabledWorkspacesList, currentWorkspace } = workspaceStore;
     return (
       <Menu
         {...menuProps}
@@ -32,7 +32,7 @@ export class WorkspaceMenu extends React.Component<Props> {
         <Link className="workspaces-title" to={workspacesURL()}>
           <Trans>Workspaces</Trans>
         </Link>
-        {workspacesList.map(({ id: workspaceId, name, description }) => {
+        {enabledWorkspacesList.map(({ id: workspaceId, name, description }) => {
           return (
             <MenuItem
               key={workspaceId}

src/renderer/components/+workspaces/workspaces.tsx

@@ -19,8 +19,12 @@ export class Workspaces extends React.Component {
   @observable editingWorkspaces = observable.map<WorkspaceId, Workspace>();
 
   @computed get workspaces(): Workspace[] {
+    const currentWorkspaces: Map<WorkspaceId, Workspace> = new Map()
+    workspaceStore.enabledWorkspacesList.forEach((w) => {
+      currentWorkspaces.set(w.id, w)
+    })
     const allWorkspaces = new Map([
-      ...workspaceStore.workspaces,
+      ...currentWorkspaces,
       ...this.editingWorkspaces,
     ]);
     return Array.from(allWorkspaces.values());
@@ -42,7 +46,7 @@ export class Workspaces extends React.Component {
 
   saveWorkspace = (id: WorkspaceId) => {
     const draft = toJS(this.editingWorkspaces.get(id));
-    const workspace = workspaceStore.saveWorkspace(draft);
+    const workspace = workspaceStore.addWorkspace(draft);
     if (workspace) {
       this.clearEditing(id);
     }
@@ -50,11 +54,11 @@ export class Workspaces extends React.Component {
 
   addWorkspace = () => {
     const workspaceId = uuid();
-    this.editingWorkspaces.set(workspaceId, {
+    this.editingWorkspaces.set(workspaceId, new Workspace({
       id: workspaceId,
       name: "",
-      description: "",
-    })
+      description: ""
+    }))
   }
 
   editWorkspace = (id: WorkspaceId) => {
@@ -76,7 +80,7 @@ export class Workspaces extends React.Component {
       },
       ok: () => {
         this.clearEditing(id);
-        workspaceStore.removeWorkspace(id);
+        workspaceStore.removeWorkspace(workspace);
       },
       message: (
         <div className="confirm flex column gaps">
@@ -107,11 +111,12 @@ export class Workspaces extends React.Component {
           <Trans>Workspaces</Trans>
         </h2>
         <div className="items flex column gaps">
-          {this.workspaces.map(({ id: workspaceId, name, description }) => {
+          {this.workspaces.map(({ id: workspaceId, name, description, ownerRef }) => {
             const isActive = workspaceStore.currentWorkspaceId === workspaceId;
             const isDefault = workspaceStore.isDefault(workspaceId);
             const isEditing = this.editingWorkspaces.has(workspaceId);
             const editingWorkspace = this.editingWorkspaces.get(workspaceId);
+            const managed = !!ownerRef
             const className = cssNames("workspace flex gaps", {
               active: isActive,
               editing: isEditing,
@@ -130,7 +135,7 @@ export class Workspaces extends React.Component {
                       {isActive && <span> <Trans>(current)</Trans></span>}
                     </span>
                     <span className="description">{description}</span>
-                    {!isDefault && (
+                    {!isDefault && !managed && (
                       <Fragment>
                         <Icon
                           material="edit"

src/renderer/components/cluster-manager/clusters-menu.tsx

@@ -101,9 +101,11 @@ export class ClustersMenu extends React.Component<Props> {
   }
 
   render() {
-    const { className } = this.props;
-    const { newContexts } = userStore;
-    const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId);
+    const { className } = this.props
+    const { newContexts } = userStore
+    const workspace = workspaceStore.getById(workspaceStore.currentWorkspaceId)
+    const clusters = clusterStore.getByWorkspaceId(workspace.id)
+    const activeClusterId = clusterStore.activeCluster
     return (
       <div className={cssNames("ClustersMenu flex column", className)}>
         <div className="clusters flex column gaps">
@@ -112,7 +114,7 @@ export class ClustersMenu extends React.Component<Props> {
               {({ innerRef, droppableProps, placeholder }: DroppableProvided) => (
                 <div ref={innerRef} {...droppableProps}>
                   {clusters.map((cluster, index) => {
-                    const isActive = cluster.id === clusterStore.activeClusterId;
+                    const isActive = cluster.id === activeClusterId;
                     return (
                       <Draggable draggableId={cluster.id} index={index} key={cluster.id}>
                         {({ draggableProps, dragHandleProps, innerRef }: DraggableProvided) => (
@@ -136,11 +138,11 @@ export class ClustersMenu extends React.Component<Props> {
             </Droppable>
           </DragDropContext>
         </div>
-        <div className="add-cluster" onClick={this.addCluster}>
+        <div className="add-cluster" >
           <Tooltip targetId="add-cluster-icon">
             <Trans>Add Cluster</Trans>
           </Tooltip>
-          <Icon big material="add" id="add-cluster-icon"/>
+          <Icon big material="add" id="add-cluster-icon" disabled={workspace.isManaged} onClick={this.addCluster}/>
           {newContexts.size > 0 && (
             <Badge className="counter" label={newContexts.size} tooltip={<Trans>new</Trans>}/>
           )}