migrate last react files to typescript (#26112)

apache · Sep 18, 2022 · b333b24 · b333b24
1 parent 3cc0b20
commit b333b24
Show file tree

Hide file tree

Showing 17 changed files with 147 additions and 106 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/...w/static/js/dag/details/ConfirmDialog.tsx → ...ww/static/js/components/ConfirmDialog.tsx b/...w/static/js/dag/details/ConfirmDialog.tsx → ...ww/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/...static/js/dag/details/dagRun/ClearRun.jsx → ...static/js/dag/details/dagRun/ClearRun.tsx b/...static/js/dag/details/dagRun/ClearRun.jsx → ...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/...c/js/dag/details/dagRun/MarkFailedRun.jsx → ...c/js/dag/details/dagRun/MarkFailedRun.tsx b/...c/js/dag/details/dagRun/MarkFailedRun.jsx → ...c/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/.../js/dag/details/dagRun/MarkSuccessRun.jsx → .../js/dag/details/dagRun/MarkSuccessRun.tsx b/.../js/dag/details/dagRun/MarkSuccessRun.jsx → .../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/...static/js/dag/details/dagRun/QueueRun.jsx → ...static/js/dag/details/dagRun/QueueRun.tsx b/...static/js/dag/details/dagRun/QueueRun.jsx → ...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/...etails/taskInstance/taskActions/Clear.jsx → ...etails/taskInstance/taskActions/Clear.tsx b/...etails/taskInstance/taskActions/Clear.jsx → ...etails/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/...s/taskInstance/taskActions/MarkFailed.jsx → ...s/taskInstance/taskActions/MarkFailed.tsx b/...s/taskInstance/taskActions/MarkFailed.jsx → ...s/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/.../taskInstance/taskActions/MarkSuccess.jsx → .../taskInstance/taskActions/MarkSuccess.tsx b/.../taskInstance/taskActions/MarkSuccess.jsx → .../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