@teambit/component.ui.version-dropdown 0.0.548 → 0.0.551

package/dist/index.d.ts

@@ -1 +1 @@
-export { VersionDropdown } from './version-dropdown';
+export { VersionDropdown, DropdownComponentVersion } from './version-dropdown';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,uDAAqD;AAA5C,mHAAA,eAAe,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":";;;AAAA,uDAA+E;AAAtE,mHAAA,eAAe,OAAA"}

package/dist/version-dropdown-placeholder.d.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from 'react';
+import { DropdownComponentVersion } from './version-dropdown';
+export declare type VersionProps = {
+    tags: DropdownComponentVersion[];
+    snaps?: DropdownComponentVersion[];
+    currentVersion: string;
+    disabled?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function SimpleVersion({ currentVersion, className, disabled, tags, snaps }: VersionProps): JSX.Element;
+export declare function DetailedVersion({ currentVersion, className, disabled, snaps, tags }: VersionProps): JSX.Element;

package/dist/version-dropdown-placeholder.js

@@ -0,0 +1,70 @@
+"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.DetailedVersion = exports.SimpleVersion = void 0;
+const react_1 = __importStar(require("react"));
+const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const classnames_1 = __importDefault(require("classnames"));
+const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const design_ui_time_ago_1 = require("@teambit/design.ui.time-ago");
+const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
+const version_dropdown_placeholder_module_scss_1 = __importDefault(require("./version-dropdown-placeholder.module.scss"));
+const getVersionDetailFromTags = (version, tags) => tags.find((tag) => tag.tag === version);
+const getVersionDetailFromSnaps = (version, snaps) => (snaps || []).find((snap) => snap.hash === version);
+const getVersionDetails = (version, tags, snaps) => {
+    if (version === 'workspace' || version === 'new')
+        return { version };
+    return getVersionDetailFromTags(version, tags) || getVersionDetailFromSnaps(version, snaps);
+};
+function SimpleVersion({ currentVersion, className, disabled, tags, snaps }) {
+    const versionDetails = (0, react_1.useMemo)(() => getVersionDetails(currentVersion, tags, snaps), [currentVersion, tags, snaps]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.simple, className, disabled && version_dropdown_placeholder_module_scss_1.default.disabled) },
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.versionName, (versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.tag) && version_dropdown_placeholder_module_scss_1.default.tag, !(versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.tag) && version_dropdown_placeholder_module_scss_1.default.snap) }, currentVersion),
+        react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })));
+}
+exports.SimpleVersion = SimpleVersion;
+function DetailedVersion({ currentVersion, className, disabled, snaps, tags }) {
+    const versionDetails = (0, react_1.useMemo)(() => getVersionDetails(currentVersion, tags, snaps), [currentVersion, tags, snaps]);
+    const timestamp = (0, react_1.useMemo)(() => ((versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.date) ? new Date(parseInt(versionDetails.date)).toString() : new Date().toString()), [versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.date]);
+    const author = (0, react_1.useMemo)(() => {
+        return {
+            displayName: versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.username,
+            email: versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.email,
+        };
+    }, [versionDetails]);
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.detailed, className, disabled && version_dropdown_placeholder_module_scss_1.default.disabled) },
+        react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: author, className: version_dropdown_placeholder_module_scss_1.default.versionUserAvatar, showTooltip: true }),
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: (0, classnames_1.default)(version_dropdown_placeholder_module_scss_1.default.versionName, (versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.tag) && version_dropdown_placeholder_module_scss_1.default.tag, !(versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.tag) && version_dropdown_placeholder_module_scss_1.default.snap) }, currentVersion),
+        commitMessage(versionDetails === null || versionDetails === void 0 ? void 0 : versionDetails.message),
+        react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_dropdown_placeholder_module_scss_1.default.versionTimestamp },
+            react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: timestamp })),
+        react_1.default.createElement(evangelist_elements_icon_1.Icon, { of: "fat-arrow-down" })));
+}
+exports.DetailedVersion = DetailedVersion;
+function commitMessage(message) {
+    if (!message || message === '')
+        return react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_dropdown_placeholder_module_scss_1.default.emptyMessage }, "No commit message");
+    return react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_dropdown_placeholder_module_scss_1.default.commitMessage }, message);
+}
+//# sourceMappingURL=version-dropdown-placeholder.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"version-dropdown-placeholder.js","sourceRoot":"","sources":["../version-dropdown-placeholder.tsx"],"names":[],"mappings":"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"}

package/dist/version-dropdown-placeholder.module.scss

@@ -0,0 +1,96 @@
+.simple {
+  cursor: pointer;
+  border: 1px solid var(--bit-border-color, #babec9);
+  border-radius: 6px;
+  transition: background-color 300ms ease-in-out;
+  height: 30px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  user-select: none;
+
+  > div {
+    margin-right: 5px;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+
+  > div {
+    max-width: 80px;
+  }
+  &.disabled {
+    cursor: default;
+    background-color: #ededed;
+    > span {
+      display: none;
+    }
+  }
+  .versionName {
+    padding: 0px 8px;
+    &.tag {
+      min-width: fit-content;
+    }
+    &.snap {
+      min-width: 20%;
+    }
+  }
+}
+
+.detailed {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+
+  cursor: pointer;
+  > div {
+    margin-right: 5px;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+  > div {
+    max-width: 80px;
+  }
+  &.disabled {
+    cursor: default;
+    background-color: #ededed;
+    > span {
+      display: none;
+    }
+  }
+  .versionName {
+    padding: 0px 8px;
+    &.tag {
+      min-width: fit-content;
+    }
+    &.snap {
+      min-width: 20%;
+    }
+  }
+  .commitMessage,
+  .emptyMessage {
+    max-width: 50%;
+    padding: 0px 8px;
+  }
+  .emptyMessage {
+    font-style: italic;
+    color: var(--bit-text-color-light, #6c707c);
+  }
+  .author {
+    text-transform: capitalize;
+    min-width: fit-content;
+  }
+  .versionTimestamp {
+    min-width: fit-content;
+    margin-right: 2px;
+    text-align: right;
+  }
+}

package/dist/version-dropdown.d.ts

@@ -1,6 +1,6 @@
+import React from 'react';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
 import { LaneModel } from '@teambit/lanes.ui.lanes';
-import React from 'react';
 export declare const LOCAL_VERSION = "workspace";
 export declare type DropdownComponentVersion = Partial<LegacyComponentLog> & {
     version: string;
@@ -10,9 +10,15 @@ export declare type VersionDropdownProps = {
     snaps?: DropdownComponentVersion[];
     lanes?: LaneModel[];
     localVersion?: boolean;
-    currentVersion?: string;
+    currentVersion: string;
     currentLane?: LaneModel;
     latestVersion?: string;
     loading?: boolean;
+    overrideVersionHref?: (version: string) => string;
+    placeholderClassName?: string;
+    dropdownClassName?: string;
+    menuClassName?: string;
+    showVersionDetails?: boolean;
+    disabled?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
-export declare function VersionDropdown({ snaps, tags, lanes, currentVersion, latestVersion, localVersion, loading, currentLane, }: VersionDropdownProps): JSX.Element;
+export declare function VersionDropdown({ snaps, tags, lanes, currentVersion, latestVersion, localVersion, loading, currentLane, overrideVersionHref, className, placeholderClassName, dropdownClassName, menuClassName, showVersionDetails, disabled, ...rest }: VersionDropdownProps): JSX.Element;

package/dist/version-dropdown.js

@@ -34,40 +34,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VersionDropdown = exports.LOCAL_VERSION = void 0;
-const evangelist_elements_icon_1 = require("@teambit/evangelist.elements.icon");
+const react_1 = __importStar(require("react"));
 const design_ui_surfaces_menu_link_item_1 = require("@teambit/design.ui.surfaces.menu.link-item");
 const evangelist_surfaces_dropdown_1 = require("@teambit/evangelist.surfaces.dropdown");
-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 = __importStar(require("react"));
 const version_dropdown_module_scss_1 = __importDefault(require("./version-dropdown.module.scss"));
 const version_info_1 = require("./version-info");
 const lane_info_1 = require("./lane-info");
+const version_dropdown_placeholder_1 = require("./version-dropdown-placeholder");
 exports.LOCAL_VERSION = 'workspace';
-function VersionDropdown({ snaps, tags, lanes, currentVersion, latestVersion, localVersion, loading, currentLane, }) {
+function VersionDropdown(_a) {
+    var { snaps, tags, lanes, currentVersion, latestVersion, localVersion, loading, currentLane, overrideVersionHref, className, placeholderClassName, dropdownClassName, menuClassName, showVersionDetails, disabled } = _a, rest = __rest(_a, ["snaps", "tags", "lanes", "currentVersion", "latestVersion", "localVersion", "loading", "currentLane", "overrideVersionHref", "className", "placeholderClassName", "dropdownClassName", "menuClassName", "showVersionDetails", "disabled"]);
     const [key, setKey] = (0, react_1.useState)(0);
     const singleVersion = (snaps || []).concat(tags).length < 2 && !localVersion;
-    if (singleVersion && !loading) {
-        return (react_1.default.createElement("div", { className: version_dropdown_module_scss_1.default.noVersions },
-            react_1.default.createElement(VersionPlaceholder, { currentVersion: currentVersion })));
+    const placeholder = (showVersionDetails && (react_1.default.createElement(version_dropdown_placeholder_1.DetailedVersion, { disabled: disabled, snaps: snaps, tags: tags, className: placeholderClassName, currentVersion: currentVersion }))) || (react_1.default.createElement(version_dropdown_placeholder_1.SimpleVersion, { disabled: disabled, snaps: snaps, tags: tags, className: placeholderClassName, currentVersion: currentVersion }));
+    if (disabled || (singleVersion && !loading)) {
+        return react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.noVersions, className) }, placeholder);
     }
-    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, 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 }) },
+    return (react_1.default.createElement("div", Object.assign({}, rest, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.versionDropdown, className) }),
+        react_1.default.createElement(evangelist_surfaces_dropdown_1.Dropdown, { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.dropdown, dropdownClassName), dropClass: (0, classnames_1.default)(version_dropdown_module_scss_1.default.menu, menuClassName), clickToggles: false, clickPlaceholderToggles: true, onChange: (_e, open) => open && setKey((x) => x + 1), PlaceholderComponent: (_a) => {
+                var { children } = _a, other = __rest(_a, ["children"]);
+                return (react_1.default.createElement("div", Object.assign({}, other, { className: placeholderClassName }), children));
+            }, placeholder: placeholder },
             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 })))));
+            loading || (react_1.default.createElement(VersionMenu, { className: menuClassName, key: key, tags: tags, snaps: snaps, lanes: lanes, currentVersion: currentVersion, latestVersion: latestVersion, localVersion: localVersion, currentLane: currentLane, overrideVersionHref: overrideVersionHref, showVersionDetails: showVersionDetails })))));
 }
 exports.VersionDropdown = VersionDropdown;
