Upgrade utils files to typescript (apache#25089)

* Migrate utils to typescript. * Use PropsWithChildren for typing props.
XD-DENG · Jul 15, 2022 · ec3b6fc · ec3b6fc
1 parent b4e9c67
commit ec3b6fc
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/airflow/www/static/js/api/useGridData.ts b/airflow/www/static/js/api/useGridData.ts
@@ -80,7 +80,7 @@ const useGridData = () => {
       // only refetch if the refresh switch is on
       refetchInterval: isRefreshOn && (autoRefreshInterval || 1) * 1000,
       keepPreviousData: true,
-      onError: (error) => {
+      onError: (error: Error) => {
         stopRefresh();
         errorToast({
           title: 'Auto-refresh Error',

diff --git a/airflow/www/static/js/utils/testUtils.jsx → airflow/www/static/js/utils/testUtils.tsx b/airflow/www/static/js/utils/testUtils.jsx → airflow/www/static/js/utils/testUtils.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import { ChakraProvider, Table, Tbody } from '@chakra-ui/react';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { MemoryRouter } from 'react-router-dom';
@@ -26,7 +26,7 @@ import { ContainerRefProvider } from '../context/containerRef';
 import { TimezoneProvider } from '../context/timezone';
 import { AutoRefreshProvider } from '../context/autorefresh';
 
-export const Wrapper = ({ children }) => {
+export const Wrapper = ({ children }: PropsWithChildren) => {
   const queryClient = new QueryClient({
     defaultOptions: {
       queries: {
@@ -52,13 +52,13 @@ export const Wrapper = ({ children }) => {
   );
 };
 
-export const ChakraWrapper = ({ children }) => (
+export const ChakraWrapper = ({ children }: PropsWithChildren) => (
   <ChakraProvider>
     {children}
   </ChakraProvider>
 );
 
-export const TableWrapper = ({ children }) => (
+export const TableWrapper = ({ children }: PropsWithChildren) => (
   <Wrapper>
     <Table>
       <Tbody>
@@ -68,7 +68,7 @@ export const TableWrapper = ({ children }) => (
   </Wrapper>
 );
 
-export const RouterWrapper = ({ children }) => (
+export const RouterWrapper = ({ children }: PropsWithChildren) => (
   <MemoryRouter>
     {children}
   </MemoryRouter>

diff --git a/...ww/static/js/utils/useErrorToast.test.jsx → ...ww/static/js/utils/useErrorToast.test.tsx b/...ww/static/js/utils/useErrorToast.test.jsx → ...ww/static/js/utils/useErrorToast.test.tsx
diff --git a/airflow/www/static/js/utils/useErrorToast.js → airflow/www/static/js/utils/useErrorToast.ts b/airflow/www/static/js/utils/useErrorToast.js → airflow/www/static/js/utils/useErrorToast.ts
@@ -18,26 +18,35 @@
  */
 
 import { useToast } from '@chakra-ui/react';
+import type { ReactNode } from 'react';
 
-export const getErrorDescription = (error, fallbackMessage) => {
-  if (error && error.response && error.response.data) {
-    return error.response.data;
+interface ErrorObj {
+  response: {
+    data: string,
   }
-  if (error instanceof Error) return error.message;
+}
+
+type ErrorType = Error | string | ErrorObj | null;
+
+export const getErrorDescription = (error?: ErrorType, fallbackMessage?: string) => {
   if (typeof error === 'string') return error;
+  if (error instanceof Error) return error.message;
+  if (error?.response?.data) {
+    return error.response.data;
+  }
   return fallbackMessage || 'Something went wrong.';
 };
 
-const getErrorTitle = (error) => (error.message || 'Error');
+const getErrorTitle = (error: Error) => (error.message || 'Error');
 
 const useErrorToast = () => {
   const toast = useToast();
   // Add an error prop and handle it as a description
-  return ({ error, ...rest }) => {
+  return ({ error, title, ...rest }: { error: Error, title?: ReactNode }) => {
     toast({
       ...rest,
       status: 'error',
-      title: getErrorTitle(error),
+      title: title || getErrorTitle(error),
       description: getErrorDescription(error).slice(0, 500),
     });
   };