@teambit/workspace 1.0.114 → 1.0.116

package/dist/workspace.ui.runtime.d.ts

@@ -2,6 +2,7 @@ import { ComponentUI, ComponentModel } from '@teambit/component';
 import { ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';
 import { SlotRegistry } from '@teambit/harmony';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
+import { MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';
 import { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';
 import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
 import { UIRootUI as UIRoot, UiUI } from '@teambit/ui';
@@ -36,6 +37,7 @@ export declare class WorkspaceUI {
     private drawerWidgetSlot;
     private drawerComponentsFiltersSlot;
     private commandBarUI;
+    private menuWidgetSlot;
     constructor(
     /**
      * route slot.
@@ -52,7 +54,7 @@ export declare class WorkspaceUI {
     /**
      * sidebar link slot
      */
-    sidebarItemSlot: SidebarItemSlot, drawerWidgetSlot: DrawerWidgetSlot, drawerComponentsFiltersSlot: ComponentFiltersSlot, commandBarUI: CommandBarUI);
+    sidebarItemSlot: SidebarItemSlot, drawerWidgetSlot: DrawerWidgetSlot, drawerComponentsFiltersSlot: ComponentFiltersSlot, commandBarUI: CommandBarUI, menuWidgetSlot: MenuWidgetSlot);
     private setKeyBindHandler;
     /**
      * register a route to the workspace.
@@ -61,6 +63,7 @@ export declare class WorkspaceUI {
     registerDrawers(...drawers: DrawerType[]): this;
     registerSidebarWidget(componentTreeNode: ComponentTreeNode): this;
     registerMenuItem: (menuItems: MenuItem[]) => void;
+    registerMenuWidget: (menuWidgets: MenuWidget[]) => void;
     registerMenuRoutes: (routes: RouteProps[]) => this;
     setComponents: (components: ComponentModel[]) => void;
     registerSidebarLink: (...links: SidebarItem[]) => void;
@@ -82,14 +85,15 @@ export declare class WorkspaceUI {
         ComponentTreeUI,
         CommandBarUI,
         GraphUI
-    ], config: any, [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot]: [
+    ], config: any, [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, menuWidgetSlot,]: [
         RouteSlot,
         RouteSlot,
         MenuItemSlot,
         SidebarWidgetSlot,
         SidebarItemSlot,
         DrawerWidgetSlot,
-        ComponentFiltersSlot
+        ComponentFiltersSlot,
+        MenuWidgetSlot
     ]): Promise<WorkspaceUI>;
 }
 export default WorkspaceUI;

package/dist/workspace.ui.runtime.js

@@ -158,7 +158,7 @@ class WorkspaceUI {
   /**
    * sidebar link slot
    */
-  sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, commandBarUI) {
+  sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, commandBarUI, menuWidgetSlot) {
     this.routeSlot = routeSlot;
     this.componentUi = componentUi;
     this.menuSlot = menuSlot;
@@ -169,10 +169,14 @@ class WorkspaceUI {
     this.drawerWidgetSlot = drawerWidgetSlot;
     this.drawerComponentsFiltersSlot = drawerComponentsFiltersSlot;
     this.commandBarUI = commandBarUI;
+    this.menuWidgetSlot = menuWidgetSlot;
     _defineProperty(this, "setKeyBindHandler", () => {});
     _defineProperty(this, "registerMenuItem", menuItems => {
       this.menuItemSlot.register(menuItems);
     });
+    _defineProperty(this, "registerMenuWidget", menuWidgets => {
+      this.menuWidgetSlot.register(menuWidgets);
+    });
     _defineProperty(this, "registerMenuRoutes", routes => {
       this.menuSlot.register(routes);
       return this;
@@ -254,11 +258,11 @@ class WorkspaceUI {
       return item.component;
     }));
   }
-  static async provider([ui, componentUi, sidebar, componentTree, commandBarUI, graphUI], config, [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot]) {
+  static async provider([ui, componentUi, sidebar, componentTree, commandBarUI, graphUI], config, [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, menuWidgetSlot]) {
     componentTree.registerTreeNode(new (_componentTree2().ComponentTreeWidget)());
     sidebarSlot.register(new (_componentTree2().ComponentTreeWidget)());
     graphUI.registerComponentWidget(new (_componentTree2().ComponentTreeWidget)().widget);
-    const workspaceUI = new WorkspaceUI(routeSlot, componentUi, menuSlot, menuItemSlot, sidebar, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, commandBarUI);
+    const workspaceUI = new WorkspaceUI(routeSlot, componentUi, menuSlot, menuItemSlot, sidebar, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot, commandBarUI, menuWidgetSlot);
     workspaceUI.registerDrawerComponentFilters([_componentUiComponentFilters().DeprecateFilter, _componentUiComponentFilters2().EnvsFilter, (0, _componentUiComponentFilters3().ShowMainFilter)(true)]);
     workspaceUI.registerDrawerWidgets([/*#__PURE__*/_react().default.createElement(_componentUi().FilterWidget, {
       key: 'workspace-filter-widget'
@@ -279,7 +283,8 @@ class WorkspaceUI {
     workspaceUI.registerMenuRoutes([{
       path: '/',
       element: /*#__PURE__*/_react().default.createElement(_uiFoundationUi().Menu, {
-        menuItemSlot: workspaceUI.menuItemSlot
+        menuItemSlot: workspaceUI.menuItemSlot,
+        widgetSlot: workspaceUI.menuWidgetSlot
       })
     }, {
       path: workspaceUI.componentUi.routePath,
@@ -295,7 +300,7 @@ class WorkspaceUI {
 exports.WorkspaceUI = WorkspaceUI;
 _defineProperty(WorkspaceUI, "dependencies", [_ui().UIAspect, _component().ComponentAspect, _sidebar().default, _componentTree().ComponentTreeAspect, _commandBar().default, _graph().GraphAspect]);
 _defineProperty(WorkspaceUI, "runtime", _ui().UIRuntime);
-_defineProperty(WorkspaceUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
+_defineProperty(WorkspaceUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = exports.default = WorkspaceUI;
 _workspace().WorkspaceAspect.addRuntime(WorkspaceUI);
 

package/dist/workspace.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_component","data","require","_lodash","_componentTree","_harmony","_uiFoundationUi","_sidebar","_interopRequireDefault","_ui","_graph","_react","_commandBar","_designUiSurfacesMenu","_componentUiComponentFilters","_componentUiComponentFilters2","_componentUiComponentFilters3","_componentUi","_componentTree2","_ui2","_workspace","_workspaceUi","obj","__esModule","default","_defineProperty","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","t","i","_toPrimitive","String","r","e","Symbol","toPrimitive","call","TypeError","Number","WorkspaceUI","constructor","routeSlot","componentUi","menuSlot","menuItemSlot","sidebar","sidebarSlot","sidebarItemSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","commandBarUI","menuItems","register","routes","components","updateComponents","links","filters","widgets","category","title","keyChar","handler","run","registerRoutes","registerDrawers","drawers","registerDrawer","registerSidebarWidget","componentTreeNode","uiRoot","workspaceDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","id","action","displayName","keybinding","path","element","createElement","Workspace","render","items","listSidebarItems","workspaceUI","onSidebarTogglerChange","flatten","values","compact","map","item","component","provider","ui","componentTree","graphUI","config","registerTreeNode","ComponentTreeWidget","registerComponentWidget","widget","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","ShowMainFilter","registerDrawerWidgets","FilterWidget","TreeToggleWidget","registerRoot","bind","registerMenuItem","registerSidebarLink","Gallery","MenuLinkItem","exact","href","icon","registerMenuRoutes","Menu","routePath","getMenu","WorkspaceAspect","getComponentUI","exports","UIAspect","ComponentAspect","SidebarAspect","ComponentTreeAspect","CommandBarAspect","GraphAspect","UIRuntime","Slot","withType","_default","addRuntime"],"sources":["workspace.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';\nimport { compact, flatten } from 'lodash';\nimport { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Menu } from '@teambit/ui-foundation.ui.menu';\nimport SidebarAspect, { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport { GraphAspect, GraphUI } from '@teambit/graph';\nimport React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ComponentFilters } from '@teambit/component.ui.component-filters.component-filter-context';\nimport { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';\nimport { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';\nimport { ShowMainFilter } from '@teambit/component.ui.component-filters.show-main-filter';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentTreeWidget } from './component-tree.widget';\nimport { Workspace } from './ui';\nimport { WorkspaceAspect } from './workspace.aspect';\nimport { workspaceDrawer } from './workspace.ui.drawer';\n\nexport type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;\n\nexport class WorkspaceUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    private drawerWidgetSlot: DrawerWidgetSlot,\n\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot,\n\n    private commandBarUI: CommandBarUI\n  ) {}\n\n  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a route to the workspace.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerDrawers(...drawers: DrawerType[]) {\n    this.sidebar.registerDrawer(...drawers);\n    return this;\n  }\n\n  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {\n    this.sidebarSlot.register(componentTreeNode);\n    return this;\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.registerDrawers(\n      workspaceDrawer({\n        treeWidgets: this.sidebarSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n      })\n    );\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setKeyBindHandler = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Workspace\n              menuSlot={this.menuSlot}\n              routeSlot={this.routeSlot}\n              sidebar={<this.sidebar.render items={this.listSidebarItems()} />}\n              workspaceUI={this}\n              onSidebarTogglerChange={this.setKeyBindHandler}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  listSidebarItems() {\n    const items = flatten(this.sidebarItemSlot.values());\n    return compact(\n      items.map((item) => {\n        return item.component;\n      })\n    );\n  }\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, ComponentTreeAspect, CommandBarAspect, GraphAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      ComponentTreeUI,\n      CommandBarUI,\n      GraphUI\n    ],\n    config,\n    [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot]: [\n      RouteSlot,\n      RouteSlot,\n      MenuItemSlot,\n      SidebarWidgetSlot,\n      SidebarItemSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot\n    ]\n  ) {\n    componentTree.registerTreeNode(new ComponentTreeWidget());\n    sidebarSlot.register(new ComponentTreeWidget());\n    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);\n\n    const workspaceUI = new WorkspaceUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      menuItemSlot,\n      sidebar,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      commandBarUI\n    );\n\n    workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter, ShowMainFilter(true)]);\n    workspaceUI.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));\n    workspaceUI.registerMenuItem(workspaceUI.menuItems);\n\n    workspaceUI.registerSidebarLink({\n      component: function Gallery() {\n        return (\n          <MenuLinkItem exact href=\"/\" icon=\"comps\">\n            Workspace overview\n          </MenuLinkItem>\n        );\n      },\n    });\n\n    workspaceUI.registerMenuRoutes([\n      {\n        path: '/',\n        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,\n      },\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerRoutes([\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),\n      },\n    ]);\n\n    return workspaceUI;\n  }\n}\n\nexport default WorkspaceUI;\n\nWorkspaceAspect.addRuntime(WorkspaceUI);\n"],"mappings":"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"}
+{"version":3,"names":["_component","data","require","_lodash","_componentTree","_harmony","_uiFoundationUi","_sidebar","_interopRequireDefault","_ui","_graph","_react","_commandBar","_designUiSurfacesMenu","_componentUiComponentFilters","_componentUiComponentFilters2","_componentUiComponentFilters3","_componentUi","_componentTree2","_ui2","_workspace","_workspaceUi","obj","__esModule","default","_defineProperty","key","value","_toPropertyKey","Object","defineProperty","enumerable","configurable","writable","t","i","_toPrimitive","String","r","e","Symbol","toPrimitive","call","TypeError","Number","WorkspaceUI","constructor","routeSlot","componentUi","menuSlot","menuItemSlot","sidebar","sidebarSlot","sidebarItemSlot","drawerWidgetSlot","drawerComponentsFiltersSlot","commandBarUI","menuWidgetSlot","menuItems","register","menuWidgets","routes","components","updateComponents","links","filters","widgets","category","title","keyChar","handler","run","registerRoutes","registerDrawers","drawers","registerDrawer","registerSidebarWidget","componentTreeNode","uiRoot","workspaceDrawer","treeWidgets","filtersSlot","setKeyBindHandler","addCommand","id","action","displayName","keybinding","path","element","createElement","Workspace","render","items","listSidebarItems","workspaceUI","onSidebarTogglerChange","flatten","values","compact","map","item","component","provider","ui","componentTree","graphUI","config","registerTreeNode","ComponentTreeWidget","registerComponentWidget","widget","registerDrawerComponentFilters","DeprecateFilter","EnvsFilter","ShowMainFilter","registerDrawerWidgets","FilterWidget","TreeToggleWidget","registerRoot","bind","registerMenuItem","registerSidebarLink","Gallery","MenuLinkItem","exact","href","icon","registerMenuRoutes","Menu","widgetSlot","routePath","getMenu","WorkspaceAspect","getComponentUI","exports","UIAspect","ComponentAspect","SidebarAspect","ComponentTreeAspect","CommandBarAspect","GraphAspect","UIRuntime","Slot","withType","_default","addRuntime"],"sources":["workspace.ui.runtime.tsx"],"sourcesContent":["import { ComponentAspect, ComponentUI, ComponentModel } from '@teambit/component';\nimport { compact, flatten } from 'lodash';\nimport { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Menu, MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';\nimport SidebarAspect, { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';\nimport { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';\nimport { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';\nimport { GraphAspect, GraphUI } from '@teambit/graph';\nimport React, { ReactNode } from 'react';\nimport { RouteProps } from 'react-router-dom';\nimport CommandBarAspect, { CommandBarUI, CommandHandler } from '@teambit/command-bar';\nimport { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';\nimport type { DrawerType } from '@teambit/ui-foundation.ui.tree.drawer';\nimport { ComponentFilters } from '@teambit/component.ui.component-filters.component-filter-context';\nimport { DeprecateFilter } from '@teambit/component.ui.component-filters.deprecate-filter';\nimport { EnvsFilter } from '@teambit/component.ui.component-filters.env-filter';\nimport { ShowMainFilter } from '@teambit/component.ui.component-filters.show-main-filter';\nimport {\n  DrawerWidgetSlot,\n  FilterWidget,\n  TreeToggleWidget,\n  ComponentFiltersSlot,\n} from '@teambit/component.ui.component-drawer';\nimport { ComponentTreeWidget } from './component-tree.widget';\nimport { Workspace } from './ui';\nimport { WorkspaceAspect } from './workspace.aspect';\nimport { workspaceDrawer } from './workspace.ui.drawer';\n\nexport type SidebarWidgetSlot = SlotRegistry<ComponentTreeNode>;\n\nexport class WorkspaceUI {\n  constructor(\n    /**\n     * route slot.\n     */\n    private routeSlot: RouteSlot,\n\n    /**\n     * component ui extension.\n     */\n    private componentUi: ComponentUI,\n\n    /**\n     * menu slot\n     */\n    private menuSlot: RouteSlot,\n\n    private menuItemSlot: MenuItemSlot,\n\n    private sidebar: SidebarUI,\n\n    private sidebarSlot: SidebarWidgetSlot,\n\n    /**\n     * sidebar link slot\n     */\n    private sidebarItemSlot: SidebarItemSlot,\n\n    private drawerWidgetSlot: DrawerWidgetSlot,\n\n    private drawerComponentsFiltersSlot: ComponentFiltersSlot,\n\n    private commandBarUI: CommandBarUI,\n\n    private menuWidgetSlot: MenuWidgetSlot\n  ) {}\n\n  private setKeyBindHandler: (updated: CommandHandler) => void = () => {};\n\n  /**\n   * register a route to the workspace.\n   */\n  registerRoutes(routes: RouteProps[]) {\n    this.routeSlot.register(routes);\n    return this;\n  }\n\n  registerDrawers(...drawers: DrawerType[]) {\n    this.sidebar.registerDrawer(...drawers);\n    return this;\n  }\n\n  registerSidebarWidget(componentTreeNode: ComponentTreeNode) {\n    this.sidebarSlot.register(componentTreeNode);\n    return this;\n  }\n\n  registerMenuItem = (menuItems: MenuItem[]) => {\n    this.menuItemSlot.register(menuItems);\n  };\n\n  registerMenuWidget = (menuWidgets: MenuWidget[]) => {\n    this.menuWidgetSlot.register(menuWidgets);\n  };\n\n  registerMenuRoutes = (routes: RouteProps[]) => {\n    this.menuSlot.register(routes);\n    return this;\n  };\n\n  setComponents = (components: ComponentModel[]) => {\n    this.componentUi.updateComponents(components);\n  };\n\n  registerSidebarLink = (...links: SidebarItem[]) => {\n    this.sidebarItemSlot.register(links);\n  };\n\n  /**\n   * register component filters\n   */\n  registerDrawerComponentFilters = (filters: ComponentFilters) => {\n    this.drawerComponentsFiltersSlot.register(filters);\n  };\n\n  registerDrawerWidgets = (widgets: ReactNode[]) => {\n    this.drawerWidgetSlot.register(widgets);\n  };\n\n  uiRoot(): UIRoot {\n    this.registerDrawers(\n      workspaceDrawer({\n        treeWidgets: this.sidebarSlot,\n        drawerWidgetSlot: this.drawerWidgetSlot,\n        filtersSlot: this.drawerComponentsFiltersSlot,\n      })\n    );\n\n    const [setKeyBindHandler] = this.commandBarUI.addCommand({\n      id: 'sidebar.toggle', // TODO - extract to a component!\n      action: () => {},\n      displayName: 'Toggle component list',\n      keybinding: 'alt+s',\n    });\n    this.setKeyBindHandler = setKeyBindHandler;\n\n    return {\n      routes: [\n        {\n          path: '/*',\n          element: (\n            <Workspace\n              menuSlot={this.menuSlot}\n              routeSlot={this.routeSlot}\n              sidebar={<this.sidebar.render items={this.listSidebarItems()} />}\n              workspaceUI={this}\n              onSidebarTogglerChange={this.setKeyBindHandler}\n            />\n          ),\n        },\n      ],\n    };\n  }\n\n  listSidebarItems() {\n    const items = flatten(this.sidebarItemSlot.values());\n    return compact(\n      items.map((item) => {\n        return item.component;\n      })\n    );\n  }\n\n  private menuItems: MenuItem[] = [\n    {\n      category: 'general',\n      title: 'Open command bar',\n      keyChar: 'mod+k',\n      handler: () => this.commandBarUI?.run('command-bar.open'),\n    },\n    {\n      category: 'general',\n      title: 'Toggle component list',\n      keyChar: 'alt+s',\n      handler: () => this.commandBarUI?.run('sidebar.toggle'),\n    },\n  ];\n\n  static dependencies = [UIAspect, ComponentAspect, SidebarAspect, ComponentTreeAspect, CommandBarAspect, GraphAspect];\n\n  static runtime = UIRuntime;\n\n  static slots = [\n    Slot.withType<RouteProps>(),\n    Slot.withType<RouteProps>(),\n    Slot.withType<ComponentTreeNode>(),\n    Slot.withType<MenuItemSlot>(),\n    Slot.withType<SidebarItemSlot>(),\n    Slot.withType<DrawerWidgetSlot>(),\n    Slot.withType<ComponentFiltersSlot>(),\n    Slot.withType<MenuWidgetSlot>(),\n  ];\n\n  static async provider(\n    [ui, componentUi, sidebar, componentTree, commandBarUI, graphUI]: [\n      UiUI,\n      ComponentUI,\n      SidebarUI,\n      ComponentTreeUI,\n      CommandBarUI,\n      GraphUI\n    ],\n    config,\n    [\n      routeSlot,\n      menuSlot,\n      menuItemSlot,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      menuWidgetSlot,\n    ]: [\n      RouteSlot,\n      RouteSlot,\n      MenuItemSlot,\n      SidebarWidgetSlot,\n      SidebarItemSlot,\n      DrawerWidgetSlot,\n      ComponentFiltersSlot,\n      MenuWidgetSlot\n    ]\n  ) {\n    componentTree.registerTreeNode(new ComponentTreeWidget());\n    sidebarSlot.register(new ComponentTreeWidget());\n    graphUI.registerComponentWidget(new ComponentTreeWidget().widget);\n\n    const workspaceUI = new WorkspaceUI(\n      routeSlot,\n      componentUi,\n      menuSlot,\n      menuItemSlot,\n      sidebar,\n      sidebarSlot,\n      sidebarItemSlot,\n      drawerWidgetSlot,\n      drawerComponentsFiltersSlot,\n      commandBarUI,\n      menuWidgetSlot\n    );\n\n    workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter, ShowMainFilter(true)]);\n    workspaceUI.registerDrawerWidgets([\n      <FilterWidget key={'workspace-filter-widget'} />,\n      <TreeToggleWidget key={'workspace-tree-toggle-widget'} />,\n    ]);\n    ui.registerRoot(workspaceUI.uiRoot.bind(workspaceUI));\n    workspaceUI.registerMenuItem(workspaceUI.menuItems);\n\n    workspaceUI.registerSidebarLink({\n      component: function Gallery() {\n        return (\n          <MenuLinkItem exact href=\"/\" icon=\"comps\">\n            Workspace overview\n          </MenuLinkItem>\n        );\n      },\n    });\n\n    workspaceUI.registerMenuRoutes([\n      {\n        path: '/',\n        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} widgetSlot={workspaceUI.menuWidgetSlot} />,\n      },\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getMenu(WorkspaceAspect.id),\n      },\n    ]);\n\n    workspaceUI.registerRoutes([\n      {\n        path: workspaceUI.componentUi.routePath,\n        element: workspaceUI.componentUi.getComponentUI(WorkspaceAspect.id),\n      },\n    ]);\n\n    return workspaceUI;\n  }\n}\n\nexport default WorkspaceUI;\n\nWorkspaceAspect.addRuntime(WorkspaceUI);\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "1.0.114",
+  "version": "1.0.116",
   "homepage": "https://bit.cloud/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.114"
+    "version": "1.0.116"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -56,38 +56,42 @@
     "@teambit/ui-foundation.ui.corner": "0.0.520",
     "@teambit/ui-foundation.ui.notifications.notification-context": "0.0.501",
     "@teambit/ui-foundation.ui.top-bar": "0.0.514",
+    "@teambit/scopes.scope-id": "0.0.7",
+    "@teambit/design.ui.tooltip": "0.0.361",
+    "@teambit/explorer.ui.component-card": "0.0.30",
     "@teambit/explorer.ui.gallery.component-grid": "0.0.496",
     "@teambit/workspace.ui.empty-workspace": "0.0.508",
-    "@teambit/workspace.ui.workspace-component-card": "0.0.516",
-    "@teambit/component": "1.0.114",
-    "@teambit/dependency-resolver": "1.0.114",
-    "@teambit/envs": "1.0.114",
+    "@teambit/component": "1.0.116",
+    "@teambit/dependency-resolver": "1.0.116",
+    "@teambit/envs": "1.0.116",
     "@teambit/logger": "0.0.935",
-    "@teambit/scope": "1.0.114",
-    "@teambit/graph": "1.0.114",
+    "@teambit/scope": "1.0.116",
+    "@teambit/graph": "1.0.116",
     "@teambit/cli": "0.0.842",
-    "@teambit/isolator": "1.0.114",
-    "@teambit/component-tree": "1.0.114",
+    "@teambit/isolator": "1.0.116",
+    "@teambit/component-tree": "1.0.116",
     "@teambit/harmony.modules.resolved-component": "0.0.495",
-    "@teambit/watcher": "1.0.114",
-    "@teambit/aspect-loader": "1.0.114",
-    "@teambit/config": "0.0.865",
-    "@teambit/global-config": "0.0.844",
+    "@teambit/watcher": "1.0.116",
+    "@teambit/aspect-loader": "1.0.116",
+    "@teambit/config": "0.0.867",
+    "@teambit/global-config": "0.0.845",
     "@teambit/harmony.modules.requireable-component": "0.0.495",
     "@teambit/toolbox.modules.module-resolver": "0.0.5",
     "@teambit/workspace.modules.node-modules-linker": "0.0.159",
-    "@teambit/graphql": "1.0.114",
-    "@teambit/bundler": "1.0.114",
-    "@teambit/pubsub": "1.0.114",
-    "@teambit/ui": "1.0.114",
-    "@teambit/variants": "0.0.958",
+    "@teambit/graphql": "1.0.116",
+    "@teambit/bundler": "1.0.116",
+    "@teambit/pubsub": "1.0.116",
+    "@teambit/ui": "1.0.116",
+    "@teambit/variants": "0.0.960",
     "@teambit/component-issues": "0.0.138",
     "@teambit/workspace.modules.match-pattern": "0.0.502",
     "@teambit/component.ui.component-drawer": "0.0.383",
-    "@teambit/command-bar": "1.0.114",
-    "@teambit/sidebar": "1.0.114",
+    "@teambit/command-bar": "1.0.116",
+    "@teambit/sidebar": "1.0.116",
+    "@teambit/deprecation": "1.0.116",
     "@teambit/component-descriptor": "0.0.410",
-    "@teambit/deprecation": "1.0.114"
+    "@teambit/cloud.hooks.use-cloud-scopes": "0.0.1",
+    "@teambit/preview.ui.preview-placeholder": "0.0.505"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/workspace/use-workspace.ts

@@ -21,6 +21,13 @@ const wcComponentFields = gql`
       version
       scope
     }
+    aspects(include: ["teambit.preview/preview", "teambit.envs/envs"]) {
+      # 'id' property in gql refers to a *global* identifier and used for caching.
+      # this makes aspect data cache under the same key, even when they are under different components.
+      # renaming the property fixes that.
+      aspectId: id
+      data
+    }
     compositions {
       identifier
     }
@@ -37,8 +44,12 @@ const wcComponentFields = gql`
       }
       isDeleted
     }
+    buildStatus
     preview {
+      includesEnvTemplate
+      legacyHeader
       isScaling
+      skipIncludes
     }
     deprecation {
       isDeprecate

package/ui/workspace/workspace-model.ts

@@ -16,7 +16,7 @@ export type WorkspaceModelComponent = {
 export type WorkspaceProps = {
   name: string;
   path: string;
-  components: ComponentModelProps[];
+  components: (ComponentModelProps & { aspects: Record<string, any> })[];
   icon: string;
 };
 
@@ -58,7 +58,16 @@ export class Workspace {
   static from({ name, path, components, icon }: WorkspaceProps) {
     const componentDescriptors = components.map((component) => {
       const id = ComponentID.fromObject(component.id);
-      return ComponentDescriptor.fromObject({ id: id.toString() });
+      const aspectList = {
+        entries: component?.aspects.map((aspectObject) => {
+          return {
+            ...aspectObject,
+            aspectId: aspectObject.aspectId,
+            aspectData: aspectObject.data,
+          };
+        }),
+      };
+      return ComponentDescriptor.fromObject({ id: id.toString(), aspectList });
     });
     return new Workspace(
       name,

package/ui/workspace/workspace-overview/link-plugin.ts

@@ -0,0 +1,5 @@
+export class LinkPlugin {
+  link(id) {
+    return id.fullName;
+  }
+}

package/ui/workspace/workspace-overview/workspace-overview.module.scss

@@ -4,3 +4,34 @@
   height: 100%;
   box-sizing: border-box;
 }
+
+.rightPreviewPlugins {
+  // background-color: var(--surface-color);
+  display: flex;
+  // box-shadow: 0px 2px 48px rgb(0 0 0 / 89%);
+  // box-shadow: 0px 2px 160px rgb(0 0 0 / 52%);
+  // border-radius: 8px;
+  // padding: 4px;
+  align-items: flex-end;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+}
+
+.envIcon {
+  // padding-right: 4px;
+  // height: 24px;
+  height: 14px;
+  // padding-top: 2px;
+}
+
+.badge {
+  background-color: var(--surface-color);
+  padding: 4px;
+  height: 15px;
+  margin-right: 4px;
+  z-index: 100;
+  border-radius: 8px;
+  margin-bottom: 4px;
+  box-shadow: 0px 2px 18px rgb(0 0 0 / 10%);
+}

package/ui/workspace/workspace-overview/workspace-overview.tsx

@@ -1,22 +1,89 @@
 import React, { useContext } from 'react';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { EmptyWorkspace } from '@teambit/workspace.ui.empty-workspace';
-import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
+import { PreviewPlaceholder } from '@teambit/preview.ui.preview-placeholder';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import { ComponentID } from '@teambit/component-id';
+import { ComponentModel } from '@teambit/component';
+import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
+import { ScopeID } from '@teambit/scopes.scope-id';
+import { ComponentCard, ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 import { WorkspaceContext } from '../workspace-context';
 import styles from './workspace-overview.module.scss';
+import { LinkPlugin } from './link-plugin';
 
 export function WorkspaceOverview() {
   const workspace = useContext(WorkspaceContext);
-  const { components } = workspace;
+  const compModelsById = new Map(workspace.components.map((comp) => [comp.id.toString(), comp]));
+  const { components, componentDescriptors } = workspace;
+  const uniqueScopes = new Set(components.map((c) => c.id.scope));
+  const uniqueScopesArr = Array.from(uniqueScopes);
+  const { cloudScopes = [] } = useCloudScopes(uniqueScopesArr);
+  const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));
+  const plugins = useCardPlugins({ compModelsById });
   if (!components || components.length === 0) return <EmptyWorkspace name={workspace.name} />;
+  const compDescriptorById = new Map(componentDescriptors.map((comp) => [comp.id.toString(), comp]));
   return (
     <div className={styles.container}>
       <ComponentGrid>
-        {components.map((component, index) => {
+        {components.map((component) => {
           if (component.deprecation?.isDeprecate) return null;
-          return <WorkspaceComponentCard key={index} component={component} />;
+          const compDescriptor = compDescriptorById.get(component.id.toString());
+          if (!compDescriptor) return null;
+          const cloudScope = cloudScopesById.get(component.id.scope);
+          const scope =
+            cloudScope ||
+            (ScopeID.isValid(component.id.scope) && { id: ScopeID.fromString(component.id.scope) }) ||
+            undefined;
+          return (
+            <ComponentCard
+              key={component.id.toString()}
+              component={compDescriptor}
+              plugins={plugins}
+              displayOwnerDetails="all"
+              scope={scope}
+            />
+          );
         })}
       </ComponentGrid>
     </div>
   );
 }
+
+export function useCardPlugins({
+  compModelsById,
+}: {
+  compModelsById: Map<string, ComponentModel>;
+}): ComponentCardPluginType<PluginProps>[] {
+  const plugins = React.useMemo(
+    () => [
+      {
+        preview: function Preview({ component }) {
+          const compModel = compModelsById.get(component.id.toString());
+          if (!compModel) return null;
+          return <PreviewPlaceholder componentDescriptor={component} component={compModel} />;
+        },
+      },
+      {
+        previewBottomRight: function PreviewBottomRight({ component }) {
+          const env = component.get('teambit.envs/envs');
+          const envComponentId = env?.id ? ComponentID.fromString(env?.id) : undefined;
+
+          return (
+            <div className={styles.rightPreviewPlugins}>
+              <div className={styles.badge}>
+                <Tooltip delay={300} content={envComponentId?.name}>
+                  <img src={env?.icon} className={styles.envIcon} />
+                </Tooltip>
+              </div>
+            </div>
+          );
+        },
+      },
+      new LinkPlugin(),
+    ],
+    [compModelsById.size]
+  );
+
+  return plugins;
+}

package/workspace-component/workspace-component-loader.ts

@@ -153,6 +153,10 @@ export class WorkspaceComponentLoader {
     const workspaceScopeIdsMap: WorkspaceScopeIdsMap = await this.groupAndUpdateIds(ids);
 
     const groupsToHandle = await this.buildLoadGroups(workspaceScopeIdsMap);
+    // prefix your command with "BIT_LOG=*" to see the detailed groups
+    if (process.env.BIT_LOG) {
+      printGroupsToHandle(groupsToHandle, this.logger);
+    }
     const groupsRes = compact(
       await mapSeries(groupsToHandle, async (group) => {
         const { scopeIds, workspaceIds, aspects, core, seeders } = group;
@@ -344,7 +348,7 @@ export class WorkspaceComponentLoader {
     if (!aspectIds.length) return;
 
     try {
-      await this.workspace.loadAspects(aspectIds, true, 'self loading aspects', {});
+      await this.workspace.loadAspects(aspectIds, true, 'self loading aspects', { useScopeAspectsCapsule: true });
     } catch (err: any) {
       this.logger.warn(`failed loading components as aspects for components ${aspectIds.join(', ')}`, err);
       // we ignore that errors at the moment
@@ -831,3 +835,22 @@ function createComponentCacheKey(id: ComponentID, loadOpts?: ComponentLoadOption
 function sortKeys(obj: Object) {
   return fromPairs(Object.entries(obj).sort(([k1], [k2]) => k1.localeCompare(k2)));
 }
+
+function printGroupsToHandle(groupsToHandle: Array<LoadGroup>, logger: Logger): void {
+  groupsToHandle.forEach((group) => {
+    const { scopeIds, workspaceIds, aspects, core, seeders } = group;
+    logger.console(
+      `workspace-component-loader ~ groupsToHandle ${JSON.stringify(
+        {
+          scopeIds: scopeIds.map((id) => id.toString()),
+          workspaceIds: workspaceIds.map((id) => id.toString()),
+          aspects,
+          core,
+          seeders,
+        },
+        null,
+        2
+      )}`
+    );
+  });
+}

package/workspace.ui.runtime.tsx

@@ -3,7 +3,7 @@ import { compact, flatten } from 'lodash';
 import { ComponentTreeAspect, ComponentTreeUI, ComponentTreeNode } from '@teambit/component-tree';
 import { Slot, SlotRegistry } from '@teambit/harmony';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { Menu } from '@teambit/ui-foundation.ui.menu';
+import { Menu, MenuWidgetSlot, MenuWidget } from '@teambit/ui-foundation.ui.menu';
 import SidebarAspect, { SidebarUI, SidebarItem, SidebarItemSlot } from '@teambit/sidebar';
 import { MenuItemSlot, MenuItem } from '@teambit/ui-foundation.ui.main-dropdown';
 import { UIAspect, UIRootUI as UIRoot, UIRuntime, UiUI } from '@teambit/ui';
@@ -62,7 +62,9 @@ export class WorkspaceUI {
 
     private drawerComponentsFiltersSlot: ComponentFiltersSlot,
 
-    private commandBarUI: CommandBarUI
+    private commandBarUI: CommandBarUI,
+
+    private menuWidgetSlot: MenuWidgetSlot
   ) {}
 
   private setKeyBindHandler: (updated: CommandHandler) => void = () => {};
@@ -89,6 +91,10 @@ export class WorkspaceUI {
     this.menuItemSlot.register(menuItems);
   };
 
+  registerMenuWidget = (menuWidgets: MenuWidget[]) => {
+    this.menuWidgetSlot.register(menuWidgets);
+  };
+
   registerMenuRoutes = (routes: RouteProps[]) => {
     this.menuSlot.register(routes);
     return this;
@@ -184,6 +190,7 @@ export class WorkspaceUI {
     Slot.withType<SidebarItemSlot>(),
     Slot.withType<DrawerWidgetSlot>(),
     Slot.withType<ComponentFiltersSlot>(),
+    Slot.withType<MenuWidgetSlot>(),
   ];
 
   static async provider(
@@ -196,14 +203,24 @@ export class WorkspaceUI {
       GraphUI
     ],
     config,
-    [routeSlot, menuSlot, menuItemSlot, sidebarSlot, sidebarItemSlot, drawerWidgetSlot, drawerComponentsFiltersSlot]: [
+    [
+      routeSlot,
+      menuSlot,
+      menuItemSlot,
+      sidebarSlot,
+      sidebarItemSlot,
+      drawerWidgetSlot,
+      drawerComponentsFiltersSlot,
+      menuWidgetSlot,
+    ]: [
       RouteSlot,
       RouteSlot,
       MenuItemSlot,
       SidebarWidgetSlot,
       SidebarItemSlot,
       DrawerWidgetSlot,
-      ComponentFiltersSlot
+      ComponentFiltersSlot,
+      MenuWidgetSlot
     ]
   ) {
     componentTree.registerTreeNode(new ComponentTreeWidget());
@@ -220,7 +237,8 @@ export class WorkspaceUI {
       sidebarItemSlot,
       drawerWidgetSlot,
       drawerComponentsFiltersSlot,
-      commandBarUI
+      commandBarUI,
+      menuWidgetSlot
     );
 
     workspaceUI.registerDrawerComponentFilters([DeprecateFilter, EnvsFilter, ShowMainFilter(true)]);
@@ -244,7 +262,7 @@ export class WorkspaceUI {
     workspaceUI.registerMenuRoutes([
       {
         path: '/',
-        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} />,
+        element: <Menu menuItemSlot={workspaceUI.menuItemSlot} widgetSlot={workspaceUI.menuWidgetSlot} />,
       },
       {
         path: workspaceUI.componentUi.routePath,