@teambit/component.ui.version-dropdown 0.0.492 → 0.0.493

package/{__preview-1645365357220.js → __preview-1646295435675.js}

@@ -1,2 +1,2 @@
-export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.492/dist/version-dropdown.composition.js')]
-export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.492/dist/version-dropdown.docs.js')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.493/dist/version-dropdown.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.493/dist/version-dropdown.docs.js')]

package/dist/lane-info/index.d.ts

@@ -0,0 +1 @@
+export { LaneInfo, LaneInfoProps } from './lane-info';

package/dist/lane-info/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LaneInfo = void 0;
+var lane_info_1 = require("./lane-info");
+Object.defineProperty(exports, "LaneInfo", { enumerable: true, get: function () { return lane_info_1.LaneInfo; } });
+//# sourceMappingURL=index.js.map

package/dist/lane-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../lane-info/index.ts"],"names":[],"mappings":";;;AAAA,yCAAsD;AAA7C,qGAAA,QAAQ,OAAA"}

package/dist/lane-info/lane-info.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { LaneModel } from '@teambit/lanes.ui.lanes';
+export declare type LaneInfoProps = LaneModel & {
+    currentLane?: LaneModel;
+};
+export declare function LaneInfo({ id, url, currentLane }: LaneInfoProps): JSX.Element;

package/dist/lane-info/lane-info.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LaneInfo = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importDefault(require("react"));
+const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const lane_info_module_scss_1 = __importDefault(require("./lane-info.module.scss"));
+function LaneInfo({ id, url, currentLane }) {
+    const isCurrent = (currentLane === null || currentLane === void 0 ? void 0 : currentLane.id) === id;
+    return (react_1.default.createElement("div", { key: id },
+        react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: url, className: (0, classnames_1.default)(lane_info_module_scss_1.default.versionLine, lane_info_module_scss_1.default.versionRow, isCurrent && lane_info_module_scss_1.default.currentVersion) },
+            react_1.default.createElement("span", null,
+                react_1.default.createElement(evangelist_elements_icon_1.Icon, { className: lane_info_module_scss_1.default.laneIcon, of: "lane" }),
+                id))));
+}
+exports.LaneInfo = LaneInfo;
+//# sourceMappingURL=lane-info.js.map

package/dist/lane-info/lane-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lane-info.js","sourceRoot":"","sources":["../../lane-info/lane-info.tsx"],"names":[],"mappings":";;;;;;AACA,4DAAoC;AACpC,kDAA0B;AAC1B,gFAA4D;AAC5D,gFAAyD;AACzD,oFAA6C;AAI7C,SAAgB,QAAQ,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAiB;IAC9D,MAAM,SAAS,GAAG,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,EAAE,MAAK,EAAE,CAAC;IAEzC,OAAO,CACL,uCAAK,GAAG,EAAE,EAAE;QACV,8BAAC,kCAAO,IACN,IAAI,EAAE,GAAG,EACT,SAAS,EAAE,IAAA,oBAAU,EAAC,+BAAM,CAAC,WAAW,EAAE,+BAAM,CAAC,UAAU,EAAE,SAAS,IAAI,+BAAM,CAAC,cAAc,CAAC;YAEhG;gBACE,8BAAC,+BAAI,IAAC,SAAS,EAAE,+BAAM,CAAC,QAAQ,EAAE,EAAE,EAAC,MAAM,GAAQ;gBAClD,EAAE,CACE,CACC,CACN,CACP,CAAC;AACJ,CAAC;AAhBD,4BAgBC"}

package/dist/lane-info/lane-info.module.scss

@@ -0,0 +1,30 @@
+.versionLine {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 24px;
+  text-decoration: none;
+  color: var(--bit-text-color-heavy);
+  &:hover {
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+  &:last-child {
+    margin-bottom: 8px;
+  }
+  &.currentVersion {
+    background: var(--bit-accent-bg, #eceaff);
+  }
+  .label {
+    background-color: white;
+    padding: 0px 8px;
+  }
+}
+
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  .laneIcon {
+    padding: 0px 4px;
+  }
+}

package/dist/version-dropdown.composition.js

@@ -12,15 +12,15 @@ const version_dropdown_1 = require("./version-dropdown");
 const style = { display: 'flex', justifyContent: 'center', alignContent: 'center' };
 const VersionDropdownWithOneVersion = () => {
     return (react_1.default.createElement(documenter_theme_theme_compositions_1.ThemeCompositions, { style: style },
-        react_1.default.createElement(version_dropdown_1.VersionDropdown, { versions: ['0.1'], currentVersion: "0.1" })));
+        react_1.default.createElement(version_dropdown_1.VersionDropdown, { tags: [{ version: '0.1' }], currentVersion: "0.1" })));
 };
 exports.VersionDropdownWithOneVersion = VersionDropdownWithOneVersion;
 const VersionDropdownWithMultipleVersions = () => {
     const history = (0, history_1.createBrowserHistory)();
-    const versions = ['0.3', '0.2', '0.1'];
+    const versions = ['0.3', '0.2', '0.1'].map((version) => ({ version }));
     return (react_1.default.createElement(documenter_theme_theme_compositions_1.ThemeCompositions, { style: style },
         react_1.default.createElement(react_router_dom_1.Router, { history: history },
-            react_1.default.createElement(version_dropdown_1.VersionDropdown, { versions: versions, currentVersion: versions[0] }))));
+            react_1.default.createElement(version_dropdown_1.VersionDropdown, { tags: versions, currentVersion: versions[0].version }))));
 };
 exports.VersionDropdownWithMultipleVersions = VersionDropdownWithMultipleVersions;
 //# sourceMappingURL=version-dropdown.composition.js.map

