@teambit/workspace 0.0.964 → 0.0.966

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

@@ -1,8 +1,13 @@
 import { ComponentsDrawer, ComponentFiltersSlot, DrawerWidgetSlot } from '@teambit/component.ui.component-drawer';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { SidebarWidgetSlot } from './workspace.ui.runtime';
 export declare type WorkspaceDrawerProps = {
     treeWidgets: SidebarWidgetSlot;
     filtersSlot: ComponentFiltersSlot;
     drawerWidgetSlot: DrawerWidgetSlot;
+    overrideUseLanes?: () => {
+        lanesModel?: LanesModel;
+        loading?: boolean;
+    };
 };
-export declare const workspaceDrawer: ({ treeWidgets, filtersSlot, drawerWidgetSlot }: WorkspaceDrawerProps) => ComponentsDrawer;
+export declare const workspaceDrawer: ({ treeWidgets, filtersSlot, drawerWidgetSlot, overrideUseLanes: useLanesFromProps, }: WorkspaceDrawerProps) => ComponentsDrawer;

package/dist/workspace.ui.drawer.js

@@ -50,54 +50,60 @@ function _lanesHooks2() {
 const workspaceDrawer = ({
   treeWidgets,
   filtersSlot,
-  drawerWidgetSlot
-}) => new (_componentUi().ComponentsDrawer)({
-  order: 0,
-  id: 'workspace-components-drawer',
-  name: 'COMPONENTS',
-  plugins: {
-    tree: {
-      widgets: treeWidgets,
-      customRenderer: treeNodeSlot => function TreeNode(props) {
-        const children = props.node.children;
-        if (!children) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ComponentView, (0, _extends2().default)({}, props, {
-          treeNodeSlot: treeNodeSlot
-        })); // non collapse
+  drawerWidgetSlot,
+  overrideUseLanes: useLanesFromProps
+}) => {
+  const useLanes = useLanesFromProps || _lanesHooks().useLanes;
+  return new (_componentUi().ComponentsDrawer)({
+    order: 0,
+    id: 'workspace-components-drawer',
+    name: 'COMPONENTS',
+    plugins: {
+      tree: {
+        widgets: treeWidgets,
+        customRenderer: treeNodeSlot => function TreeNode(props) {
+          const children = props.node.children;
+          if (!children) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ComponentView, (0, _extends2().default)({}, props, {
+            treeNodeSlot: treeNodeSlot,
+            useLanes: useLanes
+          })); // non collapse
 
-        if (props.node.payload instanceof _uiFoundationUi().ScopePayload) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ScopeTreeNode, props);
-        return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().NamespaceTreeNode, props);
-      }
+          if (props.node.payload instanceof _uiFoundationUi().ScopePayload) return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().ScopeTreeNode, props);
+          return /*#__PURE__*/_react().default.createElement(_uiFoundationUi().NamespaceTreeNode, props);
+        }
+      },
+      filters: filtersSlot,
+      drawerWidgets: drawerWidgetSlot
     },
-    filters: filtersSlot,
-    drawerWidgets: drawerWidgetSlot
-  },
-  emptyMessage: 'Workspace is empty',
-  useComponents: () => {
-    var _lanesModel$viewedLan;
-    const {
-      lanesModel,
-      loading: lanesLoading
-    } = (0, _lanesHooks().useLanes)();
-    const viewedLaneId = lanesModel === null || lanesModel === void 0 ? void 0 : (_lanesModel$viewedLan = lanesModel.viewedLane) === null || _lanesModel$viewedLan === void 0 ? void 0 : _lanesModel$viewedLan.id;
-    const defaultLane = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.getDefaultLane();
-    const isViewingDefaultLane = viewedLaneId && (defaultLane === null || defaultLane === void 0 ? void 0 : defaultLane.id.isEqual(viewedLaneId));
-    const {
-      components: laneComponents = [],
-      loading: laneCompsLoading
-    } = (0, _lanesHooks2().useLaneComponents)(viewedLaneId);
-    const {
-      components: mainComponents = [],
-      loading: mainCompsLoading
-    } = (0, _lanesHooks2().useLaneComponents)(!isViewingDefaultLane ? defaultLane === null || defaultLane === void 0 ? void 0 : defaultLane.id : undefined);
+    emptyMessage: 'Workspace is empty',
+    useLanes,
+    useComponents: () => {
+      var _lanesModel$viewedLan;
+      const {
+        lanesModel,
+        loading: lanesLoading
+      } = useLanes();
+      const viewedLaneId = lanesModel === null || lanesModel === void 0 ? void 0 : (_lanesModel$viewedLan = lanesModel.viewedLane) === null || _lanesModel$viewedLan === void 0 ? void 0 : _lanesModel$viewedLan.id;
+      const defaultLane = lanesModel === null || lanesModel === void 0 ? void 0 : lanesModel.getDefaultLane();
+      const isViewingDefaultLane = viewedLaneId && (defaultLane === null || defaultLane === void 0 ? void 0 : defaultLane.id.isEqual(viewedLaneId));
+      const {
+        components: laneComponents = [],
+        loading: laneCompsLoading
+      } = (0, _lanesHooks2().useLaneComponents)(viewedLaneId);
+      const {
+        components: mainComponents = [],
+        loading: mainCompsLoading
+      } = (0, _lanesHooks2().useLaneComponents)(!isViewingDefaultLane ? defaultLane === null || defaultLane === void 0 ? void 0 : defaultLane.id : undefined);
 
-    // lane components + main components
-    const components = isViewingDefaultLane ? laneComponents : mergeComponents(mainComponents, laneComponents);
-    return {
-      loading: lanesLoading || laneCompsLoading || mainCompsLoading,
-      components
-    };
-  }
-});
+      // lane components + main components
+      const components = isViewingDefaultLane ? laneComponents : mergeComponents(mainComponents, laneComponents);
+      return {
+        loading: lanesLoading || laneCompsLoading || mainCompsLoading,
+        components
+      };
+    }
+  });
+};
 exports.workspaceDrawer = workspaceDrawer;
 function mergeComponents(mainComponents, laneComponents) {
   const mainComponentsThatAreNotOnLane = mainComponents.filter(mainComponent => {

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

@@ -1 +1 @@
-{"version":3,"names":["workspaceDrawer","treeWidgets","filtersSlot","drawerWidgetSlot","ComponentsDrawer","order","id","name","plugins","tree","widgets","customRenderer","treeNodeSlot","TreeNode","props","children","node","payload","ScopePayload","filters","drawerWidgets","emptyMessage","useComponents","lanesModel","loading","lanesLoading","useLanes","viewedLaneId","viewedLane","defaultLane","getDefaultLane","isViewingDefaultLane","isEqual","components","laneComponents","laneCompsLoading","useLaneComponents","mainComponents","mainCompsLoading","undefined","mergeComponents","mainComponentsThatAreNotOnLane","filter","mainComponent","find","laneComponent","toStringWithoutVersion","concat"],"sources":["workspace.ui.drawer.tsx"],"sourcesContent":["import React from 'react';\nimport { ComponentsDrawer, ComponentFiltersSlot, DrawerWidgetSlot } from '@teambit/component.ui.component-drawer';\nimport {\n  ComponentView,\n  NamespaceTreeNode,\n  PayloadType,\n  ScopePayload,\n  ScopeTreeNode,\n} from '@teambit/ui-foundation.ui.side-bar';\nimport { useLanes } from '@teambit/lanes.hooks.use-lanes';\nimport { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';\nimport { TreeNodeProps } from '@teambit/design.ui.tree';\nimport { ComponentModel } from '@teambit/component';\nimport { SidebarWidgetSlot } from './workspace.ui.runtime';\n\nexport type WorkspaceDrawerProps = {\n  treeWidgets: SidebarWidgetSlot;\n  filtersSlot: ComponentFiltersSlot;\n  drawerWidgetSlot: DrawerWidgetSlot;\n};\n\nexport const workspaceDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }: WorkspaceDrawerProps) =>\n  new ComponentsDrawer({\n    order: 0,\n    id: 'workspace-components-drawer',\n    name: 'COMPONENTS',\n    plugins: {\n      tree: {\n        widgets: treeWidgets,\n        customRenderer: (treeNodeSlot) =>\n          function TreeNode(props: TreeNodeProps<PayloadType>) {\n            const children = props.node.children;\n\n            if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse\n\n            if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;\n\n            return <NamespaceTreeNode {...props} />;\n          },\n      },\n      filters: filtersSlot,\n      drawerWidgets: drawerWidgetSlot,\n    },\n    emptyMessage: 'Workspace is empty',\n    useComponents: () => {\n      const { lanesModel, loading: lanesLoading } = useLanes();\n      const viewedLaneId = lanesModel?.viewedLane?.id;\n      const defaultLane = lanesModel?.getDefaultLane();\n      const isViewingDefaultLane = viewedLaneId && defaultLane?.id.isEqual(viewedLaneId);\n\n      const { components: laneComponents = [], loading: laneCompsLoading } = useLaneComponents(viewedLaneId);\n      const { components: mainComponents = [], loading: mainCompsLoading } = useLaneComponents(\n        !isViewingDefaultLane ? defaultLane?.id : undefined\n      );\n\n      // lane components + main components\n      const components = isViewingDefaultLane ? laneComponents : mergeComponents(mainComponents, laneComponents);\n\n      return {\n        loading: lanesLoading || laneCompsLoading || mainCompsLoading,\n        components,\n      };\n    },\n  });\n\nfunction mergeComponents(mainComponents: ComponentModel[], laneComponents: ComponentModel[]): ComponentModel[] {\n  const mainComponentsThatAreNotOnLane = mainComponents.filter((mainComponent) => {\n    return !laneComponents.find(\n      (laneComponent) => laneComponent.id.toStringWithoutVersion() === mainComponent.id.toStringWithoutVersion()\n    );\n  });\n  return laneComponents.concat(mainComponentsThatAreNotOnLane);\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAOA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAWO,MAAMA,eAAe,GAAG,CAAC;EAAEC,WAAW;EAAEC,WAAW;EAAEC;AAAuC,CAAC,KAClG,KAAIC,+BAAgB,EAAC;EACnBC,KAAK,EAAE,CAAC;EACRC,EAAE,EAAE,6BAA6B;EACjCC,IAAI,EAAE,YAAY;EAClBC,OAAO,EAAE;IACPC,IAAI,EAAE;MACJC,OAAO,EAAET,WAAW;MACpBU,cAAc,EAAGC,YAAY,IAC3B,SAASC,QAAQ,CAACC,KAAiC,EAAE;QACnD,MAAMC,QAAQ,GAAGD,KAAK,CAACE,IAAI,CAACD,QAAQ;QAEpC,IAAI,CAACA,QAAQ,EAAE,oBAAO,+BAAC,+BAAa,+BAAKD,KAAK;UAAE,YAAY,EAAEF;QAAa,GAAG,CAAC,CAAC;;QAEhF,IAAIE,KAAK,CAACE,IAAI,CAACC,OAAO,YAAYC,8BAAY,EAAE,oBAAO,+BAAC,+BAAa,EAAKJ,KAAK,CAAI;QAEnF,oBAAO,+BAAC,mCAAiB,EAAKA,KAAK,CAAI;MACzC;IACJ,CAAC;IACDK,OAAO,EAAEjB,WAAW;IACpBkB,aAAa,EAAEjB;EACjB,CAAC;EACDkB,YAAY,EAAE,oBAAoB;EAClCC,aAAa,EAAE,MAAM;IAAA;IACnB,MAAM;MAAEC,UAAU;MAAEC,OAAO,EAAEC;IAAa,CAAC,GAAG,IAAAC,sBAAQ,GAAE;IACxD,MAAMC,YAAY,GAAGJ,UAAU,aAAVA,UAAU,gDAAVA,UAAU,CAAEK,UAAU,0DAAtB,sBAAwBtB,EAAE;IAC/C,MAAMuB,WAAW,GAAGN,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEO,cAAc,EAAE;IAChD,MAAMC,oBAAoB,GAAGJ,YAAY,KAAIE,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEvB,EAAE,CAAC0B,OAAO,CAACL,YAAY,CAAC;IAElF,MAAM;MAAEM,UAAU,EAAEC,cAAc,GAAG,EAAE;MAAEV,OAAO,EAAEW;IAAiB,CAAC,GAAG,IAAAC,gCAAiB,EAACT,YAAY,CAAC;IACtG,MAAM;MAAEM,UAAU,EAAEI,cAAc,GAAG,EAAE;MAAEb,OAAO,EAAEc;IAAiB,CAAC,GAAG,IAAAF,gCAAiB,EACtF,CAACL,oBAAoB,GAAGF,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAEvB,EAAE,GAAGiC,SAAS,CACpD;;IAED;IACA,MAAMN,UAAU,GAAGF,oBAAoB,GAAGG,cAAc,GAAGM,eAAe,CAACH,cAAc,EAAEH,cAAc,CAAC;IAE1G,OAAO;MACLV,OAAO,EAAEC,YAAY,IAAIU,gBAAgB,IAAIG,gBAAgB;MAC7DL;IACF,CAAC;EACH;AACF,CAAC,CAAC;AAAC;AAEL,SAASO,eAAe,CAACH,cAAgC,EAAEH,cAAgC,EAAoB;EAC7G,MAAMO,8BAA8B,GAAGJ,cAAc,CAACK,MAAM,CAAEC,aAAa,IAAK;IAC9E,OAAO,CAACT,cAAc,CAACU,IAAI,CACxBC,aAAa,IAAKA,aAAa,CAACvC,EAAE,CAACwC,sBAAsB,EAAE,KAAKH,aAAa,CAACrC,EAAE,CAACwC,sBAAsB,EAAE,CAC3G;EACH,CAAC,CAAC;EACF,OAAOZ,cAAc,CAACa,MAAM,CAACN,8BAA8B,CAAC;AAC9D"}
+{"version":3,"names":["workspaceDrawer","treeWidgets","filtersSlot","drawerWidgetSlot","overrideUseLanes","useLanesFromProps","useLanes","defaultUseLanesHook","ComponentsDrawer","order","id","name","plugins","tree","widgets","customRenderer","treeNodeSlot","TreeNode","props","children","node","payload","ScopePayload","filters","drawerWidgets","emptyMessage","useComponents","lanesModel","loading","lanesLoading","viewedLaneId","viewedLane","defaultLane","getDefaultLane","isViewingDefaultLane","isEqual","components","laneComponents","laneCompsLoading","useLaneComponents","mainComponents","mainCompsLoading","undefined","mergeComponents","mainComponentsThatAreNotOnLane","filter","mainComponent","find","laneComponent","toStringWithoutVersion","concat"],"sources":["workspace.ui.drawer.tsx"],"sourcesContent":["import React from 'react';\nimport { ComponentsDrawer, ComponentFiltersSlot, DrawerWidgetSlot } from '@teambit/component.ui.component-drawer';\nimport {\n  ComponentView,\n  NamespaceTreeNode,\n  PayloadType,\n  ScopePayload,\n  ScopeTreeNode,\n} from '@teambit/ui-foundation.ui.side-bar';\nimport { useLanes as defaultUseLanesHook } from '@teambit/lanes.hooks.use-lanes';\nimport { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';\nimport { TreeNodeProps } from '@teambit/design.ui.tree';\nimport { ComponentModel } from '@teambit/component';\nimport { LanesModel } from '@teambit/lanes.ui.models.lanes-model';\nimport { SidebarWidgetSlot } from './workspace.ui.runtime';\n\nexport type WorkspaceDrawerProps = {\n  treeWidgets: SidebarWidgetSlot;\n  filtersSlot: ComponentFiltersSlot;\n  drawerWidgetSlot: DrawerWidgetSlot;\n  overrideUseLanes?: () => { lanesModel?: LanesModel; loading?: boolean };\n};\n\nexport const workspaceDrawer = ({\n  treeWidgets,\n  filtersSlot,\n  drawerWidgetSlot,\n  overrideUseLanes: useLanesFromProps,\n}: WorkspaceDrawerProps) => {\n  const useLanes = useLanesFromProps || defaultUseLanesHook;\n\n  return new ComponentsDrawer({\n    order: 0,\n    id: 'workspace-components-drawer',\n    name: 'COMPONENTS',\n    plugins: {\n      tree: {\n        widgets: treeWidgets,\n        customRenderer: (treeNodeSlot) =>\n          function TreeNode(props: TreeNodeProps<PayloadType>) {\n            const children = props.node.children;\n\n            if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} useLanes={useLanes} />; // non collapse\n\n            if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;\n\n            return <NamespaceTreeNode {...props} />;\n          },\n      },\n      filters: filtersSlot,\n      drawerWidgets: drawerWidgetSlot,\n    },\n    emptyMessage: 'Workspace is empty',\n    useLanes,\n    useComponents: () => {\n      const { lanesModel, loading: lanesLoading } = useLanes();\n      const viewedLaneId = lanesModel?.viewedLane?.id;\n      const defaultLane = lanesModel?.getDefaultLane();\n      const isViewingDefaultLane = viewedLaneId && defaultLane?.id.isEqual(viewedLaneId);\n\n      const { components: laneComponents = [], loading: laneCompsLoading } = useLaneComponents(viewedLaneId);\n      const { components: mainComponents = [], loading: mainCompsLoading } = useLaneComponents(\n        !isViewingDefaultLane ? defaultLane?.id : undefined\n      );\n\n      // lane components + main components\n      const components = isViewingDefaultLane ? laneComponents : mergeComponents(mainComponents, laneComponents);\n\n      return {\n        loading: lanesLoading || laneCompsLoading || mainCompsLoading,\n        components,\n      };\n    },\n  });\n};\n\nfunction mergeComponents(mainComponents: ComponentModel[], laneComponents: ComponentModel[]): ComponentModel[] {\n  const mainComponentsThatAreNotOnLane = mainComponents.filter((mainComponent) => {\n    return !laneComponents.find(\n      (laneComponent) => laneComponent.id.toStringWithoutVersion() === mainComponent.id.toStringWithoutVersion()\n    );\n  });\n  return laneComponents.concat(mainComponentsThatAreNotOnLane);\n}\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "0.0.964",
+  "version": "0.0.966",
   "homepage": "https://bit.dev/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "0.0.964"
+    "version": "0.0.966"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -33,50 +33,51 @@
     "@teambit/design.ui.surfaces.menu.link-item": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
-    "@teambit/component": "0.0.964",
-    "@teambit/envs": "0.0.964",
+    "@teambit/component": "0.0.966",
+    "@teambit/envs": "0.0.966",
     "@teambit/bit-error": "0.0.402",
     "@teambit/component-id": "0.0.425",
-    "@teambit/lane-id": "0.0.164",
-    "@teambit/dependency-resolver": "0.0.964",
-    "@teambit/logger": "0.0.740",
-    "@teambit/scope": "0.0.964",
-    "@teambit/graph": "0.0.964",
-    "@teambit/cli": "0.0.647",
-    "@teambit/isolator": "0.0.964",
-    "@teambit/component-tree": "0.0.752",
+    "@teambit/lane-id": "0.0.166",
+    "@teambit/dependency-resolver": "0.0.966",
+    "@teambit/logger": "0.0.742",
+    "@teambit/scope": "0.0.966",
+    "@teambit/graph": "0.0.966",
+    "@teambit/cli": "0.0.649",
+    "@teambit/isolator": "0.0.966",
+    "@teambit/component-tree": "0.0.754",
     "@teambit/component.ui.component-status-resolver": "0.0.504",
-    "@teambit/lanes.hooks.use-lanes": "0.0.110",
+    "@teambit/lanes.hooks.use-lanes": "0.0.112",
     "@teambit/harmony.modules.resolved-component": "0.0.491",
-    "@teambit/compiler": "0.0.964",
-    "@teambit/graphql": "0.0.964",
-    "@teambit/aspect-loader": "0.0.964",
-    "@teambit/bundler": "0.0.964",
-    "@teambit/pubsub": "0.0.964",
-    "@teambit/ui": "0.0.964",
-    "@teambit/variants": "0.0.752",
-    "@teambit/component-issues": "0.0.85",
-    "@teambit/config": "0.0.660",
+    "@teambit/compiler": "0.0.966",
+    "@teambit/graphql": "0.0.966",
+    "@teambit/aspect-loader": "0.0.966",
+    "@teambit/bundler": "0.0.966",
+    "@teambit/pubsub": "0.0.966",
+    "@teambit/ui": "0.0.966",
+    "@teambit/variants": "0.0.754",
+    "@teambit/component-issues": "0.0.86",
+    "@teambit/config": "0.0.662",
     "@teambit/harmony.modules.requireable-component": "0.0.491",
     "@teambit/legacy-bit-id": "0.0.421",
     "@teambit/workspace.modules.match-pattern": "0.0.498",
-    "@teambit/component.ui.component-drawer": "0.0.205",
+    "@teambit/component.ui.component-drawer": "0.0.207",
     "@teambit/design.ui.tree": "0.0.16",
-    "@teambit/lanes.hooks.use-lane-components": "0.0.109",
-    "@teambit/ui-foundation.ui.side-bar": "0.0.722",
-    "@teambit/command-bar": "0.0.964",
-    "@teambit/component.ui.component-filters.component-filter-context": "0.0.79",
-    "@teambit/component.ui.component-filters.deprecate-filter": "0.0.79",
-    "@teambit/component.ui.component-filters.env-filter": "0.0.85",
-    "@teambit/component.ui.component-filters.show-main-filter": "0.0.72",
-    "@teambit/sidebar": "0.0.964",
+    "@teambit/lanes.hooks.use-lane-components": "0.0.111",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.74",
+    "@teambit/ui-foundation.ui.side-bar": "0.0.724",
+    "@teambit/command-bar": "0.0.966",
+    "@teambit/component.ui.component-filters.component-filter-context": "0.0.81",
+    "@teambit/component.ui.component-filters.deprecate-filter": "0.0.81",
+    "@teambit/component.ui.component-filters.env-filter": "0.0.87",
+    "@teambit/component.ui.component-filters.show-main-filter": "0.0.74",
+    "@teambit/sidebar": "0.0.966",
     "@teambit/ui-foundation.ui.main-dropdown": "0.0.497",
     "@teambit/ui-foundation.ui.menu": "0.0.497",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.501",
     "@teambit/ui-foundation.ui.tree.drawer": "0.0.511",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.500",
-    "@teambit/component-descriptor": "0.0.216",
-    "@teambit/deprecation": "0.0.964",
+    "@teambit/component-descriptor": "0.0.218",
+    "@teambit/deprecation": "0.0.966",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.206",
     "@teambit/ui-foundation.ui.corner": "0.0.507",
@@ -103,7 +104,7 @@
   "peerDependencies": {
     "react-router-dom": "^6.0.0",
     "@apollo/client": "^3.6.0",
-    "@teambit/legacy": "1.0.427",
+    "@teambit/legacy": "1.0.430",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/workspace.ui.drawer.tsx

@@ -7,20 +7,29 @@ import {
   ScopePayload,
   ScopeTreeNode,
 } from '@teambit/ui-foundation.ui.side-bar';
-import { useLanes } from '@teambit/lanes.hooks.use-lanes';
+import { useLanes as defaultUseLanesHook } from '@teambit/lanes.hooks.use-lanes';
 import { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';
 import { TreeNodeProps } from '@teambit/design.ui.tree';
 import { ComponentModel } from '@teambit/component';
+import { LanesModel } from '@teambit/lanes.ui.models.lanes-model';
 import { SidebarWidgetSlot } from './workspace.ui.runtime';
 
 export type WorkspaceDrawerProps = {
   treeWidgets: SidebarWidgetSlot;
   filtersSlot: ComponentFiltersSlot;
   drawerWidgetSlot: DrawerWidgetSlot;
+  overrideUseLanes?: () => { lanesModel?: LanesModel; loading?: boolean };
 };
 
-export const workspaceDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }: WorkspaceDrawerProps) =>
-  new ComponentsDrawer({
+export const workspaceDrawer = ({
+  treeWidgets,
+  filtersSlot,
+  drawerWidgetSlot,
+  overrideUseLanes: useLanesFromProps,
+}: WorkspaceDrawerProps) => {
+  const useLanes = useLanesFromProps || defaultUseLanesHook;
+
+  return new ComponentsDrawer({
     order: 0,
     id: 'workspace-components-drawer',
     name: 'COMPONENTS',
@@ -31,7 +40,7 @@ export const workspaceDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }:
           function TreeNode(props: TreeNodeProps<PayloadType>) {
             const children = props.node.children;
 
-            if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} />; // non collapse
+            if (!children) return <ComponentView {...props} treeNodeSlot={treeNodeSlot} useLanes={useLanes} />; // non collapse
 
             if (props.node.payload instanceof ScopePayload) return <ScopeTreeNode {...props} />;
 
@@ -42,6 +51,7 @@ export const workspaceDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }:
       drawerWidgets: drawerWidgetSlot,
     },
     emptyMessage: 'Workspace is empty',
+    useLanes,
     useComponents: () => {
       const { lanesModel, loading: lanesLoading } = useLanes();
       const viewedLaneId = lanesModel?.viewedLane?.id;
@@ -62,6 +72,7 @@ export const workspaceDrawer = ({ treeWidgets, filtersSlot, drawerWidgetSlot }:
       };
     },
   });
+};
 
 function mergeComponents(mainComponents: ComponentModel[], laneComponents: ComponentModel[]): ComponentModel[] {
   const mainComponentsThatAreNotOnLane = mainComponents.filter((mainComponent) => {