[airflow] branch main updated: Upgrade utils files to typescript (#25089)

[bb...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new ec3b6fcc94 Upgrade utils files to typescript (#25089)
ec3b6fcc94 is described below

commit ec3b6fcc9495fa759779f396bf412a98b93bdc93
Author: pierrejeambrun <pi...@gmail.com>
AuthorDate: Fri Jul 15 19:03:51 2022 +0200

    Upgrade utils files to typescript (#25089)
    
    * Migrate utils to typescript.
    
    * Use PropsWithChildren for typing props.
---
 airflow/www/static/js/api/useGridData.ts           |  2 +-
 .../js/utils/{testUtils.jsx => testUtils.tsx}      | 10 +++++-----
 ...eErrorToast.test.jsx => useErrorToast.test.tsx} |  0
 .../utils/{useErrorToast.js => useErrorToast.ts}   | 23 +++++++++++++++-------
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/airflow/www/static/js/api/useGridData.ts b/airflow/www/static/js/api/useGridData.ts
index f975e7d6b7..c430e69dca 100644
--- 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 b/airflow/www/static/js/utils/testUtils.tsx
similarity index 86%
rename from airflow/www/static/js/utils/testUtils.jsx
rename to airflow/www/static/js/utils/testUtils.tsx
index 61cb33b245..1ca4623d0e 100644
--- a/airflow/www/static/js/utils/testUtils.jsx
+++ b/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/airflow/www/static/js/utils/useErrorToast.test.jsx b/airflow/www/static/js/utils/useErrorToast.test.tsx
similarity index 100%
rename from airflow/www/static/js/utils/useErrorToast.test.jsx
rename to airflow/www/static/js/utils/useErrorToast.test.tsx
diff --git a/airflow/www/static/js/utils/useErrorToast.js b/airflow/www/static/js/utils/useErrorToast.ts
similarity index 74%
rename from airflow/www/static/js/utils/useErrorToast.js
rename to airflow/www/static/js/utils/useErrorToast.ts
index c4107bc91f..4fdfd1aa42 100644
--- a/airflow/www/static/js/utils/useErrorToast.js
+++ b/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),
     });
   };