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

package/dist/version-dropdown.js

@@ -79,21 +79,25 @@ function VersionMenu(_a) {
                 return { name, payload: tags || [] };
         }
     }).filter((tab) => tab.payload.length > 0);
+    const multipleTabs = tabs.length > 1;
+    const message = multipleTabs
+        ? 'Switch to view tags, snaps, or lanes'
+        : `Switch between ${tabs[0].name.toLocaleLowerCase()}s`;
     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")),
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(version_dropdown_module_scss_1.default.titleContainer, version_dropdown_module_scss_1.default.title) }, message),
             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: (0, classnames_1.default)(multipleTabs && version_dropdown_module_scss_1.default.tabs) }, multipleTabs &&
+            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)))))));
+                tabs[activeTabIndex].payload.map((payload) => (react_1.default.createElement(version_info_1.VersionInfo, Object.assign({ key: payload.version, 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":"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"}
+{"version":3,"file":"version-dropdown.js","sourceRoot":"","sources":["../version-dropdown.tsx"],"names":[],"mappings":"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"}

package/dist/version-dropdown.module.scss

@@ -19,13 +19,17 @@
   padding: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-  margin-bottom: 8px;
+}
+
+.titleContainer {
+  margin-bottom: 2px;
 }
 
 .versionContainer {
   max-height: 240px;
   overflow-y: scroll;
 }
+
 .versionLine {
   cursor: pointer;
   display: flex;
@@ -38,7 +42,8 @@
     background-color: var(--bit-bg-heavy, #f6f6f6);
   }
   &:last-child {
-    margin-bottom: 8px;
+    margin-bottom: 2px;
+    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
   &.currentVersion {
     background: var(--bit-accent-bg, #eceaff);

package/dist/version-dropdown.spec.js

@@ -7,18 +7,27 @@ const react_1 = __importDefault(require("react"));
 const react_2 = require("@testing-library/react");
 const chai_1 = require("chai");
 const version_dropdown_composition_1 = require("./version-dropdown.composition");
-it('should render one version', () => {
-    const { getByText } = (0, react_2.render)(react_1.default.createElement(version_dropdown_composition_1.VersionDropdownWithOneVersion, null));
-    const textVersion = getByText(/^0.1$/);
-    (0, chai_1.expect)(textVersion).to.exist;
-});
-it('should return multiple versions', () => {
-    const { getByText, getAllByText } = (0, react_2.render)(react_1.default.createElement(version_dropdown_composition_1.VersionDropdownWithMultipleVersions, null));
-    const textVersionOne = getByText(/^0.1$/);
-    const textVersionTwo = getByText(/^0.2$/);
-    const textVersionThree = getAllByText(/^0.3$/);
-    (0, chai_1.expect)(textVersionOne).to.exist;
-    (0, chai_1.expect)(textVersionTwo).to.exist;
-    (0, chai_1.expect)(textVersionThree).to.length(2);
+describe('version dropdown tests', () => {
+    /**
+     *  https://github.com/jsdom/jsdom/issues/1695
+     *  scrollIntoView is not implemented in jsdom
+     * */
+    beforeEach(() => {
+        Element.prototype.scrollIntoView = jest.fn();
+    });
+    it('should render one version', () => {
+        const { getByText } = (0, react_2.render)(react_1.default.createElement(version_dropdown_composition_1.VersionDropdownWithOneVersion, null));
+        const textVersion = getByText(/^0.1$/);
+        (0, chai_1.expect)(textVersion).to.exist;
+    });
+    it('should return multiple versions', () => {
+        const { getByText, getAllByText } = (0, react_2.render)(react_1.default.createElement(version_dropdown_composition_1.VersionDropdownWithMultipleVersions, null));
+        const textVersionOne = getByText(/^0.1$/);
+        const textVersionTwo = getByText(/^0.2$/);
+        const textVersionThree = getAllByText(/^0.3$/);
+        (0, chai_1.expect)(textVersionOne).to.exist;
+        (0, chai_1.expect)(textVersionTwo).to.exist;
+        (0, chai_1.expect)(textVersionThree).to.exist;
+    });
 });
 //# sourceMappingURL=version-dropdown.spec.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"version-dropdown.spec.js","sourceRoot":"","sources":["../version-dropdown.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,+BAA8B;AAC9B,iFAAoH;AAEpH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACnC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,4DAA6B,OAAG,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IACvC,IAAA,aAAM,EAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;AAC/B,CAAC,CAAC,CAAC;AACH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;IACzC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,kEAAmC,OAAG,CAAC,CAAC;IACpF,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1C,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;IAC/C,IAAA,aAAM,EAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAChC,IAAA,aAAM,EAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAChC,IAAA,aAAM,EAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AACxC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"version-dropdown.spec.js","sourceRoot":"","sources":["../version-dropdown.spec.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAgD;AAChD,+BAA8B;AAC9B,iFAAoH;AAEpH,QAAQ,CAAC,wBAAwB,EAAE,GAAG,EAAE;IACtC;;;SAGK;IACL,UAAU,CAAC,GAAG,EAAE;QACd,OAAO,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IAC/C,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,2BAA2B,EAAE,GAAG,EAAE;QACnC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,4DAA6B,OAAG,CAAC,CAAC;QAChE,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QACvC,IAAA,aAAM,EAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC/B,CAAC,CAAC,CAAC;IACH,EAAE,CAAC,iCAAiC,EAAE,GAAG,EAAE;QACzC,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,kEAAmC,OAAG,CAAC,CAAC;QACpF,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,CAAC;QAC1C,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;QAC/C,IAAA,aAAM,EAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,IAAA,aAAM,EAAC,cAAc,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;QAChC,IAAA,aAAM,EAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IACpC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

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

@@ -41,10 +41,17 @@ function VersionInfo({ version, currentVersion, latestVersion, date, username, e
         };
     }, [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 },
+    const currentVersionRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (isCurrent) {
+            (_a = currentVersionRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+        }
+    }, [isCurrent]);
+    return (react_1.default.createElement("div", { ref: currentVersionRef },
         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_avatar_1.UserAvatar, { size: 20, 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 }))));

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,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"}
+{"version":3,"file":"version-info.js","sourceRoot":"","sources":["../../version-info/version-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gFAA4D;AAC5D,oEAAsD;AACtD,oFAAmE;AACnE,+CAA0D;AAC1D,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;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,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,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,CACxD,CACN,CACP,CAAC;AACJ,CAAC;AAhCD,kCAgCC"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component.ui.version-dropdown",
-  "version": "0.0.493",
+  "version": "0.0.496",
   "homepage": "https://bit.dev/teambit/component/ui/version-dropdown",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "ui/version-dropdown",
-    "version": "0.0.493"
+    "version": "0.0.496"
   },
   "dependencies": {
     "classnames": "2.2.6",
@@ -17,10 +17,10 @@
     "@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/lanes.ui.lanes": "0.0.12",
+    "@teambit/legacy-component-log": "0.0.392",
     "@teambit/ui-foundation.ui.use-box.tab": "0.0.105",
-    "@teambit/component.ui.version-label": "0.0.491",
+    "@teambit/component.ui.version-label": "0.0.492",
     "@teambit/design.ui.time-ago": "0.0.351"
   },
   "devDependencies": {

package/{__preview-1646295435675.js → preview-1646882648682.js}

@@ -1,2 +1,2 @@
-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')]
+export const compositions = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.496/dist/version-dropdown.composition.js')]
+export const overview = [require('/home/circleci/Library/Caches/Bit/capsules/8891be5ad3d35bfc38b9cd90c0e05b598a5a55af/teambit.component_ui_version-dropdown@0.0.496/dist/version-dropdown.docs.js')]

package/version-dropdown.module.scss

@@ -19,13 +19,17 @@
   padding: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-  margin-bottom: 8px;
+}
+
+.titleContainer {
+  margin-bottom: 2px;
 }
 
 .versionContainer {
   max-height: 240px;
   overflow-y: scroll;
 }
+
 .versionLine {
   cursor: pointer;
   display: flex;
@@ -38,7 +42,8 @@
     background-color: var(--bit-bg-heavy, #f6f6f6);
   }
   &:last-child {
-    margin-bottom: 8px;
+    margin-bottom: 2px;
+    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
   }
   &.currentVersion {
     background: var(--bit-accent-bg, #eceaff);

package/version-dropdown.spec.tsx

@@ -3,17 +3,26 @@ import { render } from '@testing-library/react';
 import { expect } from 'chai';
 import { VersionDropdownWithOneVersion, VersionDropdownWithMultipleVersions } from './version-dropdown.composition';
 
-it('should render one version', () => {
-  const { getByText } = render(<VersionDropdownWithOneVersion />);
-  const textVersion = getByText(/^0.1$/);
-  expect(textVersion).to.exist;
-});
-it('should return multiple versions', () => {
-  const { getByText, getAllByText } = render(<VersionDropdownWithMultipleVersions />);
-  const textVersionOne = getByText(/^0.1$/);
-  const textVersionTwo = getByText(/^0.2$/);
-  const textVersionThree = getAllByText(/^0.3$/);
-  expect(textVersionOne).to.exist;
-  expect(textVersionTwo).to.exist;
-  expect(textVersionThree).to.length(2);
+describe('version dropdown tests', () => {
+  /**
+   *  https://github.com/jsdom/jsdom/issues/1695
+   *  scrollIntoView is not implemented in jsdom
+   * */
+  beforeEach(() => {
+    Element.prototype.scrollIntoView = jest.fn();
+  });
+  it('should render one version', () => {
+    const { getByText } = render(<VersionDropdownWithOneVersion />);
+    const textVersion = getByText(/^0.1$/);
+    expect(textVersion).to.exist;
+  });
+  it('should return multiple versions', () => {
+    const { getByText, getAllByText } = render(<VersionDropdownWithMultipleVersions />);
+    const textVersionOne = getByText(/^0.1$/);
+    const textVersionTwo = getByText(/^0.2$/);
+    const textVersionThree = getAllByText(/^0.3$/);
+    expect(textVersionOne).to.exist;
+    expect(textVersionTwo).to.exist;
+    expect(textVersionThree).to.exist;
+  });
 });

package/version-dropdown.tsx

@@ -123,12 +123,15 @@ function VersionMenu({
     }
   }).filter((tab) => tab.payload.length > 0);
 
+  const multipleTabs = tabs.length > 1;
+  const message = multipleTabs
+    ? 'Switch to view tags, snaps, or lanes'
+    : `Switch between ${tabs[0].name.toLocaleLowerCase()}s`;
+
   return (
     <div {...rest}>
       <div className={styles.top}>
-        <div className={styles.title}>
-          <span>Switch to view tags, snaps, or lanes</span>
-        </div>
+        <div className={classNames(styles.titleContainer, styles.title)}>{message}</div>
         {localVersion && (
           <NavLink
             href={'?'}
@@ -145,19 +148,20 @@ function VersionMenu({
           </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 className={classNames(multipleTabs && styles.tabs)}>
+        {multipleTabs &&
+          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' &&
@@ -167,7 +171,7 @@ function VersionMenu({
         {tabs[activeTabIndex].name !== 'LANE' &&
           tabs[activeTabIndex].payload.map((payload) => (
             <VersionInfo
-              key={payload.hash}
+              key={payload.version}
               currentVersion={currentVersion}
               latestVersion={latestVersion}
               {...payload}

package/version-info/version-info.tsx

@@ -1,7 +1,7 @@
 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 React, { useMemo, useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import { UserAvatar } from '@teambit/design.ui.avatar';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
@@ -24,15 +24,21 @@ export function VersionInfo({ version, currentVersion, latestVersion, date, user
   }, [version]);
 
   const timestamp = useMemo(() => (date ? new Date(parseInt(date)).toString() : new Date().toString()), [date]);
+  const currentVersionRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (isCurrent) {
+      currentVersionRef.current?.scrollIntoView();
+    }
+  }, [isCurrent]);
 
   return (
-    <div key={version}>
+    <div ref={currentVersionRef}>
       <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} />
+          <UserAvatar size={20} account={author} className={styles.versionUserAvatar} showTooltip={true} />
           <Ellipsis className={styles.versionName}>{version}</Ellipsis>
           {version === latestVersion && <VersionLabel className={styles.label} status="latest" />}
         </div>