Migrate files to ts

airflow/www/static/js/dag/nav/FilterBar.jsx → airflow/www/static/js/dag/nav/FilterBar.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-/* global filtersOptions, moment */
+/* global moment */
 
 import {
   Box,
@@ -27,11 +27,19 @@ import {
   Select,
 } from '@chakra-ui/react';
 import React from 'react';
+import type { DagRun, RunState, TaskState } from 'src/types';
 
-import { useTimezone } from '../../context/timezone';
-import { isoFormatWithoutTZ } from '../../datetime_utils';
+import { useTimezone } from 'src/context/timezone';
+import { isoFormatWithoutTZ } from 'src/datetime_utils';
 import useFilters from '../useFilters';
 
+declare const filtersOptions: {
+  dagStates: RunState[],
+  numRuns: number[],
+  runTypes: DagRun['runType'][],
+  taskStates: TaskState[]
+};
+
 const FilterBar = () => {
   const {
     filters,
@@ -78,7 +86,7 @@ const FilterBar = () => {
         >
           <option value="" key="all">All Run Types</option>
           {filtersOptions.runTypes.map((value) => (
-            <option value={value} key={value}>{value}</option>
+            <option value={value.toString()} key={value}>{value}</option>
           ))}
         </Select>
       </Box>

airflow/www/static/js/dag/useFilters.test.jsx → airflow/www/static/js/dag/useFilters.test.tsx

@@ -20,18 +20,29 @@
 /* global describe, expect, jest, test, moment */
 import { act, renderHook } from '@testing-library/react';
 
-import { RouterWrapper } from '../utils/testUtils';
+import { RouterWrapper } from 'src/utils/testUtils';
+
+declare global {
+  namespace NodeJS {
+    interface Global {
+      defaultDagRunDisplayNumber: number;
+    }
+  }
+}
 
 const date = new Date();
 date.setMilliseconds(0);
 jest.useFakeTimers().setSystemTime(date);
 
 // eslint-disable-next-line import/first
-import useFilters from './useFilters';
+import useFilters, { FilterHookReturn, Filters, UtilFunctions } from './useFilters';
 
 describe('Test useFilters hook', () => {
   test('Initial values when url does not have query params', async () => {
-    const { result } = renderHook(() => useFilters(), { wrapper: RouterWrapper });
+    const { result } = renderHook<FilterHookReturn, undefined>(
+      () => useFilters(),
+      { wrapper: RouterWrapper },
+    );
     const {
       filters: {
         baseDate,
@@ -42,18 +53,21 @@ describe('Test useFilters hook', () => {
     } = result.current;
 
     expect(baseDate).toBe(date.toISOString());
-    expect(numRuns).toBe(global.defaultDagRunDisplayNumber);
+    expect(numRuns).toBe(global.defaultDagRunDisplayNumber.toString());
     expect(runType).toBeNull();
     expect(runState).toBeNull();
   });
 
   test.each([
-    { fnName: 'onBaseDateChange', paramName: 'baseDate', paramValue: moment.utc().format() },
-    { fnName: 'onNumRunsChange', paramName: 'numRuns', paramValue: '10' },
-    { fnName: 'onRunTypeChange', paramName: 'runType', paramValue: 'manual' },
-    { fnName: 'onRunStateChange', paramName: 'runState', paramValue: 'success' },
+    { fnName: 'onBaseDateChange' as keyof UtilFunctions, paramName: 'baseDate' as keyof Filters, paramValue: moment.utc().format() },
+    { fnName: 'onNumRunsChange' as keyof UtilFunctions, paramName: 'numRuns' as keyof Filters, paramValue: '10' },
+    { fnName: 'onRunTypeChange' as keyof UtilFunctions, paramName: 'runType' as keyof Filters, paramValue: 'manual' },
+    { fnName: 'onRunStateChange' as keyof UtilFunctions, paramName: 'runState' as keyof Filters, paramValue: 'success' },
   ])('Test $fnName functions', async ({ fnName, paramName, paramValue }) => {
-    const { result } = renderHook(() => useFilters(), { wrapper: RouterWrapper });
+    const { result } = renderHook<FilterHookReturn, undefined>(
+      () => useFilters(),
+      { wrapper: RouterWrapper },
+    );
 
     await act(async () => {
       result.current[fnName](paramValue);
@@ -69,7 +83,7 @@ describe('Test useFilters hook', () => {
     if (paramName === 'baseDate') {
       expect(result.current.filters[paramName]).toBe(date.toISOString());
     } else if (paramName === 'numRuns') {
-      expect(result.current.filters[paramName]).toBe(global.defaultDagRunDisplayNumber);
+      expect(result.current.filters[paramName]).toBe(global.defaultDagRunDisplayNumber.toString());
     } else {
       expect(result.current.filters[paramName]).toBeNull();
     }

airflow/www/static/js/dag/useFilters.js → airflow/www/static/js/dag/useFilters.tsx

@@ -17,10 +17,31 @@
  * under the License.
  */
 
-/* global defaultDagRunDisplayNumber, moment */
+/* global moment */
 
 import { useSearchParams } from 'react-router-dom';
 
+declare const defaultDagRunDisplayNumber: number;
+
+export interface Filters {
+  baseDate: string | null,
+  numRuns: string | null,
+  runType: string | null,
+  runState: string | null,
+}
+
+export interface UtilFunctions {
+  onBaseDateChange: (value: string) => void,
+  onNumRunsChange: (value: string) => void,
+  onRunTypeChange: (value: string) => void,
+  onRunStateChange: (value: string) => void,
+  clearFilters: () => void,
+}
+
+export interface FilterHookReturn extends UtilFunctions {
+  filters: Filters,
+}
+
 // Params names
 export const BASE_DATE_PARAM = 'base_date';
 export const NUM_RUNS_PARAM = 'num_runs';
@@ -32,15 +53,18 @@ date.setMilliseconds(0);
 
 export const now = date.toISOString();
 
-const useFilters = () => {
+const useFilters = (): FilterHookReturn => {
   const [searchParams, setSearchParams] = useSearchParams();
 
   const baseDate = searchParams.get(BASE_DATE_PARAM) || now;
-  const numRuns = searchParams.get(NUM_RUNS_PARAM) || defaultDagRunDisplayNumber;
+  const numRuns = searchParams.get(NUM_RUNS_PARAM) || defaultDagRunDisplayNumber.toString();
   const runType = searchParams.get(RUN_TYPE_PARAM);
   const runState = searchParams.get(RUN_STATE_PARAM);
 
-  const makeOnChangeFn = (paramName, formatFn) => (value) => {
+  const makeOnChangeFn = (
+    paramName: string,
+    formatFn?: (arg: string) => string,
+  ) => (value: string) => {
     const formattedValue = formatFn ? formatFn(value) : value;
     const params = new URLSearchParams(searchParams);
 
@@ -52,7 +76,7 @@ const useFilters = () => {
 
   const onBaseDateChange = makeOnChangeFn(
     BASE_DATE_PARAM,
-    (localDate) => moment(localDate).utc().format(),
+    (localDate: string) => moment(localDate).utc().format(),
   );
   const onNumRunsChange = makeOnChangeFn(NUM_RUNS_PARAM);
   const onRunTypeChange = makeOnChangeFn(RUN_TYPE_PARAM);

airflow/www/static/js/types/index.ts

@@ -45,7 +45,7 @@ interface Dag {
 
 interface DagRun {
   runId: string;
-  runType: 'manual' | 'backfill' | 'scheduled';
+  runType: 'manual' | 'backfill' | 'scheduled' | 'dataset_triggered';
   state: RunState;
   executionDate: string;
   dataIntervalStart: string;