Core: Fix scrollIntoView behavior and reimplement testing module time rendering

code/addons/test/src/components/RelativeTime.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RelativeTime } from './RelativeTime';
+
+const meta = {
+  component: RelativeTime,
+  args: {
+    testCount: 42,
+  },
+} satisfies Meta<typeof RelativeTime>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const JustNow: Story = {
+  args: {
+    timestamp: new Date(),
+  },
+};
+
+export const SecondsAgo: Story = {
+  args: {
+    timestamp: new Date(Date.now() - 1000 * 15),
+  },
+};
+
+export const MinutesAgo: Story = {
+  args: {
+    timestamp: new Date(Date.now() - 1000 * 60 * 2),
+  },
+};
+
+export const HoursAgo: Story = {
+  args: {
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 3),
+  },
+};
+
+export const Yesterday: Story = {
+  args: {
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24),
+  },
+};
+
+export const DaysAgo: Story = {
+  args: {
+    timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24 * 3),
+  },
+};

code/addons/test/src/components/RelativeTime.tsx

@@ -1,38 +1,37 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 export function getRelativeTimeString(date: Date): string {
-  const delta = Math.round((date.getTime() - Date.now()) / 1000);
-  const cutoffs = [60, 3600, 86400, 86400 * 7, 86400 * 30, 86400 * 365, Infinity];
-  const units: Intl.RelativeTimeFormatUnit[] = [
-    'second',
-    'minute',
-    'hour',
-    'day',
-    'week',
-    'month',
-    'year',
-  ];
+  const seconds = Math.round((Date.now() - date.getTime()) / 1000);
+  if (seconds < 60) {
+    return 'just now';
+  }
 
-  const unitIndex = cutoffs.findIndex((cutoff) => cutoff > Math.abs(delta));
-  const divisor = unitIndex ? cutoffs[unitIndex - 1] : 1;
-  const rtf = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
-  return rtf.format(Math.floor(delta / divisor), units[unitIndex]);
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) {
+    return minutes === 1 ? 'a minute ago' : `${minutes} minutes ago`;
+  }
+
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) {
+    return hours === 1 ? 'an hour ago' : `${hours} hours ago`;
+  }
+
+  const days = Math.floor(hours / 24);
+  return days === 1 ? 'yesterday' : `${days} days ago`;
 }
 
 export const RelativeTime = ({ timestamp, testCount }: { timestamp: Date; testCount: number }) => {
   const [relativeTimeString, setRelativeTimeString] = useState(null);
+  const updateRelativeTimeString = useCallback(
+    () => timestamp && setRelativeTimeString(getRelativeTimeString(timestamp)),
+    [timestamp]
+  );
 
   useEffect(() => {
-    if (timestamp) {
-      setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now'));
-
-      const interval = setInterval(() => {
-        setRelativeTimeString(getRelativeTimeString(timestamp).replace(/^now$/, 'just now'));
-      }, 10000);
-
-      return () => clearInterval(interval);
-    }
-  }, [timestamp]);
+    updateRelativeTimeString();
+    const interval = setInterval(updateRelativeTimeString, 10000);
+    return () => clearInterval(interval);
+  }, [updateRelativeTimeString]);
 
   return (
     relativeTimeString &&

code/core/src/manager/components/sidebar/useHighlighted.ts

@@ -22,6 +22,25 @@ export interface HighlightedProps {
 const fromSelection = (selection: Selection): Highlight =>
   selection ? { itemId: selection.storyId, refId: selection.refId } : null;
 
+const scrollToSelector = (
+  selector: string,
+  options: {
+    containerRef?: RefObject<Element | null>;
+    center?: boolean;
+    attempts?: number;
+    delay?: number;
+  } = {},
+  _attempt = 1
+) => {
+  const { containerRef, center = false, attempts = 3, delay = 500 } = options;
+  const element = (containerRef ? containerRef.current : document)?.querySelector(selector);
+  if (element) {
+    scrollIntoView(element, center);
+  } else if (_attempt <= attempts) {
+    setTimeout(scrollToSelector, delay, selector, options, _attempt + 1);
+  }
+};
+
 export const useHighlighted = ({
   containerRef,
   isLoading,
@@ -65,14 +84,10 @@ export const useHighlighted = ({
     const highlight = fromSelection(selected);
     updateHighlighted(highlight);
     if (highlight) {
-      const { itemId, refId } = highlight;
-      setTimeout(() => {
-        scrollIntoView(
-          // @ts-expect-error (non strict)
-          containerRef.current?.querySelector(`[data-item-id="${itemId}"][data-ref-id="${refId}"]`),
-          true // make sure it's clearly visible by centering it
-        );
-      }, 0);
+      scrollToSelector(`[data-item-id="${highlight.itemId}"][data-ref-id="${highlight.refId}"]`, {
+        containerRef,
+        center: true,
+      });
     }
   }, [containerRef, selected, updateHighlighted]);
 

code/core/src/manager/utils/tree.ts

@@ -85,10 +85,14 @@ export const scrollIntoView = (element: Element, center = false) => {
     return;
   }
   const { top, bottom } = element.getBoundingClientRect();
-  const isInView =
-    top >= 0 && bottom <= (globalWindow.innerHeight || document.documentElement.clientHeight);
-
-  if (!isInView) {
+  if (!top || !bottom) {
+    return;
+  }
+  const bottomOffset =
+    document?.querySelector('#sidebar-bottom-wrapper')?.getBoundingClientRect().top ||
+    globalWindow.innerHeight ||
+    document.documentElement.clientHeight;
+  if (bottom > bottomOffset) {
     element.scrollIntoView({ block: center ? 'center' : 'nearest' });
   }
 };