diff --git a/airflow/www/static/js/api/useClearRun.ts b/airflow/www/static/js/api/useClearRun.ts
index eea285034a99a..b2fa85eea2303 100644
--- a/airflow/www/static/js/api/useClearRun.ts
+++ b/airflow/www/static/js/api/useClearRun.ts
@@ -19,10 +19,11 @@
 
 import axios, { AxiosResponse } from 'axios';
 import { useMutation, useQueryClient } from 'react-query';
+
 import URLSearchParamsWrapper from 'src/utils/URLSearchParamWrapper';
-import { getMetaValue } from '../utils';
-import { useAutoRefresh } from '../context/autorefresh';
-import useErrorToast from '../utils/useErrorToast';
+import { getMetaValue } from 'src/utils';
+import { useAutoRefresh } from 'src/context/autorefresh';
+import useErrorToast from 'src/utils/useErrorToast';
 
 const csrfToken = getMetaValue('csrf_token');
 const clearRunUrl = getMetaValue('dagrun_clear_url');
diff --git a/airflow/www/static/js/api/useGridData.ts b/airflow/www/static/js/api/useGridData.ts
index f9a5737c5dac6..8af05b5420b06 100644
--- a/airflow/www/static/js/api/useGridData.ts
+++ b/airflow/www/static/js/api/useGridData.ts
@@ -36,7 +36,7 @@ const dagId = getMetaValue(DAG_ID_PARAM);
 const gridDataUrl = getMetaValue('grid_data_url');
 const urlRoot = getMetaValue('root');
 
