Catalog & Hotbar - initial groundwork (#2418)

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

src/renderer/components/cluster-manager/bottom-bar.scss

@@ -6,7 +6,7 @@
   padding: 0 2px;
   height: var(--bottom-bar-height);
 
-  #current-workspace {
+  #catalog-link {
     font-size: var(--font-size-small);
     color: white;
     padding: $padding / 4 $padding / 2;

src/renderer/components/cluster-manager/bottom-bar.tsx

@@ -2,11 +2,10 @@ import "./bottom-bar.scss";
 
 import React from "react";
 import { observer } from "mobx-react";
-import { Icon } from "../icon";
-import { workspaceStore } from "../../../common/workspace-store";
 import { StatusBarRegistration, statusBarRegistry } from "../../../extensions/registries";
-import { CommandOverlay } from "../command-palette/command-container";
-import { ChooseWorkspace } from "../+workspaces";
+import { navigate } from "../../navigation";
+import { catalogURL } from "../+catalog";
+import { Icon } from "../icon";
 
 @observer
 export class BottomBar extends React.Component {
@@ -45,13 +44,11 @@ export class BottomBar extends React.Component {
   }
 
   render() {
-    const { currentWorkspace } = workspaceStore;
-
     return (
       <div className="BottomBar flex gaps">
-        <div id="current-workspace" data-test-id="current-workspace" className="flex gaps align-center" onClick={() => CommandOverlay.open(<ChooseWorkspace />)}>
-          <Icon smallest material="layers"/>
-          <span className="workspace-name" data-test-id="current-workspace-name">{currentWorkspace.name}</span>
+        <div id="catalog-link" data-test-id="catalog-link" className="flex gaps align-center" onClick={() => navigate(catalogURL())}>
+          <Icon smallest material="view_list"/>
+          <span className="workspace-name" data-test-id="current-workspace-name">Catalog</span>
         </div>
         {this.renderRegisteredItems()}
       </div>

src/renderer/components/cluster-manager/cluster-actions.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import uniqueId from "lodash/uniqueId";
 import { clusterSettingsURL } from "../+cluster-settings";
-import { landingURL } from "../+landing-page";
+import { catalogURL } from "../+catalog";
 
 import { clusterStore } from "../../../common/cluster-store";
 import { broadcastMessage, requestMain } from "../../../common/ipc";
@@ -25,7 +25,7 @@ export const ClusterActions = (cluster: Cluster) => ({
   })),
   disconnect: async () => {
     clusterStore.deactivate(cluster.id);
-    navigate(landingURL());
+    navigate(catalogURL());
     await requestMain(clusterDisconnectHandler, cluster.id);
   },
   remove: () => {
@@ -40,7 +40,7 @@ export const ClusterActions = (cluster: Cluster) => ({
       ok: () => {
         clusterStore.deactivate(cluster.id);
         clusterStore.removeById(cluster.id);
-        navigate(landingURL());
+        navigate(catalogURL());
       },
       message: <p>
         Are you sure want to remove cluster <b id={tooltipId}>{cluster.name}</b>?

src/renderer/components/cluster-manager/cluster-manager.scss

@@ -13,7 +13,7 @@
     display: flex;
   }
 
-  .ClustersMenu {
+  .HotbarMenu {
     grid-area: menu;
   }
 
@@ -34,4 +34,4 @@
       flex: 1;
     }
   }
-}
+}

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

@@ -4,19 +4,19 @@ import React from "react";
 import { Redirect, Route, Switch } from "react-router";
 import { comparer, reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
-import { LandingPage, landingRoute, landingURL } from "../+landing-page";
+import { Catalog, catalogRoute, catalogURL } from "../+catalog";
 import { Preferences, preferencesRoute } from "../+preferences";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
-import { clusterViewRoute, clusterViewURL } from "./cluster-view.route";
+import { clusterViewRoute } from "./cluster-view.route";
 import { clusterStore } from "../../../common/cluster-store";
 import { hasLoadedView, initView, lensViews, refreshViews } from "./lens-views";
 import { globalPageRegistry } from "../../../extensions/registries/page-registry";
 import { Extensions, extensionsRoute } from "../+extensions";
 import { getMatchedClusterId } from "../../navigation";
+import { HotbarMenu } from "../hotbar/hotbar-menu";
 
 @observer
 export class ClusterManager extends React.Component {
@@ -44,17 +44,7 @@ export class ClusterManager extends React.Component {
   }
 
   get startUrl() {
-    const { activeClusterId } = clusterStore;
-
-    if (activeClusterId) {
-      return clusterViewURL({
-        params: {
-          clusterId: activeClusterId
-        }
-      });
-    }
-
-    return landingURL();
+    return catalogURL();
   }
 
   render() {
@@ -63,7 +53,7 @@ export class ClusterManager extends React.Component {
         <main>
           <div id="lens-views"/>
           <Switch>
-            <Route component={LandingPage} {...landingRoute} />
+            <Route component={Catalog} {...catalogRoute} />
             <Route component={Preferences} {...preferencesRoute} />
             <Route component={Extensions} {...extensionsRoute} />
             <Route component={AddCluster} {...addClusterRoute} />
@@ -75,7 +65,7 @@ export class ClusterManager extends React.Component {
             <Redirect exact to={this.startUrl}/>
           </Switch>
         </main>
-        <ClustersMenu/>
+        <HotbarMenu/>
         <BottomBar/>
       </div>
     );

src/renderer/components/cluster-manager/cluster-view.tsx

@@ -8,6 +8,8 @@ import { ClusterStatus } from "./cluster-status";
 import { hasLoadedView } from "./lens-views";
 import { Cluster } from "../../../main/cluster";
 import { clusterStore } from "../../../common/cluster-store";
+import { navigate } from "../../navigation";
+import { catalogURL } from "../+catalog";
 
 interface Props extends RouteComponentProps<IClusterViewRouteParams> {
 }
@@ -26,6 +28,9 @@ export class ClusterView extends React.Component<Props> {
     disposeOnUnmount(this, [
       reaction(() => this.clusterId, clusterId => clusterStore.setActive(clusterId), {
         fireImmediately: true,
+      }),
+      reaction(() => this.cluster.online, (online) => {
+        if (!online) navigate(catalogURL());
       })
     ]);
   }

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

@@ -1,67 +0,0 @@
-.ClustersMenu {
-  $spacing: $padding * 2;
-
-  position: relative;
-  text-align: center;
-  background: $clusterMenuBackground;
-  border-right: 1px solid $clusterMenuBorderColor;
-  padding: $spacing 0;
-  min-width: 75px;
-
-  .is-mac &:before {
-    content: "";
-    height: 20px; // extra spacing for mac-os "traffic-light" buttons
-  }
-
-  .clusters {
-    @include hidden-scrollbar;
-    padding: 0 $spacing; // extra spacing for cluster-icon's badge
-    margin-bottom: $margin;
-
-    .ClusterIcon {
-      margin-bottom: $margin * 1.5;
-    }
-
-    &:empty {
-      display: none;
-    }
-  }
-
-  > .WorkspaceMenu {
-    position: relative;
-    margin-bottom: $margin;
-
-    .Icon {
-      margin-bottom: $margin * 1.5;
-      border-radius: $radius;
-      padding: $padding / 3;
-      color: var(--textColorPrimary);
-      background: unset;
-      cursor: pointer;
-
-      &.active {
-        opacity: 1;
-      }
-
-      &:hover {
-        box-shadow: none;
-        color: var(--textColorAccent);
-        background-color: unset;
-      }
-    }
-  }
-
-  > .extensions {
-    &:not(:empty) {
-      padding-top: $spacing;
-    }
-
-    .Icon {
-      --size: 40px;
-    }
-  }
-}
-
-.Menu.WorkspaceMenu {
-  z-index: 2; // Place behind Preferences, Extension pages etc...
-}

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

@@ -1,198 +0,0 @@
-import "./clusters-menu.scss";
-
-import React from "react";
-import { remote } from "electron";
-import type { Cluster } from "../../../main/cluster";
-import { DragDropContext, Draggable, DraggableProvided, Droppable, DroppableProvided, DropResult } from "react-beautiful-dnd";
-import { observer } from "mobx-react";
-import { ClusterId, clusterStore } from "../../../common/cluster-store";
-import { workspaceStore } from "../../../common/workspace-store";
-import { ClusterIcon } from "../cluster-icon";
-import { Icon } from "../icon";
-import { autobind, cssNames, IClassName } from "../../utils";
-import { isActiveRoute, navigate } from "../../navigation";
-import { addClusterURL } from "../+add-cluster";
-import { landingURL } from "../+landing-page";
-import { clusterViewURL } from "./cluster-view.route";
-import { ClusterActions } from "./cluster-actions";
-import { getExtensionPageUrl, globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
-import { commandRegistry } from "../../../extensions/registries/command-registry";
-import { CommandOverlay } from "../command-palette/command-container";
-import { computed, observable } from "mobx";
-import { Select } from "../select";
-import { Menu, MenuItem } from "../menu";
-
-interface Props {
-  className?: IClassName;
-}
-
-@observer
-export class ClustersMenu extends React.Component<Props> {
-  @observable workspaceMenuVisible = false;
-
-  showCluster = (clusterId: ClusterId) => {
-    navigate(clusterViewURL({ params: { clusterId } }));
-  };
-
-  showContextMenu = (cluster: Cluster) => {
-    const { Menu, MenuItem } = remote;
-    const menu = new Menu();
-    const actions = ClusterActions(cluster);
-
-    menu.append(new MenuItem({
-      label: `Settings`,
-      click: actions.showSettings
-    }));
-
-    if (cluster.online) {
-      menu.append(new MenuItem({
-        label: `Disconnect`,
-        click: actions.disconnect
-      }));
-    }
-
-    if (!cluster.isManaged) {
-      menu.append(new MenuItem({
-        label: `Remove`,
-        click: actions.remove
-      }));
-    }
-    menu.popup({
-      window: remote.getCurrentWindow()
-    });
-  };
-
-  @autobind()
-  swapClusterIconOrder(result: DropResult) {
-    if (result.reason === "DROP") {
-      const { currentWorkspaceId } = workspaceStore;
-      const {
-        source: { index: from },
-        destination: { index: to },
-      } = result;
-
-      clusterStore.swapIconOrders(currentWorkspaceId, from, to);
-    }
-  }
-
-  render() {
-    const { className } = this.props;
-    const workspace = workspaceStore.getById(workspaceStore.currentWorkspaceId);
-    const clusters = clusterStore.getByWorkspaceId(workspace.id).filter(cluster => cluster.enabled);
-    const activeClusterId = clusterStore.activeCluster;
-
-    return (
-      <div className={cssNames("ClustersMenu flex column", className)}>
-        <div className="clusters flex column gaps">
-          <DragDropContext onDragEnd={this.swapClusterIconOrder}>
-            <Droppable droppableId="cluster-menu" type="CLUSTER">
-              {({ innerRef, droppableProps, placeholder }: DroppableProvided) => (
-                <div ref={innerRef} {...droppableProps}>
-                  {clusters.map((cluster, index) => {
-                    const isActive = cluster.id === activeClusterId;
-
-                    return (
-                      <Draggable draggableId={cluster.id} index={index} key={cluster.id}>
-                        {({ draggableProps, dragHandleProps, innerRef }: DraggableProvided) => (
-                          <div ref={innerRef} {...draggableProps} {...dragHandleProps}>
-                            <ClusterIcon
-                              key={cluster.id}
-                              showErrors={true}
-                              cluster={cluster}
-                              isActive={isActive}
-                              onClick={() => this.showCluster(cluster.id)}
-                              onContextMenu={() => this.showContextMenu(cluster)}
-                            />
-                          </div>
-                        )}
-                      </Draggable>
-                    );
-                  })}
-                  {placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
-        </div>
-
-        <div className="WorkspaceMenu">
-          <Icon big material="menu" id="workspace-menu-icon" data-test-id="workspace-menu" />
-          <Menu
-            usePortal
-            htmlFor="workspace-menu-icon"
-            className="WorkspaceMenu"
-            isOpen={this.workspaceMenuVisible}
-            open={() => this.workspaceMenuVisible = true}
-            close={() => this.workspaceMenuVisible = false}
-            toggleEvent="click"
-          >
-            <MenuItem onClick={() => navigate(addClusterURL())} data-test-id="add-cluster-menu-item">
-              <Icon small material="add" /> Add Cluster
-            </MenuItem>
-            <MenuItem onClick={() => navigate(landingURL())} data-test-id="workspace-overview-menu-item">
-              <Icon small material="dashboard" /> Workspace Overview
-            </MenuItem>
-          </Menu>
-        </div>
-        <div className="extensions">
-          {globalPageMenuRegistry.getItems().map(({ title, target, components: { Icon } }) => {
-            const registeredPage = globalPageRegistry.getByPageTarget(target);
-
-            if (!registeredPage){
-              return;
-            }
-            const pageUrl = getExtensionPageUrl(target);
-            const isActive = isActiveRoute(registeredPage.url);
-
-            return (
-              <Icon
-                key={pageUrl}
-                tooltip={title}
-                active={isActive}
-                onClick={() => navigate(pageUrl)}
-              />
-            );
-          })}
-        </div>
-      </div>
-    );
-  }
-}
-
-@observer
-export class ChooseCluster extends React.Component {
-  @computed get options() {
-    const clusters = clusterStore.getByWorkspaceId(workspaceStore.currentWorkspaceId).filter(cluster => cluster.enabled);
-    const options = clusters.map((cluster) => {
-      return { value: cluster.id, label: cluster.name };
-    });
-
-    return options;
-  }
-
-  onChange(clusterId: string) {
-    navigate(clusterViewURL({ params: { clusterId } }));
-    CommandOverlay.close();
-  }
-
-  render() {
-    return (
-      <Select
-        onChange={(v) => this.onChange(v.value)}
-        components={{ DropdownIndicator: null, IndicatorSeparator: null }}
-        menuIsOpen={true}
-        options={this.options}
-        autoFocus={true}
-        escapeClearsValue={false}
-        placeholder="Switch to cluster" />
-    );
-  }
-}
-
-
-commandRegistry.add({
-  id: "workspace.chooseCluster",
-  title: "Workspace: Switch to cluster ...",
-  scope: "global",
-  action: () => CommandOverlay.open(<ChooseCluster />)
-});