@teambit/ui-foundation.ui.side-bar 0.0.552 → 0.0.555

package/component-tree/component-view/component-view.module.scss

@@ -86,3 +86,8 @@
     margin-bottom: 4px;
   }
 }
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}

package/component-tree/component-view/component-view.tsx

@@ -3,9 +3,10 @@ import { NavLink } from '@teambit/base-ui.routing.nav-link';
 import { EnvIcon } from '@teambit/envs.ui.env-icon';
 import { DeprecationIcon } from '@teambit/component.ui.deprecation-icon';
 import classNames from 'classnames';
+import { ComponentID, ComponentModel } from '@teambit/component';
+import { ComponentUrl } from '@teambit/component.modules.component-url';
 import React, { useCallback, useContext } from 'react';
 import { Tooltip } from '@teambit/design.ui.tooltip';
-import { ComponentModel } from '@teambit/component';
 import { TreeContext } from '@teambit/base-ui.graph.tree.tree-context';
 import { indentClass } from '@teambit/base-ui.graph.tree.indent';
 import { TreeNodeProps } from '@teambit/base-ui.graph.tree.recursive-tree';
@@ -32,11 +33,21 @@ export function ComponentView(props: ComponentViewProps<PayloadType>) {
 
   if (!(component instanceof ComponentModel)) return null;
 
+  const envId = ComponentID.fromString(component.environment?.id as string);
+
   const envTooltip = (
-    <>
+    <NavLink
+      className={styles.envLink}
+      href={ComponentUrl.toUrl(envId, { includeVersion: true })}
+      external={true}
+      onClick={(event) => {
+        // do not trigger component selection
+        event.stopPropagation();
+      }}
+    >
       <div className={styles.componentEnvTitle}>Environment</div>
       <div>{component.environment?.id}</div>
-    </>
+    </NavLink>
   );
 
   return (

package/dist/component-tree/component-view/component-view.js

@@ -27,15 +27,16 @@ const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
 const envs_ui_env_icon_1 = require("@teambit/envs.ui.env-icon");
 const component_ui_deprecation_icon_1 = require("@teambit/component.ui.deprecation-icon");
 const classnames_1 = __importDefault(require("classnames"));
+const component_1 = require("@teambit/component");
+const component_modules_component_url_1 = require("@teambit/component.modules.component-url");
 const react_1 = __importStar(require("react"));
 const design_ui_tooltip_1 = require("@teambit/design.ui.tooltip");
-const component_1 = require("@teambit/component");
 const base_ui_graph_tree_tree_context_1 = require("@teambit/base-ui.graph.tree.tree-context");
 const base_ui_graph_tree_indent_1 = require("@teambit/base-ui.graph.tree.indent");
 const get_name_1 = require("../utils/get-name");
 const component_view_module_scss_1 = __importDefault(require("./component-view.module.scss"));
 function ComponentView(props) {
-    var _a;
+    var _a, _b;
     const { node } = props;
     const component = node.payload;
     const { onSelect } = (0, react_1.useContext)(base_ui_graph_tree_tree_context_1.TreeContext);
@@ -44,9 +45,13 @@ function ComponentView(props) {
     }, [onSelect, node.id]);
     if (!(component instanceof component_1.ComponentModel))
         return null;
-    const envTooltip = (react_1.default.createElement(react_1.default.Fragment, null,
+    const envId = component_1.ComponentID.fromString((_a = component.environment) === null || _a === void 0 ? void 0 : _a.id);
+    const envTooltip = (react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { className: component_view_module_scss_1.default.envLink, href: component_modules_component_url_1.ComponentUrl.toUrl(envId, { includeVersion: true }), external: true, onClick: (event) => {
+            // do not trigger component selection
+            event.stopPropagation();
+        } },
         react_1.default.createElement("div", { className: component_view_module_scss_1.default.componentEnvTitle }, "Environment"),
-        react_1.default.createElement("div", null, (_a = component.environment) === null || _a === void 0 ? void 0 : _a.id)));
+        react_1.default.createElement("div", null, (_b = component.environment) === null || _b === void 0 ? void 0 : _b.id)));
     return (react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: `/${component.id.fullName}`, className: (0, classnames_1.default)(base_ui_graph_tree_indent_1.indentClass, component_view_module_scss_1.default.component), activeClassName: component_view_module_scss_1.default.active, onClick: handleClick },
         react_1.default.createElement("div", { className: component_view_module_scss_1.default.left },
             react_1.default.createElement(design_ui_tooltip_1.Tooltip, { className: component_view_module_scss_1.default.componentEnvTooltip, placement: "right", content: envTooltip },

package/dist/component-tree/component-view/component-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-view.js","sourceRoot":"","sources":["../../../component-tree/component-view/component-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,gFAA4D;AAC5D,gEAAoD;AACpD,0FAAyE;AACzE,4DAAoC;AACpC,+CAAuD;AACvD,kEAAqD;AACrD,kDAAoD;AACpD,8FAAuE;AACvE,kFAAiE;AAGjE,gDAA4C;AAC5C,8FAAkD;AAMlD,SAAgB,aAAa,CAAC,KAAsC;;IAClE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAE/B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,kBAAU,EAAC,6CAAW,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,KAAsD,EAAE,EAAE;QACzD,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CACpB,CAAC;IAEF,IAAI,CAAC,CAAC,SAAS,YAAY,0BAAc,CAAC;QAAE,OAAO,IAAI,CAAC;IAExD,MAAM,UAAU,GAAG,CACjB;QACE,uCAAK,SAAS,EAAE,oCAAM,CAAC,iBAAiB,kBAAmB;QAC3D,2CAAM,MAAA,SAAS,CAAC,WAAW,0CAAE,EAAE,CAAO,CACrC,CACJ,CAAC;IAEF,OAAO,CACL,8BAAC,kCAAO,IACN,IAAI,EAAE,IAAI,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,EACjC,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAW,EAAE,oCAAM,CAAC,SAAS,CAAC,EACpD,eAAe,EAAE,oCAAM,CAAC,MAAM,EAC9B,OAAO,EAAE,WAAW;QAEpB,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI;YACzB,8BAAC,2BAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,mBAAmB,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,UAAU;gBACnF,8BAAC,0BAAO,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,oCAAM,CAAC,OAAO,GAAI,CACpD;YAEV,4CAAO,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,CAAQ,CAC3B;QAEN,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;YAC1B,8BAAC,+CAAe,IAAC,SAAS,EAAE,SAAS,GAAI;YAExC,KAAK,CAAC,YAAY;gBACjB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,8BAAC,QAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC,CACtG,CACE,CACX,CAAC;AACJ,CAAC;AA7CD,sCA6CC"}
+{"version":3,"file":"component-view.js","sourceRoot":"","sources":["../../../component-tree/component-view/component-view.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA,gFAA4D;AAC5D,gEAAoD;AACpD,0FAAyE;AACzE,4DAAoC;AACpC,kDAAiE;AACjE,8FAAwE;AACxE,+CAAuD;AACvD,kEAAqD;AACrD,8FAAuE;AACvE,kFAAiE;AAGjE,gDAA4C;AAC5C,8FAAkD;AAMlD,SAAgB,aAAa,CAAC,KAAsC;;IAClE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAE/B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,kBAAU,EAAC,6CAAW,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,CAAC,KAAsD,EAAE,EAAE;QACzD,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC,EACD,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CACpB,CAAC;IAEF,IAAI,CAAC,CAAC,SAAS,YAAY,0BAAc,CAAC;QAAE,OAAO,IAAI,CAAC;IAExD,MAAM,KAAK,GAAG,uBAAW,CAAC,UAAU,CAAC,MAAA,SAAS,CAAC,WAAW,0CAAE,EAAY,CAAC,CAAC;IAE1E,MAAM,UAAU,GAAG,CACjB,8BAAC,kCAAO,IACN,SAAS,EAAE,oCAAM,CAAC,OAAO,EACzB,IAAI,EAAE,8CAAY,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC,EACzD,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,qCAAqC;YACrC,KAAK,CAAC,eAAe,EAAE,CAAC;QAC1B,CAAC;QAED,uCAAK,SAAS,EAAE,oCAAM,CAAC,iBAAiB,kBAAmB;QAC3D,2CAAM,MAAA,SAAS,CAAC,WAAW,0CAAE,EAAE,CAAO,CAC9B,CACX,CAAC;IAEF,OAAO,CACL,8BAAC,kCAAO,IACN,IAAI,EAAE,IAAI,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,EACjC,SAAS,EAAE,IAAA,oBAAU,EAAC,uCAAW,EAAE,oCAAM,CAAC,SAAS,CAAC,EACpD,eAAe,EAAE,oCAAM,CAAC,MAAM,EAC9B,OAAO,EAAE,WAAW;QAEpB,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI;YACzB,8BAAC,2BAAO,IAAC,SAAS,EAAE,oCAAM,CAAC,mBAAmB,EAAE,SAAS,EAAC,OAAO,EAAC,OAAO,EAAE,UAAU;gBACnF,8BAAC,0BAAO,IAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,oCAAM,CAAC,OAAO,GAAI,CACpD;YAEV,4CAAO,IAAA,kBAAO,EAAC,IAAI,CAAC,EAAE,CAAC,CAAQ,CAC3B;QAEN,uCAAK,SAAS,EAAE,oCAAM,CAAC,KAAK;YAC1B,8BAAC,+CAAe,IAAC,SAAS,EAAE,SAAS,GAAI;YAExC,KAAK,CAAC,YAAY;gBACjB,KAAK,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,EAAE,CAAC,8BAAC,QAAQ,CAAC,MAAM,IAAC,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC,CACtG,CACE,CACX,CAAC;AACJ,CAAC;AAvDD,sCAuDC"}

package/dist/component-tree/component-view/component-view.module.scss

@@ -86,3 +86,8 @@
     margin-bottom: 4px;
   }
 }
+
+.envLink {
+  color: white;
+  text-decoration: none;
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/ui-foundation.ui.side-bar",
-  "version": "0.0.552",
+  "version": "0.0.555",
   "homepage": "https://bit.dev/teambit/ui-foundation/ui/side-bar",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.ui-foundation",
     "name": "ui/side-bar",
-    "version": "0.0.552"
+    "version": "0.0.555"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -21,7 +21,8 @@
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/design.ui.tree": "0.0.5",
-    "@teambit/lanes.ui.lanes": "0.0.55",
+    "@teambit/lanes.ui.lanes": "0.0.58",
+    "@teambit/component.modules.component-url": "0.0.124",
     "@teambit/component.ui.deprecation-icon": "0.0.493",
     "@teambit/design.ui.tooltip": "0.0.352",
     "@teambit/envs.ui.env-icon": "0.0.486"

package/tsconfig.json

@@ -14,6 +14,7 @@
     "declaration": true,
     "sourceMap": true,
     "skipLibCheck": true,
+    "experimentalDecorators": true,
     "outDir": "dist",
     "moduleResolution": "node",
     "esModuleInterop": true,