workspaces: extract bottom-bar to separated component

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

src/renderer/components/+workspaces/bottom-bar.scss

@@ -0,0 +1,10 @@
+.WorkspacesBottomBar {
+  font-size: $font-size-small;
+  background-color: #3d90ce;
+  padding: $padding / 2 $padding;
+  color: white;
+
+  #workspace {
+    cursor: pointer;
+  }
+}

src/renderer/components/+workspaces/bottom-bar.tsx

@@ -0,0 +1,52 @@
+import "./bottom-bar.scss"
+
+import React from "react";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { Link } from "react-router-dom";
+import { Trans } from "@lingui/macro";
+import { Icon } from "../icon";
+import { Menu, MenuItem } from "../menu";
+import { prevDefault } from "../../utils";
+import { workspaceStore } from "../../../common/workspace-store";
+
+// todo: remove dummy actions + console.log
+
+@observer
+export class WorkspacesBottomBar extends React.Component {
+  @observable menuVisible = false;
+
+  render() {
+    const { currentWorkspace, workspacesList } = workspaceStore;
+    return (
+      <div className="WorkspacesBottomBar flex gaps">
+        <div id="workspace" className="workspace flex align-center box right">
+          <Icon small material="layers"/> {currentWorkspace}
+        </div>
+        <Menu
+          usePortal
+          htmlFor="workspace"
+          className="WorkspacesMenu"
+          isOpen={this.menuVisible}
+          open={() => this.menuVisible = true}
+          close={() => this.menuVisible = false}
+        >
+          <Link
+            to="/workspaces"
+            className="workspaces-title"
+            onClick={prevDefault(() => console.log('/navigate: workspaces page'))}>
+            <Trans>Workspaces</Trans>
+          </Link>
+          {workspacesList.map(workspace => {
+            const { id, name, description } = workspace;
+            return (
+              <MenuItem key={id} onClick={() => console.log(`navigate: /workspaces/${id}`)} title={description}>
+                <Icon small material="layers"/> {name}
+              </MenuItem>
+            )
+          })}
+        </Menu>
+      </div>
+    )
+  }
+}

src/renderer/components/+workspaces/workspaces.scss

@@ -5,29 +5,21 @@
   grid-template-columns: min-content 1fr;
   height: 100%;
 
-  > .draggable-top {
+  .draggable-top {
     @include set-draggable;
     grid-area: draggable;
   }
 
-  > .ClusterMenu {
-    grid-area: menu;
-  }
-
-  > .lens-container {
+  #lens-view {
     grid-area: lens-view;
   }
 
-  > .bottom-bar {
-    grid-area: bottom-bar;
-    font-size: $font-size-small;
-    background-color: #3d90ce;
-    padding: $padding / 2 $padding;
-    color: white;
+  .ClusterMenu {
+    grid-area: menu;
+  }
 
-    #workspace {
-      cursor: pointer;
-    }
+  .WorkspacesBottomBar {
+    grid-area: bottom-bar;
   }
 }
 

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

@@ -1,61 +1,18 @@
 import "./workspaces.scss"
 import React from "react";
-import { observable } from "mobx";
-import { observer } from "mobx-react";
-import { Link } from "react-router-dom";
-import { Trans } from "@lingui/macro";
-import { workspaceStore } from "../../../common/workspace-store";
-import { Icon } from "../icon";
 import { ClustersMenu } from "./clusters-menu";
-import { Menu, MenuItem } from "../menu";
-import { prevDefault } from "../../utils";
+import { WorkspacesBottomBar } from "./bottom-bar";
 
 // todo: support `workspaceId` in URL
 
-@observer
 export class Workspaces extends React.Component {
-  @observable menuVisible = false;
-
   render() {
-    const { currentWorkspace, workspaces } = workspaceStore;
     return (
       <div className="Workspaces">
         <div className="draggable-top"/>
-
+        <div id="lens-view"/>
         <ClustersMenu/>
-
-        <div className="lens-container">
-          {/*todo: replace with BrowserView */}
-        </div>
-
-        <div className="bottom-bar flex justify-flex-end">
-          <div id="workspace" className="workspace flex align-center">
-            <Icon small material="layers"/> {currentWorkspace}
-          </div>
-          <Menu
-            usePortal
-            htmlFor="workspace"
-            className="WorkspacesMenu"
-            isOpen={this.menuVisible}
-            open={() => this.menuVisible = true}
-            close={() => this.menuVisible = false}
-          >
-            <Link
-              to="/workspaces"
-              className="workspaces-title"
-              onClick={prevDefault(() => console.log('/navigate: workspaces page'))}>
-              <Trans>Workspaces</Trans>
-            </Link>
-            {Array.from(workspaces.values()).map(workspace => {
-              const { id, name, description } = workspace;
-              return (
-                <MenuItem key={id} onClick={() => console.log(`navigate: /workspaces/${id}`)} title={description}>
-                  <Icon small material="layers"/> {name}
-                </MenuItem>
-              )
-            })}
-          </Menu>
-        </div>
+        <WorkspacesBottomBar/>
       </div>
     )
   }