package/dist/version-dropdown.composition.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-dropdown.composition.js","sourceRoot":"","sources":["../version-dropdown.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAA0C;AAC1C,qCAA+C;AAC/C,sGAAiF;AACjF,yDAAqD;AAErD,MAAM,KAAK,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,OAAO,CACL,8BAAC,uDAAiB,IAAC,KAAK,EAAE,KAAK;QAC7B,8BAAC,kCAAe,IAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,cAAc,EAAC,KAAK,GAAG,CACzC,CACrB,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,6BAA6B,iCAMxC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,MAAM,OAAO,GAAG,IAAA,8BAAoB,GAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;IACvC,OAAO,CACL,8BAAC,uDAAiB,IAAC,KAAK,EAAE,KAAK;QAC7B,8BAAC,yBAAM,IAAC,OAAO,EAAE,OAAO;YACtB,8BAAC,kCAAe,IAAC,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAI,CAC7D,CACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,mCAAmC,uCAU9C"}
+{"version":3,"file":"version-dropdown.composition.js","sourceRoot":"","sources":["../version-dropdown.composition.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAA0C;AAC1C,qCAA+C;AAC/C,sGAAiF;AACjF,yDAAqD;AAErD,MAAM,KAAK,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;AAE7E,MAAM,6BAA6B,GAAG,GAAG,EAAE;IAChD,OAAO,CACL,8BAAC,uDAAiB,IAAC,KAAK,EAAE,KAAK;QAC7B,8BAAC,kCAAe,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,cAAc,EAAC,KAAK,GAAG,CAClD,CACrB,CAAC;AACJ,CAAC,CAAC;AANW,QAAA,6BAA6B,iCAMxC;AAEK,MAAM,mCAAmC,GAAG,GAAG,EAAE;IACtD,MAAM,OAAO,GAAG,IAAA,8BAAoB,GAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;IACvE,OAAO,CACL,8BAAC,uDAAiB,IAAC,KAAK,EAAE,KAAK;QAC7B,8BAAC,yBAAM,IAAC,OAAO,EAAE,OAAO;YACtB,8BAAC,kCAAe,IAAC,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,OAAO,GAAI,CACjE,CACS,CACrB,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,mCAAmC,uCAU9C"}

package/dist/version-dropdown.d.ts

@@ -1,8 +1,18 @@
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { LaneModel } from '@teambit/lanes.ui.lanes';
 import React from 'react';
-declare type VersionDropdownProps = {
-    versions: string[];
+export declare const LOCAL_VERSION = "workspace";
+export declare type DropdownComponentVersion = Partial<LegacyComponentLog> & {
+    version: string;
+};
+export declare type VersionDropdownProps = {
+    tags: DropdownComponentVersion[];
+    snaps?: DropdownComponentVersion[];
+    lanes?: LaneModel[];
+    localVersion?: boolean;
     currentVersion?: string;
+    currentLane?: LaneModel;
     latestVersion?: string;
+    loading?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare function VersionDropdown({ versions, currentVersion, latestVersion }: VersionDropdownProps): JSX.Element;
-export {};
+export declare function VersionDropdown({ snaps, tags, lanes, currentVersion, latestVersion, localVersion, loading, currentLane, }: VersionDropdownProps): JSX.Element;

package/dist/version-dropdown.js

@@ -1,33 +1,63 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VersionDropdown = void 0;
+exports.VersionDropdown = exports.LOCAL_VERSION = void 0;
 const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
 const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
 const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
-const component_ui_version_label_1 = require("@teambit/component.ui.version-label");
 const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const ui_foundation_ui_use_box_tab_1 = require("@teambit/ui-foundation.ui.use-box.tab");
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const base_ui_loaders_skeleton_1 = require("@teambit/base-ui.loaders.skeleton");
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const version_dropdown_module_scss_1 = __importDefault(require("./version-dropdown.module.scss"));
-const LOCAL_VERSION = 'workspace';
-function VersionDropdown({ versions, currentVersion, latestVersion }) {
-    if (versions.length < 2) {
+const version_info_1 = require("./version-info");
+const lane_info_1 = require("./lane-info");
+exports.LOCAL_VERSION = 'workspace';
+function VersionDropdown({ snaps, tags, lanes, currentVersion, latestVersion, localVersion, loading, currentLane, }) {
+    const [key, setKey] = (0, react_1.useState)(0);
+    const singleVersion = (snaps || []).concat(tags).length < 2;
+    if (singleVersion && !loading) {
         return (react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.noVersions },
             react_1.default.createElement(VersionPlaceholder, { currentVersion: currentVersion })));
     }
     return (react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.versionDropdown },
-        react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { className: version_dropdown_module_scss_1.default.dropdown, dropClass: version_dropdown_module_scss_1.default.menu, placeholder: "", clickOutside: true, PlaceholderComponent: () => (react_1.default.createElement(VersionPlaceholder, { currentVersion: currentVersion, className: version_dropdown_module_scss_1.default.withVersions })) },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.title }, "Select version to view"),
-                react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.versionContainer }, versions.map((version, index) => {
-                    const isCurrent = version === currentVersion;
-                    return (react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: version === LOCAL_VERSION ? '?' : `?version=${version}`, key: index, className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionLine, isCurrent && version_dropdown_module_scss_1.default.currentVersion) },
-                        react_1.default.createElement("span", { className: version_dropdown_module_scss_1.default.version }, version),
-                        version === latestVersion && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { className: version_dropdown_module_scss_1.default.label, status: "latest" })));
-                }))))));
+        react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { className: version_dropdown_module_scss_1.default.dropdown, dropClass: version_dropdown_module_scss_1.default.menu, clickToggles: false, clickPlaceholderToggles: true, onChange: (_e, open) => open && setKey((x) => x + 1), placeholder: react_1.default.createElement(VersionPlaceholder, { currentVersion: currentVersion, className: version_dropdown_module_scss_1.default.withVersions }) },
+            loading && react_1.default.createElement(base_ui_loaders_skeleton_1.LineSkeleton, { className: version_dropdown_module_scss_1.default.loading, count: 6 }),
+            loading || (react_1.default.createElement(VersionMenu, { key: key, tags: tags, snaps: snaps, lanes: lanes, currentVersion: currentVersion, latestVersion: latestVersion, localVersion: localVersion, currentLane: currentLane })))));
 }
 exports.VersionDropdown = VersionDropdown;
 function VersionPlaceholder({ currentVersion, className }) {
@@ -35,4 +65,35 @@ function VersionPlaceholder({ currentVersion, className }) {
         react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, null, currentVersion),
         react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })));
 }
