Fix all lint warnings in UI (#1388)

RunLLM · May 31, 2023 · 2f1ede4 · 2f1ede4
1 parent 2661c1d
commit 2f1ede4
Show file tree

Hide file tree

Showing 17 changed files with 150 additions and 149 deletions.
diff --git a/src/ui/common/src/components/AnnouncementBanner/AnnouncementBanner.tsx b/src/ui/common/src/components/AnnouncementBanner/AnnouncementBanner.tsx
@@ -20,88 +20,92 @@ export const AnnouncementBanner: React.FC<AnnouncementBannerProps> = ({
   user,
 }) => {
   const location = useLocation();
-  const allowedBannerPages = ['/workflows', '/resources', '/data', '/'];
 
   // By default do not show banner until we know that we have an announcement to show.
   const [shouldShowAnnouncementBanner, setShouldShowAnnouncementBanner] =
     useState<boolean>(false);
-  const [versionNumber, setVersionNumber] = useState<string>('');
+  const [latestVersion, setLatestVersion] = useState<string>('');
+  const [currentVersion, setCurrentVersion] = useState<string>('');
 
   useEffect(() => {
-    async function fetchVersionNumber() {
+    async function fetchVersions() {
       const pypiRes = await fetch('https://pypi.org/pypi/aqueduct-ml/json', {
         method: 'GET',
       });
       const pyPiResponse = await pypiRes.json();
-      const pyPiVersionString = pyPiResponse.info.version;
+      const pyPiVersion = pyPiResponse.info.version;
+      setLatestVersion(pyPiVersion);
 
       const res = await fetch(`${apiAddress}/api/version`, {
         method: 'GET',
         headers: { 'api-key': user.apiKey },
       });
-      const aqueductVersionNumberResponse = await res.json();
-
-      const versionBannerDismissed = localStorage.getItem(
-        'versionBanner.dismissedVersion'
-      );
-
-      let showBanner = false;
-      if (aqueductVersionNumberResponse?.version) {
-        const pyPiVersionNumbers = pyPiVersionString?.split('.');
-
-        // compare strings to see if the two are equal.
-        // if equal, check if banner has been dismissed and return
-        const sameVersion =
-          aqueductVersionNumberResponse.version === pyPiVersionString;
-        const isDismissed = versionBannerDismissed === pyPiVersionString;
-
-        // First check if we should hide the banner.
-        if (isDismissed || sameVersion) {
-          showBanner = false;
-        } else if (pyPiVersionNumbers) {
-          const versionNumbersResponse =
-            aqueductVersionNumberResponse.version.split('.');
-          const majorResponse = parseInt(versionNumbersResponse[0]);
-          const minorResponse = parseInt(versionNumbersResponse[1]);
-          const patchResponse = parseInt(versionNumbersResponse[2]);
-
-          // compare the two version numbers that we have
-          const pyPiMajor = parseInt(pyPiVersionNumbers[0]);
-          const pyPiMinor = parseInt(pyPiVersionNumbers[1]);
-          const pyPiPatch = parseInt(pyPiVersionNumbers[2]);
-
-          // Finally check if there is in fact a new version and show banner if so.
-          if (
-            pyPiMajor > majorResponse ||
-            pyPiMinor > minorResponse ||
-            pyPiPatch > patchResponse
-          ) {
-            showBanner = true;
-          }
-        }
-      }
 
-      setVersionNumber(pyPiVersionString);
-      setShouldShowAnnouncementBanner(showBanner);
-      if (showBanner === true && onShow) {
-        onShow();
+      const aqueductVersionResponse = await res.json();
+      if (aqueductVersionResponse?.version) {
+        setCurrentVersion(aqueductVersionResponse?.version);
       }
     }
 
     if (user.apiKey) {
-      fetchVersionNumber();
+      fetchVersions();
     }
-  }, [user.apiKey]);
+  }, [user]);
 
-  // Make sure user is on appropriate pages and that the banner should be shown.
-  if (
-    !shouldShowAnnouncementBanner ||
-    allowedBannerPages.indexOf(location.pathname) < 0
-  ) {
-    if (onClose) {
+  useEffect(() => {
+    const allowedBannerPages = ['/workflows', '/resources', '/data', '/'];
+    const versionBannerDismissed = localStorage.getItem(
+      'versionBanner.dismissedVersion'
+    );
+
+    let showBanner = false;
+    if (currentVersion) {
+      const pyPiVersionNumbers = latestVersion?.split('.');
+
+      // compare strings to see if the two are equal.
+      // if equal, check if banner has been dismissed and return
+      const isSameVersion = currentVersion === latestVersion;
+      const isDismissed = versionBannerDismissed === latestVersion;
+
+      // First check if we should hide the banner.
+      if (isDismissed || isSameVersion) {
+        showBanner = false;
+      } else if (pyPiVersionNumbers) {
+        const versionNumbersResponse = currentVersion.split('.');
+        const majorResponse = parseInt(versionNumbersResponse[0]);
+        const minorResponse = parseInt(versionNumbersResponse[1]);
+        const patchResponse = parseInt(versionNumbersResponse[2]);
+
+        // compare the two version numbers that we have
+        const pyPiMajor = parseInt(pyPiVersionNumbers[0]);
+        const pyPiMinor = parseInt(pyPiVersionNumbers[1]);
+        const pyPiPatch = parseInt(pyPiVersionNumbers[2]);
+
+        // Finally check if there is in fact a new version and show banner if so.
+        if (
+          pyPiMajor > majorResponse ||
+          pyPiMinor > minorResponse ||
+          pyPiPatch > patchResponse
+        ) {
+          showBanner = true;
+        }
+      }
+    }
+
+    if (allowedBannerPages.indexOf(location.pathname) < 0) {
+      showBanner = false;
+    }
+
+    setShouldShowAnnouncementBanner(showBanner);
+    if (showBanner) {
+      onShow();
+    } else {
       onClose();
     }
+  }, [currentVersion, latestVersion, onShow, onClose, location]);
 
+  // Make sure user is on appropriate pages and that the banner should be shown.
+  if (!shouldShowAnnouncementBanner) {
     return null;
   }
 
@@ -121,7 +125,7 @@ export const AnnouncementBanner: React.FC<AnnouncementBannerProps> = ({
     >
       <Box>
         <Typography variant="body1" component={'span'}>
-          ✨ Aqueduct v{versionNumber} is out!{' '}
+          ✨ Aqueduct v{latestVersion} is out!{' '}
           <Link
             href={'https://github.com/aqueducthq/aqueduct/releases'}
             target="_blank"
@@ -149,7 +153,7 @@ export const AnnouncementBanner: React.FC<AnnouncementBannerProps> = ({
               onClose();
               localStorage.setItem(
                 'versionBanner.dismissedVersion',
-                versionNumber ?? ''
+                latestVersion ?? ''
               );
             }
           }}

diff --git a/src/ui/common/src/components/pages/account/AccountPage.tsx b/src/ui/common/src/components/pages/account/AccountPage.tsx
@@ -116,7 +116,7 @@ client = aqueduct.Client(
     }
 
     fetchServerConfig();
-  }, []);
+  }, [dispatch, user]);
 
   useEffect(() => {
     if (!updatingNotifications) {

diff --git a/src/ui/common/src/components/pages/resource/id/index.tsx b/src/ui/common/src/components/pages/resource/id/index.tsx
@@ -144,7 +144,7 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
         })
       );
     }
