@teambit/lanes.ui.lane-overview 0.0.209 → 0.0.211

package/dist/empty-lane-overview.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { EmptyComponentGalleryProps } from '@teambit/ui-foundation.ui.empty-component-gallery';
 export declare type EmptyLaneOverviewProps = {} & EmptyComponentGalleryProps;
 /**
  * A component to show when the scope is empty
  */
-export declare function EmptyLaneOverview(props: EmptyLaneOverviewProps): JSX.Element;
+export declare function EmptyLaneOverview(props: EmptyLaneOverviewProps): React.JSX.Element;

package/dist/lane-overview.d.ts

@@ -1,7 +1,9 @@
-import { ComponentType } from 'react';
-import { LanesModel, LanesHost } from '@teambit/lanes.ui.models.lanes-model';
+import React, { ComponentType } from 'react';
+import { LaneModel, LanesModel, LanesHost } from '@teambit/lanes.ui.models.lanes-model';
 import { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';
 import { SlotRegistry } from '@teambit/harmony';
+import { ComponentModel } from '@teambit/component';
+import { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
 export declare type LaneOverviewLine = ComponentType;
 export declare type LaneOverviewLineSlot = SlotRegistry<LaneOverviewLine[]>;
 export declare type LaneOverviewProps = {
@@ -13,4 +15,13 @@ export declare type LaneOverviewProps = {
         loading?: boolean;
     };
 };
-export declare function LaneOverview({ routeSlot, overviewSlot, host, useLanes: useLanesFromProps, }: LaneOverviewProps): JSX.Element;
+export declare class LinkPlugin {
+    private currentLane?;
+    constructor(currentLane?: LaneModel);
+    link: (id: any) => any;
+}
+export declare function LaneOverview({ routeSlot, overviewSlot, host, useLanes: useLanesFromProps, }: LaneOverviewProps): React.JSX.Element;
+export declare function useCardPlugins({ compModelsById, currentLane, }: {
+    compModelsById: Map<string, ComponentModel>;
+    currentLane?: LaneModel;
+}): ComponentCardPluginType<PluginProps>[];

package/dist/lane-overview.js

@@ -26,19 +26,36 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LaneOverview = void 0;
+exports.useCardPlugins = exports.LaneOverview = exports.LinkPlugin = void 0;
 const react_1 = __importStar(require("react"));
 const lanes_ui_models_lanes_model_1 = require("@teambit/lanes.ui.models.lanes-model");
 const explorer_ui_gallery_component_grid_1 = require("@teambit/explorer.ui.gallery.component-grid");
 const ui_foundation_ui_react_router_slot_router_1 = require("@teambit/ui-foundation.ui.react-router.slot-router");
-const workspace_ui_workspace_component_card_1 = require("@teambit/workspace.ui.workspace-component-card");
 const lanes_hooks_use_lanes_1 = require("@teambit/lanes.hooks.use-lanes");
+const cloud_hooks_use_cloud_scopes_1 = require("@teambit/cloud.hooks.use-cloud-scopes");
 const lanes_hooks_use_lane_components_1 = require("@teambit/lanes.hooks.use-lane-components");
 const lodash_flatten_1 = __importDefault(require("lodash.flatten"));
 const scope_1 = require("@teambit/scope");
+const preview_ui_preview_placeholder_1 = require("@teambit/preview.ui.preview-placeholder");
+const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
+const component_id_1 = require("@teambit/component-id");
+const scopes_scope_id_1 = require("@teambit/scopes.scope-id");
+const workspace_ui_workspace_component_card_1 = require("@teambit/workspace.ui.workspace-component-card");
 const lanes_ui_lane_details_1 = require("@teambit/lanes.ui.lane-details");
 const empty_lane_overview_1 = require("./empty-lane-overview");
 const lane_overview_module_scss_1 = __importDefault(require("./lane-overview.module.scss"));
+class LinkPlugin {
+    constructor(currentLane) {
+        this.currentLane = currentLane;
+        this.link = (id) => {
+            var _a, _b;
+            if (!((_a = this.currentLane) === null || _a === void 0 ? void 0 : _a.id))
+                return id.fullName;
+            return lanes_ui_models_lanes_model_1.LanesModel.getLaneComponentUrl(id, (_b = this.currentLane) === null || _b === void 0 ? void 0 : _b.id);
+        };
+    }
+}
+exports.LinkPlugin = LinkPlugin;
 function LaneOverview({ routeSlot, overviewSlot, host, useLanes: useLanesFromProps = lanes_hooks_use_lanes_1.useLanes, }) {
     const { lanesModel } = useLanesFromProps();
     const overviewItems = (0, react_1.useMemo)(() => (0, lodash_flatten_1.default)(overviewSlot === null || overviewSlot === void 0 ? void 0 : overviewSlot.values()), [overviewSlot]);
@@ -51,16 +68,63 @@ function LaneOverview({ routeSlot, overviewSlot, host, useLanes: useLanesFromPro
 }
 exports.LaneOverview = LaneOverview;
 function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }) {
-    const { loading, components } = (0, lanes_hooks_use_lane_components_1.useLaneComponents)(currentLane.id);
+    const { loading, components, componentDescriptors } = (0, lanes_hooks_use_lane_components_1.useLaneComponents)(currentLane.id);
+    const uniqueScopes = new Set(components === null || components === void 0 ? void 0 : components.map((c) => c.id.scope));
+    const uniqueScopesArr = Array.from(uniqueScopes);
+    const { cloudScopes = [] } = (0, cloud_hooks_use_cloud_scopes_1.useCloudScopes)(uniqueScopesArr);
+    const cloudScopesById = new Map(cloudScopes.map((scope) => [scope.id.toString(), scope]));
+    const compDescriptorById = new Map(componentDescriptors === null || componentDescriptors === void 0 ? void 0 : componentDescriptors.map((comp) => [comp.id.toString(), comp]));
+    const compModelsById = new Map(components === null || components === void 0 ? void 0 : components.map((comp) => [comp.id.toString(), comp]));
+    const plugins = useCardPlugins({ compModelsById, currentLane });
     if (loading)
         return null;
     const ComponentCard = host === 'workspace'
-        ? ({ component }) => (react_1.default.createElement(workspace_ui_workspace_component_card_1.WorkspaceComponentCard, { component: component, componentUrl: lanes_ui_models_lanes_model_1.LanesModel.getLaneComponentUrl(component.id, currentLane.id) }))
-        : ({ component }) => (react_1.default.createElement(scope_1.ScopeComponentCard, { component: component, componentUrl: lanes_ui_models_lanes_model_1.LanesModel.getLaneComponentUrl(component.id, currentLane.id) }));
+        ? ({ component }) => {
+            var _a;
+            if ((_a = component.deprecation) === null || _a === void 0 ? void 0 : _a.isDeprecate)
+                return null;
+            const compDescriptor = compDescriptorById.get(component.id.toString());
+            if (!compDescriptor)
+                return null;
+            const cloudScope = cloudScopesById.get(component.id.scope);
+            const scope = cloudScope ||
+                (scopes_scope_id_1.ScopeID.isValid(component.id.scope) && { id: scopes_scope_id_1.ScopeID.fromString(component.id.scope) }) ||
+                undefined;
+            return (react_1.default.createElement(workspace_ui_workspace_component_card_1.WorkspaceComponentCard, { key: component.id.toString(), componentDescriptor: compDescriptor, component: component, plugins: plugins, scope: scope }));
+        }
+        : ({ component }) => {
+            const compDescriptor = compDescriptorById.get(component.id.toString());
+            return (react_1.default.createElement(scope_1.ScopeComponentCard, { key: component.id.toString(), component: component, plugins: plugins, componentDescriptor: compDescriptor }));
+        };
     return (react_1.default.createElement("div", { className: lane_overview_module_scss_1.default.container },
         react_1.default.createElement(lanes_ui_lane_details_1.LaneDetails, { className: lane_overview_module_scss_1.default.laneDetails, laneId: currentLane.id, description: '', componentCount: currentLane.components.length }),
-        react_1.default.createElement(explorer_ui_gallery_component_grid_1.ComponentGrid, null, components === null || components === void 0 ? void 0 : components.map((component, index) => (react_1.default.createElement(ComponentCard, { component: component, key: index })))),
+        react_1.default.createElement(explorer_ui_gallery_component_grid_1.ComponentGrid, { className: lane_overview_module_scss_1.default.cardGrid }, components === null || components === void 0 ? void 0 : components.map((component, index) => (react_1.default.createElement(ComponentCard, { component: component, key: index })))),
         routeSlot && react_1.default.createElement(ui_foundation_ui_react_router_slot_router_1.SlotRouter, { slot: routeSlot }),
         overviewItems.length > 0 && overviewItems.map((Item, index) => react_1.default.createElement(Item, { key: index }))));
 }
+function useCardPlugins({ compModelsById, currentLane, }) {
+    const plugins = react_1.default.useMemo(() => [
+        {
+            preview: function Preview({ component, shouldShowPreview }) {
+                const compModel = compModelsById.get(component.id.toString());
+                if (!compModel)
+                    return null;
+                return (react_1.default.createElement(preview_ui_preview_placeholder_1.PreviewPlaceholder, { componentDescriptor: component, component: compModel, shouldShowPreview: shouldShowPreview }));
+            },
+        },
+        {
+            previewBottomRight: function PreviewBottomRight({ component }) {
+                const env = component.get('teambit.envs/envs');
+                const envComponentId = (env === null || env === void 0 ? void 0 : env.id) ? component_id_1.ComponentID.fromString(env === null || env === void 0 ? void 0 : env.id) : undefined;
+                return (react_1.default.createElement("div", { className: lane_overview_module_scss_1.default.rightPreviewPlugins },
+                    react_1.default.createElement("div", { className: lane_overview_module_scss_1.default.badge },
+                        react_1.default.createElement(design_ui_tooltip_1.Tooltip, { delay: 300, content: envComponentId === null || envComponentId === void 0 ? void 0 : envComponentId.name },
+                            react_1.default.createElement("img", { src: env === null || env === void 0 ? void 0 : env.icon, className: lane_overview_module_scss_1.default.envIcon })))));
+            },
+        },
+        new LinkPlugin(currentLane),
+    ], [compModelsById.size, currentLane === null || currentLane === void 0 ? void 0 : currentLane.id.toString()]);
+    return plugins;
+}
+exports.useCardPlugins = useCardPlugins;
 //# sourceMappingURL=lane-overview.js.map

package/dist/lane-overview.js.map

@@ -1 +1 @@
-{"version":3,"file":"lane-overview.js","sourceRoot":"","sources":["../lane-overview.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AACtD,sFAAwF;AACxF,oGAA4E;AAC5E,kHAA2F;AAC3F,0GAAwF;AACxF,0EAA6E;AAC7E,8FAA6E;AAC7E,oEAAqC;AAErC,0CAAoD;AACpD,0EAA6D;AAC7D,+DAA0D;AAE1D,4FAAiD;AAYjD,SAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,QAAQ,EAAE,iBAAiB,GAAG,gCAAe,GAC3B;IAClB,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAC3C,MAAM,aAAa,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,IAAA,wBAAO,EAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAErF,MAAM,WAAW,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,CAAC;IAE3C,IAAI,CAAC,WAAW,IAAI,CAAC,WAAW,CAAC,EAAE;QAAE,OAAO,IAAI,CAAC;IACjD,IAAI,WAAW,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,8BAAC,uCAAiB,IAAC,IAAI,EAAE,WAAW,CAAC,EAAE,CAAC,IAAI,GAAI,CAAC;IAEjG,OAAO,CACL,8BAAC,uBAAuB,IACtB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC;AAtBD,oCAsBC;AASD,SAAS,uBAAuB,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,EAAgC;IAC5G,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,IAAA,mDAAiB,EAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAElE,IAAI,OAAO;QAAE,OAAO,IAAI,CAAC;IAEzB,MAAM,aAAa,GACjB,IAAI,KAAK,WAAW;QAClB,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACjB,8BAAC,8DAAsB,IACrB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,wCAAU,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAC,GAC1E,CACH;QACH,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CACjB,8BAAC,0BAAkB,IACjB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,wCAAU,CAAC,mBAAmB,CAAC,SAAS,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,CAAC,GAC1E,CACH,CAAC;IAER,OAAO,CACL,uCAAK,SAAS,EAAE,mCAAM,CAAC,SAAS;QAC9B,8BAAC,mCAAW,IACV,SAAS,EAAE,mCAAM,CAAC,WAAW,EAC7B,MAAM,EAAE,WAAW,CAAC,EAAE,EACtB,WAAW,EAAE,EAAE,EACf,cAAc,EAAE,WAAW,CAAC,UAAU,CAAC,MAAM,GAChC;QACf,8BAAC,kDAAa,QACX,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,8BAAC,aAAa,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,KAAK,GAAI,CACpD,CAAC,CACY;QACf,SAAS,IAAI,8BAAC,sDAAU,IAAC,IAAI,EAAE,SAAS,GAAI;QAC5C,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,8BAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,CAAC,CACjF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"lane-overview.js","sourceRoot":"","sources":["../lane-overview.tsx"],"names":[],"mappings":"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"}

package/dist/lane-overview.module.scss

@@ -8,3 +8,14 @@
 .laneDetails {
   padding-bottom: 32px;
 }
+
+.cardGrid {
+  grid-column-gap: 10px;
+  grid-gap: 32px 24px;
+  -moz-column-gap: 10px;
+  column-gap: 10px;
+  display: grid;
+  gap: 32px 24px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  max-width: 1280px;
+}

package/lane-overview.module.scss

@@ -8,3 +8,14 @@
 .laneDetails {
   padding-bottom: 32px;
 }
+
+.cardGrid {
+  grid-column-gap: 10px;
+  grid-gap: 32px 24px;
+  -moz-column-gap: 10px;
+  column-gap: 10px;
+  display: grid;
+  gap: 32px 24px;
+  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
+  max-width: 1280px;
+}

package/lane-overview.tsx

@@ -2,12 +2,19 @@ import React, { useMemo, ComponentType } from 'react';
 import { LaneModel, LanesModel, LanesHost } from '@teambit/lanes.ui.models.lanes-model';
 import { ComponentGrid } from '@teambit/explorer.ui.gallery.component-grid';
 import { RouteSlot, SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';
-import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
 import { useLanes as defaultUseLanes } from '@teambit/lanes.hooks.use-lanes';
+import { useCloudScopes } from '@teambit/cloud.hooks.use-cloud-scopes';
 import { useLaneComponents } from '@teambit/lanes.hooks.use-lane-components';
 import flatten from 'lodash.flatten';
 import { SlotRegistry } from '@teambit/harmony';
 import { ScopeComponentCard } from '@teambit/scope';
+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 { ScopeID } from '@teambit/scopes.scope-id';
+import { ComponentCardPluginType, PluginProps } from '@teambit/explorer.ui.component-card';
+import { WorkspaceComponentCard } from '@teambit/workspace.ui.workspace-component-card';
 import { LaneDetails } from '@teambit/lanes.ui.lane-details';
 import { EmptyLaneOverview } from './empty-lane-overview';
 
@@ -23,6 +30,15 @@ export type LaneOverviewProps = {
   useLanes?: () => { lanesModel?: LanesModel; loading?: boolean };
 };
 
+export class LinkPlugin {
+  constructor(private currentLane?: LaneModel) {}
+
+  link = (id) => {
+    if (!this.currentLane?.id) return id.fullName;
+    return LanesModel.getLaneComponentUrl(id, this.currentLane?.id);
+  };
+}
+
 export function LaneOverview({
   routeSlot,
   overviewSlot,
@@ -55,24 +71,49 @@ type LaneOverviewWithPreviewProps = {
 };
 
 function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }: LaneOverviewWithPreviewProps) {
-  const { loading, components } = useLaneComponents(currentLane.id);
+  const { loading, components, componentDescriptors } = useLaneComponents(currentLane.id);
+  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 compDescriptorById = new Map(componentDescriptors?.map((comp) => [comp.id.toString(), comp]));
+  const compModelsById = new Map(components?.map((comp) => [comp.id.toString(), comp]));
+  const plugins = useCardPlugins({ compModelsById, currentLane });
 
   if (loading) return null;
 
   const ComponentCard =
     host === 'workspace'
-      ? ({ component }) => (
-          <WorkspaceComponentCard
-            component={component}
-            componentUrl={LanesModel.getLaneComponentUrl(component.id, currentLane.id)}
-          />
-        )
-      : ({ component }) => (
-          <ScopeComponentCard
-            component={component}
-            componentUrl={LanesModel.getLaneComponentUrl(component.id, currentLane.id)}
-          />
-        );
+      ? ({ component }) => {
+          if (component.deprecation?.isDeprecate) return null;
+          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 (
+            <WorkspaceComponentCard
+              key={component.id.toString()}
+              componentDescriptor={compDescriptor}
+              component={component}
+              plugins={plugins}
+              scope={scope}
+            />
+          );
+        }
+      : ({ component }) => {
+          const compDescriptor = compDescriptorById.get(component.id.toString());
+          return (
+            <ScopeComponentCard
+              key={component.id.toString()}
+              component={component}
+              plugins={plugins}
+              componentDescriptor={compDescriptor}
+            />
+          );
+        };
 
   return (
     <div className={styles.container}>
@@ -82,7 +123,7 @@ function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }
         description={''}
         componentCount={currentLane.components.length}
       ></LaneDetails>
-      <ComponentGrid>
+      <ComponentGrid className={styles.cardGrid}>
         {components?.map((component, index) => (
           <ComponentCard component={component} key={index} />
         ))}
@@ -92,3 +133,49 @@ function LaneOverviewWithPreview({ currentLane, overviewItems, routeSlot, host }
     </div>
   );
 }
+
+export function useCardPlugins({
+  compModelsById,
+  currentLane,
+}: {
+  compModelsById: Map<string, ComponentModel>;
+  currentLane?: LaneModel;
+}): ComponentCardPluginType<PluginProps>[] {
+  const plugins = React.useMemo(
+    () => [
+      {
+        preview: function Preview({ component, shouldShowPreview }) {
+          const compModel = compModelsById.get(component.id.toString());
+          if (!compModel) return null;
+          return (
+            <PreviewPlaceholder
+              componentDescriptor={component}
+              component={compModel}
+              shouldShowPreview={shouldShowPreview}
+            />
+          );
+        },
+      },
+      {
+        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(currentLane),
+    ],
+    [compModelsById.size, currentLane?.id.toString()]
+  );
+
+  return plugins;
+}

package/package.json

@@ -1,25 +1,31 @@
 {
   "name": "@teambit/lanes.ui.lane-overview",
-  "version": "0.0.209",
+  "version": "0.0.211",
   "homepage": "https://bit.cloud/teambit/lanes/ui/lane-overview",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.lanes",
     "name": "ui/lane-overview",
-    "version": "0.0.209"
+    "version": "0.0.211"
   },
   "dependencies": {
     "lodash.flatten": "4.4.0",
     "core-js": "^3.0.0",
+    "@teambit/ui-foundation.ui.empty-component-gallery": "0.0.508",
+    "@teambit/component-id": "1.2.0",
+    "@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/harmony": "0.4.6",
-    "@teambit/ui-foundation.ui.empty-component-gallery": "0.0.508",
-    "@teambit/lanes.hooks.use-lane-components": "0.0.252",
-    "@teambit/lanes.hooks.use-lanes": "0.0.253",
-    "@teambit/lanes.ui.lane-details": "0.0.203",
-    "@teambit/lanes.ui.models.lanes-model": "0.0.206",
+    "@teambit/lanes.hooks.use-lanes": "0.0.254",
+    "@teambit/lanes.ui.lane-details": "0.0.204",
+    "@teambit/lanes.ui.models.lanes-model": "0.0.207",
+    "@teambit/scopes.scope-id": "0.0.7",
     "@teambit/ui-foundation.ui.react-router.slot-router": "0.0.506",
-    "@teambit/workspace.ui.workspace-component-card": "0.0.516"
+    "@teambit/cloud.hooks.use-cloud-scopes": "0.0.3",
+    "@teambit/lanes.hooks.use-lane-components": "0.0.255",
+    "@teambit/preview.ui.preview-placeholder": "0.0.508",
+    "@teambit/workspace.ui.workspace-component-card": "0.0.517"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -36,6 +42,8 @@
     "react-dom": "^16.8.0 || ^17.0.0"
   },
   "license": "Apache-2.0",
+  "optionalDependencies": {},
+  "peerDependenciesMeta": {},
   "private": false,
   "engines": {
     "node": ">=12.22.0"
@@ -54,4 +62,4 @@
     "angular",
     "angular-components"
   ]
-}
+}