+const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'];
+function VersionMenu(_a) {
+    var { tags, snaps, lanes, currentVersion, localVersion, latestVersion, currentLane } = _a, rest = __rest(_a, ["tags", "snaps", "lanes", "currentVersion", "localVersion", "latestVersion", "currentLane"]);
+    const [activeTabIndex, setActiveTab] = (0, react_1.useState)(0);
+    const tabs = VERSION_TAB_NAMES.map((name) => {
+        switch (name) {
+            case 'SNAP':
+                return { name, payload: snaps || [] };
+            case 'LANE':
+                return { name, payload: lanes || [] };
+            default:
+                return { name, payload: tags || [] };
+        }
+    }).filter((tab) => tab.payload.length > 0);
+    return (react_1.default.createElement("div", Object.assign({}, rest),
+        react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.top },
+            react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.title },
+                react_1.default.createElement("span", null, "Switch to view tags, snaps, or lanes")),
+            localVersion && (react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: '?', className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionLine, version_dropdown_module_scss_1.default.versionRow, currentVersion === exports.LOCAL_VERSION && version_dropdown_module_scss_1.default.currentVersion) },
+                react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.version },
+                    react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 20, account: {}, className: version_dropdown_module_scss_1.default.versionUserAvatar }),
+                    react_1.default.createElement("span", { className: version_dropdown_module_scss_1.default.versionName }, exports.LOCAL_VERSION))))),
+        react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.tabs }, tabs.map(({ name }, index) => {
+            return (react_1.default.createElement(ui_foundation_ui_use_box_tab_1.Tab, { className: version_dropdown_module_scss_1.default.tab, key: name, isActive: activeTabIndex === index, onClick: () => setActiveTab(index) }, name));
+        })),
+        react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.versionContainer },
+            tabs[activeTabIndex].name === 'LANE' &&
+                tabs[activeTabIndex].payload.map((payload) => (react_1.default.createElement(lane_info_1.LaneInfo, Object.assign({ key: payload.id, currentLane: currentLane }, payload)))),
+            tabs[activeTabIndex].name !== 'LANE' &&
+                tabs[activeTabIndex].payload.map((payload) => (react_1.default.createElement(version_info_1.VersionInfo, Object.assign({ key: payload.hash, currentVersion: currentVersion, latestVersion: latestVersion }, payload)))))));
+}
 //# sourceMappingURL=version-dropdown.js.map

