Initial command palette feature (#1957)

* wip: command palette Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * register shortcut to global menu Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * introduce openCommandDialog & closeCommandDialog Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix ipc broadcast to frames from renderer Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * tweak Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * add more commands Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * ipc fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * add integration tests Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * ipc fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * implement workspace edit Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * workspace edit fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * make tests green Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fixes from code review Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup ipc Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup CommandRegistry Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * ipc fix Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fix ClusterManager cluster auto-init Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * ensure cluster view is active before sending a command Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * switch to last active cluster when workspace change Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * tweak integration tests Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * run integration tests serially Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * fixes based on code review Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup more Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * add workspace fixes Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> * cleanup Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-02-02 12:34:13 +02:00
1 parent 9e1487685c
commit b5e7be7591
@@ -3,9 +3,10 @@ import "./bottom-bar.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { Icon } from "../icon";
-import { WorkspaceMenu } from "../+workspaces/workspace-menu";
 import { workspaceStore } from "../../../common/workspace-store";
 import { statusBarRegistry } from "../../../extensions/registries";
+import { CommandOverlay } from "../command-palette/command-container";
+import { ChooseWorkspace } from "../+workspaces";

@observer
 export class BottomBar extends React.Component {
@@ -16,13 +17,10 @@ export class BottomBar extends React.Component {

    return (
      <div className="BottomBar flex gaps">
-        <div id="current-workspace" className="flex gaps align-center">
+        <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">{currentWorkspace.name}</span>
+          <span className="workspace-name" data-test-id="current-workspace-name">{currentWorkspace.name}</span>
        </div>
-        <WorkspaceMenu
-          htmlFor="current-workspace"
-        />
        <div className="extensions box grow flex gaps justify-flex-end">
          {Array.isArray(items) && items.map(({ item }, index) => {
            if (!item) return;
@@ -8,7 +8,6 @@ import { ClustersMenu } from "./clusters-menu";
 import { BottomBar } from "./bottom-bar";
 import { LandingPage, landingRoute, landingURL } from "../+landing-page";
 import { Preferences, preferencesRoute } from "../+preferences";
-import { Workspaces, workspacesRoute } from "../+workspaces";
 import { AddCluster, addClusterRoute } from "../+add-cluster";
 import { ClusterView } from "./cluster-view";
 import { ClusterSettings, clusterSettingsRoute } from "../+cluster-settings";
@@ -67,7 +66,6 @@ export class ClusterManager extends React.Component {
            <Route component={LandingPage} {...landingRoute} />
            <Route component={Preferences} {...preferencesRoute} />
            <Route component={Extensions} {...extensionsRoute} />
-            <Route component={Workspaces} {...workspacesRoute} />
            <Route component={AddCluster} {...addClusterRoute} />
            <Route component={ClusterView} {...clusterViewRoute} />
            <Route component={ClusterSettings} {...clusterSettingsRoute} />
@@ -22,6 +22,10 @@ import { ConfirmDialog } from "../confirm-dialog";
 import { clusterViewURL } from "./cluster-view.route";
 import { getExtensionPageUrl, globalPageMenuRegistry, globalPageRegistry } from "../../../extensions/registries";
 import { clusterDisconnectHandler } from "../../../common/cluster-ipc";
+import { commandRegistry } from "../../../extensions/registries/command-registry";
+import { CommandOverlay } from "../command-palette/command-container";
+import { computed } from "mobx";
+import { Select } from "../select";

 interface Props {
  className?: IClassName;
@@ -178,3 +182,41 @@ export class ClustersMenu extends React.Component<Props> {
    );
  }
 }
+
+@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 />)
+});