From e4065e47e0a4e746fcfb52cb151243a3707e9502 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Tue, 14 Jun 2022 15:44:00 -0400
Subject: [PATCH 01/10] convert all useSelection files to ts

Update grid data ts, remove some anys
---
 airflow/www/package.json                      |  1 +
 .../www/static/js/grid/{Main.jsx => Main.tsx} |  9 ++-
 airflow/www/static/js/grid/ToggleGroups.jsx   |  8 +-
 .../static/js/grid/api/{index.js => index.ts} |  4 +-
 .../api/{useGridData.js => useGridData.ts}    | 79 +++++++++++--------
 .../static/js/grid/context/autorefresh.jsx    |  8 +-
 .../js/grid/dagRuns/{index.jsx => index.tsx}  | 13 +--
 .../static/js/grid/details/BreadcrumbText.tsx | 38 +++++++++
 .../grid/details/{Header.jsx => Header.tsx}   | 30 +++----
 .../js/grid/details/{index.jsx => index.tsx}  | 16 ++--
 airflow/www/static/js/grid/index.d.ts         | 26 ++++++
 ...kRows.test.jsx => renderTaskRows.test.tsx} |  0
 ...{renderTaskRows.jsx => renderTaskRows.tsx} | 49 ++++++++----
 airflow/www/static/js/grid/types/index.ts     | 69 ++++++++++++++++
 ...lection.test.jsx => useSelection.test.tsx} | 10 ++-
 .../{useSelection.js => useSelection.ts}      |  7 +-
 airflow/www/tsconfig.json                     |  4 +-
 airflow/www/webpack.config.js                 | 23 +++++-
 18 files changed, 294 insertions(+), 100 deletions(-)
 rename airflow/www/static/js/grid/{Main.jsx => Main.tsx} (91%)
 rename airflow/www/static/js/grid/api/{index.js => index.ts} (93%)
 rename airflow/www/static/js/grid/api/{useGridData.js => useGridData.ts} (53%)
 rename airflow/www/static/js/grid/dagRuns/{index.jsx => index.tsx} (90%)
 create mode 100644 airflow/www/static/js/grid/details/BreadcrumbText.tsx
 rename airflow/www/static/js/grid/details/{Header.jsx => Header.tsx} (83%)
 rename airflow/www/static/js/grid/details/{index.jsx => index.tsx} (81%)
 create mode 100644 airflow/www/static/js/grid/index.d.ts
 rename airflow/www/static/js/grid/{renderTaskRows.test.jsx => renderTaskRows.test.tsx} (100%)
 rename airflow/www/static/js/grid/{renderTaskRows.jsx => renderTaskRows.tsx} (77%)
 create mode 100644 airflow/www/static/js/grid/types/index.ts
 rename airflow/www/static/js/grid/utils/{useSelection.test.jsx => useSelection.test.tsx} (93%)
 rename airflow/www/static/js/grid/utils/{useSelection.js => useSelection.ts} (92%)

diff --git a/airflow/www/package.json b/airflow/www/package.json
index ad11cc3a0d976..685a2cfbc7d57 100644
--- a/airflow/www/package.json
+++ b/airflow/www/package.json
@@ -67,6 +67,7 @@
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "<5.0.0",
+    "ts-loader": "^8.2.0",
     "typescript": "^4.6.3",
     "url-loader": "4.1.0",
     "webpack": "^5.73.0",
diff --git a/airflow/www/static/js/grid/Main.jsx b/airflow/www/static/js/grid/Main.tsx
similarity index 91%
rename from airflow/www/static/js/grid/Main.jsx
rename to airflow/www/static/js/grid/Main.tsx
index 5e9a4f2a9a12d..4e7ac87c9ff05 100644
--- a/airflow/www/static/js/grid/Main.jsx
+++ b/airflow/www/static/js/grid/Main.tsx
@@ -38,8 +38,9 @@ import { useGridData } from './api';
 
 const detailsPanelKey = 'hideDetailsPanel';
 