package/dist/version-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":";;;;;;AAAA,gFAAyD;AACzD,gFAA4D;AAC5D,wFAAiE;AACjE,oFAAmE;AACnE,kFAA8D;AAC9D,4DAAoC;AACpC,kDAA0B;AAE1B,kGAAoD;AAEpD,MAAM,aAAa,GAAG,WAAW,CAAC;AAQlC,SAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,aAAa,EAAwB;IAC/F,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;QACvB,OAAO,CACL,uCAAK,SAAS,EAAE,sCAAM,CAAC,UAAU;YAC/B,8BAAC,kBAAkB,IAAC,cAAc,EAAE,cAAc,GAAI,CAClD,CACP,CAAC;KACH;IAED,OAAO,CACL,uCAAK,SAAS,EAAE,sCAAM,CAAC,eAAe;QACpC,8BAAC,uCAAQ,IACP,SAAS,EAAE,sCAAM,CAAC,QAAQ,EAC1B,SAAS,EAAE,sCAAM,CAAC,IAAI,EACtB,WAAW,EAAC,EAAE,EACd,YAAY,QACZ,oBAAoB,EAAE,GAAG,EAAE,CAAC,CAC1B,8BAAC,kBAAkB,IAAC,cAAc,EAAE,cAAc,EAAE,SAAS,EAAE,sCAAM,CAAC,YAAY,GAAI,CACvF;YAED;gBACE,uCAAK,SAAS,EAAE,sCAAM,CAAC,KAAK,6BAA8B;gBAC1D,uCAAK,SAAS,EAAE,sCAAM,CAAC,gBAAgB,IACpC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;oBAC/B,MAAM,SAAS,GAAG,OAAO,KAAK,cAAc,CAAC;oBAE7C,OAAO,CACL,8BAAC,kCAAO,IACN,IAAI,EAAE,OAAO,KAAK,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,OAAO,EAAE,EAC7D,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,WAAW,EAAE,SAAS,IAAI,sCAAM,CAAC,cAAc,CAAC;wBAE7E,wCAAM,SAAS,EAAE,sCAAM,CAAC,OAAO,IAAG,OAAO,CAAQ;wBAChD,OAAO,KAAK,aAAa,IAAI,8BAAC,yCAAY,IAAC,SAAS,EAAE,sCAAM,CAAC,KAAK,EAAE,MAAM,EAAC,QAAQ,GAAG,CAE/E,CACX,CAAC;gBACJ,CAAC,CAAC,CACE,CACF,CACG,CACP,CACP,CAAC;AACJ,CAAC;AA3CD,0CA2CC;AAED,SAAS,kBAAkB,CAAC,EAAE,cAAc,EAAE,SAAS,EAAmD;IACxG,OAAO,CACL,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,WAAW,EAAE,SAAS,CAAC;QACvD,8BAAC,oCAAQ,QAAE,cAAc,CAAY;QACrC,8BAAC,+BAAI,IAAC,EAAE,EAAC,gBAAgB,GAAG,CACxB,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/version-dropdown.module.scss

@@ -6,7 +6,7 @@
     align-items: center;
   }
   .menu {
-    width: 300px;
+    width: 350px;
     padding: 0;
     right: 0;
     // top: 43px;
@@ -43,12 +43,9 @@
   &.currentVersion {
     background: var(--bit-accent-bg, #eceaff);
   }
-  .version {
-    margin-right: 16px;
-  }
   .label {
     background-color: white;
-    margin-right: 8px;
+    padding: 0px 8px;
   }
 }
 
@@ -90,3 +87,42 @@
     }
   }
 }