-function VersionPlaceholder({ currentVersion, className }) {
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.placeholder, 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"]);
+    var { tags, snaps, lanes, currentVersion, localVersion, latestVersion, currentLane, overrideVersionHref, showVersionDetails } = _a, rest = __rest(_a, ["tags", "snaps", "lanes", "currentVersion", "localVersion", "latestVersion", "currentLane", "overrideVersionHref", "showVersionDetails"]);
     const tabs = VERSION_TAB_NAMES.map((name) => {
         switch (name) {
             case 'SNAP':
@@ -83,7 +81,7 @@ function VersionMenu(_a) {
             return tabs.findIndex((tab) => tab.name === 'LANE');
         if ((snaps || []).some((snap) => snap.version === currentVersion))
             return tabs.findIndex((tab) => tab.name === 'SNAP');
-        return tabs.findIndex((tab) => tab.name === 'TAG');
+        return 0;
     };
     const [activeTabIndex, setActiveTab] = (0, react_1.useState)(getActiveTabIndex());
     const multipleTabs = tabs.length > 1;
@@ -105,6 +103,6 @@ function VersionMenu(_a) {
             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.version, currentVersion: currentVersion, latestVersion: latestVersion }, payload)))))));
+                tabs[activeTabIndex].payload.map((payload) => (react_1.default.createElement(version_info_1.VersionInfo, Object.assign({ key: payload.version, currentVersion: currentVersion, latestVersion: latestVersion, overrideVersionHref: overrideVersionHref, showDetails: showVersionDetails }, 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":"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"}
+{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAwC;AACxC,kGAA0E;AAC1E,wFAAiE;AACjE,wFAA4D;AAE5D,gEAAuD;AACvD,gFAAiE;AAEjE,4DAAoC;AAEpC,kGAAoD;AACpD,iDAA6C;AAC7C,2CAAuC;AACvC,iFAAgF;AAEnE,QAAA,aAAa,GAAG,WAAW,CAAC;AAqBzC,SAAgB,eAAe,CAAC,EAiBT;QAjBS,EAC9B,KAAK,EACL,IAAI,EACJ,KAAK,EACL,cAAc,EACd,aAAa,EACb,YAAY,EACZ,OAAO,EACP,WAAW,EACX,mBAAmB,EACnB,SAAS,EACT,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,EACb,kBAAkB,EAClB,QAAQ,OAEa,EADlB,IAAI,cAhBuB,2OAiB/B,CADQ;IAEP,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAC;IAElC,MAAM,aAAa,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;IAC7E,MAAM,WAAW,GAAG,CAAC,kBAAkB,IAAI,CACzC,8BAAC,8CAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,oBAAoB,EAC/B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC,IAAI,CACJ,8BAAC,4CAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,oBAAoB,EAC/B,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;IACF,IAAI,QAAQ,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,CAAC,EAAE;QAC3C,OAAO,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,UAAU,EAAE,SAAS,CAAC,IAAG,WAAW,CAAO,CAAC;KACtF;IAED,OAAO,CACL,uDAAS,IAAI,IAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,eAAe,EAAE,SAAS,CAAC;QACrE,8BAAC,uCAAQ,IACP,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACzD,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,IAAI,EAAE,aAAa,CAAC,EACjD,YAAY,EAAE,KAAK,EACnB,uBAAuB,EAAE,IAAI,EAC7B,QAAQ,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EACpD,oBAAoB,EAAE,CAAC,EAAsB,EAAE,EAAE;oBAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,cAApB,YAAsB,CAAF;gBAAO,OAAA,CAChD,uDAAS,KAAK,IAAE,SAAS,EAAE,oBAAoB,KAC5C,QAAQ,CACL,CACP,CAAA;aAAA,EACD,WAAW,EAAE,WAAW;YAEvB,OAAO,IAAI,8BAAC,uCAAY,IAAC,SAAS,EAAE,sCAAM,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,GAAI;YAChE,OAAO,IAAI,CACV,8BAAC,WAAW,IACV,SAAS,EAAE,aAAa,EACxB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,YAAY,EAC1B,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,mBAAmB,EACxC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CACQ,CACP,CACP,CAAC;AACJ,CAAC;AA5ED,0CA4EC;AAcD,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAU,CAAC;AAE3D,SAAS,WAAW,CAAC,EAWF;QAXE,EACnB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,cAAc,EACd,YAAY,EACZ,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,kBAAkB,OAED,EADd,IAAI,cAVY,yIAWpB,CADQ;IAEP,MAAM,IAAI,GAAG,iBAAiB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QAC1C,QAAQ,IAAI,EAAE;YACZ,KAAK,MAAM;gBACT,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;YACxC,KAAK,MAAM;gBACT,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAAE,EAAE,CAAC;YACxC;gBACE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,IAAI,EAAE,EAAE,CAAC;SACxC;IACH,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAE3C,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,WAAW;YAAE,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;QACrE,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,cAAc,CAAC;YAC/D,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC;QACtD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAS,iBAAiB,EAAE,CAAC,CAAC;IAE7E,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IACrC,MAAM,OAAO,GAAG,YAAY;QAC1B,CAAC,CAAC,sCAAsC;QACxC,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,GAAG,CAAC;IAE1D,OAAO,CACL,uDAAS,IAAI;QACX,uCAAK,SAAS,EAAE,sCAAM,CAAC,GAAG;YACxB,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,cAAc,EAAE,sCAAM,CAAC,KAAK,CAAC,IAAG,OAAO,CAAO;YAC/E,YAAY,IAAI,CACf,8BAAC,gDAAY,IACX,IAAI,EAAE,GAAG,EACT,QAAQ,EAAE,GAAG,EAAE,CAAC,cAAc,KAAK,qBAAa,EAChD,SAAS,EAAE,IAAA,oBAAU,EAAC,sCAAM,CAAC,UAAU,EAAE,sCAAM,CAAC,YAAY,CAAC;gBAE7D,uCAAK,SAAS,EAAE,sCAAM,CAAC,OAAO;oBAC5B,8BAAC,6BAAU,IAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,sCAAM,CAAC,iBAAiB,GAAI;oBAC1E,wCAAM,SAAS,EAAE,sCAAM,CAAC,WAAW,IAAG,qBAAa,CAAQ,CACvD,CACO,CAChB,CACG;QACN,uCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,YAAY,IAAI,sCAAM,CAAC,IAAI,CAAC,IACpD,YAAY;YACX,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE;gBAC3B,OAAO,CACL,8BAAC,kCAAG,IACF,SAAS,EAAE,sCAAM,CAAC,GAAG,EACrB,GAAG,EAAE,IAAI,EACT,QAAQ,EAAE,cAAc,KAAK,KAAK,EAClC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,IAEjC,IAAI,CACD,CACP,CAAC;YACJ,CAAC,CAAC,CACA;QACN,uCAAK,SAAS,EAAE,sCAAM,CAAC,gBAAgB;YACpC,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,KAAK,MAAM;gBACnC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC5C,8BAAC,oBAAQ,kBAAC,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE,WAAW,EAAE,WAAW,IAAM,OAAO,EAAa,CAC9E,CAAC;YACH,IAAI,CAAC,cAAc,CAAC,CAAC,IAAI,KAAK,MAAM;gBACnC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAC5C,8BAAC,0BAAW,kBACV,GAAG,EAAE,OAAO,CAAC,OAAO,EACpB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,WAAW,EAAE,kBAAkB,IAC3B,OAAO,EACE,CAChB,CAAC,CACA,CACF,CACP,CAAC;AACJ,CAAC"}

package/dist/version-dropdown.module.scss

@@ -6,7 +6,6 @@
     align-items: center;
   }
   .menu {
-    width: 350px;
     padding: 0;
     right: 0;
     // top: 43px;
@@ -36,7 +35,7 @@
   justify-content: space-between;
   align-items: center;
   height: 40px;
-  padding: 0 24px;
+  padding: 0 16px;
 
   &.localVersion {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
@@ -59,24 +58,7 @@
   }
   .versionName {
     padding: 0px 8px;
-  }
-}
-
-.placeholder {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0 8px;
-  height: 30px;
-  border-radius: 6px;
-  user-select: none;
-  transition: background-color 300ms ease-in-out;
-  border: 1px solid var(--bit-border-color, #babec9);
-  > span {
-    display: none;
-  }
-  > div {
-    max-width: 80px;
+    min-width: fit-content;
   }
 }
 
@@ -107,6 +89,8 @@
   line-height: 14px;
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   overflow-x: auto;
+  margin-top: 8px;
+
   .tab {
     font-weight: bold;
     padding-top: 4px;

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

@@ -3,5 +3,7 @@ import { DropdownComponentVersion } from '../version-dropdown';
 export declare type VersionInfoProps = DropdownComponentVersion & {
     currentVersion?: string;
     latestVersion?: string;
+    overrideVersionHref?: (version: string) => string;
+    showDetails?: boolean;
 };
-export declare function VersionInfo({ version, currentVersion, latestVersion, date, username, email }: VersionInfoProps): JSX.Element;
+export declare function VersionInfo({ version, currentVersion, latestVersion, date, username, email, overrideVersionHref, showDetails, message, tag, }: VersionInfoProps): JSX.Element;

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

@@ -29,8 +29,9 @@ const component_ui_version_label_1 = require("@teambit/component.ui.version-labe
 const react_1 = __importStar(require("react"));
 const design_ui_avatar_1 = require("@teambit/design.ui.avatar");
 const design_ui_styles_ellipsis_1 = require("@teambit/design.ui.styles.ellipsis");
+const classnames_1 = __importDefault(require("classnames"));
 const version_info_module_scss_1 = __importDefault(require("./version-info.module.scss"));
-function VersionInfo({ version, currentVersion, latestVersion, date, username, email }) {
+function VersionInfo({ version, currentVersion, latestVersion, date, username, email, overrideVersionHref, showDetails, message, tag, }) {
     const isCurrent = version === currentVersion;
     const author = (0, react_1.useMemo)(() => {
         return {
@@ -43,16 +44,24 @@ function VersionInfo({ version, currentVersion, latestVersion, date, username, e
     (0, react_1.useEffect)(() => {
         var _a;
         if (isCurrent) {
-            (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
         }
     }, [isCurrent]);
+    const href = overrideVersionHref ? overrideVersionHref(version) : `?version=${version}`;
     return (react_1.default.createElement("div", { ref: currentVersionRef },
-        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { isActive: () => isCurrent, href: `?version=${version}`, className: version_info_module_scss_1.default.versionRow },
+        react_1.default.createElement(design_ui_surfaces_menu_link_item_1.MenuLinkItem, { isActive: () => isCurrent, href: href, className: version_info_module_scss_1.default.versionRow },
             react_1.default.createElement("div", { className: version_info_module_scss_1.default.version },
                 react_1.default.createElement(design_ui_avatar_1.UserAvatar, { size: 24, account: author, className: version_info_module_scss_1.default.versionUserAvatar, showTooltip: true }),
-                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 }))));
+                react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: (0, classnames_1.default)(version_info_module_scss_1.default.versionName, tag && version_info_module_scss_1.default.tag, !tag && version_info_module_scss_1.default.snap) }, version),
+                version === latestVersion && react_1.default.createElement(component_ui_version_label_1.VersionLabel, { className: version_info_module_scss_1.default.label, status: "latest" }),
+                showDetails && commitMessage(message)),
+            react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.versionTimestamp },
+                react_1.default.createElement(design_ui_time_ago_1.TimeAgo, { date: timestamp })))));
 }
 exports.VersionInfo = VersionInfo;
+function commitMessage(message) {
+    if (!message || message === '')
+        return react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.emptyMessage }, "No commit message");
+    return react_1.default.createElement(design_ui_styles_ellipsis_1.Ellipsis, { className: version_info_module_scss_1.default.commitMessage }, message);
+}
 //# sourceMappingURL=version-info.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kGAA0E;AAC1E,oEAAsD;AACtD,oFAAmE;AACnE,+CAA0D;AAC1D,gEAAuD;AACvD,kFAA8D;AAG9D,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;IAC9G,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,EAAE,CAAC;SAC7C;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB;QACzB,8BAAC,gDAAY,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,OAAO,EAAE,EAAE,SAAS,EAAE,kCAAM,CAAC,UAAU;YAChG,uCAAK,SAAS,EAAE,kCAAM,CAAC,OAAO;gBAC5B,8BAAC,6BAAU,IAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,kCAAM,CAAC,iBAAiB,EAAE,WAAW,EAAE,IAAI,GAAI;gBACjG,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,CACnD,CACX,CACP,CAAC;AACJ,CAAC;AA7BD,kCA6BC"}
+{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kGAA0E;AAC1E,oEAAsD;AACtD,oFAAmE;AACnE,+CAA0D;AAC1D,gEAAuD;AACvD,kFAA8D;AAC9D,4DAAoC;AAGpC,0FAAgD;AAShD,SAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,cAAc,EACd,aAAa,EACb,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,mBAAmB,EACnB,WAAW,EACX,OAAO,EACP,GAAG,GACc;IACjB,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;IAC9G,MAAM,iBAAiB,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACvD,IAAA,iBAAS,EAAC,GAAG,EAAE;;QACb,IAAI,SAAS,EAAE;YACb,MAAA,iBAAiB,CAAC,OAAO,0CAAE,cAAc,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;SACrF;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,IAAI,GAAG,mBAAmB,CAAC,CAAC,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,YAAY,OAAO,EAAE,CAAC;IAExF,OAAO,CACL,uCAAK,GAAG,EAAE,iBAAiB;QACzB,8BAAC,gDAAY,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,kCAAM,CAAC,UAAU;YAC/E,uCAAK,SAAS,EAAE,kCAAM,CAAC,OAAO;gBAC5B,8BAAC,6BAAU,IAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,kCAAM,CAAC,iBAAiB,EAAE,WAAW,EAAE,IAAI,GAAI;gBACjG,8BAAC,oCAAQ,IAAC,SAAS,EAAE,IAAA,oBAAU,EAAC,kCAAM,CAAC,WAAW,EAAE,GAAG,IAAI,kCAAM,CAAC,GAAG,EAAE,CAAC,GAAG,IAAI,kCAAM,CAAC,IAAI,CAAC,IACxF,OAAO,CACC;gBACV,OAAO,KAAK,aAAa,IAAI,8BAAC,yCAAY,IAAC,SAAS,EAAE,kCAAM,CAAC,KAAK,EAAE,MAAM,EAAC,QAAQ,GAAG;gBACtF,WAAW,IAAI,aAAa,CAAC,OAAO,CAAC,CAClC;YACN,8BAAC,oCAAQ,IAAC,SAAS,EAAE,kCAAM,CAAC,gBAAgB;gBAC1C,8BAAC,4BAAO,IAAC,IAAI,EAAE,SAAS,GAAI,CACnB,CACE,CACX,CACP,CAAC;AACJ,CAAC;AA/CD,kCA+CC;AAED,SAAS,aAAa,CAAC,OAAgB;IACrC,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,EAAE;QAAE,OAAO,8BAAC,oCAAQ,IAAC,SAAS,EAAE,kCAAM,CAAC,YAAY,wBAA8B,CAAC;IAC9G,OAAO,8BAAC,oCAAQ,IAAC,SAAS,EAAE,kCAAM,CAAC,aAAa,IAAG,OAAO,CAAY,CAAC;AACzE,CAAC"}

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

@@ -3,25 +3,42 @@
   justify-content: space-between;
   align-items: center;
   height: 40px;
-  padding: 0 24px;
-
-  .versionTimestamp {
-    margin-right: 2px;
-  }
-  .versionUserAvatar {
-    padding: 0px 8px;
-  }
-  .laneIcon {
-    padding: 0px 4px;
-  }
-  .version {
-    width: 60%;
-    display: flex;
-    flex-direction: row;
-    align-content: space-between;
-    align-items: center;
+  padding: 0 16px;
+}
+.versionTimestamp {
+  min-width: fit-content;
+  margin-right: 2px;
+  text-align: right;
+}
+.versionUserAvatar {
+  padding: 0px 8px;
+}
+.laneIcon {
+  padding: 0px 4px;
+}
+.version {
+  max-width: 70%;
+  display: flex;
+  flex-direction: row;
+  align-content: space-between;
+  align-items: center;
+}
+.versionName {
+  padding: 0px 8px;
+  &.tag {
+    min-width: fit-content;
   }
-  .versionName {
-    padding: 0px 8px;
+  &.snap {
+    min-width: 20%;
   }
 }
+
+.commitMessage,
+.emptyMessage {
+  min-width: 50%;
+  padding: 0px 8px;
+}
+.emptyMessage {
+  font-style: italic;
+  color: var(--bit-text-color-light, #6c707c);
+}

package/index.ts

@@ -1 +1 @@
-export { VersionDropdown } from './version-dropdown';
+export { VersionDropdown, DropdownComponentVersion } from './version-dropdown';

package/package.json

@@ -1,34 +1,34 @@
 {
   "name": "@teambit/component.ui.version-dropdown",
-  "version": "0.0.548",
+  "version": "0.0.551",
   "homepage": "https://bit.dev/teambit/component/ui/version-dropdown",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/version-dropdown",
-    "version": "0.0.548"
+    "version": "0.0.551"
   },
   "dependencies": {
     "classnames": "2.2.6",
     "core-js": "^3.0.0",
-    "@teambit/base-ui.loaders.skeleton": "1.0.1",
     "@teambit/design.ui.avatar": "0.1.2",
-    "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
     "@teambit/evangelist.elements.icon": "1.0.2",
+    "@teambit/base-ui.loaders.skeleton": "1.0.1",
+    "@teambit/design.ui.surfaces.menu.link-item": "0.0.379",
     "@teambit/evangelist.surfaces.dropdown": "1.0.2",
     "@teambit/design.ui.styles.ellipsis": "0.0.347",
-    "@teambit/lanes.ui.lanes": "0.0.62",
+    "@teambit/design.ui.time-ago": "0.0.352",
+    "@teambit/lanes.ui.lanes": "0.0.64",
     "@teambit/legacy-component-log": "0.0.392",
     "@teambit/ui-foundation.ui.use-box.tab": "0.0.105",
-    "@teambit/component.ui.version-label": "0.0.493",
-    "@teambit/design.ui.time-ago": "0.0.352"
+    "@teambit/component.ui.version-label": "0.0.493"
   },
   "devDependencies": {
+    "@types/classnames": "2.2.11",
     "@types/react": "^17.0.8",
     "@testing-library/react": "11.2.6",
     "chai": "4.3.0",
     "@types/chai": "4.2.15",
-    "@types/classnames": "2.2.11",
     "@types/mocha": "9.1.0",
     "@types/testing-library__jest-dom": "5.9.5",
     "@babel/runtime": "7.12.18",

package/{preview-1654226751250.js → preview-1654658836872.js}

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

package/version-dropdown-placeholder.module.scss

@@ -0,0 +1,96 @@
+.simple {
+  cursor: pointer;
+  border: 1px solid var(--bit-border-color, #babec9);
+  border-radius: 6px;
+  transition: background-color 300ms ease-in-out;
+  height: 30px;
+  padding: 0 8px;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  user-select: none;
+
+  > div {
+    margin-right: 5px;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+
+  > div {
+    max-width: 80px;
+  }
+  &.disabled {
+    cursor: default;
+    background-color: #ededed;
+    > span {
+      display: none;
+    }
+  }
+  .versionName {
+    padding: 0px 8px;
+    &.tag {
+      min-width: fit-content;
+    }
+    &.snap {
+      min-width: 20%;
+    }
+  }
+}
+
+.detailed {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 0 8px;
+  height: 30px;
+  border-radius: 6px;
+  user-select: none;
+  transition: background-color 300ms ease-in-out;
+  border: 1px solid var(--bit-border-color, #babec9);
+
+  cursor: pointer;
+  > div {
+    margin-right: 5px;
+  }
+  &:hover {
+    background-color: var(--bit-bg-heavy);
+  }
+  > div {
+    max-width: 80px;
+  }
+  &.disabled {
+    cursor: default;
+    background-color: #ededed;
+    > span {
+      display: none;
+    }
+  }
+  .versionName {
+    padding: 0px 8px;
+    &.tag {
+      min-width: fit-content;
+    }
+    &.snap {
+      min-width: 20%;
+    }
+  }
+  .commitMessage,
+  .emptyMessage {
+    max-width: 50%;
+    padding: 0px 8px;
+  }
+  .emptyMessage {
+    font-style: italic;
+    color: var(--bit-text-color-light, #6c707c);
+  }
+  .author {
+    text-transform: capitalize;
+    min-width: fit-content;
+  }
+  .versionTimestamp {
+    min-width: fit-content;
+    margin-right: 2px;
+    text-align: right;
+  }
+}

package/version-dropdown-placeholder.tsx

@@ -0,0 +1,83 @@
+import React, { HTMLAttributes, useMemo } from 'react';
+import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import classNames from 'classnames';
+import { Icon } from '@teambit/evangelist.elements.icon';
+import { TimeAgo } from '@teambit/design.ui.time-ago';
+import { UserAvatar } from '@teambit/design.ui.avatar';
+import { DropdownComponentVersion } from './version-dropdown';
+
+import styles from './version-dropdown-placeholder.module.scss';
+
+export type VersionProps = {
+  tags: DropdownComponentVersion[];
+  snaps?: DropdownComponentVersion[];
+  currentVersion: string;
+  disabled?: boolean;
+} & HTMLAttributes<HTMLDivElement>;
+
+const getVersionDetailFromTags = (version, tags) => tags.find((tag) => tag.tag === version);
+const getVersionDetailFromSnaps = (version, snaps) => (snaps || []).find((snap) => snap.hash === version);
+const getVersionDetails = (version, tags, snaps) => {
+  if (version === 'workspace' || version === 'new') return { version };
+  return getVersionDetailFromTags(version, tags) || getVersionDetailFromSnaps(version, snaps);
+};
+
+export function SimpleVersion({ currentVersion, className, disabled, tags, snaps }: VersionProps) {
+  const versionDetails = useMemo(() => getVersionDetails(currentVersion, tags, snaps), [currentVersion, tags, snaps]);
+
+  return (
+    <div className={classNames(styles.simple, className, disabled && styles.disabled)}>
+      <Ellipsis
+        className={classNames(
+          styles.versionName,
+          versionDetails?.tag && styles.tag,
+          !versionDetails?.tag && styles.snap
+        )}
+      >
+        {currentVersion}
+      </Ellipsis>
+      <Icon of="fat-arrow-down" />
+    </div>
+  );
+}
+
+export function DetailedVersion({ currentVersion, className, disabled, snaps, tags }: VersionProps) {
+  const versionDetails = useMemo(() => getVersionDetails(currentVersion, tags, snaps), [currentVersion, tags, snaps]);
+
+  const timestamp = useMemo(
+    () => (versionDetails?.date ? new Date(parseInt(versionDetails.date)).toString() : new Date().toString()),
+    [versionDetails?.date]
+  );
+
+  const author = useMemo(() => {
+    return {
+      displayName: versionDetails?.username,
+      email: versionDetails?.email,
+    };
+  }, [versionDetails]);
+
+  return (
+    <div className={classNames(styles.detailed, className, disabled && styles.disabled)}>
+      <UserAvatar size={24} account={author} className={styles.versionUserAvatar} showTooltip={true} />
+      <Ellipsis
+        className={classNames(
+          styles.versionName,
+          versionDetails?.tag && styles.tag,
+          !versionDetails?.tag && styles.snap
+        )}
+      >
+        {currentVersion}
+      </Ellipsis>
+      {commitMessage(versionDetails?.message)}
+      <Ellipsis className={styles.versionTimestamp}>
+        <TimeAgo date={timestamp} />
+      </Ellipsis>
+      <Icon of="fat-arrow-down" />
+    </div>
+  );
+}
+
+function commitMessage(message?: string) {
+  if (!message || message === '') return <Ellipsis className={styles.emptyMessage}>No commit message</Ellipsis>;
+  return <Ellipsis className={styles.commitMessage}>{message}</Ellipsis>;
+}

package/version-dropdown.module.scss

@@ -6,7 +6,6 @@
     align-items: center;
   }
   .menu {
-    width: 350px;
     padding: 0;
     right: 0;
     // top: 43px;
@@ -36,7 +35,7 @@
   justify-content: space-between;
   align-items: center;
   height: 40px;
-  padding: 0 24px;
+  padding: 0 16px;
 
   &.localVersion {
     border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
@@ -59,24 +58,7 @@
   }
   .versionName {
     padding: 0px 8px;
-  }
-}
-
-.placeholder {
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: 0 8px;
-  height: 30px;
-  border-radius: 6px;
-  user-select: none;
-  transition: background-color 300ms ease-in-out;
-  border: 1px solid var(--bit-border-color, #babec9);
-  > span {
-    display: none;
-  }
-  > div {
-    max-width: 80px;
+    min-width: fit-content;
   }
 }
 
@@ -107,6 +89,8 @@
   line-height: 14px;
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   overflow-x: auto;
+  margin-top: 8px;
+
   .tab {
     font-weight: bold;
     padding-top: 4px;

package/version-dropdown.tsx

@@ -1,19 +1,17 @@
-import { Icon } from '@teambit/evangelist.elements.icon';
+import React, { useState } from 'react';
 import { MenuLinkItem } from '@teambit/design.ui.surfaces.menu.link-item';
 import { Dropdown } from '@teambit/evangelist.surfaces.dropdown';
-
-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, { useState } from 'react';
 
 import styles from './version-dropdown.module.scss';
 import { VersionInfo } from './version-info';
 import { LaneInfo } from './lane-info';
+import { DetailedVersion, SimpleVersion } from './version-dropdown-placeholder';
 
 export const LOCAL_VERSION = 'workspace';
 
@@ -24,10 +22,16 @@ export type VersionDropdownProps = {
   snaps?: DropdownComponentVersion[];
   lanes?: LaneModel[];
   localVersion?: boolean;
-  currentVersion?: string;
+  currentVersion: string;
   currentLane?: LaneModel;
   latestVersion?: string;
   loading?: boolean;
+  overrideVersionHref?: (version: string) => string;
+  placeholderClassName?: string;
+  dropdownClassName?: string;
+  menuClassName?: string;
+  showVersionDetails?: boolean;
+  disabled?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 export function VersionDropdown({
@@ -39,32 +43,58 @@ export function VersionDropdown({
   localVersion,
   loading,
   currentLane,
+  overrideVersionHref,
+  className,
+  placeholderClassName,
+  dropdownClassName,
+  menuClassName,
+  showVersionDetails,
+  disabled,
+  ...rest
 }: VersionDropdownProps) {
   const [key, setKey] = useState(0);
 
   const singleVersion = (snaps || []).concat(tags).length < 2 && !localVersion;
-
-  if (singleVersion && !loading) {
-    return (
-      <div className={styles.noVersions}>
-        <VersionPlaceholder currentVersion={currentVersion} />
-      </div>
-    );
+  const placeholder = (showVersionDetails && (
+    <DetailedVersion
+      disabled={disabled}
+      snaps={snaps}
+      tags={tags}
+      className={placeholderClassName}
+      currentVersion={currentVersion}
+    />
+  )) || (
+    <SimpleVersion
+      disabled={disabled}
+      snaps={snaps}
+      tags={tags}
+      className={placeholderClassName}
+      currentVersion={currentVersion}
+    />
+  );
+  if (disabled || (singleVersion && !loading)) {
+    return <div className={classNames(styles.noVersions, className)}>{placeholder}</div>;
   }
 
   return (
-    <div className={styles.versionDropdown}>
+    <div {...rest} className={classNames(styles.versionDropdown, className)}>
       <Dropdown
-        className={styles.dropdown}
-        dropClass={styles.menu}
+        className={classNames(styles.dropdown, dropdownClassName)}
+        dropClass={classNames(styles.menu, menuClassName)}
         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} />}
+        PlaceholderComponent={({ children, ...other }) => (
+          <div {...other} className={placeholderClassName}>
+            {children}
+          </div>
+        )}
+        placeholder={placeholder}
       >
         {loading && <LineSkeleton className={styles.loading} count={6} />}
         {loading || (
           <VersionMenu
+            className={menuClassName}
             key={key}
             tags={tags}
             snaps={snaps}
@@ -73,6 +103,8 @@ export function VersionDropdown({
             latestVersion={latestVersion}
             localVersion={localVersion}
             currentLane={currentLane}
+            overrideVersionHref={overrideVersionHref}
+            showVersionDetails={showVersionDetails}
           />
         )}
       </Dropdown>
@@ -80,14 +112,6 @@ export function VersionDropdown({
   );
 }
 
-function VersionPlaceholder({ currentVersion, className }: { currentVersion?: string; className?: string }) {
-  return (
-    <div className={classNames(styles.placeholder, className)}>
-      <Ellipsis>{currentVersion}</Ellipsis>
-      <Icon of="fat-arrow-down" />
-    </div>
-  );
-}
 type VersionMenuProps = {
   tags?: DropdownComponentVersion[];
   snaps?: DropdownComponentVersion[];
@@ -96,6 +120,8 @@ type VersionMenuProps = {
   currentVersion?: string;
   latestVersion?: string;
   currentLane?: LaneModel;
+  overrideVersionHref?: (version: string) => string;
+  showVersionDetails?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 
 const VERSION_TAB_NAMES = ['TAG', 'SNAP', 'LANE'] as const;
@@ -108,6 +134,8 @@ function VersionMenu({
   localVersion,
   latestVersion,
   currentLane,
+  overrideVersionHref,
+  showVersionDetails,
   ...rest
 }: VersionMenuProps) {
   const tabs = VERSION_TAB_NAMES.map((name) => {
@@ -125,7 +153,7 @@ function VersionMenu({
     if (currentLane) return tabs.findIndex((tab) => tab.name === 'LANE');
     if ((snaps || []).some((snap) => snap.version === currentVersion))
       return tabs.findIndex((tab) => tab.name === 'SNAP');
-    return tabs.findIndex((tab) => tab.name === 'TAG');
+    return 0;
   };
 
   const [activeTabIndex, setActiveTab] = useState<number>(getActiveTabIndex());
@@ -178,6 +206,8 @@ function VersionMenu({
               key={payload.version}
               currentVersion={currentVersion}
               latestVersion={latestVersion}
+              overrideVersionHref={overrideVersionHref}
+              showDetails={showVersionDetails}
               {...payload}
             ></VersionInfo>
           ))}

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

@@ -3,25 +3,42 @@
   justify-content: space-between;
   align-items: center;
   height: 40px;
-  padding: 0 24px;
-
-  .versionTimestamp {
-    margin-right: 2px;
-  }
-  .versionUserAvatar {
-    padding: 0px 8px;
-  }
-  .laneIcon {
-    padding: 0px 4px;
-  }
-  .version {
-    width: 60%;
-    display: flex;
-    flex-direction: row;
-    align-content: space-between;
-    align-items: center;
+  padding: 0 16px;
+}
+.versionTimestamp {
+  min-width: fit-content;
+  margin-right: 2px;
+  text-align: right;
+}
+.versionUserAvatar {
+  padding: 0px 8px;
+}
+.laneIcon {
+  padding: 0px 4px;
+}
+.version {
+  max-width: 70%;
+  display: flex;
+  flex-direction: row;
+  align-content: space-between;
+  align-items: center;
+}
+.versionName {
+  padding: 0px 8px;
+  &.tag {
+    min-width: fit-content;
   }
-  .versionName {
-    padding: 0px 8px;
+  &.snap {
+    min-width: 20%;
   }
 }
+
+.commitMessage,
+.emptyMessage {
+  min-width: 50%;
+  padding: 0px 8px;
+}
+.emptyMessage {
+  font-style: italic;
+  color: var(--bit-text-color-light, #6c707c);
+}

package/version-info/version-info.tsx

@@ -4,6 +4,7 @@ import { VersionLabel } from '@teambit/component.ui.version-label';
 import React, { useMemo, useRef, useEffect } from 'react';
 import { UserAvatar } from '@teambit/design.ui.avatar';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
+import classNames from 'classnames';
 
 import { DropdownComponentVersion } from '../version-dropdown';
 import styles from './version-info.module.scss';
@@ -11,9 +12,22 @@ import styles from './version-info.module.scss';
 export type VersionInfoProps = DropdownComponentVersion & {
   currentVersion?: string;
   latestVersion?: string;
+  overrideVersionHref?: (version: string) => string;
+  showDetails?: boolean;
 };
 
-export function VersionInfo({ version, currentVersion, latestVersion, date, username, email }: VersionInfoProps) {
+export function VersionInfo({
+  version,
+  currentVersion,
+  latestVersion,
+  date,
+  username,
+  email,
+  overrideVersionHref,
+  showDetails,
+  message,
+  tag,
+}: VersionInfoProps) {
   const isCurrent = version === currentVersion;
   const author = useMemo(() => {
     return {
@@ -26,20 +40,32 @@ export function VersionInfo({ version, currentVersion, latestVersion, date, user
   const currentVersionRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     if (isCurrent) {
-      currentVersionRef.current?.scrollIntoView();
+      currentVersionRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
     }
   }, [isCurrent]);
 
+  const href = overrideVersionHref ? overrideVersionHref(version) : `?version=${version}`;
+
   return (
     <div ref={currentVersionRef}>
-      <MenuLinkItem isActive={() => isCurrent} href={`?version=${version}`} className={styles.versionRow}>
+      <MenuLinkItem isActive={() => isCurrent} href={href} className={styles.versionRow}>
         <div className={styles.version}>
           <UserAvatar size={24} account={author} className={styles.versionUserAvatar} showTooltip={true} />
-          <Ellipsis className={styles.versionName}>{version}</Ellipsis>
+          <Ellipsis className={classNames(styles.versionName, tag && styles.tag, !tag && styles.snap)}>
+            {version}
+          </Ellipsis>
           {version === latestVersion && <VersionLabel className={styles.label} status="latest" />}
+          {showDetails && commitMessage(message)}
         </div>
-        <TimeAgo className={styles.versionTimestamp} date={timestamp} />
+        <Ellipsis className={styles.versionTimestamp}>
+          <TimeAgo date={timestamp} />
+        </Ellipsis>
       </MenuLinkItem>
     </div>
   );
 }
+
+function commitMessage(message?: string) {
+  if (!message || message === '') return <Ellipsis className={styles.emptyMessage}>No commit message</Ellipsis>;
+  return <Ellipsis className={styles.commitMessage}>{message}</Ellipsis>;
+}