Chore: Refactor the TraceTimelineViewer/TimelineHeaderRow folder to TypeScript (#60351)

.betterer.results

@@ -14,11 +14,11 @@ exports[`no enzyme tests`] = {
     "packages/jaeger-ui-components/src/TraceTimelineViewer/ListView/index.test.tsx:3266788928": [
       [14, 56, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.js:989353473": [
-      [15, 17, 13, "RegExp match", "2409514259"]
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx:1220382119": [
+      [15, 31, 13, "RegExp match", "2409514259"]
     ],
-    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.js:4192868446": [
-      [15, 17, 13, "RegExp match", "2409514259"]
+    "packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx:3450948735": [
+      [15, 31, 13, "RegExp match", "2409514259"]
     ],
     "packages/jaeger-ui-components/src/TraceTimelineViewer/VirtualizedTraceView.test.js:551014442": [
       [13, 26, 13, "RegExp match", "2409514259"]

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.test.tsx

@@ -13,14 +13,15 @@
 // limitations under the License.
 
 import cx from 'classnames';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
+import DraggableManager, { DraggingUpdate } from 'src/utils/DraggableManager';
 
-import TimelineColumnResizer, { getStyles } from './TimelineColumnResizer';
+import TimelineColumnResizer, { getStyles, TimelineColumnResizerProps } from './TimelineColumnResizer';
 
 describe('<TimelineColumnResizer>', () => {
-  let wrapper;
-  let instance;
+  let wrapper: ReactWrapper<TimelineColumnResizerProps, {}, TimelineColumnResizer>;
+  let instance: TimelineColumnResizer;
 
   const props = {
     min: 0.1,
@@ -31,7 +32,7 @@ describe('<TimelineColumnResizer>', () => {
 
   beforeEach(() => {
     props.onChange.mockReset();
-    wrapper = mount(<TimelineColumnResizer {...props} />);
+    wrapper = mount(<TimelineColumnResizer {...(props as unknown as TimelineColumnResizerProps)} />);
     instance = wrapper.instance();
   });
 
@@ -57,7 +58,7 @@ describe('<TimelineColumnResizer>', () => {
     it('returns the draggable bounds via _getDraggingBounds()', () => {
       const left = 10;
       const width = 100;
-      instance._rootElm.getBoundingClientRect = () => ({ left, width });
+      instance._rootElm!.getBoundingClientRect = () => ({ left, width } as DOMRect);
       expect(instance._getDraggingBounds()).toEqual({
         width,
         clientXLeft: left,
@@ -69,16 +70,16 @@ describe('<TimelineColumnResizer>', () => {
     it('handles drag start', () => {
       const value = Math.random();
       expect(wrapper.state('dragPosition')).toBe(null);
-      instance._handleDragUpdate({ value });
+      instance._handleDragUpdate({ value } as DraggingUpdate);
       expect(wrapper.state('dragPosition')).toBe(value);
     });
 
     it('handles drag end', () => {
-      const manager = { resetBounds: jest.fn() };
+      const manager = { resetBounds: jest.fn() } as unknown as DraggableManager;
       const value = Math.random();
       wrapper.setState({ dragPosition: 2 * value });
-      instance._handleDragEnd({ manager, value });
-      expect(manager.resetBounds.mock.calls).toEqual([[]]);
+      instance._handleDragEnd({ manager, value } as DraggingUpdate);
+      expect(jest.mocked(manager.resetBounds).mock.calls).toEqual([[]]);
       expect(wrapper.state('dragPosition')).toBe(null);
       expect(props.onChange.mock.calls).toEqual([[value]]);
     });
@@ -86,16 +87,16 @@ describe('<TimelineColumnResizer>', () => {
 
   it('does not render a dragging indicator when not dragging', () => {
     const styles = getStyles();
-    expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style').right).toBe(undefined);
+    expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style')?.right).toBe(undefined);
     expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe(styles.dragger);
   });
 
   it('renders a dragging indicator when dragging', () => {
     instance._dragManager.isDragging = () => true;
-    instance._handleDragUpdate({ value: props.min });
+    instance._handleDragUpdate({ value: props.min } as DraggingUpdate);
     instance.forceUpdate();
     wrapper.update();
-    expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style').right).toBeDefined();
+    expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('style')?.right).toBeDefined();
 
     const styles = getStyles();
     expect(wrapper.find('[data-testid="TimelineColumnResizer--dragger"]').prop('className')).toBe(

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineColumnResizer.tsx

@@ -97,7 +97,7 @@ export const getStyles = stylesFactory(() => {
   };
 });
 
-type TimelineColumnResizerProps = {
+export type TimelineColumnResizerProps = {
   min: number;
   max: number;
   onChange: (newSize: number) => void;

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.test.tsx

@@ -15,7 +15,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import TimelineHeaderRow from './TimelineHeaderRow';
+import TimelineHeaderRow, { TimelineHeaderRowProps } from './TimelineHeaderRow';
 
 const nameColumnWidth = 0.25;
 const setup = () => {
@@ -35,7 +35,7 @@ const setup = () => {
     },
   };
 
-  return render(<TimelineHeaderRow {...props} />);
+  return render(<TimelineHeaderRow {...(props as unknown as TimelineHeaderRowProps)} />);
 };
 
 describe('TimelineHeaderRow', () => {

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineHeaderRow.tsx

@@ -56,7 +56,7 @@ const getStyles = (theme: GrafanaTheme2) => {
   };
 };
 
-type TimelineHeaderRowProps = {
+export type TimelineHeaderRowProps = {
   duration: number;
   nameColumnWidth: number;
   numTicks: number;

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.test.tsx

@@ -13,18 +13,29 @@
 // limitations under the License.
 
 import { cx } from '@emotion/css';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
+import DraggableManager, { DraggingUpdate } from 'src/utils/DraggableManager';
 
-import TimelineViewingLayer, { getStyles } from './TimelineViewingLayer';
+import { ViewRangeTime } from '../types';
 
-function mapFromSubRange(viewStart, viewEnd, value) {
+import TimelineViewingLayer, { getStyles, TimelineViewingLayerProps } from './TimelineViewingLayer';
+
+function mapFromSubRange(viewStart: number, viewEnd: number, value: number) {
   return viewStart + value * (viewEnd - viewStart);
 }
 
+// Remove the prefix generated by cx (css-<id>), i.e. change the string from something like:
+// 'css-7g92us-TimelineViewingLayerDragged-Timeline...'
+// to:
+// 'TimelineViewingLayerDragged-Timeline...'
+function removeCxPrefix(cxString: string) {
+  return cxString.split('-').slice(2).join('-');
+}
+
 describe('<TimelineViewingLayer>', () => {
-  let wrapper;
-  let instance;
+  let wrapper: ReactWrapper<TimelineViewingLayerProps, {}, TimelineViewingLayer>;
+  let instance: TimelineViewingLayer;
 
   const viewStart = 0.25;
   const viewEnd = 0.9;
@@ -33,14 +44,14 @@ describe('<TimelineViewingLayer>', () => {
     updateNextViewRangeTime: jest.fn(),
     updateViewRangeTime: jest.fn(),
     viewRangeTime: {
-      current: [viewStart, viewEnd],
+      current: [viewStart, viewEnd] as [number, number],
     },
   };
 
   beforeEach(() => {
     props.updateNextViewRangeTime.mockReset();
     props.updateViewRangeTime.mockReset();
-    wrapper = mount(<TimelineViewingLayer {...props} />);
+    wrapper = mount(<TimelineViewingLayer {...(props as unknown as TimelineViewingLayerProps)} />);
     instance = wrapper.instance();
   });
 
@@ -76,19 +87,19 @@ describe('<TimelineViewingLayer>', () => {
     it('returns the dragging bounds from _getDraggingBounds()', () => {
       const left = 10;
       const width = 100;
-      instance._root.getBoundingClientRect = () => ({ left, width });
+      instance._root!.getBoundingClientRect = () => ({ left, width } as DOMRect);
       expect(instance._getDraggingBounds()).toEqual({ width, clientXLeft: left });
     });
 
     it('updates viewRange.time.cursor via _draggerReframe._onMouseMove', () => {
       const value = 0.5;
       const cursor = mapFromSubRange(viewStart, viewEnd, value);
-      instance._draggerReframe._onMouseMove({ value });
+      instance._draggerReframe._onMouseMove!({ value } as DraggingUpdate);
       expect(props.updateNextViewRangeTime.mock.calls).toEqual([[{ cursor }]]);
     });
 
     it('resets viewRange.time.cursor via _draggerReframe._onMouseLeave', () => {
-      instance._draggerReframe._onMouseLeave();
+      instance._draggerReframe._onMouseLeave!(null as unknown as DraggingUpdate);
       expect(props.updateNextViewRangeTime.mock.calls).toEqual([[{ cursor: undefined }]]);
     });
 
@@ -96,33 +107,33 @@ describe('<TimelineViewingLayer>', () => {
       const value = 0.5;
       const shift = mapFromSubRange(viewStart, viewEnd, value);
       const update = { reframe: { shift, anchor: shift } };
-      instance._draggerReframe._onDragStart({ value });
+      instance._draggerReframe._onDragStart!({ value } as DraggingUpdate);
       expect(props.updateNextViewRangeTime.mock.calls).toEqual([[update]]);
     });
 
     it('handles drag move via _draggerReframe._onDragMove', () => {
       const anchor = 0.25;
-      const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } };
+      const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } } as ViewRangeTime;
       const value = 0.5;
       const shift = mapFromSubRange(viewStart, viewEnd, value);
       // make sure `anchor` is already present on the props
       wrapper.setProps({ viewRangeTime });
-      expect(wrapper.prop('viewRangeTime').reframe.anchor).toBe(anchor);
+      expect(wrapper.prop('viewRangeTime').reframe?.anchor).toBe(anchor);
       // the next update should integrate `value` and use the existing anchor
-      instance._draggerReframe._onDragStart({ value });
+      instance._draggerReframe._onDragStart!({ value } as DraggingUpdate);
       const update = { reframe: { anchor, shift } };
       expect(props.updateNextViewRangeTime.mock.calls).toEqual([[update]]);
     });
 
     it('handles drag end via _draggerReframe._onDragEnd', () => {
-      const manager = { resetBounds: jest.fn() };
+      const manager = { resetBounds: jest.fn() } as unknown as DraggableManager;
       const value = 0.5;
       const shift = mapFromSubRange(viewStart, viewEnd, value);
       const anchor = 0.25;
-      const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } };
+      const viewRangeTime = { ...props.viewRangeTime, reframe: { anchor, shift: Math.random() } } as ViewRangeTime;
       wrapper.setProps({ viewRangeTime });
-      instance._draggerReframe._onDragEnd({ manager, value });
-      expect(manager.resetBounds.mock.calls).toEqual([[]]);
+      instance._draggerReframe._onDragEnd!({ manager, value } as DraggingUpdate);
+      expect(jest.mocked(manager.resetBounds).mock.calls).toEqual([[]]);
       expect(props.updateViewRangeTime.mock.calls).toEqual([[anchor, shift, 'timeline-header']]);
     });
   });
@@ -139,7 +150,12 @@ describe('<TimelineViewingLayer>', () => {
       // cursor is rendered when solo
       expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(1);
       // cursor is skipped when shiftStart, shiftEnd, or reframe are present
-      let viewRangeTime = { ...baseViewRangeTime, shiftStart: cursor };
+      let viewRangeTime: ViewRangeTime = {
+        ...baseViewRangeTime,
+        shiftStart: cursor,
+        shiftEnd: cursor,
+        reframe: { anchor: cursor, shift: cursor },
+      };
       wrapper.setProps({ viewRangeTime });
       expect(wrapper.find('[data-testid="TimelineViewingLayer--cursorGuide"]').length).toBe(0);
       viewRangeTime = { ...baseViewRangeTime, shiftEnd: cursor };
@@ -157,9 +173,16 @@ describe('<TimelineViewingLayer>', () => {
       expect(
         wrapper
           .find('[data-testid="Dragged"]')
-          .prop('className')
+          .prop('className')!
           .indexOf(
-            cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedDraggingRight, styles.draggedReframeDrag)
+            removeCxPrefix(
+              cx(
+                styles.TimelineViewingLayerDragged,
+                styles.TimelineViewingLayerDraggedDraggingLeft,
+                styles.TimelineViewingLayerDraggedDraggingRight,
+                styles.TimelineViewingLayerDraggedReframeDrag
+              )
+            )
           ) >= 0
       ).toBe(true);
     });
@@ -171,9 +194,16 @@ describe('<TimelineViewingLayer>', () => {
       expect(
         wrapper
           .find('[data-testid="Dragged"]')
-          .prop('className')
+          .prop('className')!
           .indexOf(
-            cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedDraggingRight, styles.draggedShiftDrag)
+            removeCxPrefix(
+              cx(
+                styles.TimelineViewingLayerDragged,
+                styles.TimelineViewingLayerDraggedDraggingLeft,
+                styles.TimelineViewingLayerDraggedDraggingRight,
+                styles.TimelineViewingLayerDraggedShiftDrag
+              )
+            )
           ) >= 0
       ).toBe(true);
     });
@@ -181,13 +211,20 @@ describe('<TimelineViewingLayer>', () => {
     it('renders the shiftEnd dragging', () => {
       const viewRangeTime = { ...props.viewRangeTime, shiftEnd: viewStart };
       wrapper.setProps({ viewRangeTime });
-      // expect(wrapper.find('.isDraggingLeft.isShiftDrag').length).toBe(1);
       const styles = getStyles();
       expect(
         wrapper
           .find('[data-testid="Dragged"]')
-          .prop('className')
-          .indexOf(cx(styles.dragged, styles.draggedDraggingLeft, styles.draggedShiftDrag)) >= 0
+          .prop('className')!
+          .indexOf(
+            removeCxPrefix(
+              cx(
+                styles.TimelineViewingLayerDragged,
+                styles.TimelineViewingLayerDraggedDraggingLeft,
+                styles.TimelineViewingLayerDraggedShiftDrag
+              )
+            )
+          ) >= 0
       ).toBe(true);
     });
   });

packages/jaeger-ui-components/src/TraceTimelineViewer/TimelineHeaderRow/TimelineViewingLayer.tsx

@@ -79,7 +79,7 @@ export const getStyles = stylesFactory(() => {
   };
 });
 
-type TimelineViewingLayerProps = {
+export type TimelineViewingLayerProps = {
   /**
    * `boundsInvalidator` is an arbitrary prop that lets the component know the
    * bounds for dragging need to be recalculated. In practice, the name column