+
+.tabs {
+  display: flex;
+  padding: 0 24px;
+  line-height: 14px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  overflow-x: auto;
+  .tab {
+    font-weight: bold;
+    padding-top: 4px;
+    font-size: 12px;
+  }
+}
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .laneIcon {
+    padding: 0px 4px;
+  }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+  }
+  .versionName {
+    padding: 0px 8px;
+  }
+}
+.loading {
+  color: var(--bit-bg-heavy, #f6f6f6);
+}

package/dist/version-info/index.d.ts

@@ -0,0 +1 @@
+export { VersionInfo, VersionInfoProps } from './version-info';

package/dist/version-info/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionInfo = void 0;
+var version_info_1 = require("./version-info");
+Object.defineProperty(exports, "VersionInfo", { enumerable: true, get: function () { return version_info_1.VersionInfo; } });
+//# sourceMappingURL=index.js.map

package/dist/version-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../version-info/index.ts"],"names":[],"mappings":";;;AAAA,+CAA+D;AAAtD,2GAAA,WAAW,OAAA"}

package/dist/version-info/version-info.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DropdownComponentVersion } from '../version-dropdown';
+export declare type VersionInfoProps = DropdownComponentVersion & {
+    currentVersion?: string;
+    latestVersion?: string;
+};
+export declare function VersionInfo({ version, currentVersion, latestVersion, date, username, email }: VersionInfoProps): JSX.Element;

package/dist/version-info/version-info.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VersionInfo = void 0;
+const base_ui_routing_nav_link_1 = require("@teambit/base-ui.routing.nav-link");
+const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
+const component_ui_version_label_1 = require("@teambit/component.ui.version-label");
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const version_dropdown_1 = require("../version-dropdown");
+const version_info_module_scss_1 = __importDefault(require("./version-info.module.scss"));
+function VersionInfo({ version, currentVersion, latestVersion, date, username, email }) {
+    const isCurrent = version === currentVersion;
+    const author = (0, react_1.useMemo)(() => {
+        return {
+            displayName: username,
+            email,
+        };
+    }, [version]);
+    const timestamp = (0, react_1.useMemo)(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
+    return (react_1.default.createElement("div", { key: version },
+        react_1.default.createElement(base_ui_routing_nav_link_1.NavLink, { href: version === version_dropdown_1.LOCAL_VERSION ? '?' : `?version=${version}`, className: (0, classnames_1.default)(version_info_module_scss_1.default.versionLine, version_info_module_scss_1.default.versionRow, isCurrent && version_info_module_scss_1.default.currentVersion) },
+            react_1.default.createElement("div", { className: version_info_module_scss_1.default.version },
+                react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 20, account: author, className: version_info_module_scss_1.default.versionUserAvatar }),
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.versionName }, version),
+                version === latestVersion && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { className: version_info_module_scss_1.default.label, status: "latest" })),
+            react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { className: version_info_module_scss_1.default.versionTimestamp, date: timestamp }))));
+}
+exports.VersionInfo = VersionInfo;
+//# sourceMappingURL=version-info.js.map

package/dist/version-info/version-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAA4D;AAC5D,oEAAsD;AACtD,oFAAmE;AACnE,+CAAuC;AACvC,4DAAoC;AACpC,gEAAuD;AACvD,kFAA8D;AAE9D,0DAA8E;AAC9E,0FAAgD;AAOhD,SAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAoB;IAC7G,MAAM,SAAS,GAAG,OAAO,KAAK,cAAc,CAAC;IAC7C,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,OAAO;YACL,WAAW,EAAE,QAAQ;YACrB,KAAK;SACN,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,SAAS,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAE9G,OAAO,CACL,uCAAK,GAAG,EAAE,OAAO;QACf,8BAAC,kCAAO,IACN,IAAI,EAAE,OAAO,KAAK,gCAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,OAAO,EAAE,EAC7D,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAM,CAAC,WAAW,EAAE,kCAAM,CAAC,UAAU,EAAE,SAAS,IAAI,kCAAM,CAAC,cAAc,CAAC;YAEhG,uCAAK,SAAS,EAAE,kCAAM,CAAC,OAAO;gBAC5B,8BAAC,6BAAU,IAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,kCAAM,CAAC,iBAAiB,GAAI;gBAC9E,8BAAC,oCAAQ,IAAC,SAAS,EAAE,kCAAM,CAAC,WAAW,IAAG,OAAO,CAAY;gBAC5D,OAAO,KAAK,aAAa,IAAI,8BAAC,yCAAY,IAAC,SAAS,EAAE,kCAAM,CAAC,KAAK,EAAE,MAAM,EAAC,QAAQ,GAAG,CACnF;YACN,8BAAC,4BAAO,IAAC,SAAS,EAAE,kCAAM,CAAC,gBAAgB,EAAE,IAAI,EAAE,SAAS,GAAI,CACxD,CACN,CACP,CAAC;AACJ,CAAC;AA1BD,kCA0BC"}

package/dist/version-info/version-info.module.scss