-interface GridData {
+export interface GridData {
   dagRuns: DagRun[];
   groups: Task;
   ordering: RunOrdering;
diff --git a/airflow/www/static/js/api/useMarkFailedRun.ts b/airflow/www/static/js/api/useMarkFailedRun.ts
index ac5ef6def44ba..9e58381da2896 100644
--- a/airflow/www/static/js/api/useMarkFailedRun.ts
+++ b/airflow/www/static/js/api/useMarkFailedRun.ts
@@ -17,12 +17,13 @@
  * under the License.
  */
 
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { useMutation, useQueryClient } from 'react-query';
+
 import URLSearchParamsWrapper from 'src/utils/URLSearchParamWrapper';
-import { getMetaValue } from '../utils';
-import { useAutoRefresh } from '../context/autorefresh';
-import useErrorToast from '../utils/useErrorToast';
+import { getMetaValue } from 'src/utils';
+import { useAutoRefresh } from 'src/context/autorefresh';
+import useErrorToast from 'src/utils/useErrorToast';
 
 const csrfToken = getMetaValue('csrf_token');
 const markFailedUrl = getMetaValue('dagrun_failed_url');
@@ -41,7 +42,7 @@ export default function useMarkFailedRun(dagId: string, runId: string) {
         dag_run_id: runId,
       }).toString();
 
-      return axios.post(markFailedUrl, params, {
+      return axios.post<AxiosResponse, string>(markFailedUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
diff --git a/airflow/www/static/js/api/useMarkSuccessRun.ts b/airflow/www/static/js/api/useMarkSuccessRun.ts
index d90bbb03a8d1b..062326cca4ed9 100644
--- a/airflow/www/static/js/api/useMarkSuccessRun.ts
+++ b/airflow/www/static/js/api/useMarkSuccessRun.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { useMutation, useQueryClient } from 'react-query';
 import URLSearchParamsWrapper from 'src/utils/URLSearchParamWrapper';
 import { getMetaValue } from '../utils';
@@ -41,7 +41,7 @@ export default function useMarkSuccessRun(dagId: string, runId: string) {
         dag_run_id: runId,
       }).toString();
 
-      return axios.post(markSuccessUrl, params, {
+      return axios.post<AxiosResponse, string>(markSuccessUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
diff --git a/airflow/www/static/js/api/useQueueRun.ts b/airflow/www/static/js/api/useQueueRun.ts
index e919c3f60fc49..71d4027b5f09b 100644
--- a/airflow/www/static/js/api/useQueueRun.ts
+++ b/airflow/www/static/js/api/useQueueRun.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import axios from 'axios';
+import axios, { AxiosResponse } from 'axios';
 import { useMutation, useQueryClient } from 'react-query';
 import URLSearchParamsWrapper from 'src/utils/URLSearchParamWrapper';
 import { getMetaValue } from '../utils';
@@ -40,7 +40,7 @@ export default function useQueueRun(dagId: string, runId: string) {
         dag_id: dagId,
         dag_run_id: runId,
       }).toString();
-      return axios.post(queuedUrl, params, {
+      return axios.post<AxiosResponse, string>(queuedUrl, params, {
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',
         },
diff --git a/airflow/www/static/js/dag/details/ConfirmDialog.tsx b/airflow/www/static/js/components/ConfirmDialog.tsx
similarity index 98%
rename from airflow/www/static/js/dag/details/ConfirmDialog.tsx
rename to airflow/www/static/js/components/ConfirmDialog.tsx
index c2533579ffba5..45280d8144867 100644
--- a/airflow/www/static/js/dag/details/ConfirmDialog.tsx
+++ b/airflow/www/static/js/components/ConfirmDialog.tsx
@@ -37,7 +37,7 @@ interface Props {
   onClose: () => void;
   title?: string;
   description: string;
-  body?: string[];
+  body?: string[] | string;
   onConfirm: () => void;
   isLoading?: boolean;
 }
diff --git a/airflow/www/static/js/dag/details/dagRun/ClearRun.jsx b/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx
similarity index 84%
rename from airflow/www/static/js/dag/details/dagRun/ClearRun.jsx
rename to airflow/www/static/js/dag/details/dagRun/ClearRun.tsx
index ff573ae920362..5666dbc84a863 100644
--- a/airflow/www/static/js/dag/details/dagRun/ClearRun.jsx
+++ b/airflow/www/static/js/dag/details/dagRun/ClearRun.tsx
@@ -20,14 +20,19 @@
 import React, { useState } from 'react';
 import { Button, useDisclosure } from '@chakra-ui/react';
 
-import { useClearRun } from '../../../api';
-import ConfirmDialog from '../ConfirmDialog';
-import { getMetaValue } from '../../../utils';
+import { useClearRun } from 'src/api';
+import { getMetaValue } from 'src/utils';
+import ConfirmDialog from 'src/components/ConfirmDialog';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
-const ClearRun = ({ dagId, runId }) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+interface Props {
+  dagId: string;
+  runId: string;
+}
+
+const ClearRun = ({ dagId, runId }: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState('');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: onClear, isLoading } = useClearRun(dagId, runId);
 
@@ -39,7 +44,7 @@ const ClearRun = ({ dagId, runId }) => {
 
   const onConfirm = async () => {
     await onClear({ confirmed: true });
-    setAffectedTasks([]);
+    setAffectedTasks('');
     onClose();
   };
 
diff --git a/airflow/www/static/js/dag/details/dagRun/MarkFailedRun.jsx b/airflow/www/static/js/dag/details/dagRun/MarkFailedRun.tsx
similarity index 83%
rename from airflow/www/static/js/dag/details/dagRun/MarkFailedRun.jsx
rename to airflow/www/static/js/dag/details/dagRun/MarkFailedRun.tsx
index a97349d0ae46e..26bdce8fb815f 100644
--- a/airflow/www/static/js/dag/details/dagRun/MarkFailedRun.jsx
+++ b/airflow/www/static/js/dag/details/dagRun/MarkFailedRun.tsx
@@ -20,14 +20,19 @@
 import React, { useState } from 'react';
 import { Button, useDisclosure } from '@chakra-ui/react';
 
-import { useMarkFailedRun } from '../../../api';
-import ConfirmDialog from '../ConfirmDialog';
-import { getMetaValue } from '../../../utils';
+import { useMarkFailedRun } from 'src/api';
+import { getMetaValue } from 'src/utils';
+import ConfirmDialog from 'src/components/ConfirmDialog';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
-const MarkFailedRun = ({ dagId, runId }) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+interface Props {
+  dagId: string;
+  runId: string;
+}
+
+const MarkFailedRun = ({ dagId, runId }: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState('');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: markFailed, isLoading } = useMarkFailedRun(dagId, runId);
 
@@ -39,7 +44,7 @@ const MarkFailedRun = ({ dagId, runId }) => {
 
   const onConfirm = () => {
     markFailed({ confirmed: true });
-    setAffectedTasks([]);
+    setAffectedTasks('');
     onClose();
   };
 
diff --git a/airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.jsx b/airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.tsx
similarity index 83%
rename from airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.jsx
rename to airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.tsx
index bebf776a385f1..79a894b7a9ee0 100644
--- a/airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.jsx
+++ b/airflow/www/static/js/dag/details/dagRun/MarkSuccessRun.tsx
@@ -20,14 +20,19 @@
 import React, { useState } from 'react';
 import { Button, useDisclosure } from '@chakra-ui/react';
 
-import { useMarkSuccessRun } from '../../../api';
-import ConfirmDialog from '../ConfirmDialog';
-import { getMetaValue } from '../../../utils';
+import { useMarkSuccessRun } from 'src/api';
+import ConfirmDialog from 'src/components/ConfirmDialog';
+import { getMetaValue } from 'src/utils';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
-const MarkSuccessRun = ({ dagId, runId }) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+interface Props {
+  dagId: string;
+  runId: string;
+}
+
+const MarkSuccessRun = ({ dagId, runId }: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState('');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: markSuccess, isLoading } = useMarkSuccessRun(dagId, runId);
 
@@ -39,7 +44,7 @@ const MarkSuccessRun = ({ dagId, runId }) => {
 
   const onConfirm = async () => {
     await markSuccess({ confirmed: true });
-    setAffectedTasks([]);
+    setAffectedTasks('');
     onClose();
   };
 
diff --git a/airflow/www/static/js/dag/details/dagRun/QueueRun.jsx b/airflow/www/static/js/dag/details/dagRun/QueueRun.tsx
similarity index 85%
rename from airflow/www/static/js/dag/details/dagRun/QueueRun.jsx
rename to airflow/www/static/js/dag/details/dagRun/QueueRun.tsx
index 1591055de37ac..a973e0ddac0dc 100644
--- a/airflow/www/static/js/dag/details/dagRun/QueueRun.jsx
+++ b/airflow/www/static/js/dag/details/dagRun/QueueRun.tsx
@@ -20,14 +20,19 @@
 import React, { useState } from 'react';
 import { Button, useDisclosure } from '@chakra-ui/react';
 
-import { useQueueRun } from '../../../api';
-import ConfirmDialog from '../ConfirmDialog';
-import { getMetaValue } from '../../../utils';
+import { useQueueRun } from 'src/api';
+import ConfirmDialog from 'src/components/ConfirmDialog';
+import { getMetaValue } from 'src/utils';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
-const QueueRun = ({ dagId, runId }) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+interface Props {
+  dagId: string;
+  runId: string;
+}
+
+const QueueRun = ({ dagId, runId }: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState('');
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { mutateAsync: onQueue, isLoading } = useQueueRun(dagId, runId);
 
@@ -41,7 +46,7 @@ const QueueRun = ({ dagId, runId }) => {
   // Confirm changes
   const onConfirm = async () => {
     await onQueue({ confirmed: true });
-    setAffectedTasks([]);
+    setAffectedTasks('');
     onClose();
   };
 
diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.jsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.tsx
similarity index 76%
rename from airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.jsx
rename to airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.tsx
index e9de6626de4ff..e51e28026f216 100644
--- a/airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.jsx
+++ b/airflow/www/static/js/dag/details/taskInstance/taskActions/Clear.tsx
@@ -25,21 +25,30 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
+import ConfirmDialog from 'src/components/ConfirmDialog';
+import { useClearTask } from 'src/api';
+import { getMetaValue } from 'src/utils';
+
 import ActionButton from './ActionButton';
-import ConfirmDialog from '../../ConfirmDialog';
-import { useClearTask } from '../../../../api';
-import { getMetaValue } from '../../../../utils';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
+interface Props {
+  dagId: string;
+  runId: string;
+  taskId: string;
+  executionDate: string;
+  mapIndexes: number[];
+}
+
 const Run = ({
   dagId,
   runId,
   taskId,
   executionDate,
   mapIndexes,
-}) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+}: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState('');
 
   // Options check/unchecked
   const [past, setPast] = useState(false);
@@ -93,19 +102,19 @@ const Run = ({
       confirmed: true,
       mapIndexes,
     });
-    setAffectedTasks([]);
+    setAffectedTasks('');
     onClose();
   };
 
   return (
     <Flex justifyContent="space-between" width="100%">
       <ButtonGroup isAttached variant="outline" isDisabled={!canEdit}>
-        <ActionButton bg={past && 'gray.100'} onClick={onTogglePast} name="Past" />
-        <ActionButton bg={future && 'gray.100'} onClick={onToggleFuture} name="Future" />
-        <ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" />
-        <ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" />
-        <ActionButton bg={recursive && 'gray.100'} onClick={onToggleRecursive} name="Recursive" />
-        <ActionButton bg={failed && 'gray.100'} onClick={onToggleFailed} name="Failed" />
+        <ActionButton bg={past ? 'gray.100' : undefined} onClick={onTogglePast} name="Past" />
+        <ActionButton bg={future ? 'gray.100' : undefined} onClick={onToggleFuture} name="Future" />
+        <ActionButton bg={upstream ? 'gray.100' : undefined} onClick={onToggleUpstream} name="Upstream" />
+        <ActionButton bg={downstream ? 'gray.100' : undefined} onClick={onToggleDownstream} name="Downstream" />
+        <ActionButton bg={recursive ? 'gray.100' : undefined} onClick={onToggleRecursive} name="Recursive" />
+        <ActionButton bg={failed ? 'gray.100' : undefined} onClick={onToggleFailed} name="Failed" />
       </ButtonGroup>
       <Button
         colorScheme="blue"
diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.jsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.tsx
similarity index 79%
rename from airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.jsx
rename to airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.tsx
index baa5282661f16..f3537369e89ab 100644
--- a/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.jsx
+++ b/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkFailed.tsx
@@ -25,20 +25,28 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
+import { useConfirmMarkTask, useMarkFailedTask } from 'src/api';
+import ConfirmDialog from 'src/components/ConfirmDialog';
+import { getMetaValue } from 'src/utils';
+
 import ActionButton from './ActionButton';
-import { useConfirmMarkTask, useMarkFailedTask } from '../../../../api';
-import ConfirmDialog from '../../ConfirmDialog';
-import { getMetaValue } from '../../../../utils';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
+interface Props {
+  dagId: string;
+  runId: string;
+  taskId: string;
+  mapIndexes: number[];
+}
+
 const MarkFailed = ({
   dagId,
   runId,
   taskId,
   mapIndexes,
-}) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+}: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
 
   // Options check/unchecked
   const [past, setPast] = useState(false);
@@ -94,10 +102,10 @@ const MarkFailed = ({
   return (
     <Flex justifyContent="space-between" width="100%">
       <ButtonGroup isAttached variant="outline" isDisabled={!canEdit}>
-        <ActionButton bg={past && 'gray.100'} onClick={onTogglePast} name="Past" />
-        <ActionButton bg={future && 'gray.100'} onClick={onToggleFuture} name="Future" />
-        <ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" />
-        <ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" />
+        <ActionButton bg={past ? 'gray.100' : undefined} onClick={onTogglePast} name="Past" />
+        <ActionButton bg={future ? 'gray.100' : undefined} onClick={onToggleFuture} name="Future" />
+        <ActionButton bg={upstream ? 'gray.100' : undefined} onClick={onToggleUpstream} name="Upstream" />
+        <ActionButton bg={downstream ? 'gray.100' : undefined} onClick={onToggleDownstream} name="Downstream" />
       </ButtonGroup>
       <Button colorScheme="red" onClick={onClick} isLoading={isLoading} isDisabled={!canEdit}>
         Mark Failed
diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.jsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.tsx
similarity index 79%
rename from airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.jsx
rename to airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.tsx
index 49174cda88c84..767ccbaa160be 100644
--- a/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.jsx
+++ b/airflow/www/static/js/dag/details/taskInstance/taskActions/MarkSuccess.tsx
@@ -25,17 +25,25 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 
-import ConfirmDialog from '../../ConfirmDialog';
+import ConfirmDialog from 'src/components/ConfirmDialog';
+import { useMarkSuccessTask, useConfirmMarkTask } from 'src/api';
+import { getMetaValue } from 'src/utils';
+
 import ActionButton from './ActionButton';
-import { useMarkSuccessTask, useConfirmMarkTask } from '../../../../api';
-import { getMetaValue } from '../../../../utils';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
+interface Props {
+  dagId: string;
+  runId: string;
+  taskId: string;
+  mapIndexes: number[];
+}
+
 const MarkSuccess = ({
   dagId, runId, taskId, mapIndexes,
-}) => {
-  const [affectedTasks, setAffectedTasks] = useState([]);
+}: Props) => {
+  const [affectedTasks, setAffectedTasks] = useState<string[]>([]);
 
   // Options check/unchecked
   const [past, setPast] = useState(false);
@@ -89,10 +97,10 @@ const MarkSuccess = ({
   return (
     <Flex justifyContent="space-between" width="100%">
       <ButtonGroup isAttached variant="outline" isDisabled={!canEdit}>
-        <ActionButton bg={past && 'gray.100'} onClick={onTogglePast} name="Past" />
-        <ActionButton bg={future && 'gray.100'} onClick={onToggleFuture} name="Future" />
-        <ActionButton bg={upstream && 'gray.100'} onClick={onToggleUpstream} name="Upstream" />
-        <ActionButton bg={downstream && 'gray.100'} onClick={onToggleDownstream} name="Downstream" />
+        <ActionButton bg={past ? 'gray.100' : undefined} onClick={onTogglePast} name="Past" />
+        <ActionButton bg={future ? 'gray.100' : undefined} onClick={onToggleFuture} name="Future" />
+        <ActionButton bg={upstream ? 'gray.100' : undefined} onClick={onToggleUpstream} name="Upstream" />
+        <ActionButton bg={downstream ? 'gray.100' : undefined} onClick={onToggleDownstream} name="Downstream" />
       </ButtonGroup>
       <Button colorScheme="green" onClick={onClick} isLoading={isLoading} isDisabled={!canEdit}>
         Mark Success
diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/Run.jsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/Run.tsx
similarity index 87%
rename from airflow/www/static/js/dag/details/taskInstance/taskActions/Run.jsx
rename to airflow/www/static/js/dag/details/taskInstance/taskActions/Run.tsx
index 16bebc316160c..62d08a77efcc4 100644
--- a/airflow/www/static/js/dag/details/taskInstance/taskActions/Run.jsx
+++ b/airflow/www/static/js/dag/details/taskInstance/taskActions/Run.tsx
@@ -24,17 +24,24 @@ import {
   ButtonGroup,
 } from '@chakra-ui/react';
 
-import { useRunTask } from '../../../../api';
-import { getMetaValue } from '../../../../utils';
+import { useRunTask } from 'src/api';
+import { getMetaValue } from 'src/utils';
 
 const canEdit = getMetaValue('can_edit') === 'True';
 
+interface Props {
+  dagId: string;
+  runId: string;
+  taskId: string;
+  mapIndexes: number[];
+}
+
 const Run = ({
   dagId,
   runId,
   taskId,
   mapIndexes,
-}) => {
+}: Props) => {
   const [ignoreAllDeps, setIgnoreAllDeps] = useState(false);
   const onToggleAllDeps = () => setIgnoreAllDeps(!ignoreAllDeps);
 
@@ -59,21 +66,21 @@ const Run = ({
     <Flex justifyContent="space-between" width="100%">
       <ButtonGroup isAttached variant="outline" isDisabled={!canEdit}>
         <Button
-          bg={ignoreAllDeps && 'gray.100'}
+          bg={ignoreAllDeps ? 'gray.100' : undefined}
           onClick={onToggleAllDeps}
           title="Ignores all non-critical dependencies, including task state and task_deps"
         >
           Ignore All Deps
         </Button>
         <Button
-          bg={ignoreTaskState && 'gray.100'}
+          bg={ignoreTaskState ? 'gray.100' : undefined}
           onClick={onToggleTaskState}
           title="Ignore previous success/failure"
         >
           Ignore Task State
         </Button>
         <Button
-          bg={ignoreTaskDeps && 'gray.100'}
+          bg={ignoreTaskDeps ? 'gray.100' : undefined}
           onClick={onToggleTaskDeps}
           title="Disregard the task-specific dependencies, e.g. status of upstream task instances and depends_on_past"
         >
diff --git a/airflow/www/static/js/dag/details/taskInstance/taskActions/types.tsx b/airflow/www/static/js/dag/details/taskInstance/taskActions/types.ts
similarity index 96%
rename from airflow/www/static/js/dag/details/taskInstance/taskActions/types.tsx
rename to airflow/www/static/js/dag/details/taskInstance/taskActions/types.ts
index c5bacf3302708..14b787e16eba7 100644
--- a/airflow/www/static/js/dag/details/taskInstance/taskActions/types.tsx
+++ b/airflow/www/static/js/dag/details/taskInstance/taskActions/types.ts
@@ -21,7 +21,7 @@ import type { Dag, DagRun, TaskInstance } from 'src/types';
 
 export interface CommonActionProps {
   runId: DagRun['runId'],
-  taskId: TaskInstance['taskId'] | null,
+  taskId: TaskInstance['taskId'],
   dagId: Dag['id'],
   executionDate: DagRun['executionDate'],
   mapIndexes: number[]
diff --git a/airflow/www/static/js/dag/grid/index.test.jsx b/airflow/www/static/js/dag/grid/index.test.tsx
similarity index 86%
rename from airflow/www/static/js/dag/grid/index.test.jsx
rename to airflow/www/static/js/dag/grid/index.test.tsx
index 67a5cc55d80ca..0e1c2317a9de7 100644
--- a/airflow/www/static/js/dag/grid/index.test.jsx
+++ b/airflow/www/static/js/dag/grid/index.test.tsx
@@ -23,9 +23,10 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
 
+import { Wrapper } from 'src/utils/testUtils';
+import * as useGridDataModule from 'src/api/useGridData';
+
 import Grid from '.';
-import { Wrapper } from '../../utils/testUtils';
-import * as useGridDataModule from '../../api/useGridData';
 
 const mockGridData = {
   groups: {
@@ -33,16 +34,11 @@ const mockGridData = {
     label: null,
     children: [
       {
-        extraLinks: [],
         id: 'group_1',
         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',
@@ -53,15 +49,11 @@ const mockGridData = {
         children: [
           {
             id: 'group_1.task_1',
+            operator: 'DummyOperator',
             label: 'task_1',
-            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',
@@ -74,13 +66,10 @@ const mockGridData = {
                 id: 'group_1.task_1.sub_task_1',
                 label: 'sub_task_1',
                 extraLinks: [],
+                operator: 'DummyOperator',
                 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',
@@ -98,18 +87,19 @@ const mockGridData = {
   },
   dagRuns: [
     {
-      dagId: 'dagId',
       runId: 'run1',
-      dataIntervalStart: new Date(),
-      dataIntervalEnd: new Date(),
+      dataIntervalStart: '2021-11-08T21:14:19.704433+00:00',
+      dataIntervalEnd: '2021-11-08T21:17:13.206426+00:00',
       startDate: '2021-11-08T21:14:19.704433+00:00',
       endDate: '2021-11-08T21:17:13.206426+00:00',
       state: 'failed',
       runType: 'scheduled',
       executionDate: '2021-11-08T21:14:19.704433+00:00',
+      lastSchedulingDecision: '2021-11-08T21:14:19.704433+00:00',
     },
   ],
-};
+  ordering: ['dataIntervalStart'],
+} as useGridDataModule.GridData;
 
 const EXPAND = 'Expand all task groups';
 const COLLAPSE = 'Collapse all task groups';
@@ -128,9 +118,12 @@ describe('Test ToggleGroups', () => {
   });
 
   beforeEach(() => {
-    jest.spyOn(useGridDataModule, 'default').mockImplementation(() => ({
+    const returnValue = {
       data: mockGridData,
-    }));
+      isSuccess: true,
+    } as any;
+
+    jest.spyOn(useGridDataModule, 'default').mockImplementation(() => returnValue);
   });
 
   test('Group defaults to closed', () => {
@@ -208,19 +201,13 @@ describe('Test ToggleGroups', () => {
       expect(taskElement).toHaveStyle('opacity: 1');
     });
 
-    rerender(
-      <Grid hoveredTaskState="success" />,
-      { wrapper: Wrapper },
-    );
+    rerender(<Grid hoveredTaskState="success" />);
 
     taskElements.forEach((taskElement) => {
       expect(taskElement).toHaveStyle('opacity: 1');
     });
 
-    rerender(
-      <Grid hoveredTaskState="failed" />,
-      { wrapper: Wrapper },
-    );
+    rerender(<Grid hoveredTaskState="failed" />);
 
     taskElements.forEach((taskElement) => {
       expect(taskElement).toHaveStyle('opacity: 0.3');
diff --git a/airflow/www/static/js/dag/grid/index.tsx b/airflow/www/static/js/dag/grid/index.tsx
index b5121fc40d5a7..27aabdec6469e 100644
--- a/airflow/www/static/js/dag/grid/index.tsx
+++ b/airflow/www/static/js/dag/grid/index.tsx
@@ -44,7 +44,7 @@ const dagId = getMetaValue('dag_id');
 
 interface Props {
   isPanelOpen?: boolean;
-  onPanelToggle: () => void;
+  onPanelToggle?: () => void;
   hoveredTaskState?: string | null;
 }