-  }, [selectedResource]);
+  }, [dispatch, selectedResource, resourceId, user]);
 
   // Load the server config to check if the selected resource is currently being used as storage.
   // If that is the case, we hide the option to delete the resource from the user.
@@ -156,7 +156,7 @@ const ResourceDetailsPage: React.FC<ResourceDetailsPageProps> = ({
     }
 
     fetchServerConfig();
-  }, [user.apiKey]);
+  }, [dispatch, user]);
 
   const {
     data: workflowAndDagIDs,

diff --git a/src/ui/common/src/components/pages/resources/index.tsx b/src/ui/common/src/components/pages/resources/index.tsx
@@ -47,7 +47,7 @@ const ResourcesPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
     }
 
     fetchServerConfig();
-  }, [user]);
+  }, [dispatch, user]);
 
   useEffect(() => {
     document.title = 'Resources | Aqueduct';
@@ -73,7 +73,7 @@ const ResourcesPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
   }
 
   // If the last storage migration failed, display the error message.
-  const { data, error, isLoading } = useStorageMigrationListQuery({
+  const { data, isLoading } = useStorageMigrationListQuery({
     apiKey: user.apiKey,
     limit: '1', // only fetch the latest result.
   });

diff --git a/src/ui/common/src/components/pages/workflow/id/hook.ts b/src/ui/common/src/components/pages/workflow/id/hook.ts
@@ -100,7 +100,7 @@ export function useWorkflowIds(apiKey: string): useWorkflowIdsOutputs {
       });
       return;
     }
-  }, [wfIdParam, dagResultIdParam, dagResult, dagIdParam, dag]);
+  }, [navigate, wfIdParam, dagResultIdParam, dagResult, dagIdParam, dag]);
 
   return {
     workflowId: wfIdParam,
@@ -181,11 +181,7 @@ export function useWorkflowNodesResults(
 }
 
 export function useLatestDagResultOrDag(apiKey: string, workflowId: string) {
-  const {
-    data: dagResults,
-    error: dagResultsError,
-    isLoading: dagResultsLoading,
-  } = useDagResultsGetQuery({
+  const { data: dagResults } = useDagResultsGetQuery({
     apiKey: apiKey,
     workflowId: workflowId,
   });
@@ -194,17 +190,13 @@ export function useLatestDagResultOrDag(apiKey: string, workflowId: string) {
 
   const dagIdFromLatestDagResult = latestDagResult?.dag_id;
 
-  const {
-    data: dags,
-    error: dagsError,
-    isLoading: dagsLoading,
-  } = useDagsGetQuery(
+  const { data: dags } = useDagsGetQuery(
     {
       apiKey: apiKey,
       workflowId: workflowId,
     },
     {
-      skip: dagIdFromLatestDagResult,
+      skip: !!dagIdFromLatestDagResult,
     }
   );
 

diff --git a/src/ui/common/src/components/pages/workflow/id/index.tsx b/src/ui/common/src/components/pages/workflow/id/index.tsx
@@ -150,7 +150,7 @@ const WorkflowPage: React.FC<WorkflowPageProps> = ({
       refetchWorkflow();
       setCurrentTab('Details');
     }
-  }, [editWorkflowSuccess]);
+  }, [refetchWorkflow, editWorkflowSuccess]);
 
   // This workflow doesn't exist.
   if (wfError) {

diff --git a/src/ui/common/src/components/pages/workflows/index.tsx b/src/ui/common/src/components/pages/workflows/index.tsx
@@ -145,18 +145,14 @@ const WorkflowsPage: React.FC<Props> = ({ user, Layout = DefaultLayout }) => {
 
       const latestDagId = latestDagResult?.dag_id ?? noRunDag?.id;
 
-      const {
-        data: dag,
-        error: dagError,
-        isLoading: dagLoading,
-      } = useDagGetQuery(
+      const { data: dag } = useDagGetQuery(
         {
           apiKey: user.apiKey,
           workflowId: workflowId,
           dagId: latestDagId,
         },
         {
-          skip: !latestDagId || noRunDag,
+          skip: !latestDagId || !!noRunDag,
         }
       );
 

diff --git a/src/ui/common/src/components/resources/dialogs/deleteResourceDialog.tsx b/src/ui/common/src/components/resources/dialogs/deleteResourceDialog.tsx
@@ -92,7 +92,7 @@ const DeleteResourceDialog: React.FC<Props> = ({
     }
 
     fetchServerConfig();
-  }, []);
+  }, [dispatch, user]);
 
   const deleteResourceStatus = useSelector(
     (state: RootState) => state.resourceReducer.deletionStatus

diff --git a/src/ui/common/src/components/resources/dialogs/dialog.tsx b/src/ui/common/src/components/resources/dialogs/dialog.tsx
@@ -17,6 +17,7 @@ import React, { MouseEventHandler, useEffect, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { useDispatch, useSelector } from 'react-redux';
 import * as Yup from 'yup';
+import { ObjectShape } from 'yup/lib/object';
 
 import { useResourceWorkflowsGetQuery } from '../../../handlers/AqueductApi';
 import {
@@ -46,7 +47,7 @@ type Props = {
   showMigrationDialog?: () => void;
   resourceToEdit?: Resource;
   dialogContent: React.FC<ResourceDialogProps<ResourceConfig>>;
-  validationSchema: Yup.ObjectSchema<any>;
+  validationSchema: Yup.ObjectSchema<ObjectShape>;
 };
 
 const ResourceDialog: React.FC<Props> = ({
@@ -152,21 +153,15 @@ const ResourceDialog: React.FC<Props> = ({
     const subscription = methods.watch(async () => {
       const checkIsFormValid = async () => {
         const isValidForm = await methods.trigger();
-        if (isValidForm && submitDisabled) {
-          // Form is valid, enable the submit button.
-          setSubmitDisabled(false);
-        } else {
-          // Form is still invalid, disable the submit button.
-          setSubmitDisabled(true);
-        }
+        setSubmitDisabled(!isValidForm);
       };
 
       checkIsFormValid();
     });
 
     // Unsubscribe and handle lifecycle changes.
     return () => subscription.unsubscribe();
-  }, [methods.watch]);
+  }, [methods]);
 
   useEffect(() => {
     if (isSucceeded(connectStatus)) {

diff --git a/src/ui/common/src/components/resources/dialogs/gcsDialog.tsx b/src/ui/common/src/components/resources/dialogs/gcsDialog.tsx
@@ -71,7 +71,7 @@ export const GCSDialog: React.FC<GCSDialogProps> = ({
     if (setMigrateStorage) {
       setMigrateStorage(initialUseAsStorage === 'true');
     }
-  }, [setMigrateStorage]);
+  }, [setMigrateStorage, initialUseAsStorage]);
 
   return (
     <Box sx={{ mt: 2 }}>

diff --git a/src/ui/common/src/components/resources/dialogs/onDemandKubernetesDialog.tsx b/src/ui/common/src/components/resources/dialogs/onDemandKubernetesDialog.tsx
@@ -95,11 +95,6 @@ export const OnDemandKubernetesDialog: React.FC<
     return;
   };
 
-  const handleGCPClick = () => {
-    setCurrentStep(K8S_TYPES.ONDEMAND_K8S_GCP);
-    setValue('k8s_type', K8S_TYPES.ONDEMAND_K8S_GCP);
-  };
-
   switch (currentStep) {
     case 'INITIAL':
       return (

diff --git a/src/ui/common/src/components/resources/dialogs/s3Dialog.tsx b/src/ui/common/src/components/resources/dialogs/s3Dialog.tsx
@@ -77,7 +77,7 @@ export const S3Dialog: React.FC<S3DialogProps> = ({
     if (setMigrateStorage) {
       setMigrateStorage(initialUseAsStorage === 'true');
     }
-  }, [setMigrateStorage]);
+  }, [setMigrateStorage, initialUseAsStorage]);
 
   const configProfileInput = (
     <ResourceTextInputField

diff --git a/src/ui/common/src/components/resources/dialogs/schema.ts b/src/ui/common/src/components/resources/dialogs/schema.ts
@@ -1,7 +1,10 @@
+import * as Yup from 'yup';
+import { ObjectShape } from 'yup/lib/object';
+
 export function requiredAtCreate(
-  schema,
+  schema: Yup.ObjectSchema<ObjectShape>,
   editMode: boolean,
   msg?: string | undefined
-): any {
+): Yup.ObjectSchema<ObjectShape> {
   return editMode ? schema : schema.required(msg);
 }