@@ -0,0 +1,44 @@
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+  }
+  .versionName {
+    padding: 0px 8px;
+    align-self: center;
+    line-height: 14px;
+  }
+}
+.versionLine {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 24px;
+  text-decoration: none;
+  color: var(--bit-text-color-heavy);
+  &:hover {
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+  &:last-child {
+    margin-bottom: 8px;
+  }
+  &.currentVersion {
+    background: var(--bit-accent-bg, #eceaff);
+  }
+  .label {
+    background-color: white;
+    padding: 0px 8px;
+  }
+}

package/lane-info/index.ts

@@ -0,0 +1 @@
+export { LaneInfo, LaneInfoProps } from './lane-info';

package/lane-info/lane-info.module.scss

@@ -0,0 +1,30 @@
+.versionLine {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 24px;
+  text-decoration: none;
+  color: var(--bit-text-color-heavy);
+  &:hover {
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+  &:last-child {
+    margin-bottom: 8px;
+  }
+  &.currentVersion {
+    background: var(--bit-accent-bg, #eceaff);
+  }
+  .label {
+    background-color: white;
+    padding: 0px 8px;
+  }
+}
+
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+  .laneIcon {
+    padding: 0px 4px;
+  }
+}

package/lane-info/lane-info.tsx

@@ -0,0 +1,26 @@
+import { LaneModel } from '@teambit/lanes.ui.lanes';
+import classNames from 'classnames';
+import React from 'react';
+import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import styles from './lane-info.module.scss';
+
+export type LaneInfoProps = LaneModel & { currentLane?: LaneModel };
+
+export function LaneInfo({ id, url, currentLane }: LaneInfoProps) {
+  const isCurrent = currentLane?.id === id;
+
+  return (
+    <div key={id}>
+      <NavLink
+        href={url}
+        className={classNames(styles.versionLine, styles.versionRow, isCurrent && styles.currentVersion)}
+      >
+        <span>
+          <Icon className={styles.laneIcon} of="lane"></Icon>
+          {id}
+        </span>
+      </NavLink>
+    </div>
+  );
+}

package/package.json

@@ -1,21 +1,27 @@
 {
   "name": "@teambit/component.ui.version-dropdown",
-  "version": "0.0.492",
+  "version": "0.0.493",
   "homepage": "https://bit.dev/teambit/component/ui/version-dropdown",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/version-dropdown",
-    "version": "0.0.492"
+    "version": "0.0.493"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "core-js": "^3.0.0",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
     "@teambit/base-ui.routing.nav-link": "1.0.0",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/evangelist.surfaces.dropdown": "1.0.2",
+    "@teambit/design.ui.avatar": "0.0.494",
+    "@teambit/design.ui.styles.ellipsis": "0.0.347",
+    "@teambit/lanes.ui.lanes": "0.0.9",
+    "@teambit/legacy-component-log": "0.0.391",
+    "@teambit/ui-foundation.ui.use-box.tab": "0.0.105",
     "@teambit/component.ui.version-label": "0.0.491",
-    "@teambit/design.ui.styles.ellipsis": "0.0.347"
+    "@teambit/design.ui.time-ago": "0.0.351"
   },
   "devDependencies": {
     "history": "4.10.1",

package/version-dropdown.composition.tsx

@@ -9,18 +9,18 @@ const style = { display: 'flex', justifyContent: 'center', alignContent: 'center
 export const VersionDropdownWithOneVersion = () => {
   return (
     <ThemeCompositions style={style}>
-      <VersionDropdown versions={['0.1']} currentVersion="0.1" />
+      <VersionDropdown tags={[{ version: '0.1' }]} currentVersion="0.1" />
     </ThemeCompositions>
   );
 };
 
 export const VersionDropdownWithMultipleVersions = () => {
   const history = createBrowserHistory();
-  const versions = ['0.3', '0.2', '0.1'];
+  const versions = ['0.3', '0.2', '0.1'].map((version) => ({ version }));
   return (
     <ThemeCompositions style={style}>
       <Router history={history}>
-        <VersionDropdown versions={versions} currentVersion={versions[0]} />
+        <VersionDropdown tags={versions} currentVersion={versions[0].version} />
       </Router>
     </ThemeCompositions>
   );

package/version-dropdown.module.scss

@@ -6,7 +6,7 @@
     align-items: center;
   }
   .menu {
-    width: 300px;
+    width: 350px;
     padding: 0;
     right: 0;
     // top: 43px;
@@ -43,12 +43,9 @@
   &.currentVersion {
     background: var(--bit-accent-bg, #eceaff);
   }
-  .version {
-    margin-right: 16px;
-  }
   .label {
     background-color: white;
-    margin-right: 8px;
+    padding: 0px 8px;
   }
 }
 
@@ -90,3 +87,42 @@
     }
   }
 }
+
+.tabs {
+  display: flex;
+  padding: 0 24px;
+  line-height: 14px;
+  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  overflow-x: auto;
+  .tab {
+    font-weight: bold;
+    padding-top: 4px;
+    font-size: 12px;
+  }
+}
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .laneIcon {
+    padding: 0px 4px;
+  }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+  }
+  .versionName {
+    padding: 0px 8px;
+  }
+}
+.loading {
+  color: var(--bit-bg-heavy, #f6f6f6);
+}

package/version-dropdown.tsx

@@ -1,23 +1,50 @@
 import { Icon } from '@teambit/evangelist.elements.icon';
 import { NavLink } from '@teambit/base-ui.routing.nav-link';
 import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
-import { VersionLabel } from '@teambit/component.ui.version-label';
+
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import { Tab } from '@teambit/ui-foundation.ui.use-box.tab';
+import { LegacyComponentLog } from '@teambit/legacy-component-log';
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { LineSkeleton } from '@teambit/base-ui.loaders.skeleton';
+import { LaneModel } from '@teambit/lanes.ui.lanes';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useState } from 'react';
 
 import styles from './version-dropdown.module.scss';
+import { VersionInfo } from './version-info';
+import { LaneInfo } from './lane-info';
+
+export const LOCAL_VERSION = 'workspace';
 
-const LOCAL_VERSION = 'workspace';
+export type DropdownComponentVersion = Partial<LegacyComponentLog> & { version: string };
 
-type VersionDropdownProps = {
-  versions: string[];
+export type VersionDropdownProps = {
+  tags: DropdownComponentVersion[];
+  snaps?: DropdownComponentVersion[];
+  lanes?: LaneModel[];
+  localVersion?: boolean;
   currentVersion?: string;
+  currentLane?: LaneModel;
   latestVersion?: string;
+  loading?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
-export function VersionDropdown({ versions, currentVersion, latestVersion }: VersionDropdownProps) {
-  if (versions.length < 2) {
+export function VersionDropdown({
+  snaps,
+  tags,
+  lanes,
+  currentVersion,
+  latestVersion,
+  localVersion,
+  loading,
+  currentLane,
+}: VersionDropdownProps) {
+  const [key, setKey] = useState(0);
+
+  const singleVersion = (snaps || []).concat(tags).length < 2;
+
+  if (singleVersion && !loading) {
     return (
       <div className={styles.noVersions}>
         <VersionPlaceholder currentVersion={currentVersion} />
@@ -30,32 +57,24 @@ export function VersionDropdown({ versions, currentVersion, latestVersion }: Ver
       <Dropdown
         className={styles.dropdown}
         dropClass={styles.menu}
-        placeholder=""
-        clickOutside
-        PlaceholderComponent={() => (
-          <VersionPlaceholder currentVersion={currentVersion} className={styles.withVersions} />
-        )}
+        clickToggles={false}
+        clickPlaceholderToggles={true}
+        onChange={(_e, open) => open && setKey((x) => x + 1)} // to reset menu to initial state when toggling
+        placeholder={<VersionPlaceholder currentVersion={currentVersion} className={styles.withVersions} />}
       >
-        <div>
-          <div className={styles.title}>Select version to view</div>
-          <div className={styles.versionContainer}>
-            {versions.map((version, index) => {
-              const isCurrent = version === currentVersion;
-
-              return (
-                <NavLink
-                  href={version === LOCAL_VERSION ? '?' : `?version=${version}`}
-                  key={index}
-                  className={classNames(styles.versionLine, isCurrent && styles.currentVersion)}
-                >
-                  <span className={styles.version}>{version}</span>
-                  {version === latestVersion && <VersionLabel className={styles.label} status="latest" />}
-                  {/* {version === currentVersion && <VersionLabel className={styles.label} status="checked-out" />} */}
-                </NavLink>
-              );
-            })}
-          </div>
-        </div>
+        {loading && <LineSkeleton className={styles.loading} count={6} />}
+        {loading || (
+          <VersionMenu
+            key={key}
+            tags={tags}
+            snaps={snaps}
+            lanes={lanes}
+            currentVersion={currentVersion}
+            latestVersion={latestVersion}
+            localVersion={localVersion}
+            currentLane={currentLane}
+          />
+        )}
       </Dropdown>
     </div>
   );
@@ -69,3 +88,92 @@ function VersionPlaceholder({ currentVersion, className }: { currentVersion?: st
     </div>
   );
 }
+type VersionMenuProps = {
+  tags?: DropdownComponentVersion[];
+  snaps?: DropdownComponentVersion[];
+  lanes?: LaneModel[];
+  localVersion?: boolean;
+  currentVersion?: string;
+  latestVersion?: string;
+  currentLane?: LaneModel;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'] as const;
+
+function VersionMenu({
+  tags,
+  snaps,
+  lanes,
+  currentVersion,
+  localVersion,
+  latestVersion,
+  currentLane,
+  ...rest
+}: VersionMenuProps) {
+  const [activeTabIndex, setActiveTab] = useState<number>(0);
+
+  const tabs = VERSION_TAB_NAMES.map((name) => {
+    switch (name) {
+      case 'SNAP':
+        return { name, payload: snaps || [] };
+      case 'LANE':
+        return { name, payload: lanes || [] };
+      default:
+        return { name, payload: tags || [] };
+    }
+  }).filter((tab) => tab.payload.length > 0);
+
+  return (
+    <div {...rest}>
+      <div className={styles.top}>
+        <div className={styles.title}>
+          <span>Switch to view tags, snaps, or lanes</span>
+        </div>
+        {localVersion && (
+          <NavLink
+            href={'?'}
+            className={classNames(
+              styles.versionLine,
+              styles.versionRow,
+              currentVersion === LOCAL_VERSION && styles.currentVersion
+            )}
+          >
+            <div className={styles.version}>
+              <UserAvatar size={20} account={{}} className={styles.versionUserAvatar} />
+              <span className={styles.versionName}>{LOCAL_VERSION}</span>
+            </div>
+          </NavLink>
+        )}
+      </div>
+      <div className={styles.tabs}>
+        {tabs.map(({ name }, index) => {
+          return (
+            <Tab
+              className={styles.tab}
+              key={name}
+              isActive={activeTabIndex === index}
+              onClick={() => setActiveTab(index)}
+            >
+              {name}
+            </Tab>
+          );
+        })}
+      </div>
+      <div className={styles.versionContainer}>
+        {tabs[activeTabIndex].name === 'LANE' &&
+          tabs[activeTabIndex].payload.map((payload) => (
+            <LaneInfo key={payload.id} currentLane={currentLane} {...payload}></LaneInfo>
+          ))}
+        {tabs[activeTabIndex].name !== 'LANE' &&
+          tabs[activeTabIndex].payload.map((payload) => (
+            <VersionInfo
+              key={payload.hash}
+              currentVersion={currentVersion}
+              latestVersion={latestVersion}
+              {...payload}
+            ></VersionInfo>
+          ))}
+      </div>
+    </div>
+  );
+}

package/version-info/index.ts

@@ -0,0 +1 @@
+export { VersionInfo, VersionInfoProps } from './version-info';

package/version-info/version-info.module.scss

@@ -0,0 +1,44 @@
+.versionRow {
+  display: flex;
+  justify-content: space-between;
+
+  .versionTimestamp {
+    margin-right: 2px;
+  }
+  .versionUserAvatar {
+    padding: 0px 8px;
+  }
+  .version {
+    width: 60%;
+    display: flex;
+    flex-direction: row;
+    align-content: space-between;
+  }
+  .versionName {
+    padding: 0px 8px;
+    align-self: center;
+    line-height: 14px;
+  }
+}
+.versionLine {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  padding: 0 24px;
+  text-decoration: none;
+  color: var(--bit-text-color-heavy);
+  &:hover {
+    background-color: var(--bit-bg-heavy, #f6f6f6);
+  }
+  &:last-child {
+    margin-bottom: 8px;
+  }
+  &.currentVersion {
+    background: var(--bit-accent-bg, #eceaff);
+  }
+  .label {
+    background-color: white;
+    padding: 0px 8px;
+  }
+}

package/version-info/version-info.tsx

@@ -0,0 +1,43 @@
+import { NavLink } from '@teambit/base-ui.routing.nav-link';
+import { TimeAgo } from '@teambit/design.ui.time-ago';
+import { VersionLabel } from '@teambit/component.ui.version-label';
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+
+import { DropdownComponentVersion, LOCAL_VERSION } from '../version-dropdown';
+import styles from './version-info.module.scss';
+
+export type VersionInfoProps = DropdownComponentVersion & {
+  currentVersion?: string;
+  latestVersion?: string;
+};
+
+export function VersionInfo({ version, currentVersion, latestVersion, date, username, email }: VersionInfoProps) {
+  const isCurrent = version === currentVersion;
+  const author = useMemo(() => {
+    return {
+      displayName: username,
+      email,
+    };
+  }, [version]);
+
+  const timestamp = useMemo(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
+
+  return (
+    <div key={version}>
+      <NavLink
+        href={version === LOCAL_VERSION ? '?' : `?version=${version}`}
+        className={classNames(styles.versionLine, styles.versionRow, isCurrent && styles.currentVersion)}
+      >
+        <div className={styles.version}>
+          <UserAvatar size={20} account={author} className={styles.versionUserAvatar} />
+          <Ellipsis className={styles.versionName}>{version}</Ellipsis>
+          {version === latestVersion && <VersionLabel className={styles.label} status="latest" />}
+        </div>
+        <TimeAgo className={styles.versionTimestamp} date={timestamp} />
+      </NavLink>
+    </div>
+  );
+}