-const Main = () => {
-  const { data: { groups }, isLoading } = useGridData();
+const Main: React.FC = () => {
+  const { data, isLoading } = useGridData();
+  const groups = (data as any)?.groups || {};
   const isPanelOpen = localStorage.getItem(detailsPanelKey) !== 'true';
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
   const { clearSelection } = useSelection();
@@ -47,10 +48,10 @@ const Main = () => {
 
   const onPanelToggle = () => {
     if (!isOpen) {
-      localStorage.setItem(detailsPanelKey, false);
+      localStorage.setItem(detailsPanelKey, 'false');
     } else {
       clearSelection();
-      localStorage.setItem(detailsPanelKey, true);
+      localStorage.setItem(detailsPanelKey, 'true');
     }
     onToggle();
   };
diff --git a/airflow/www/static/js/grid/ToggleGroups.jsx b/airflow/www/static/js/grid/ToggleGroups.jsx
index 3705d67d80241..2f027cd668776 100644
--- a/airflow/www/static/js/grid/ToggleGroups.jsx
+++ b/airflow/www/static/js/grid/ToggleGroups.jsx
@@ -34,15 +34,15 @@ const getGroupIds = (groups) => {
 };
 
 const ToggleGroups = ({ groups, openGroupIds, onToggleGroups }) => {
+  // Don't show button if the DAG has no task groups
+  const hasGroups = groups.children && groups.children.find((c) => !!c.children);
+  if (!hasGroups) return null;
+
   const allGroupIds = getGroupIds(groups.children);
 
   const isExpandDisabled = allGroupIds.length === openGroupIds.length;
   const isCollapseDisabled = !openGroupIds.length;
 
-  // Don't show button if the DAG has no task groups
-  const hasGroups = groups.children.find((c) => !!c.children);
-  if (!hasGroups) return null;
-
   const onExpand = () => {
     onToggleGroups(allGroupIds);
   };
diff --git a/airflow/www/static/js/grid/api/index.js b/airflow/www/static/js/grid/api/index.ts
similarity index 93%
rename from airflow/www/static/js/grid/api/index.js
rename to airflow/www/static/js/grid/api/index.ts
index 3487ecd6eaff0..0ac8e4e28410d 100644
--- a/airflow/www/static/js/grid/api/index.js
+++ b/airflow/www/static/js/grid/api/index.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import camelcaseKeys from 'camelcase-keys';
 
 import useTasks from './useTasks';
@@ -35,7 +35,7 @@ import useGridData from './useGridData';
 import useMappedInstances from './useMappedInstances';
 
 axios.interceptors.response.use(
-  (res) => (res.data ? camelcaseKeys(res.data, { deep: true }) : res),
+  (res: AxiosResponse) => (res.data ? camelcaseKeys(res.data, { deep: true }) : res),
 );
 
 axios.defaults.headers.common.Accept = 'application/json';
diff --git a/airflow/www/static/js/grid/api/useGridData.js b/airflow/www/static/js/grid/api/useGridData.ts
similarity index 53%
rename from airflow/www/static/js/grid/api/useGridData.js
rename to airflow/www/static/js/grid/api/useGridData.ts
index 38d4e00748d32..44bbc8e4c41a9 100644
--- a/airflow/www/static/js/grid/api/useGridData.js
+++ b/airflow/www/static/js/grid/api/useGridData.ts
@@ -17,10 +17,8 @@
  * under the License.
  */
 
-/* global autoRefreshInterval */
-
 import { useQuery } from 'react-query';
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 
 import { getMetaValue } from '../../utils';
 import { useAutoRefresh } from '../context/autorefresh';
@@ -28,6 +26,7 @@ import useErrorToast from '../utils/useErrorToast';
 import useFilters, {
   BASE_DATE_PARAM, NUM_RUNS_PARAM, RUN_STATE_PARAM, RUN_TYPE_PARAM, now,
 } from '../utils/useFilters';
+import type { GridTask, DagRun } from '../types';
 
 const DAG_ID_PARAM = 'dag_id';
 
@@ -36,12 +35,21 @@ const dagId = getMetaValue(DAG_ID_PARAM);
 const gridDataUrl = getMetaValue('grid_data_url') || '';
 const urlRoot = getMetaValue('root');
 
-const emptyData = {
+interface GridData {
+  dagRuns: DagRun[];
+  groups: GridTask;
+}
+
+const emptyData: GridData = {
   dagRuns: [],
-  groups: {},
+  groups: {
+    id: null,
+    label: null,
+    instances: [],
+  },
 };
 
-export const areActiveRuns = (runs = []) => runs.filter((run) => ['queued', 'running', 'scheduled'].includes(run.state)).length > 0;
+export const areActiveRuns = (runs: DagRun[] = []) => runs.filter((run) => ['queued', 'running', 'scheduled'].includes(run.state)).length > 0;
 
 const useGridData = () => {
   const { isRefreshOn, stopRefresh } = useAutoRefresh();
@@ -52,34 +60,37 @@ const useGridData = () => {
     },
   } = useFilters();
 
-  return useQuery(['gridData', baseDate, numRuns, runType, runState], async () => {
-    try {
-      const params = {
-        root: urlRoot || undefined,
-        [DAG_ID_PARAM]: dagId,
-        [BASE_DATE_PARAM]: baseDate === now ? undefined : baseDate,
-        [NUM_RUNS_PARAM]: numRuns,
-        [RUN_TYPE_PARAM]: runType,
-        [RUN_STATE_PARAM]: runState,
-      };
-      const newData = await axios.get(gridDataUrl, { params });
-      // turn off auto refresh if there are no active runs
-      if (!areActiveRuns(newData.dagRuns)) stopRefresh();
-      return newData;
-    } catch (error) {
-      stopRefresh();
-      errorToast({
-        title: 'Auto-refresh Error',
-        error,
-      });
-      throw (error);
-    }
-  }, {
-    placeholderData: emptyData,
-    // only refetch if the refresh switch is on
-    refetchInterval: isRefreshOn && autoRefreshInterval * 1000,
-    keepPreviousData: true,
-  });
+  return useQuery<GridData>(
+    ['gridData', baseDate, numRuns, runType, runState],
+    async () => {
+      try {
+        const params = {
+          root: urlRoot || undefined,
+          [DAG_ID_PARAM]: dagId,
+          [BASE_DATE_PARAM]: baseDate === now ? undefined : baseDate,
+          [NUM_RUNS_PARAM]: numRuns,
+          [RUN_TYPE_PARAM]: runType,
+          [RUN_STATE_PARAM]: runState,
+        };
+        const response = await axios.get<AxiosResponse, GridData>(gridDataUrl, { params });
+        // turn off auto refresh if there are no active runs
+        if (!areActiveRuns(response.dagRuns)) stopRefresh();
+        return response;
+      } catch (error) {
+        stopRefresh();
+        errorToast({
+          title: 'Auto-refresh Error',
+          error,
+        });
+        throw (error);
+      }
+    }, {
+      placeholderData: emptyData,
+      // only refetch if the refresh switch is on
+      refetchInterval: isRefreshOn && (autoRefreshInterval || 1) * 1000,
+      keepPreviousData: true,
+    },
+  );
 };
 
 export default useGridData;
diff --git a/airflow/www/static/js/grid/context/autorefresh.jsx b/airflow/www/static/js/grid/context/autorefresh.jsx
index 35df9b7daf920..11c987fe34493 100644
--- a/airflow/www/static/js/grid/context/autorefresh.jsx
+++ b/airflow/www/static/js/grid/context/autorefresh.jsx
@@ -29,7 +29,13 @@ const autoRefreshKey = 'disabledAutoRefresh';
 const initialIsPaused = getMetaValue('is_paused') === 'True';
 const isRefreshDisabled = JSON.parse(localStorage.getItem(autoRefreshKey));
 
-const AutoRefreshContext = React.createContext(null);
+const AutoRefreshContext = React.createContext({
+  isRefreshOn: false,
+  isPaused: true,
+  toggleRefresh: () => {},
+  stopRefresh: () => {},
+  startRefresh: () => {},
+});
 
 export const AutoRefreshProvider = ({ children }) => {
   const [isPaused, setIsPaused] = useState(initialIsPaused);
diff --git a/airflow/www/static/js/grid/dagRuns/index.jsx b/airflow/www/static/js/grid/dagRuns/index.tsx
similarity index 90%
rename from airflow/www/static/js/grid/dagRuns/index.jsx
rename to airflow/www/static/js/grid/dagRuns/index.tsx
index ec588313c6150..90f79798911dd 100644
--- a/airflow/www/static/js/grid/dagRuns/index.jsx
+++ b/airflow/www/static/js/grid/dagRuns/index.tsx
@@ -24,23 +24,26 @@ import {
   Text,
   Box,
   Flex,
+  TextProps,
 } from '@chakra-ui/react';
 
 import { useGridData } from '../api';
 import DagRunBar from './Bar';
 import { getDuration, formatDuration } from '../../datetime_utils';
 import useSelection from '../utils/useSelection';
+import type { DagRun } from '../types';
 
-const DurationTick = ({ children, ...rest }) => (
+const DurationTick: React.FC<TextProps> = ({ children, ...rest }) => (
   <Text fontSize="sm" color="gray.400" right={1} position="absolute" whiteSpace="nowrap" {...rest}>
     {children}
   </Text>
 );
 
-const DagRuns = () => {
-  const { data: { dagRuns } } = useGridData();
+const DagRuns: React.FC = () => {
+  const { data } = useGridData();
+  const dagRuns: DagRun[] = (data as any)?.dagRuns || [];
   const { selected, onSelect } = useSelection();
-  const durations = [];
+  const durations: number[] = [];
   const runs = dagRuns.map((dagRun) => {
     const duration = getDuration(dagRun.startDate, dagRun.endDate);
     durations.push(duration);
@@ -91,7 +94,7 @@ const DagRuns = () => {
       </Td>
       <Td p={0} align="right" verticalAlign="bottom" borderBottom={0} width={`${runs.length * 16}px`}>
         <Flex justifyContent="flex-end">
-          {runs.map((run, i) => (
+          {runs.map((run: DagRun, i: number) => (
             <DagRunBar
               key={run.runId}
               run={run}
diff --git a/airflow/www/static/js/grid/details/BreadcrumbText.tsx b/airflow/www/static/js/grid/details/BreadcrumbText.tsx
new file mode 100644
index 0000000000000..7b6eb1b244051
--- /dev/null
+++ b/airflow/www/static/js/grid/details/BreadcrumbText.tsx
@@ -0,0 +1,38 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  Box,
+  Heading,
+} from '@chakra-ui/react';
+
+interface Props {
+  label: string;
+  value: React.ReactNode | string;
+}
+
+const BreadcrumbText: React.FC<Props> = ({ label, value }) => (
+  <Box position="relative">
+    <Heading as="h5" size="sm" color="gray.300" position="absolute" top="-12px">{label}</Heading>
+    <Heading as="h3" size="md">{value}</Heading>
+  </Box>
+);
+
+export default BreadcrumbText;
diff --git a/airflow/www/static/js/grid/details/Header.jsx b/airflow/www/static/js/grid/details/Header.tsx
similarity index 83%
rename from airflow/www/static/js/grid/details/Header.jsx
rename to airflow/www/static/js/grid/details/Header.tsx
index c158deabcaa59..85ac41e16004d 100644
--- a/airflow/www/static/js/grid/details/Header.jsx
+++ b/airflow/www/static/js/grid/details/Header.tsx
@@ -22,8 +22,6 @@ import {
   Breadcrumb,
   BreadcrumbItem,
   BreadcrumbLink,
-  Box,
-  Heading,
   Text,
 } from '@chakra-ui/react';
 import { MdPlayArrow, MdOutlineSchedule } from 'react-icons/md';
@@ -33,20 +31,18 @@ import { getMetaValue } from '../../utils';
 import useSelection from '../utils/useSelection';
 import Time from '../components/Time';
 import { useTasks, useGridData } from '../api';
+import BreadcrumbText from './BreadcrumbText';
+import type { DagRun } from '../types';
 
 const dagId = getMetaValue('dag_id');
 
-const LabelValue = ({ label, value }) => (
-  <Box position="relative">
-    <Heading as="h5" size="sm" color="gray.300" position="absolute" top="-12px">{label}</Heading>
-    <Heading as="h3" size="md">{value}</Heading>
-  </Box>
-);
+const Header: React.FC = () => {
+  const { data: gridData } = useGridData();
+  const { data: taskData } = useTasks();
+  const dagRuns: DagRun[] = (gridData as any)?.dagRuns || [];
+  const tasks: any[] = (taskData as any)?.tasks || [];
 
-const Header = () => {
-  const { data: { dagRuns } } = useGridData();
   const { selected: { taskId, runId }, onSelect, clearSelection } = useSelection();
-  const { data: { tasks } } = useTasks();
   const dagRun = dagRuns.find((r) => r.runId === runId);
   const task = tasks.find((t) => t.taskId === taskId);
 
@@ -59,7 +55,7 @@ const Header = () => {
   }, [clearSelection, dagRun, runId]);
 
   let runLabel;
-  if (dagRun) {
+  if (dagRun && runId) {
     if (runId.includes('manual__') || runId.includes('scheduled__') || runId.includes('backfill__')) {
       runLabel = (<Time dateTime={dagRun.dataIntervalStart || dagRun.executionDate} />);
     } else {
@@ -91,30 +87,30 @@ const Header = () => {
 
   const isMapped = task && task.isMapped;
   const lastIndex = taskId ? taskId.lastIndexOf('.') : null;
-  const taskName = lastIndex ? taskId.substring(lastIndex + 1) : taskId;
+  const taskName = taskId && lastIndex ? taskId.substring(lastIndex + 1) : taskId;
 
   const isDagDetails = !runId && !taskId;
-  const isRunDetails = runId && !taskId;
+  const isRunDetails = !!(runId && !taskId);
   const isTaskDetails = runId && taskId;
 
   return (
     <Breadcrumb separator={<Text color="gray.300">/</Text>}>
       <BreadcrumbItem isCurrentPage={isDagDetails} mt={4}>
         <BreadcrumbLink onClick={clearSelection} _hover={isDagDetails ? { cursor: 'default' } : undefined}>
-          <LabelValue label="DAG" value={dagId} />
+          <BreadcrumbText label="DAG" value={dagId} />
         </BreadcrumbLink>
       </BreadcrumbItem>
       {runId && (
         <BreadcrumbItem isCurrentPage={isRunDetails} mt={4}>
           <BreadcrumbLink onClick={() => onSelect({ runId })} _hover={isRunDetails ? { cursor: 'default' } : undefined}>
-            <LabelValue label="Run" value={runLabel} />
+            <BreadcrumbText label="Run" value={runLabel} />
           </BreadcrumbLink>
         </BreadcrumbItem>
       )}
       {taskId && (
         <BreadcrumbItem isCurrentPage mt={4}>
           <BreadcrumbLink _hover={isTaskDetails ? { cursor: 'default' } : undefined}>
-            <LabelValue label="Task" value={`${taskName}${isMapped ? ' []' : ''}`} />
+            <BreadcrumbText label="Task" value={`${taskName}${isMapped ? ' []' : ''}`} />
           </BreadcrumbLink>
         </BreadcrumbItem>
       )}
diff --git a/airflow/www/static/js/grid/details/index.jsx b/airflow/www/static/js/grid/details/index.tsx
similarity index 81%
rename from airflow/www/static/js/grid/details/index.jsx
rename to airflow/www/static/js/grid/details/index.tsx
index a5a3a57e8bfd0..19f77461710e1 100644
--- a/airflow/www/static/js/grid/details/index.jsx
+++ b/airflow/www/static/js/grid/details/index.tsx
@@ -30,21 +30,21 @@ import DagRunContent from './content/dagRun';
 import DagContent from './content/Dag';
 import useSelection from '../utils/useSelection';
 
-const Details = () => {
-  const { selected } = useSelection();
+const Details: React.FC = () => {
+  const { selected: { runId, taskId } } = useSelection();
   return (
     <Flex flexDirection="column" pl={3} mr={3} flexGrow={1} maxWidth="750px">
       <Header />
       <Divider my={2} />
       <Box minWidth="750px">
-        {!selected.runId && !selected.taskId && <DagContent />}
-        {selected.runId && !selected.taskId && (
-          <DagRunContent runId={selected.runId} />
+        {!runId && !taskId && <DagContent />}
+        {runId && !taskId && (
+          <DagRunContent runId={runId} />
         )}
-        {selected.taskId && (
+        {taskId && (
         <TaskInstanceContent
-          runId={selected.runId}
-          taskId={selected.taskId}
+          runId={runId}
+          taskId={taskId}
         />
         )}
       </Box>
diff --git a/airflow/www/static/js/grid/index.d.ts b/airflow/www/static/js/grid/index.d.ts
new file mode 100644
index 0000000000000..35b2bb3233fe3
--- /dev/null
+++ b/airflow/www/static/js/grid/index.d.ts
@@ -0,0 +1,26 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/* eslint-disable no-var */
+
+declare global {
+  const autoRefreshInterval: number | undefined;
+}
+
+export {};
diff --git a/airflow/www/static/js/grid/renderTaskRows.test.jsx b/airflow/www/static/js/grid/renderTaskRows.test.tsx
similarity index 100%
rename from airflow/www/static/js/grid/renderTaskRows.test.jsx
rename to airflow/www/static/js/grid/renderTaskRows.test.tsx
diff --git a/airflow/www/static/js/grid/renderTaskRows.jsx b/airflow/www/static/js/grid/renderTaskRows.tsx
similarity index 77%
rename from airflow/www/static/js/grid/renderTaskRows.jsx
rename to airflow/www/static/js/grid/renderTaskRows.tsx
index 87f93d904eae7..2e59eb648b1f1 100644
--- a/airflow/www/static/js/grid/renderTaskRows.jsx
+++ b/airflow/www/static/js/grid/renderTaskRows.tsx
@@ -30,15 +30,26 @@ import {
 import StatusBox, { boxSize, boxSizePx } from './components/StatusBox';
 import TaskName from './components/TaskName';
 
-import useSelection from './utils/useSelection';
+import useSelection, { SelectionProps } from './utils/useSelection';
 
 const boxPadding = 3;
 const boxPaddingPx = `${boxPadding}px`;
 const columnWidth = boxSize + 2 * boxPadding;
 
-const renderTaskRows = ({
+interface RowProps {
+  task: any
+  level?: number;
+  dagRunIds: string[];
+  openParentCount?: number;
+  openGroupIds?: string[];
+  onToggleGroups?: (groupIds: string[]) => void;
+  hoveredTaskState?: string;
+}
+
+const renderTaskRows: React.FC<RowProps> = ({
   task, level = 0, ...rest
-}) => task.children && task.children.map((t) => (
+}) => task.children && task.children.map((t: any) => (
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   <Row
     {...rest}
     key={t.id}
@@ -47,13 +58,21 @@ const renderTaskRows = ({
   />
 ));
 
-const TaskInstances = ({
-  task, dagRunIds, selectedRunId, onSelect, activeTaskState,
+interface TaskInstancesProps {
+  task: any;
+  dagRunIds: string[];
+  selectedRunId?: string | null;
+  onSelect: (selection: SelectionProps) => void;
+  hoveredTaskState?: string;
+}
+
+const TaskInstances: React.FC<TaskInstancesProps> = ({
+  task, dagRunIds, selectedRunId, onSelect, hoveredTaskState,
 }) => (
   <Flex justifyContent="flex-end">
-    {dagRunIds.map((runId) => {
+    {dagRunIds.map((runId: string) => {
       // Check if an instance exists for the run, or return an empty box
-      const instance = task.instances.find((gi) => gi && gi.runId === runId);
+      const instance = task.instances.find((ti: any) => ti && ti.runId === runId);
       const isSelected = selectedRunId === runId;
       return (
         <Box
@@ -63,7 +82,7 @@ const TaskInstances = ({
           data-selected={isSelected}
           transition="background-color 0.2s"
           key={`${runId}-${task.id}`}
-          bg={isSelected && 'blue.100'}
+          bg={isSelected ? 'blue.100' : undefined}
         >
           {instance
             ? (
@@ -71,7 +90,7 @@ const TaskInstances = ({
                 instance={instance}
                 group={task}
                 onSelect={onSelect}
-                isActive={activeTaskState === undefined || activeTaskState === instance.state}
+                isActive={hoveredTaskState === undefined || hoveredTaskState === instance.state}
               />
             )
             : <Box width={boxSizePx} data-testid="blank-task" />}
@@ -81,10 +100,10 @@ const TaskInstances = ({
   </Flex>
 );
 
-const Row = (props) => {
+const Row: React.FC<RowProps> = (props) => {
   const {
     task,
-    level,
+    level = 0,
     dagRunIds,
     openParentCount = 0,
     openGroupIds = [],
@@ -121,16 +140,16 @@ const Row = (props) => {
   return (
     <>
       <Tr
-        bg={isSelected && 'blue.100'}
+        bg={isSelected ? 'blue.100' : 'inherit'}
         borderBottomWidth={isFullyOpen ? 1 : 0}
         borderBottomColor={isGroup && isOpen ? 'gray.400' : 'gray.200'}
         role="group"
-        _hover={!isSelected && { bg: hoverBlue }}
+        _hover={!isSelected ? { bg: hoverBlue } : undefined}
         transition="background-color 0.2s"
       >
         <Td
           bg={isSelected ? 'blue.100' : 'white'}
-          _groupHover={!isSelected && ({ bg: 'blue.50' })}
+          _groupHover={!isSelected ? { bg: 'blue.50' } : undefined}
           p={0}
           transition="background-color 0.2s"
           lineHeight="18px"
@@ -164,7 +183,7 @@ const Row = (props) => {
               task={task}
               selectedRunId={selected.runId}
               onSelect={onSelect}
-              activeTaskState={hoveredTaskState}
+              hoveredTaskState={hoveredTaskState}
             />
           </Collapse>
         </Td>
diff --git a/airflow/www/static/js/grid/types/index.ts b/airflow/www/static/js/grid/types/index.ts
new file mode 100644
index 0000000000000..aef582868c15c
--- /dev/null
+++ b/airflow/www/static/js/grid/types/index.ts
@@ -0,0 +1,69 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+type RunState = 'success' | 'running' | 'queued' | 'failed' | 'no_status' | '';
+
+type TaskState = RunState
+| 'removed'
+| 'scheduled'
+| 'shutdown'
+| 'restarting'
+| 'up_for_retry'
+| 'up_for_reschedule'
+| 'upstream_failed'
+| 'skipped'
+| 'sensing'
+| 'deferred';
+
+interface DagRun {
+  runId: string;
+  runType: 'manual' | 'backfill' | 'scheduled';
+  state: RunState;
+  executionDate: string;
+  dataIntervalStart: string;
+  dataIntervalEnd: string;
+  startDate: string;
+  endDate: string;
+}
+
+interface GridTaskInstance {
+  runId: string;
+  taskId: string;
+  startDate: string;
+  endDate?: string;
+  state: TaskState;
+}
+
+interface GridTask {
+  id: string | null;
+  label: string | null;
+  instances: GridTaskInstance[];
+  tooltip?: string;
+  children?: GridTask[];
+  extraLinks?: string[];
+  isMapped?: boolean;
+}
+
+export type {
+  DagRun,
+  RunState,
+  TaskState,
+  GridTaskInstance,
+  GridTask,
+};
diff --git a/airflow/www/static/js/grid/utils/useSelection.test.jsx b/airflow/www/static/js/grid/utils/useSelection.test.tsx
similarity index 93%
rename from airflow/www/static/js/grid/utils/useSelection.test.jsx
rename to airflow/www/static/js/grid/utils/useSelection.test.tsx
index 2d2eeeb4db742..aa167ddab7429 100644
--- a/airflow/www/static/js/grid/utils/useSelection.test.jsx
+++ b/airflow/www/static/js/grid/utils/useSelection.test.tsx
@@ -25,7 +25,11 @@ import { MemoryRouter } from 'react-router-dom';
 
 import useSelection from './useSelection';
 
-const Wrapper = ({ children }) => (
+interface Props {
+  children: React.ReactNode;
+}
+
+const Wrapper: React.FC<Props> = ({ children }) => (
   <MemoryRouter>
     {children}
   </MemoryRouter>
@@ -47,8 +51,8 @@ describe('Test useSelection hook', () => {
 
   test.each([
     { taskId: 'task_1', runId: 'run_1' },
-    { taskId: null, runId: 'run_1' },
-    { taskId: 'task_1', runId: null },
+    { runId: 'run_1' },
+    { taskId: 'task_1' },
   ])('Test onSelect() and clearSelection()', async (selected) => {
     const { result } = renderHook(() => useSelection(), { wrapper: Wrapper });
 
diff --git a/airflow/www/static/js/grid/utils/useSelection.js b/airflow/www/static/js/grid/utils/useSelection.ts
similarity index 92%
rename from airflow/www/static/js/grid/utils/useSelection.js
rename to airflow/www/static/js/grid/utils/useSelection.ts
index c90578837a2e1..6b1b4c00b11fc 100644
--- a/airflow/www/static/js/grid/utils/useSelection.js
+++ b/airflow/www/static/js/grid/utils/useSelection.ts
@@ -22,6 +22,11 @@ import { useSearchParams } from 'react-router-dom';
 const RUN_ID = 'dag_run_id';
 const TASK_ID = 'task_id';
 
+export interface SelectionProps {
+  runId?: string;
+  taskId?: string;
+}
+
 const useSelection = () => {
   const [searchParams, setSearchParams] = useSearchParams();
 
@@ -32,7 +37,7 @@ const useSelection = () => {
     setSearchParams(searchParams);
   };
 
-  const onSelect = ({ runId, taskId }) => {
+  const onSelect = ({ runId, taskId }: SelectionProps) => {
     const params = new URLSearchParams(searchParams);
 
     if (runId) params.set(RUN_ID, runId);
diff --git a/airflow/www/tsconfig.json b/airflow/www/tsconfig.json
index 5717d624e36b0..f264a9e3cca57 100644
--- a/airflow/www/tsconfig.json
+++ b/airflow/www/tsconfig.json
@@ -25,8 +25,8 @@
     "strict": true,
     "allowJs": true,
     "importsNotUsedAsValues": "error",
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ES6",
+    "module": "ES6",
     "moduleResolution": "node",
     "isolatedModules": true,
     "esModuleInterop": true,
diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
index e48b01c687736..4252c646ef439 100644
--- a/airflow/www/webpack.config.js
+++ b/airflow/www/webpack.config.js
@@ -53,6 +53,10 @@ Foundation (http://www.apache.org/).
   return text;
 };
 
+const babelOptions = {
+  presets: ['@babel/preset-react', '@babel/preset-typescript'],
+};
+
 const config = {
   entry: {
     airflowDefaultTheme: `${CSS_DIR}/bootstrap-theme.css`,
@@ -106,14 +110,25 @@ const config = {
         ],
       },
       {
-        test: /\.[j|t]sx?$/,
+        test: /\.ts(x?)$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-react', '@babel/preset-typescript'],
-            },
+            options: babelOptions,
+          },
+          {
+            loader: 'ts-loader',
+          },
+        ],
+      },
+      {
+        test: /\.js(x?)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelOptions,
           },
         ],
       },

From c055fce384cd4245b210426cf69036492182cf5d Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 16 Jun 2022 16:01:34 -0400
Subject: [PATCH 02/10] yarn, lint and tests

---
 airflow/www/static/js/grid/api/useGridData.ts |  3 +-
 .../js/grid/utils/useSelection.test.tsx       |  4 +-
 .../www/static/js/grid/utils/useSelection.ts  |  4 +-
 airflow/www/yarn.lock                         | 96 ++++++++++++++++++-
 4 files changed, 98 insertions(+), 9 deletions(-)

diff --git a/airflow/www/static/js/grid/api/useGridData.ts b/airflow/www/static/js/grid/api/useGridData.ts
index 44bbc8e4c41a9..ce1c506119df4 100644
--- a/airflow/www/static/js/grid/api/useGridData.ts
+++ b/airflow/www/static/js/grid/api/useGridData.ts
@@ -84,7 +84,8 @@ const useGridData = () => {
         });
         throw (error);
       }
-    }, {
+    },
+    {
       placeholderData: emptyData,
       // only refetch if the refresh switch is on
       refetchInterval: isRefreshOn && (autoRefreshInterval || 1) * 1000,
diff --git a/airflow/www/static/js/grid/utils/useSelection.test.tsx b/airflow/www/static/js/grid/utils/useSelection.test.tsx
index aa167ddab7429..e6eb5734e601a 100644
--- a/airflow/www/static/js/grid/utils/useSelection.test.tsx
+++ b/airflow/www/static/js/grid/utils/useSelection.test.tsx
@@ -51,8 +51,8 @@ describe('Test useSelection hook', () => {
 
   test.each([
     { taskId: 'task_1', runId: 'run_1' },
-    { runId: 'run_1' },
-    { taskId: 'task_1' },
+    { runId: 'run_1', taskId: null },
+    { taskId: 'task_1', runId: null },
   ])('Test onSelect() and clearSelection()', async (selected) => {
     const { result } = renderHook(() => useSelection(), { wrapper: Wrapper });
 
diff --git a/airflow/www/static/js/grid/utils/useSelection.ts b/airflow/www/static/js/grid/utils/useSelection.ts
index 6b1b4c00b11fc..c4f5290b110a4 100644
--- a/airflow/www/static/js/grid/utils/useSelection.ts
+++ b/airflow/www/static/js/grid/utils/useSelection.ts
@@ -23,8 +23,8 @@ const RUN_ID = 'dag_run_id';
 const TASK_ID = 'task_id';
 
 export interface SelectionProps {
-  runId?: string;
-  taskId?: string;
+  runId?: string | null ;
+  taskId?: string | null;
 }
 
 const useSelection = () => {
diff --git a/airflow/www/yarn.lock b/airflow/www/yarn.lock
index edeb3eb35eed2..4cb101e5cc69d 100644
--- a/airflow/www/yarn.lock
+++ b/airflow/www/yarn.lock
@@ -3630,7 +3630,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.1:
+braces@^3.0.1, braces@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -4888,6 +4888,15 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
+enhanced-resolve@^4.0.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
+  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
+  dependencies:
+    graceful-fs "^4.1.2"
+    memory-fs "^0.5.0"
+    tapable "^1.0.0"
+
 enhanced-resolve@^5.9.3:
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
@@ -4926,6 +4935,13 @@ eonasdan-bootstrap-datetimepicker@^4.17.47:
     moment "^2.10"
     moment-timezone "^0.4.0"
 
+errno@^0.1.3:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
+  dependencies:
+    prr "~1.0.1"
+
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -6000,7 +6016,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -6269,6 +6285,11 @@ isarray@0.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
   integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
 
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -7230,6 +7251,14 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+memory-fs@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
+  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
+  dependencies:
+    errno "^0.1.3"
+    readable-stream "^2.0.1"
+
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -7266,6 +7295,14 @@ micromark@~2.11.0:
     debug "^4.0.0"
     parse-entities "^2.0.0"
 
+micromatch@^4.0.0:
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
 micromatch@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
@@ -7947,6 +7984,11 @@ picomatch@^2.0.4, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
+picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -8372,6 +8414,11 @@ prismjs@^1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
   integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -8408,6 +8455,11 @@ propagate@^2.0.0:
   resolved "https://registry.yarnpkg.com/propagate/-/propagate-2.0.1.tgz#40cdedab18085c792334e64f0ac17256d38f9a45"
   integrity sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==
 
+prr@~1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
 psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -8595,6 +8647,19 @@ readable-stream@1.1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
+readable-stream@^2.0.1:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
+  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readable-stream@^3.1.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -8840,7 +8905,7 @@ safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@~5.1.1:
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -9254,6 +9319,13 @@ string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 strip-ansi@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
@@ -9507,6 +9579,11 @@ table@^6.6.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tapable@^1.0.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
+  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
+
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -9654,6 +9731,17 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
+ts-loader@^8.2.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.4.0.tgz#e845ea0f38d140bdc3d7d60293ca18d12ff2720f"
+  integrity sha512-6nFY3IZ2//mrPc+ImY3hNWx1vCHyEhl6V+wLmL4CZcm6g1CqX7UKrkc6y0i4FwcfOhxyMPCfaEvh20f4r9GNpw==
+  dependencies:
+    chalk "^4.1.0"
+    enhanced-resolve "^4.0.0"
+    loader-utils "^2.0.0"
+    micromatch "^4.0.0"
+    semver "^7.3.4"
+
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@@ -9889,7 +9977,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=

From 567423a7977efc10ad3c432c1528afe0f7232943 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 16 Jun 2022 16:38:01 -0400
Subject: [PATCH 03/10] convert statusbox to ts

---
 .../js/grid/components/InstanceTooltip.jsx    |  2 +-
 .../{StatusBox.jsx => StatusBox.tsx}          | 44 +++++++++++++------
 .../{containerRef.jsx => containerRef.tsx}    | 11 +++--
 airflow/www/static/js/grid/index.d.ts         |  3 ++
 airflow/www/static/js/grid/types/index.ts     | 10 +++--
 5 files changed, 49 insertions(+), 21 deletions(-)
 rename airflow/www/static/js/grid/components/{StatusBox.jsx => StatusBox.tsx} (70%)
 rename airflow/www/static/js/grid/context/{containerRef.jsx => containerRef.tsx} (79%)

diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.jsx b/airflow/www/static/js/grid/components/InstanceTooltip.jsx
index 8898f5af53cf8..bddb382b1d179 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.jsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.jsx
@@ -27,7 +27,7 @@ import Time from './Time';
 const InstanceTooltip = ({
   group,
   instance: {
-    startDate, endDate, state, runId, mappedStates,
+    startDate, endDate, state, runId, mappedStates = {},
   },
 }) => {
   const isGroup = !!group.children;
diff --git a/airflow/www/static/js/grid/components/StatusBox.jsx b/airflow/www/static/js/grid/components/StatusBox.tsx
similarity index 70%
rename from airflow/www/static/js/grid/components/StatusBox.jsx
rename to airflow/www/static/js/grid/components/StatusBox.tsx
index 2f079949a9fb8..d39c2f90e0e7b 100644
--- a/airflow/www/static/js/grid/components/StatusBox.jsx
+++ b/airflow/www/static/js/grid/components/StatusBox.tsx
@@ -17,34 +17,46 @@
  * under the License.
  */
 
-/* global stateColors */
-
 import React from 'react';
 import { isEqual } from 'lodash';
 import {
   Box,
   useTheme,
+  BoxProps,
 } from '@chakra-ui/react';
 
 import Tooltip from './Tooltip';
 import InstanceTooltip from './InstanceTooltip';
 import { useContainerRef } from '../context/containerRef';
+import type { GridTask, GridTaskInstance, TaskState } from '../types';
+import type { SelectionProps } from '../utils/useSelection';
 
 export const boxSize = 10;
 export const boxSizePx = `${boxSize}px`;
 
-export const SimpleStatus = ({ state, ...rest }) => (
+interface SimpleStatusProps extends BoxProps {
+  state: TaskState;
+}
+
+export const SimpleStatus: React.FC<SimpleStatusProps> = ({ state, ...rest }) => (
   <Box
     width={boxSizePx}
     height={boxSizePx}
-    backgroundColor={stateColors[state] || 'white'}
+    backgroundColor={state && stateColors[state] ? stateColors[state] : 'white'}
     borderRadius="2px"
     borderWidth={state ? 0 : 1}
     {...rest}
   />
 );
 
-const StatusBox = ({
+interface Props {
+  group: GridTask;
+  instance: GridTaskInstance;
+  onSelect: (selection: SelectionProps) => void;
+  isActive: boolean;
+}
+
+const StatusBox: React.FC<Props> = ({
   group, instance, onSelect, isActive,
 }) => {
   const containerRef = useContainerRef();
@@ -54,15 +66,19 @@ const StatusBox = ({
 
   // Fetch the corresponding column element and set its background color when hovering
   const onMouseEnter = () => {
-    [...containerRef.current.getElementsByClassName(`js-${runId}`)]
-      .forEach((e) => {
-        // Don't apply hover if it is already selected
-        if (e.getAttribute('data-selected') === 'false') e.style.backgroundColor = hoverBlue;
-      });
+    if (containerRef && containerRef.current) {
+      ([...containerRef.current.getElementsByClassName(`js-${runId}`)] as HTMLElement[])
+        .forEach((e) => {
+          // Don't apply hover if it is already selected
+          if (e.getAttribute('data-selected') === 'false') e.style.backgroundColor = hoverBlue;
+        });
+    }
   };
   const onMouseLeave = () => {
-    [...containerRef.current.getElementsByClassName(`js-${runId}`)]
-      .forEach((e) => { e.style.backgroundColor = null; });
+    if (containerRef && containerRef.current) {
+      ([...containerRef.current.getElementsByClassName(`js-${runId}`)] as HTMLElement[])
+        .forEach((e) => { e.style.backgroundColor = ''; });
+    }
   };
 
   const onClick = () => {
@@ -97,8 +113,8 @@ const StatusBox = ({
 // The default equality function is a shallow comparison and json objects will return false
 // This custom compare function allows us to do a deeper comparison
 const compareProps = (
-  prevProps,
-  nextProps,
+  prevProps: Props,
+  nextProps: Props,
 ) => (
   isEqual(prevProps.group, nextProps.group)
   && isEqual(prevProps.instance, nextProps.instance)
diff --git a/airflow/www/static/js/grid/context/containerRef.jsx b/airflow/www/static/js/grid/context/containerRef.tsx
similarity index 79%
rename from airflow/www/static/js/grid/context/containerRef.jsx
rename to airflow/www/static/js/grid/context/containerRef.tsx
index 9062f907ede00..80cd7111b525e 100644
--- a/airflow/www/static/js/grid/context/containerRef.jsx
+++ b/airflow/www/static/js/grid/context/containerRef.tsx
@@ -19,12 +19,17 @@
 
 import React, { useContext, useRef } from 'react';
 
-const ContainerRefContext = React.createContext(null);
+// eslint-disable-next-line max-len
+const ContainerRefContext = React.createContext<React.RefObject<HTMLDivElement> | undefined>(undefined);
+
+interface Props {
+  children: React.ReactNode;
+}
 
 // containerRef is necessary to render for tooltips, modals, and dialogs
 // This provider allows the containerRef to be accessed by any react component
-export const ContainerRefProvider = ({ children }) => {
-  const containerRef = useRef();
+export const ContainerRefProvider: React.FC<Props> = ({ children }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
 
   return (
     <ContainerRefContext.Provider value={containerRef}>
diff --git a/airflow/www/static/js/grid/index.d.ts b/airflow/www/static/js/grid/index.d.ts
index 35b2bb3233fe3..55aefc95ec2fe 100644
--- a/airflow/www/static/js/grid/index.d.ts
+++ b/airflow/www/static/js/grid/index.d.ts
@@ -21,6 +21,9 @@
 
 declare global {
   const autoRefreshInterval: number | undefined;
+  const stateColors: {
+    [key: string]: string;
+  };
 }
 
 export {};
diff --git a/airflow/www/static/js/grid/types/index.ts b/airflow/www/static/js/grid/types/index.ts
index aef582868c15c..7164bb037cf90 100644
--- a/airflow/www/static/js/grid/types/index.ts
+++ b/airflow/www/static/js/grid/types/index.ts
@@ -29,7 +29,8 @@ type TaskState = RunState
 | 'upstream_failed'
 | 'skipped'
 | 'sensing'
-| 'deferred';
+| 'deferred'
+| null;
 
 interface DagRun {
   runId: string;
@@ -45,9 +46,12 @@ interface DagRun {
 interface GridTaskInstance {
   runId: string;
   taskId: string;
-  startDate: string;
-  endDate?: string;
+  startDate: string | null;
+  endDate: string | null;
   state: TaskState;
+  mappedStates?: {
+    [key: string]: number;
+  }
 }
 
 interface GridTask {

From 7faae9fd89cc94925f1adfac875c35c569cdca4d Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 16 Jun 2022 17:09:11 -0400
Subject: [PATCH 04/10] remove some anys, update instance tooltip

---
 airflow/www/static/js/grid/Main.tsx           |  2 +-
 ...ltip.test.jsx => InstanceTooltip.test.tsx} | 22 ++++++++++++++-----
 ...nstanceTooltip.jsx => InstanceTooltip.tsx} | 22 +++++++++++++------
 airflow/www/static/js/grid/dagRuns/index.tsx  |  2 +-
 airflow/www/static/js/grid/details/Header.tsx |  2 +-
 5 files changed, 35 insertions(+), 15 deletions(-)
 rename airflow/www/static/js/grid/components/{InstanceTooltip.test.jsx => InstanceTooltip.test.tsx} (80%)
 rename airflow/www/static/js/grid/components/{InstanceTooltip.jsx => InstanceTooltip.tsx} (83%)

diff --git a/airflow/www/static/js/grid/Main.tsx b/airflow/www/static/js/grid/Main.tsx
index 4e7ac87c9ff05..a3294219ebb23 100644
--- a/airflow/www/static/js/grid/Main.tsx
+++ b/airflow/www/static/js/grid/Main.tsx
@@ -40,7 +40,7 @@ const detailsPanelKey = 'hideDetailsPanel';
 
 const Main: React.FC = () => {
   const { data, isLoading } = useGridData();
-  const groups = (data as any)?.groups || {};
+  const groups = data?.groups || {};
   const isPanelOpen = localStorage.getItem(detailsPanelKey) !== 'true';
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
   const { clearSelection } = useSelection();
diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.test.jsx b/airflow/www/static/js/grid/components/InstanceTooltip.test.tsx
similarity index 80%
rename from airflow/www/static/js/grid/components/InstanceTooltip.test.jsx
rename to airflow/www/static/js/grid/components/InstanceTooltip.test.tsx
index eb1abe8ba4a79..71e1147da9453 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.test.jsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.test.tsx
@@ -24,19 +24,21 @@ import { render } from '@testing-library/react';
 
 import InstanceTooltip from './InstanceTooltip';
 import { Wrapper } from '../utils/testUtils';
+import type { TaskState } from '../types';
 
 const instance = {
-  startDate: new Date(),
-  endDate: new Date(),
-  state: 'success',
+  startDate: new Date().toISOString(),
+  endDate: new Date().toISOString(),
+  state: 'success' as TaskState,
   runId: 'run',
+  taskId: 'task',
 };
 
 describe('Test Task InstanceTooltip', () => {
   test('Displays a normal task', () => {
     const { getByText } = render(
       <InstanceTooltip
-        group={{}}
+        group={{ id: 'task', label: 'task', instances: [] }}
         instance={instance}
       />,
       { wrapper: Wrapper },
@@ -48,7 +50,9 @@ describe('Test Task InstanceTooltip', () => {
   test('Displays a mapped task with overall status', () => {
     const { getByText } = render(
       <InstanceTooltip
-        group={{ isMapped: true }}
+        group={{
+          id: 'task', label: 'task', instances: [], isMapped: true,
+        }}
         instance={{ ...instance, mappedStates: { success: 2 } }}
       />,
       { wrapper: Wrapper },
@@ -63,12 +67,20 @@ describe('Test Task InstanceTooltip', () => {
     const { getByText, queryByText } = render(
       <InstanceTooltip
         group={{
+          id: 'task',
+          label: 'task',
+          instances: [],
           children: [
             {
+              id: 'child_task',
+              label: 'child_task',
               instances: [
                 {
+                  taskId: 'child_task',
                   runId: 'run',
                   state: 'success',
+                  startDate: '',
+                  endDate: '',
                 },
               ],
             },
diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.jsx b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
similarity index 83%
rename from airflow/www/static/js/grid/components/InstanceTooltip.jsx
rename to airflow/www/static/js/grid/components/InstanceTooltip.tsx
index bddb382b1d179..47498ddfd27b7 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.jsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
@@ -23,25 +23,33 @@ import { Box, Text } from '@chakra-ui/react';
 import { finalStatesMap } from '../../utils';
 import { formatDuration, getDuration } from '../../datetime_utils';
 import Time from './Time';
+import type { GridTaskInstance, GridTask } from '../types';
 
-const InstanceTooltip = ({
+interface Props {
+  group: GridTask;
+  instance: GridTaskInstance;
+}
+
+const InstanceTooltip: React.FC<Props> = ({
   group,
   instance: {
-    startDate, endDate, state, runId, mappedStates = {},
+    startDate, endDate, state, runId, mappedStates,
   },
 }) => {
+  if (!group) return null;
   const isGroup = !!group.children;
-  const { isMapped } = group;
-  const summary = [];
+  const summary: React.ReactNode[] = [];
+
+  const isMapped = group?.isMapped;
 
   const numMap = finalStatesMap();
   let numMapped = 0;
-  if (isGroup) {
+  if (isGroup && group.children) {
     group.children.forEach((child) => {
       const taskInstance = child.instances.find((ti) => ti.runId === runId);
       if (taskInstance) {
         const stateKey = taskInstance.state == null ? 'no_status' : taskInstance.state;
-        if (numMap.has(stateKey)) numMap.set(stateKey, numMap.get(stateKey) + 1);
+        if (numMap.has(stateKey)) numMap.set(stateKey, (numMap.get(stateKey) || 0) + 1);
       }
     });
   } else if (isMapped && mappedStates) {
@@ -88,7 +96,7 @@ const InstanceTooltip = ({
       <Text>
         Started:
         {' '}
-        <Time dateTime={startDate} />
+        <Time dateTime={startDate || ''} />
       </Text>
       <Text>
         Duration:
diff --git a/airflow/www/static/js/grid/dagRuns/index.tsx b/airflow/www/static/js/grid/dagRuns/index.tsx
index 90f79798911dd..71acd711a7d4b 100644
--- a/airflow/www/static/js/grid/dagRuns/index.tsx
+++ b/airflow/www/static/js/grid/dagRuns/index.tsx
@@ -41,7 +41,7 @@ const DurationTick: React.FC<TextProps> = ({ children, ...rest }) => (
 
 const DagRuns: React.FC = () => {
   const { data } = useGridData();
-  const dagRuns: DagRun[] = (data as any)?.dagRuns || [];
+  const dagRuns: DagRun[] = data?.dagRuns || [];
   const { selected, onSelect } = useSelection();
   const durations: number[] = [];
   const runs = dagRuns.map((dagRun) => {
diff --git a/airflow/www/static/js/grid/details/Header.tsx b/airflow/www/static/js/grid/details/Header.tsx
index 85ac41e16004d..56a5b0078fbac 100644
--- a/airflow/www/static/js/grid/details/Header.tsx
+++ b/airflow/www/static/js/grid/details/Header.tsx
@@ -39,7 +39,7 @@ const dagId = getMetaValue('dag_id');
 const Header: React.FC = () => {
   const { data: gridData } = useGridData();
   const { data: taskData } = useTasks();
-  const dagRuns: DagRun[] = (gridData as any)?.dagRuns || [];
+  const dagRuns: DagRun[] = gridData?.dagRuns || [];
   const tasks: any[] = (taskData as any)?.tasks || [];
 
   const { selected: { taskId, runId }, onSelect, clearSelection } = useSelection();

From 68a4f3d04608b68c0e982a951a8d0458febad9a0 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Fri, 17 Jun 2022 09:43:57 -0400
Subject: [PATCH 05/10] fix types

---
 airflow/www/static/js/grid/api/useGridData.ts |  4 ++--
 .../js/grid/components/InstanceTooltip.tsx    |  6 +++---
 .../static/js/grid/components/StatusBox.tsx   |  6 +++---
 airflow/www/static/js/grid/types/index.ts     | 21 ++++++++++---------
 4 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/airflow/www/static/js/grid/api/useGridData.ts b/airflow/www/static/js/grid/api/useGridData.ts
index ce1c506119df4..a81a951f91e42 100644
--- a/airflow/www/static/js/grid/api/useGridData.ts
+++ b/airflow/www/static/js/grid/api/useGridData.ts
@@ -26,7 +26,7 @@ import useErrorToast from '../utils/useErrorToast';
 import useFilters, {
   BASE_DATE_PARAM, NUM_RUNS_PARAM, RUN_STATE_PARAM, RUN_TYPE_PARAM, now,
 } from '../utils/useFilters';
-import type { GridTask, DagRun } from '../types';
+import type { Task, DagRun } from '../types';
 
 const DAG_ID_PARAM = 'dag_id';
 
@@ -37,7 +37,7 @@ const urlRoot = getMetaValue('root');
 
 interface GridData {
   dagRuns: DagRun[];
-  groups: GridTask;
+  groups: Task;
 }
 
 const emptyData: GridData = {
diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.tsx b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
index 47498ddfd27b7..3ecea2722999a 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.tsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
@@ -23,11 +23,11 @@ import { Box, Text } from '@chakra-ui/react';
 import { finalStatesMap } from '../../utils';
 import { formatDuration, getDuration } from '../../datetime_utils';
 import Time from './Time';
-import type { GridTaskInstance, GridTask } from '../types';
+import type { TaskInstance, Task } from '../types';
 
 interface Props {
-  group: GridTask;
-  instance: GridTaskInstance;
+  group: Task;
+  instance: TaskInstance;
 }
 
 const InstanceTooltip: React.FC<Props> = ({
diff --git a/airflow/www/static/js/grid/components/StatusBox.tsx b/airflow/www/static/js/grid/components/StatusBox.tsx
index d39c2f90e0e7b..ee986a93ec428 100644
--- a/airflow/www/static/js/grid/components/StatusBox.tsx
+++ b/airflow/www/static/js/grid/components/StatusBox.tsx
@@ -28,7 +28,7 @@ import {
 import Tooltip from './Tooltip';
 import InstanceTooltip from './InstanceTooltip';
 import { useContainerRef } from '../context/containerRef';
-import type { GridTask, GridTaskInstance, TaskState } from '../types';
+import type { Task, TaskInstance, TaskState } from '../types';
 import type { SelectionProps } from '../utils/useSelection';
 
 export const boxSize = 10;
@@ -50,8 +50,8 @@ export const SimpleStatus: React.FC<SimpleStatusProps> = ({ state, ...rest }) =>
 );
 
 interface Props {
-  group: GridTask;
-  instance: GridTaskInstance;
+  group: Task;
+  instance: TaskInstance;
   onSelect: (selection: SelectionProps) => void;
   isActive: boolean;
 }
diff --git a/airflow/www/static/js/grid/types/index.ts b/airflow/www/static/js/grid/types/index.ts
index 7164bb037cf90..e90b95ebc1b3b 100644
--- a/airflow/www/static/js/grid/types/index.ts
+++ b/airflow/www/static/js/grid/types/index.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-type RunState = 'success' | 'running' | 'queued' | 'failed' | 'no_status' | '';
+type RunState = 'success' | 'running' | 'queued' | 'failed';
 
 type TaskState = RunState
 | 'removed'
@@ -39,27 +39,28 @@ interface DagRun {
   executionDate: string;
   dataIntervalStart: string;
   dataIntervalEnd: string;
-  startDate: string;
-  endDate: string;
+  startDate: string | null;
+  endDate: string | null;
+  lastSchedulingDecision: string | null;
 }
 
-interface GridTaskInstance {
+interface TaskInstance {
   runId: string;
   taskId: string;
   startDate: string | null;
   endDate: string | null;
-  state: TaskState;
+  state: TaskState | null;
   mappedStates?: {
     [key: string]: number;
   }
 }
 
-interface GridTask {
+interface Task {
   id: string | null;
   label: string | null;
-  instances: GridTaskInstance[];
+  instances: TaskInstance[];
   tooltip?: string;
-  children?: GridTask[];
+  children?: Task[];
   extraLinks?: string[];
   isMapped?: boolean;
 }
@@ -68,6 +69,6 @@ export type {
   DagRun,
   RunState,
   TaskState,
-  GridTaskInstance,
-  GridTask,
+  TaskInstance,
+  Task,
 };

From dbcbb7f2d55cd4c9d97d3fc8ecf3601c05221fa5 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Fri, 17 Jun 2022 10:17:47 -0400
Subject: [PATCH 06/10] remove any, add comment for global vars

---
 airflow/www/static/js/grid/index.d.ts         |  3 +-
 .../static/js/grid/renderTaskRows.test.tsx    | 21 ++++--------
 airflow/www/static/js/grid/renderTaskRows.tsx | 33 +++++++++++--------
 3 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/airflow/www/static/js/grid/index.d.ts b/airflow/www/static/js/grid/index.d.ts
index 55aefc95ec2fe..174b4e5e510a4 100644
--- a/airflow/www/static/js/grid/index.d.ts
+++ b/airflow/www/static/js/grid/index.d.ts
@@ -17,8 +17,7 @@
  * under the License.
  */
 
-/* eslint-disable no-var */
-
+// define global variables that come from FAB
 declare global {
   const autoRefreshInterval: number | undefined;
   const stateColors: {
diff --git a/airflow/www/static/js/grid/renderTaskRows.test.tsx b/airflow/www/static/js/grid/renderTaskRows.test.tsx
index 7b1596512a8a4..4f5fabc9209a9 100644
--- a/airflow/www/static/js/grid/renderTaskRows.test.tsx
+++ b/airflow/www/static/js/grid/renderTaskRows.test.tsx
@@ -24,10 +24,11 @@ import { render } from '@testing-library/react';
 
 import renderTaskRows from './renderTaskRows';
 import { TableWrapper } from './utils/testUtils';
+import type { Task } from './types';
 
 describe('Test renderTaskRows', () => {
   test('Renders name and task instance', () => {
-    const task = {
+    const task: Task = {
       id: null,
       label: null,
       children: [
@@ -37,16 +38,11 @@ describe('Test renderTaskRows', () => {
           label: 'group_1',
           instances: [
             {
-              dagId: 'dagId',
-              duration: 0,
               endDate: '2021-10-26T15:42:03.391939+00:00',
-              executionDate: '2021-10-25T15:41:09.726436+00:00',
-              operator: 'DummyOperator',
               runId: 'run1',
               startDate: '2021-10-26T15:42:03.391917+00:00',
               state: 'success',
               taskId: 'group_1',
-              tryNumber: 1,
             },
           ],
           children: [
@@ -56,16 +52,11 @@ describe('Test renderTaskRows', () => {
               extraLinks: [],
               instances: [
                 {
-                  dagId: 'dagId',
-                  duration: 0,
                   endDate: '2021-10-26T15:42:03.391939+00:00',
-                  executionDate: '2021-10-25T15:41:09.726436+00:00',
-                  operator: 'DummyOperator',
                   runId: 'run1',
                   startDate: '2021-10-26T15:42:03.391917+00:00',
                   state: 'success',
                   taskId: 'group_1.task_1',
-                  tryNumber: 1,
                 },
               ],
             },
@@ -110,7 +101,7 @@ describe('Test renderTaskRows', () => {
   });
 
   test('Still renders correctly if task instance is null', () => {
-    const task = {
+    const task: Task = {
       id: null,
       label: null,
       children: [
@@ -118,18 +109,18 @@ describe('Test renderTaskRows', () => {
           extraLinks: [],
           id: 'group_1',
           label: 'group_1',
-          instances: [null],
+          instances: [],
           children: [
             {
               id: 'group_1.task_1',
               label: 'group_1.task_1',
               extraLinks: [],
-              instances: [null],
+              instances: [],
             },
           ],
         },
       ],
-      instances: [null],
+      instances: [],
     };
 
     const { queryByTestId, getByText } = render(
diff --git a/airflow/www/static/js/grid/renderTaskRows.tsx b/airflow/www/static/js/grid/renderTaskRows.tsx
index 2e59eb648b1f1..532d153fb2fcf 100644
--- a/airflow/www/static/js/grid/renderTaskRows.tsx
+++ b/airflow/www/static/js/grid/renderTaskRows.tsx
@@ -31,15 +31,16 @@ import StatusBox, { boxSize, boxSizePx } from './components/StatusBox';
 import TaskName from './components/TaskName';
 
 import useSelection, { SelectionProps } from './utils/useSelection';
+import type { Task, DagRun } from './types';
 
 const boxPadding = 3;
 const boxPaddingPx = `${boxPadding}px`;
 const columnWidth = boxSize + 2 * boxPadding;
 
 interface RowProps {
-  task: any
+  task: Task;
+  dagRunIds: DagRun['runId'][];
   level?: number;
-  dagRunIds: string[];
   openParentCount?: number;
   openGroupIds?: string[];
   onToggleGroups?: (groupIds: string[]) => void;
@@ -48,18 +49,22 @@ interface RowProps {
 
 const renderTaskRows: React.FC<RowProps> = ({
   task, level = 0, ...rest
-}) => task.children && task.children.map((t: any) => (
-  // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  <Row
-    {...rest}
-    key={t.id}
-    task={t}
-    level={level}
-  />
-));
+}) => (
+  <>
+    {(task?.children || []).map((t) => (
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      <Row
+        {...rest}
+        key={t.id}
+        task={t}
+        level={level}
+      />
+    ))}
+  </>
+);
 
 interface TaskInstancesProps {
-  task: any;
+  task: Task;
   dagRunIds: string[];
   selectedRunId?: string | null;
   onSelect: (selection: SelectionProps) => void;
@@ -72,7 +77,7 @@ const TaskInstances: React.FC<TaskInstancesProps> = ({
   <Flex justifyContent="flex-end">
     {dagRunIds.map((runId: string) => {
       // Check if an instance exists for the run, or return an empty box
-      const instance = task.instances.find((ti: any) => ti && ti.runId === runId);
+      const instance = task.instances.find((ti) => ti && ti.runId === runId);
       const isSelected = selectedRunId === runId;
       return (
         <Box
@@ -122,7 +127,7 @@ const Row: React.FC<RowProps> = (props) => {
   // assure the function is the same across renders
   const memoizedToggle = useCallback(
     () => {
-      if (isGroup) {
+      if (isGroup && task.label) {
         let newGroupIds = [];
         if (!isOpen) {
           newGroupIds = [...openGroupIds, task.label];

From 73bbed4dc6fe703b45fc700ee612191fb78611fa Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Fri, 17 Jun 2022 15:33:24 -0400
Subject: [PATCH 07/10] fix url selection and grid/task defaults

---
 airflow/www/static/js/grid/Main.tsx           |  3 +-
 airflow/www/static/js/grid/api/useGridData.ts | 48 ++++++++++---------
 .../js/grid/api/{useTasks.js => useTasks.ts}  | 18 ++++---
 airflow/www/static/js/grid/dagRuns/index.tsx  |  3 +-
 airflow/www/static/js/grid/details/Header.tsx |  7 +--
 .../taskInstance/{index.jsx => index.tsx}     | 39 ++++++++-------
 airflow/www/static/js/grid/details/index.tsx  |  2 +-
 airflow/www/static/js/grid/types/index.ts     |  3 +-
 8 files changed, 66 insertions(+), 57 deletions(-)
 rename airflow/www/static/js/grid/api/{useTasks.js => useTasks.ts} (77%)
 rename airflow/www/static/js/grid/details/content/taskInstance/{index.jsx => index.tsx} (87%)

diff --git a/airflow/www/static/js/grid/Main.tsx b/airflow/www/static/js/grid/Main.tsx
index a3294219ebb23..99c2b208e16f6 100644
--- a/airflow/www/static/js/grid/Main.tsx
+++ b/airflow/www/static/js/grid/Main.tsx
@@ -39,8 +39,7 @@ import { useGridData } from './api';
 const detailsPanelKey = 'hideDetailsPanel';
 
 const Main: React.FC = () => {
-  const { data, isLoading } = useGridData();
-  const groups = data?.groups || {};
+  const { data: { groups }, isLoading } = useGridData();
   const isPanelOpen = localStorage.getItem(detailsPanelKey) !== 'true';
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
   const { clearSelection } = useSelection();
diff --git a/airflow/www/static/js/grid/api/useGridData.ts b/airflow/www/static/js/grid/api/useGridData.ts
index a81a951f91e42..ec12ee6d601dd 100644
--- a/airflow/www/static/js/grid/api/useGridData.ts
+++ b/airflow/www/static/js/grid/api/useGridData.ts
@@ -40,7 +40,7 @@ interface GridData {
   groups: Task;
 }
 
-const emptyData: GridData = {
+const emptyGridData: GridData = {
   dagRuns: [],
   groups: {
     id: null,
@@ -60,38 +60,40 @@ const useGridData = () => {
     },
   } = useFilters();
 
-  return useQuery<GridData>(
+  const query = useQuery(
     ['gridData', baseDate, numRuns, runType, runState],
     async () => {
-      try {
-        const params = {
-          root: urlRoot || undefined,
-          [DAG_ID_PARAM]: dagId,
-          [BASE_DATE_PARAM]: baseDate === now ? undefined : baseDate,
-          [NUM_RUNS_PARAM]: numRuns,
-          [RUN_TYPE_PARAM]: runType,
-          [RUN_STATE_PARAM]: runState,
-        };
-        const response = await axios.get<AxiosResponse, GridData>(gridDataUrl, { params });
-        // turn off auto refresh if there are no active runs
-        if (!areActiveRuns(response.dagRuns)) stopRefresh();
-        return response;
-      } catch (error) {
+      const params = {
+        root: urlRoot || undefined,
+        [DAG_ID_PARAM]: dagId,
+        [BASE_DATE_PARAM]: baseDate === now ? undefined : baseDate,
+        [NUM_RUNS_PARAM]: numRuns,
+        [RUN_TYPE_PARAM]: runType,
+        [RUN_STATE_PARAM]: runState,
+      };
+      const response = await axios.get<AxiosResponse, GridData>(gridDataUrl, { params });
+      // turn off auto refresh if there are no active runs
+      if (!areActiveRuns(response.dagRuns)) stopRefresh();
+      return response;
+    },
+    {
+      // only refetch if the refresh switch is on
+      refetchInterval: isRefreshOn && (autoRefreshInterval || 1) * 1000,
+      keepPreviousData: true,
+      onError: (error) => {
         stopRefresh();
         errorToast({
           title: 'Auto-refresh Error',
           error,
         });
         throw (error);
-      }
-    },
-    {
-      placeholderData: emptyData,
-      // only refetch if the refresh switch is on
-      refetchInterval: isRefreshOn && (autoRefreshInterval || 1) * 1000,
-      keepPreviousData: true,
+      },
     },
   );
+  return {
+    ...query,
+    data: query.data ?? emptyGridData,
+  };
 };
 
 export default useGridData;
diff --git a/airflow/www/static/js/grid/api/useTasks.js b/airflow/www/static/js/grid/api/useTasks.ts
similarity index 77%
rename from airflow/www/static/js/grid/api/useTasks.js
rename to airflow/www/static/js/grid/api/useTasks.ts
index c214444dcb81e..68878a78a006a 100644
--- a/airflow/www/static/js/grid/api/useTasks.js
+++ b/airflow/www/static/js/grid/api/useTasks.ts
@@ -17,19 +17,25 @@
  * under the License.
  */
 
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { useQuery } from 'react-query';
 import { getMetaValue } from '../../utils';
 
+interface TaskData {
+  tasks: any[];
+  totalEntries: number;
+}
+
 export default function useTasks() {
-  return useQuery(
+  const query = useQuery<TaskData>(
     'tasks',
     () => {
       const tasksUrl = getMetaValue('tasks_api');
-      return axios.get(tasksUrl);
-    },
-    {
-      initialData: { tasks: [], totalEntries: 0 },
+      return axios.get<AxiosResponse, TaskData>(tasksUrl || '');
     },
   );
+  return {
+    ...query,
+    data: query.data || { tasks: [], totalEntries: 0 },
+  };
 }
diff --git a/airflow/www/static/js/grid/dagRuns/index.tsx b/airflow/www/static/js/grid/dagRuns/index.tsx
index 71acd711a7d4b..40200d037de5a 100644
--- a/airflow/www/static/js/grid/dagRuns/index.tsx
+++ b/airflow/www/static/js/grid/dagRuns/index.tsx
@@ -40,8 +40,7 @@ const DurationTick: React.FC<TextProps> = ({ children, ...rest }) => (
 );
 
 const DagRuns: React.FC = () => {
-  const { data } = useGridData();
-  const dagRuns: DagRun[] = data?.dagRuns || [];
+  const { data: { dagRuns } } = useGridData();
   const { selected, onSelect } = useSelection();
   const durations: number[] = [];
   const runs = dagRuns.map((dagRun) => {
diff --git a/airflow/www/static/js/grid/details/Header.tsx b/airflow/www/static/js/grid/details/Header.tsx
index 56a5b0078fbac..54ae471f6ba2d 100644
--- a/airflow/www/static/js/grid/details/Header.tsx
+++ b/airflow/www/static/js/grid/details/Header.tsx
@@ -32,15 +32,12 @@ import useSelection from '../utils/useSelection';
 import Time from '../components/Time';
 import { useTasks, useGridData } from '../api';
 import BreadcrumbText from './BreadcrumbText';
-import type { DagRun } from '../types';
 
 const dagId = getMetaValue('dag_id');
 
 const Header: React.FC = () => {
-  const { data: gridData } = useGridData();
-  const { data: taskData } = useTasks();
-  const dagRuns: DagRun[] = gridData?.dagRuns || [];
-  const tasks: any[] = (taskData as any)?.tasks || [];
+  const { data: { dagRuns } } = useGridData();
+  const { data: { tasks } } = useTasks();
 
   const { selected: { taskId, runId }, onSelect, clearSelection } = useSelection();
   const dagRun = dagRuns.find((r) => r.runId === runId);
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/index.jsx b/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
similarity index 87%
rename from airflow/www/static/js/grid/details/content/taskInstance/index.jsx
rename to airflow/www/static/js/grid/details/content/taskInstance/index.tsx
index 7be2387ba569a..0d4334bda933e 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/index.jsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
@@ -45,12 +45,22 @@ import Details from './Details';
 import { useGridData, useTasks } from '../../../api';
 import MappedInstances from './MappedInstances';
 import { getMetaValue } from '../../../../utils';
+import type { Task, DagRun } from '../../../types';
 
 const detailsPanelActiveTabIndex = 'detailsPanelActiveTabIndex';
 
 const dagId = getMetaValue('dag_id');
 
-const getTask = ({ taskId, runId, task }) => {
+interface Props {
+  taskId: Task['id'];
+  runId: DagRun['runId'];
+}
+
+interface GetTaskProps extends Props {
+  task: Task;
+}
+
+const getTask = ({ taskId, runId, task }: GetTaskProps) => {
   if (task.id === taskId) return task;
   if (task.children) {
     let foundTask;
@@ -63,10 +73,10 @@ const getTask = ({ taskId, runId, task }) => {
   return null;
 };
 
-const TaskInstance = ({ taskId, runId }) => {
+const TaskInstance: React.FC<Props> = ({ taskId, runId }) => {
   const [selectedRows, setSelectedRows] = useState([]);
-  const { data: { groups, dagRuns } } = useGridData();
-  const { data: { tasks } } = useTasks(dagId);
+  const { data: { dagRuns, groups } } = useGridData();
+  const { data: { tasks } } = useTasks();
 
   const storageTabIndex = parseInt(localStorage.getItem(detailsPanelActiveTabIndex) || '0', 10);
   const [preferedTabIndex, setPreferedTabIndex] = useState(storageTabIndex);
@@ -74,13 +84,13 @@ const TaskInstance = ({ taskId, runId }) => {
   const group = getTask({ taskId, runId, task: groups });
   const run = dagRuns.find((r) => r.runId === runId);
 
-  const handleTabsChange = (index) => {
-    localStorage.setItem(detailsPanelActiveTabIndex, index);
+  const handleTabsChange = (index: number) => {
+    localStorage.setItem(detailsPanelActiveTabIndex, index.toString());
     setPreferedTabIndex(index);
   };
 
-  const { isMapped, extraLinks } = group;
-  const isGroup = !!group.children;
+  const isGroup = !!group?.children;
+  const isMapped = !!group?.isMapped;
 
   const isSimpleTask = !isMapped && !isGroup;
 
@@ -102,8 +112,8 @@ const TaskInstance = ({ taskId, runId }) => {
   if (!group || !run) return null;
 
   const { executionDate } = run;
-  const task = tasks.find((t) => t.taskId === taskId);
-  const operator = task && task.classRef && task.classRef.className ? task.classRef.className : '';
+  const task: any = tasks.find((t: any) => t.taskId === taskId);
+  const operator = (task?.classRef && task?.classRef?.className) ?? '';
 
   const instance = group.instances.find((ti) => ti.runId === runId);
 
@@ -128,16 +138,13 @@ const TaskInstance = ({ taskId, runId }) => {
           <Tab>
             <Text as="strong">Details</Text>
           </Tab>
-
           { isSimpleTask && (
             <Tab>
               <Text as="strong">Logs</Text>
             </Tab>
           )}
         </TabList>
-
         <TabPanels>
-
           {/* Details Tab */}
           <TabPanel>
             <Box py="4px">
@@ -180,7 +187,7 @@ const TaskInstance = ({ taskId, runId }) => {
                 taskId={taskId}
                 dagId={dagId}
                 executionDate={executionDate}
-                extraLinks={extraLinks}
+                extraLinks={group?.extraLinks || []}
               />
               {isMapped && (
                 <MappedInstances
@@ -192,7 +199,6 @@ const TaskInstance = ({ taskId, runId }) => {
               )}
             </Box>
           </TabPanel>
-
           {/* Logs Tab */}
           { isSimpleTask && (
           <TabPanel>
@@ -201,9 +207,8 @@ const TaskInstance = ({ taskId, runId }) => {
               dagRunId={runId}
               taskId={taskId}
               executionDate={executionDate}
-              tryNumber={instance.tryNumber}
+              tryNumber={instance?.tryNumber}
             />
-
           </TabPanel>
           )}
         </TabPanels>
diff --git a/airflow/www/static/js/grid/details/index.tsx b/airflow/www/static/js/grid/details/index.tsx
index 19f77461710e1..f08ca7471f3d9 100644
--- a/airflow/www/static/js/grid/details/index.tsx
+++ b/airflow/www/static/js/grid/details/index.tsx
@@ -41,7 +41,7 @@ const Details: React.FC = () => {
         {runId && !taskId && (
           <DagRunContent runId={runId} />
         )}
-        {taskId && (
+        {taskId && runId && (
         <TaskInstanceContent
           runId={runId}
           taskId={taskId}
diff --git a/airflow/www/static/js/grid/types/index.ts b/airflow/www/static/js/grid/types/index.ts
index e90b95ebc1b3b..df1f873ef79c3 100644
--- a/airflow/www/static/js/grid/types/index.ts
+++ b/airflow/www/static/js/grid/types/index.ts
@@ -52,7 +52,8 @@ interface TaskInstance {
   state: TaskState | null;
   mappedStates?: {
     [key: string]: number;
-  }
+  },
+  tryNumber?: number;
 }
 
 interface Task {

From 71eff0e840a486a5b85e6b5c9bf7d1c3e166473e Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Tue, 21 Jun 2022 14:13:57 -0400
Subject: [PATCH 08/10] remove React.FC declarations

---
 airflow/www/static/js/grid/Main.tsx                    |  2 +-
 .../www/static/js/grid/components/InstanceTooltip.tsx  |  4 ++--
 airflow/www/static/js/grid/components/StatusBox.tsx    |  6 +++---
 airflow/www/static/js/grid/components/Time.tsx         |  2 +-
 airflow/www/static/js/grid/context/containerRef.tsx    |  2 +-
 airflow/www/static/js/grid/dagRuns/index.tsx           |  4 ++--
 airflow/www/static/js/grid/details/BreadcrumbText.tsx  |  2 +-
 airflow/www/static/js/grid/details/Header.tsx          |  2 +-
 .../js/grid/details/content/taskInstance/index.tsx     |  2 +-
 airflow/www/static/js/grid/details/index.tsx           |  2 +-
 airflow/www/static/js/grid/renderTaskRows.tsx          | 10 +++++-----
 airflow/www/static/js/grid/utils/useSelection.test.tsx |  2 +-
 12 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/airflow/www/static/js/grid/Main.tsx b/airflow/www/static/js/grid/Main.tsx
index 99c2b208e16f6..8779b547ec16b 100644
--- a/airflow/www/static/js/grid/Main.tsx
+++ b/airflow/www/static/js/grid/Main.tsx
@@ -38,7 +38,7 @@ import { useGridData } from './api';
 
 const detailsPanelKey = 'hideDetailsPanel';
 
-const Main: React.FC = () => {
+const Main = () => {
   const { data: { groups }, isLoading } = useGridData();
   const isPanelOpen = localStorage.getItem(detailsPanelKey) !== 'true';
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: isPanelOpen });
diff --git a/airflow/www/static/js/grid/components/InstanceTooltip.tsx b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
index 3ecea2722999a..dc15fe1261494 100644
--- a/airflow/www/static/js/grid/components/InstanceTooltip.tsx
+++ b/airflow/www/static/js/grid/components/InstanceTooltip.tsx
@@ -30,12 +30,12 @@ interface Props {
   instance: TaskInstance;
 }
 
-const InstanceTooltip: React.FC<Props> = ({
+const InstanceTooltip = ({
   group,
   instance: {
     startDate, endDate, state, runId, mappedStates,
   },
-}) => {
+}: Props) => {
   if (!group) return null;
   const isGroup = !!group.children;
   const summary: React.ReactNode[] = [];
diff --git a/airflow/www/static/js/grid/components/StatusBox.tsx b/airflow/www/static/js/grid/components/StatusBox.tsx
index ee986a93ec428..f9acf57402ee1 100644
--- a/airflow/www/static/js/grid/components/StatusBox.tsx
+++ b/airflow/www/static/js/grid/components/StatusBox.tsx
@@ -38,7 +38,7 @@ interface SimpleStatusProps extends BoxProps {
   state: TaskState;
 }
 
-export const SimpleStatus: React.FC<SimpleStatusProps> = ({ state, ...rest }) => (
+export const SimpleStatus = ({ state, ...rest }: SimpleStatusProps) => (
   <Box
     width={boxSizePx}
     height={boxSizePx}
@@ -56,9 +56,9 @@ interface Props {
   isActive: boolean;
 }
 
-const StatusBox: React.FC<Props> = ({
+const StatusBox = ({
   group, instance, onSelect, isActive,
-}) => {
+}: Props) => {
   const containerRef = useContainerRef();
   const { runId, taskId } = instance;
   const { colors } = useTheme();
diff --git a/airflow/www/static/js/grid/components/Time.tsx b/airflow/www/static/js/grid/components/Time.tsx
index 5712d163c9877..fbc0b16e79221 100644
--- a/airflow/www/static/js/grid/components/Time.tsx
+++ b/airflow/www/static/js/grid/components/Time.tsx
@@ -27,7 +27,7 @@ interface Props {
   format?: string;
 }
 
-const Time: React.FC<Props> = ({ dateTime, format = defaultFormatWithTZ }) => {
+const Time = ({ dateTime, format = defaultFormatWithTZ }: Props) => {
   const { timezone } = useTimezone();
   const time = moment(dateTime);
 
diff --git a/airflow/www/static/js/grid/context/containerRef.tsx b/airflow/www/static/js/grid/context/containerRef.tsx
index 80cd7111b525e..4ddc03642880c 100644
--- a/airflow/www/static/js/grid/context/containerRef.tsx
+++ b/airflow/www/static/js/grid/context/containerRef.tsx
@@ -28,7 +28,7 @@ interface Props {
 
 // containerRef is necessary to render for tooltips, modals, and dialogs
 // This provider allows the containerRef to be accessed by any react component
-export const ContainerRefProvider: React.FC<Props> = ({ children }) => {
+export const ContainerRefProvider = ({ children }: Props) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
   return (
diff --git a/airflow/www/static/js/grid/dagRuns/index.tsx b/airflow/www/static/js/grid/dagRuns/index.tsx
index 40200d037de5a..679b7db3a5ecc 100644
--- a/airflow/www/static/js/grid/dagRuns/index.tsx
+++ b/airflow/www/static/js/grid/dagRuns/index.tsx
@@ -33,13 +33,13 @@ import { getDuration, formatDuration } from '../../datetime_utils';
 import useSelection from '../utils/useSelection';
 import type { DagRun } from '../types';
 
-const DurationTick: React.FC<TextProps> = ({ children, ...rest }) => (
+const DurationTick = ({ children, ...rest }: TextProps) => (
   <Text fontSize="sm" color="gray.400" right={1} position="absolute" whiteSpace="nowrap" {...rest}>
     {children}
   </Text>
 );
 
-const DagRuns: React.FC = () => {
+const DagRuns = () => {
   const { data: { dagRuns } } = useGridData();
   const { selected, onSelect } = useSelection();
   const durations: number[] = [];
diff --git a/airflow/www/static/js/grid/details/BreadcrumbText.tsx b/airflow/www/static/js/grid/details/BreadcrumbText.tsx
index 7b6eb1b244051..b6df78702dae2 100644
--- a/airflow/www/static/js/grid/details/BreadcrumbText.tsx
+++ b/airflow/www/static/js/grid/details/BreadcrumbText.tsx
@@ -28,7 +28,7 @@ interface Props {
   value: React.ReactNode | string;
 }
 
-const BreadcrumbText: React.FC<Props> = ({ label, value }) => (
+const BreadcrumbText = ({ label, value }: Props) => (
   <Box position="relative">
     <Heading as="h5" size="sm" color="gray.300" position="absolute" top="-12px">{label}</Heading>
     <Heading as="h3" size="md">{value}</Heading>
diff --git a/airflow/www/static/js/grid/details/Header.tsx b/airflow/www/static/js/grid/details/Header.tsx
index 54ae471f6ba2d..db6a75b993f83 100644
--- a/airflow/www/static/js/grid/details/Header.tsx
+++ b/airflow/www/static/js/grid/details/Header.tsx
@@ -35,7 +35,7 @@ import BreadcrumbText from './BreadcrumbText';
 
 const dagId = getMetaValue('dag_id');
 
-const Header: React.FC = () => {
+const Header = () => {
   const { data: { dagRuns } } = useGridData();
   const { data: { tasks } } = useTasks();
 
diff --git a/airflow/www/static/js/grid/details/content/taskInstance/index.tsx b/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
index 0d4334bda933e..bbb262eedae6e 100644
--- a/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
+++ b/airflow/www/static/js/grid/details/content/taskInstance/index.tsx
@@ -73,7 +73,7 @@ const getTask = ({ taskId, runId, task }: GetTaskProps) => {
   return null;
 };
 
-const TaskInstance: React.FC<Props> = ({ taskId, runId }) => {
+const TaskInstance = ({ taskId, runId }: Props) => {
   const [selectedRows, setSelectedRows] = useState([]);
   const { data: { dagRuns, groups } } = useGridData();
   const { data: { tasks } } = useTasks();
diff --git a/airflow/www/static/js/grid/details/index.tsx b/airflow/www/static/js/grid/details/index.tsx
index f08ca7471f3d9..4c80fd6559924 100644
--- a/airflow/www/static/js/grid/details/index.tsx
+++ b/airflow/www/static/js/grid/details/index.tsx
@@ -30,7 +30,7 @@ import DagRunContent from './content/dagRun';
 import DagContent from './content/Dag';
 import useSelection from '../utils/useSelection';
 
-const Details: React.FC = () => {
+const Details = () => {
   const { selected: { runId, taskId } } = useSelection();
   return (
     <Flex flexDirection="column" pl={3} mr={3} flexGrow={1} maxWidth="750px">
diff --git a/airflow/www/static/js/grid/renderTaskRows.tsx b/airflow/www/static/js/grid/renderTaskRows.tsx
index 532d153fb2fcf..c7f82333f4b4f 100644
--- a/airflow/www/static/js/grid/renderTaskRows.tsx
+++ b/airflow/www/static/js/grid/renderTaskRows.tsx
@@ -47,9 +47,9 @@ interface RowProps {
   hoveredTaskState?: string;
 }
 
-const renderTaskRows: React.FC<RowProps> = ({
+const renderTaskRows = ({
   task, level = 0, ...rest
-}) => (
+}: RowProps) => (
   <>
     {(task?.children || []).map((t) => (
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
@@ -71,9 +71,9 @@ interface TaskInstancesProps {
   hoveredTaskState?: string;
 }
 
-const TaskInstances: React.FC<TaskInstancesProps> = ({
+const TaskInstances = ({
   task, dagRunIds, selectedRunId, onSelect, hoveredTaskState,
-}) => (
+}: TaskInstancesProps) => (
   <Flex justifyContent="flex-end">
     {dagRunIds.map((runId: string) => {
       // Check if an instance exists for the run, or return an empty box
@@ -105,7 +105,7 @@ const TaskInstances: React.FC<TaskInstancesProps> = ({
   </Flex>
 );
 
-const Row: React.FC<RowProps> = (props) => {
+const Row = (props: RowProps) => {
   const {
     task,
     level = 0,
diff --git a/airflow/www/static/js/grid/utils/useSelection.test.tsx b/airflow/www/static/js/grid/utils/useSelection.test.tsx
index e6eb5734e601a..19871c3ff098a 100644
--- a/airflow/www/static/js/grid/utils/useSelection.test.tsx
+++ b/airflow/www/static/js/grid/utils/useSelection.test.tsx
@@ -29,7 +29,7 @@ interface Props {
   children: React.ReactNode;
 }
 
-const Wrapper: React.FC<Props> = ({ children }) => (
+const Wrapper = ({ children }: Props) => (
   <MemoryRouter>
     {children}
   </MemoryRouter>

From eb1ebb532655389bb6f47afa4e83763aa1ffe595 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 22 Jun 2022 11:19:46 -0400
Subject: [PATCH 09/10] specify tsconfig file path

---
 airflow/www/webpack.config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
index 4252c646ef439..74f4c7e3968db 100644
--- a/airflow/www/webpack.config.js
+++ b/airflow/www/webpack.config.js
@@ -119,6 +119,9 @@ const config = {
           },
           {
             loader: 'ts-loader',
+            options: {
+              configFile: path.resolve(__dirname, './tsconfig.json'),
+            },
           },
         ],
       },

From e2948555ee4ba62a0490f206762b1176b96c32d0 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Wed, 22 Jun 2022 14:37:21 -0400
Subject: [PATCH 10/10] remove ts-loader

---
 airflow/www/package.json                      |  1 -
 .../static/js/grid/details/BreadcrumbText.tsx |  2 +-
 airflow/www/webpack.config.js                 | 22 +----
 airflow/www/yarn.lock                         | 96 +------------------
 4 files changed, 7 insertions(+), 114 deletions(-)

diff --git a/airflow/www/package.json b/airflow/www/package.json
index 685a2cfbc7d57..ad11cc3a0d976 100644
--- a/airflow/www/package.json
+++ b/airflow/www/package.json
@@ -67,7 +67,6 @@
     "stylelint": "^13.6.1",
     "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "<5.0.0",
-    "ts-loader": "^8.2.0",
     "typescript": "^4.6.3",
     "url-loader": "4.1.0",
     "webpack": "^5.73.0",
diff --git a/airflow/www/static/js/grid/details/BreadcrumbText.tsx b/airflow/www/static/js/grid/details/BreadcrumbText.tsx
index b6df78702dae2..85d5f6dec59bd 100644
--- a/airflow/www/static/js/grid/details/BreadcrumbText.tsx
+++ b/airflow/www/static/js/grid/details/BreadcrumbText.tsx
@@ -25,7 +25,7 @@ import {
 
 interface Props {
   label: string;
-  value: React.ReactNode | string;
+  value: React.ReactNode;
 }
 
 const BreadcrumbText = ({ label, value }: Props) => (
diff --git a/airflow/www/webpack.config.js b/airflow/www/webpack.config.js
index 74f4c7e3968db..b4019c3238676 100644
--- a/airflow/www/webpack.config.js
+++ b/airflow/www/webpack.config.js
@@ -53,10 +53,6 @@ Foundation (http://www.apache.org/).
   return text;
 };
 
-const babelOptions = {
-  presets: ['@babel/preset-react', '@babel/preset-typescript'],
-};
-
 const config = {
   entry: {
     airflowDefaultTheme: `${CSS_DIR}/bootstrap-theme.css`,
@@ -110,31 +106,17 @@ const config = {
         ],
       },
       {
-        test: /\.ts(x?)$/,
+        test: /\.(js|jsx|tsx|ts)$/,
         exclude: /node_modules/,
         use: [
           {
             loader: 'babel-loader',
-            options: babelOptions,
-          },
-          {
-            loader: 'ts-loader',
             options: {
-              configFile: path.resolve(__dirname, './tsconfig.json'),
+              presets: ['@babel/preset-react', '@babel/preset-typescript'],
             },
           },
         ],
       },
-      {
-        test: /\.js(x?)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: babelOptions,
-          },
-        ],
-      },
       // Extract css files
       {
         test: /\.css$/,
diff --git a/airflow/www/yarn.lock b/airflow/www/yarn.lock
index 4cb101e5cc69d..edeb3eb35eed2 100644
--- a/airflow/www/yarn.lock
+++ b/airflow/www/yarn.lock
@@ -3630,7 +3630,7 @@ brace-expansion@^2.0.1:
   dependencies:
     balanced-match "^1.0.0"
 
-braces@^3.0.1, braces@^3.0.2:
+braces@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -4888,15 +4888,6 @@ emojis-list@^3.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-enhanced-resolve@^4.0.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz#2f3cfd84dbe3b487f18f2db2ef1e064a571ca5ec"
-  integrity sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==
-  dependencies:
-    graceful-fs "^4.1.2"
-    memory-fs "^0.5.0"
-    tapable "^1.0.0"
-
 enhanced-resolve@^5.9.3:
   version "5.9.3"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
@@ -4935,13 +4926,6 @@ eonasdan-bootstrap-datetimepicker@^4.17.47:
     moment "^2.10"
     moment-timezone "^0.4.0"
 
-errno@^0.1.3:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
-  integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
-  dependencies:
-    prr "~1.0.1"
-
 error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
@@ -6016,7 +6000,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -6285,11 +6269,6 @@ isarray@0.0.1:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
   integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
 
-isarray@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
-  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
-
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -7251,14 +7230,6 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
-memory-fs@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.5.0.tgz#324c01288b88652966d161db77838720845a8e3c"
-  integrity sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==
-  dependencies:
-    errno "^0.1.3"
-    readable-stream "^2.0.1"
-
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -7295,14 +7266,6 @@ micromark@~2.11.0:
     debug "^4.0.0"
     parse-entities "^2.0.0"
 
-micromatch@^4.0.0:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
-  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
-  dependencies:
-    braces "^3.0.2"
-    picomatch "^2.3.1"
-
 micromatch@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
@@ -7984,11 +7947,6 @@ picomatch@^2.0.4, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
   integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
 
-picomatch@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
-  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
-
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -8414,11 +8372,6 @@ prismjs@^1.27.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.28.0.tgz#0d8f561fa0f7cf6ebca901747828b149147044b6"
   integrity sha512-8aaXdYvl1F7iC7Xm1spqSaY/OJBpYW3v+KJ+F17iYxvdc8sfjW194COK5wVhMZX45tGteiBQgdvD/nhxcRwylw==
 
-process-nextick-args@~2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
-  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
-
 promise-inflight@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
@@ -8455,11 +8408,6 @@ propagate@^2.0.0:
   resolved "https://registry.yarnpkg.com/propagate/-/propagate-2.0.1.tgz#40cdedab18085c792334e64f0ac17256d38f9a45"
   integrity sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==
 
-prr@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
-  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
-
 psl@^1.1.33:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
@@ -8647,19 +8595,6 @@ readable-stream@1.1:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^2.0.1:
-  version "2.3.7"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
-  integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.3"
-    isarray "~1.0.0"
-    process-nextick-args "~2.0.0"
-    safe-buffer "~5.1.1"
-    string_decoder "~1.1.1"
-    util-deprecate "~1.0.1"
-
 readable-stream@^3.1.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
@@ -8905,7 +8840,7 @@ safe-buffer@^5.1.0, safe-buffer@~5.2.0:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
-safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
@@ -9319,13 +9254,6 @@ string_decoder@~0.10.x:
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-string_decoder@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
-  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
-  dependencies:
-    safe-buffer "~5.1.0"
-
 strip-ansi@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.0.tgz#0b1571dd7669ccd4f3e06e14ef1eed26225ae532"
@@ -9579,11 +9507,6 @@ table@^6.6.0:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
-tapable@^1.0.0:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
-  integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
-
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -9731,17 +9654,6 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-loader@^8.2.0:
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.4.0.tgz#e845ea0f38d140bdc3d7d60293ca18d12ff2720f"
-  integrity sha512-6nFY3IZ2//mrPc+ImY3hNWx1vCHyEhl6V+wLmL4CZcm6g1CqX7UKrkc6y0i4FwcfOhxyMPCfaEvh20f4r9GNpw==
-  dependencies:
-    chalk "^4.1.0"
-    enhanced-resolve "^4.0.0"
-    loader-utils "^2.0.0"
-    micromatch "^4.0.0"
-    semver "^7.3.4"
-
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"
@@ -9977,7 +9889,7 @@ use-sidecar@^1.1.2:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=