Chore: Refactor packages/jaeger-ui-components/src/utils to TypeScript (#59979)

packages/jaeger-ui-components/package.json

@@ -21,6 +21,7 @@
     "@types/prop-types": "15.7.5",
     "@types/react": "17.0.42",
     "@types/react-icons": "2.2.7",
+    "@types/sinon": "^10.0.13",
     "@types/slate-react": "0.22.9",
     "@types/testing-library__jest-dom": "5.14.5",
     "@types/tinycolor2": "1.4.3",

packages/jaeger-ui-components/src/utils/color-generator.test.ts

@@ -18,16 +18,17 @@ import { colors } from '@grafana/ui';
 import { getColorByKey, getFilteredColors, clear } from './color-generator';
 
 const colorsToFilter = [...colors];
+let theme = createTheme();
 
 it('gives the same color for the same key', () => {
-  clear();
+  clear(theme);
   const colorOne = getColorByKey('serviceA', createTheme());
   const colorTwo = getColorByKey('serviceA', createTheme());
   expect(colorOne).toBe(colorTwo);
 });
 
 it('gives different colors for each key', () => {
-  clear();
+  clear(theme);
   const colorOne = getColorByKey('serviceA', createTheme());
   const colorTwo = getColorByKey('serviceB', createTheme());
   expect(colorOne).not.toBe(colorTwo);
@@ -58,8 +59,7 @@ it('should not allow colors with a contrast ratio < 3 in dark mode', () => {
 });
 
 it('should not allow a color that is the same as the previous color', () => {
-  clear();
-  const theme = createTheme();
+  clear(theme);
   const colorOne = getColorByKey('random4', theme); // #447EBC
   const colorTwo = getColorByKey('random17', theme); // #447EBC
   expect(colorOne).not.toBe(colorTwo);
@@ -68,8 +68,8 @@ it('should not allow a color that is the same as the previous color', () => {
 });
 
 it('should not allow a color that looks similar to the previous color', () => {
-  clear();
-  const theme = createTheme({ colors: { mode: 'light' } });
+  theme = createTheme({ colors: { mode: 'light' } });
+  clear(theme);
   const colorOne = getColorByKey('random9', theme); // #58140C
   const colorTwo = getColorByKey('random18', theme); // #511749
   expect(colorOne).toBe('#58140C');

packages/jaeger-ui-components/src/utils/date.test.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { formatDuration, ONE_MILLISECOND, ONE_SECOND, ONE_MINUTE, ONE_HOUR, ONE_DAY } from './date.tsx';
+import { formatDuration, ONE_MILLISECOND, ONE_SECOND, ONE_MINUTE, ONE_HOUR, ONE_DAY } from './date';
 
 describe('formatDuration', () => {
   it('keeps microseconds the same', () => {

packages/jaeger-ui-components/src/utils/filter-spans.test.ts

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { TraceSpan } from 'src/types/trace';
+
 import filterSpans from './filter-spans';
 
 describe('filterSpans', () => {
@@ -57,7 +59,7 @@ describe('filterSpans', () => {
         ],
       },
     ],
-  };
+  } as TraceSpan;
   // span2 contains strings that end in 1 or 2, for overlap with span0
   // KVs in span2 have different numbers for key and value to facilitate excludesKey testing
   const spanID2 = 'span-id-2';
@@ -102,7 +104,7 @@ describe('filterSpans', () => {
       },
     ],
   };
-  const spans = [span0, span2];
+  const spans = [span0, span2] as TraceSpan[];
 
   it('should return `undefined` if spans is falsy', () => {
     expect(filterSpans('operationName', null)).toBe(undefined);
@@ -184,6 +186,6 @@ describe('filterSpans', () => {
 
   it('should return no spans when logs is null', () => {
     const nullSpan = { ...span0, logs: null };
-    expect(filterSpans('logFieldKey1', [nullSpan])).toEqual(new Set([]));
+    expect(filterSpans('logFieldKey1', [nullSpan] as unknown as TraceSpan[])).toEqual(new Set([]));
   });
 });

packages/jaeger-ui-components/src/utils/sort.ts

@@ -12,19 +12,24 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-export function localeStringComparator(itemA, itemB) {
+import sinon from 'sinon';
+
+export function localeStringComparator(itemA: string, itemB: string) {
   return itemA.localeCompare(itemB);
 }
 
-export function numberSortComparator(itemA, itemB) {
+export function numberSortComparator(itemA: number, itemB: number) {
   return itemA - itemB;
 }
 
-export function classNameForSortDir(dir) {
+export function classNameForSortDir(dir: number) {
   return `sorted ${dir === 1 ? 'ascending' : 'descending'}`;
 }
 
-export function getNewSortForClick(prevSort, column) {
+export function getNewSortForClick(
+  prevSort: { key: string; dir: number },
+  column: { name: string; defaultDir?: number }
+) {
   const { defaultDir = 1 } = column;
 
   return {
@@ -33,7 +38,12 @@ export function getNewSortForClick(prevSort, column) {
   };
 }
 
-export function createSortClickHandler(column, currentSortKey, currentSortDir, updateSort) {
+export function createSortClickHandler(
+  column: { name: string },
+  currentSortKey: string,
+  currentSortDir: number,
+  updateSort: sinon.SinonSpy
+) {
   return function onClickSortingElement() {
     const { key, dir } = getNewSortForClick({ key: currentSortKey, dir: currentSortDir }, column);
     updateSort(key, dir);

packages/jaeger-ui-components/src/utils/span-ancestor-ids.test.ts

@@ -12,6 +12,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { TraceSpan } from 'src/types/trace';
+
 import spanAncestorIdsSpy from './span-ancestor-ids';
 
 describe('spanAncestorIdsSpy', () => {
@@ -79,11 +81,11 @@ describe('spanAncestorIdsSpy', () => {
       references: [],
     };
 
-    expect(spanAncestorIdsSpy(spanWithoutReferences)).toEqual([]);
+    expect(spanAncestorIdsSpy(spanWithoutReferences as unknown as TraceSpan)).toEqual([]);
   });
 
   it('returns all unique spanIDs from first valid CHILD_OF or FOLLOWS_FROM reference up to the root span', () => {
-    expect(spanAncestorIdsSpy(span)).toEqual(expectedAncestorIds);
+    expect(spanAncestorIdsSpy(span as TraceSpan)).toEqual(expectedAncestorIds);
   });
 
   it('ignores references without a span', () => {
@@ -91,6 +93,6 @@ describe('spanAncestorIdsSpy', () => {
       ...span,
       references: [{ refType: 'CHILD_OF' }, { refType: 'FOLLOWS_FROM', span: {} }, ...span.references],
     };
-    expect(spanAncestorIdsSpy(spanWithSomeEmptyReferences)).toEqual(expectedAncestorIds);
+    expect(spanAncestorIdsSpy(spanWithSomeEmptyReferences as TraceSpan)).toEqual(expectedAncestorIds);
   });
 });

packages/jaeger-ui-components/src/utils/test/requestAnimationFrame.ts

@@ -14,15 +14,15 @@
 
 const DEFAULT_ELAPSE = 0;
 
-export default function requestAnimationFrame(callback) {
+export default function requestAnimationFrame(callback: FrameRequestCallback) {
   return setTimeout(callback, DEFAULT_ELAPSE);
 }
 
-export function cancelAnimationFrame(id) {
+export function cancelAnimationFrame(id: string | number | NodeJS.Timeout | undefined) {
   return clearTimeout(id);
 }
 
-export function polyfill(target, msElapse = DEFAULT_ELAPSE) {
+export function polyfill(target: Window & typeof globalThis, msElapse = DEFAULT_ELAPSE) {
   const _target = target || global;
   if (!_target.requestAnimationFrame) {
     if (msElapse === DEFAULT_ELAPSE) {

yarn.lock

@@ -5337,6 +5337,7 @@ __metadata:
     "@types/prop-types": 15.7.5
     "@types/react": 17.0.42
     "@types/react-icons": 2.2.7
+    "@types/sinon": ^10.0.13
     "@types/slate-react": 0.22.9
     "@types/testing-library__jest-dom": 5.14.5
     "@types/tinycolor2": 1.4.3
@@ -12042,7 +12043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/sinon@npm:10.0.13":
+"@types/sinon@npm:10.0.13, @types/sinon@npm:^10.0.13":
   version: 10.0.13
   resolution: "@types/sinon@npm:10.0.13"
   dependencies: