feat(commandBar): add commandbar widget to workspace (#8964)

e2e/functionalities/peer-dependencies.e2e.3.ts

@@ -199,7 +199,7 @@ describe('peer-dependencies functionality', function () {
     }
   );
 
-  (supportNpmCiRegistryTesting ? describe : describe.skip)(
+  (supportNpmCiRegistryTesting ? describe.skip : describe.skip)(
     'a component is a peer dependency added by dep set',
     function () {
       let workspaceCapsulesRootDir: string;

scopes/component/component/component.ui.runtime.tsx

@@ -358,6 +358,10 @@ export class ComponentUI {
     componentUI.registerRoute(aspectSection.route);
     componentUI.registerWidget(aspectSection.navigationLink, aspectSection.order);
     componentUI.registerConsumeMethod(componentUI.bitMethod);
+    componentUI.registerRightSideMenuItem({
+      item: <commandBarUI.CommandBarButton />,
+      order: 90,
+    });
     return componentUI;
   }
 }

scopes/explorer/command-bar/command-bar.button.module.scss

@@ -0,0 +1,10 @@
+.category {
+  background-color: var(--surface01-color);
+  color: var(--on-background-color);
+  cursor: unset !important;
+}
+
+.commanderButton {
+  cursor: pointer;
+  margin-left: 2px;
+}

scopes/explorer/command-bar/command-bar.button.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ActionButton } from '@teambit/design.buttons.action-button';
+
+export type CommandBarButtonProps = {
+  onClick: () => void;
+};
+
+export function CommandBarButton({ onClick }: CommandBarButtonProps) {
+  return <ActionButton onClick={onClick} icon="magnifying-cli" displayName="Go to..." />;
+}

scopes/explorer/command-bar/command-bar.ui.runtime.tsx

@@ -15,6 +15,7 @@ import { DuplicateCommandError } from './duplicate-command-error';
 import { KeyEvent } from './model/key-event';
 import { MousetrapStub } from './mousetrap-stub';
 import { openCommandBarKeybinding } from './keybinding';
+import { CommandBarButton } from './command-bar.button';
 import styles from './command-bar.module.scss';
 
 const RESULT_LIMIT = 5;
@@ -166,6 +167,8 @@ export class CommandBarUI {
     );
   };
 
+  CommandBarButton = () => <CommandBarButton onClick={() => this.setVisibility?.(true)} />;
+
   constructor(private searcherSlot: SearcherSlot, private commandSlot: CommandSlot, private config: CommandBarConfig) {}
 
   static dependencies = [UIAspect, PubsubAspect, ReactRouterAspect];

scopes/lanes/lanes/lanes.ui.runtime.tsx

@@ -25,6 +25,7 @@ import { useViewedLaneFromUrl } from '@teambit/lanes.hooks.use-viewed-lane-from-
 import { ComponentCompareAspect, ComponentCompareUI } from '@teambit/component-compare';
 import { LaneComparePage } from '@teambit/lanes.ui.compare.lane-compare-page';
 import { ScopeIcon } from '@teambit/scope.ui.scope-icon';
+import { CommandBarUI, CommandBarAspect } from '@teambit/command-bar';
 
 import { LanesAspect } from './lanes.aspect';
 import styles from './lanes.ui.module.scss';
@@ -84,7 +85,14 @@ export function useComponentId() {
 }
 
 export class LanesUI {
-  static dependencies = [UIAspect, ComponentAspect, WorkspaceAspect, ScopeAspect, ComponentCompareAspect];
+  static dependencies = [
+    UIAspect,
+    ComponentAspect,
+    WorkspaceAspect,
+    ScopeAspect,
+    ComponentCompareAspect,
+    CommandBarAspect,
+  ];
 
   static runtime = UIRuntime;
   static slots = [
@@ -346,12 +354,13 @@ export class LanesUI {
   };
 
   static async provider(
-    [uiUi, componentUI, workspaceUi, scopeUi, componentCompareUI]: [
+    [uiUi, componentUI, workspaceUi, scopeUi, componentCompareUI, commandBarUI]: [
       UiUI,
       ComponentUI,
       WorkspaceUI,
       ScopeUI,
-      ComponentCompareUI
+      ComponentCompareUI,
+      CommandBarUI
     ],
     _,
     [routeSlot, overviewSlot, navSlot, menuWidgetSlot, laneProviderIgnoreSlot]: [
@@ -401,6 +410,9 @@ export class LanesUI {
       );
     });
     lanesUi.registerLanesDropdown();
+    if (workspace) {
+      lanesUi.registerMenuWidget(commandBarUI.CommandBarButton);
+    }
     return lanesUi;
   }
 }

scopes/workspace/workspace/workspace.ui.runtime.tsx

@@ -277,6 +277,8 @@ export class WorkspaceUI {
       },
     ]);
 
+    workspaceUI.registerMenuWidget([commandBarUI.CommandBarButton]);
+
     return workspaceUI;
   }
 }

workspace.jsonc

@@ -156,6 +156,7 @@
         "@teambit/defender.ui.test-table": "^0.0.510",
         "@teambit/dependencies.modules.packages-excluder": "^1.0.8",
         "@teambit/dependencies.pnpm.dep-path": "^0.0.2",
+        "@teambit/design.buttons.action-button": "^0.0.2",
         "@teambit/design.controls.menu": "^0.0.1",
         "@teambit/design.elements.icon": "1.0.5",
         "@teambit/design.inputs.dropdown": "1.2.16",