Improvement(TimeAgo/Lanes UI): add full date timestamp tooltip + lane import menu fixes

scopes/design/ui/time-ago/time-ago.module.scss

@@ -0,0 +1,9 @@
+.dateTooltip,
+.dateTooltipContent {
+  display: flex;
+}
+
+.dateTooltip {
+  max-width: unset !important; // Override inline css from Tippyjs
+  width: max-content;
+}

scopes/design/ui/time-ago/time-ago.spec.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import testRenderer from 'react-test-renderer';
 import { render } from '@testing-library/react';
 import {
   YearsAgoWithTimestamp,
@@ -13,7 +12,7 @@ import {
 
 describe('Time Ago Component', () => {
   it('renders correctly - years ago', () => {
-    testRenderer.create(<YearsAgoWithTimestamp />);
+    render(<YearsAgoWithTimestamp />);
   });
   it('should render - years ago', () => {
     const { getByText } = render(<YearsAgoWithTimestamp />);
@@ -22,7 +21,7 @@ describe('Time Ago Component', () => {
     expect(text).toBeInTheDocument();
   });
   it('renders correctly - month ago', () => {
-    testRenderer.create(<MonthTimeAgo />);
+    render(<MonthTimeAgo />);
   });
   it('should render - month ago', () => {
     const { getByText } = render(<MonthTimeAgo />);
@@ -31,7 +30,7 @@ describe('Time Ago Component', () => {
     expect(text).toBeInTheDocument();
   });
   it('renders correctly - months ago', () => {
-    testRenderer.create(<MonthsTimeAgo />);
+    render(<MonthsTimeAgo />);
   });
   it('should render - months ago', () => {
     const { getByText } = render(<MonthsTimeAgo />);
@@ -40,7 +39,7 @@ describe('Time Ago Component', () => {
     expect(text).toBeInTheDocument();
   });
   it('renders correctly - hour ago', () => {
-    testRenderer.create(<HourTimeAgo />);
+    render(<HourTimeAgo />);
   });
   it('should render - hour ago', () => {
     const { getByText } = render(<HourTimeAgo />);
@@ -49,7 +48,7 @@ describe('Time Ago Component', () => {
     expect(text).toBeInTheDocument();
   });
   it('renders correctly - hours ago', () => {
-    testRenderer.create(<HoursTimeAgo />);
+    render(<HoursTimeAgo />);
   });
   it('should render - hours ago', () => {
     const { getByText } = render(<HoursTimeAgo />);
@@ -58,7 +57,7 @@ describe('Time Ago Component', () => {
     expect(text).toBeInTheDocument();
   });
   it('renders correctly - just now', () => {
-    testRenderer.create(<CurrentTime />);
+    render(<CurrentTime />);
   });
   it('should render - just now', () => {
     const { getByText } = render(<CurrentTime />);
@@ -67,7 +66,7 @@ describe('Time Ago Component', () => {
     expect(text).toBeInTheDocument();
   });
   it('renders correctly - just now with ISO date', () => {
-    testRenderer.create(<CurrentTimeWithIsoDate />);
+    render(<CurrentTimeWithIsoDate />);
   });
   it('should render - just now', () => {
     const { getByText } = render(<CurrentTimeWithIsoDate />);

scopes/design/ui/time-ago/time-ago.tsx

@@ -1,6 +1,8 @@
 import timeAgo from '@teambit/base-ui.utils.time-ago';
 import classNames from 'classnames';
 import React, { useEffect, useMemo, useReducer } from 'react';
+import { Tooltip } from '@teambit/design.ui.tooltip';
+import styles from './time-ago.module.scss';
 
 type TimeAgoProps = {
   date: string | number;
@@ -21,8 +23,14 @@ export function TimeAgo(props: TimeAgoProps) {
   }, [date, refreshIdx]);
 
   return (
-    <span {...rest} className={classNames(className)}>
-      {formatted}
-    </span>
+    <Tooltip
+      className={styles.dateTooltip}
+      placement={'top'}
+      content={<div className={styles.dateTooltipContent}>{date}</div>}
+    >
+      <span {...rest} className={classNames(className)}>
+        {formatted}
+      </span>
+    </Tooltip>
   );
 }

scopes/lanes/lanes/lanes.ui.runtime.tsx

@@ -333,7 +333,15 @@ export class LanesUI {
       const { lanesModel } = useLanes();
       if (!lanesModel?.viewedLane) return null;
       const { viewedLane, currentLane } = lanesModel;
-      return <UseLaneMenu host={lanesUi.lanesHost} viewedLaneId={viewedLane.id} currentLaneId={currentLane?.id} />;
+      return (
+        <UseLaneMenu
+          actionName={'Import'}
+          actionIcon={'terminal'}
+          host={lanesUi.lanesHost}
+          viewedLaneId={viewedLane.id}
+          currentLaneId={currentLane?.id}
+        />
+      );
     });
     lanesUi.registerLanesDropdown();
     return lanesUi;

scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.module.scss

@@ -1,6 +1,7 @@
 .top {
   padding: 16px 24px;
   color: var(--bit-text-color, #414141);
+  padding-left: 0px;
 }
 
 .title {
@@ -35,4 +36,13 @@
 .lanesMenu {
   background-color: var(--bit-bg-color, #ffffff);
   border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  padding: 16px;
+}
+
+.moreInfo {
+  padding-left: 0px;
+
+  > a {
+    padding-left: 0px;
+  }
 }

scopes/lanes/ui/menus/use-lanes-menu/use-lanes-menu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Icon } from '@teambit/evangelist.elements.icon';
 import { CopyBox } from '@teambit/documenter.ui.copy-box';
-import { ExpandableTabContent, TabContent } from '@teambit/ui-foundation.ui.use-box.tab-content';
 import { Ellipsis } from '@teambit/design.ui.styles.ellipsis';
 import { linkStyles } from '@teambit/ui-foundation.ui.use-box.bottom-link';
 import { LanesHost } from '@teambit/lanes.ui.models.lanes-model';
@@ -20,10 +19,14 @@ export function UseLaneMenu({
   host,
   viewedLaneId,
   currentLaneId,
+  actionName,
+  actionIcon,
 }: {
   host: LanesHost;
   viewedLaneId: LaneId;
   currentLaneId?: LaneId;
+  actionName?: string;
+  actionIcon?: string;
 }) {
   const switchedOutToCurrentLane = !!currentLaneId?.isEqual(currentLaneId);
   const Menu = (
@@ -34,25 +37,30 @@ export function UseLaneMenu({
           <Ellipsis className={styles.titleText}>{`Bulk import from ${viewedLaneId.name}`}</Ellipsis>
         </div>
       </div>
-      <ExpandableTabContent
-        content={
-          <LaneImportContent
-            host={host}
-            currentLaneId={viewedLaneId}
-            switchedOutToCurrentLane={switchedOutToCurrentLane}
-          />
-        }
-        drawerTitle={<div className={styles.drawerTitle}>Learn more about Lanes</div>}
-        drawerContent={<LaneInfo />}
-      />
+      <LaneImportContent host={host} currentLaneId={viewedLaneId} switchedOutToCurrentLane={switchedOutToCurrentLane} />
+      <div className={styles.moreInfo}>
+        <Link external href={'https://bit.dev/docs/lanes/lanes-overview'} className={linkStyles}>
+          <Icon of="information-sign" />
+          <div className={styles.drawerTitle}>Learn more about Lanes</div>
+        </Link>
+      </div>
     </div>
   );
 
-  return <UseBoxDropdown position="bottom-end" className={styles.useBox} Menu={Menu} />;
+  return (
+    <UseBoxDropdown
+      actionName={actionName}
+      actionIcon={actionIcon}
+      position="bottom-end"
+      className={styles.useBox}
+      Menu={Menu}
+    />
+  );
 }
 
 function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: LaneImportContentProps) {
   const laneId = host === 'workspace' ? currentLaneId.name : currentLaneId.toString();
+
   if (switchedOutToCurrentLane) {
     return (
       <div className={styles.importContent}>
@@ -68,20 +76,3 @@ function LaneImportContent({ host, currentLaneId, switchedOutToCurrentLane }: La
     </div>
   );
 }
-
-type LaneInfoProps = {} & React.HTMLAttributes<HTMLDivElement>;
-
-function LaneInfo({ ...rest }: LaneInfoProps) {
-  return (
-    <TabContent
-      {...rest}
-      className={styles.moreInfo}
-      bottom={
-        <Link external href={'https://bit.dev/docs/lanes/lanes-overview'} className={linkStyles}>
-          <Icon of="information-sign" />
-          <span>Getting Started with Lanes</span>
-        </Link>
-      }
-    ></TabContent>
-  );
-}