Merge pull request #159 from Shubha-accenture/sprint20-client-bug-tra…

…cker-fixes

debounce added

src/batches/batchService.tsx

@@ -290,7 +290,7 @@ export class BatchService {
       setRegionName(credentials.region_id || '');
       setProjectName(credentials.project_id || '');
       loggedFetch(
-        `${DATAPROC}/projects/${credentials.project_id}/locations/${credentials.region_id}/batches?orderBy=create_time desc&&pageSize=50&pageToken=${pageToken}`,
+        `${DATAPROC}/projects/${credentials.project_id}/locations/${credentials.region_id}/batches?orderBy=create_time desc&&pageSize=500&pageToken=${pageToken}`,
         {
           headers: {
             'Content-Type': API_HEADER_CONTENT_TYPE,

src/controls/DynamicDropdown.tsx

@@ -15,18 +15,25 @@
  * limitations under the License.
  */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback
+} from 'react';
 import TextField from '@mui/material/TextField';
 import Autocomplete, { AutocompleteProps } from '@mui/material/Autocomplete';
 import { ChipTypeMap, Paper, PaperProps } from '@mui/material';
+import { handleDebounce } from '../utils/utils';
 
 type Props = {
   fetchFunc: (search: string) => Promise<string[]>;
   label: string;
 };
 
 /**
- * Component to render a dyanmic selector dropdown.
+ * Component to render a dynamic selector dropdown.
  */
 export function DynamicDropdown(
   props: Props &
@@ -45,22 +52,30 @@ export function DynamicDropdown(
   const [search, setSearch] = useState('');
   const [filteredList, setFilteredList] = useState<string[]>([]);
   const currentSearch = useRef(search);
+
+  const debouncedFetch = useCallback(
+    handleDebounce((search: string) => {
+      currentSearch.current = search;
+      fetchFunc(search).then(items => {
+        if (currentSearch.current !== search) {
+          // The prefix changed while the network request was pending
+          // so we should throw away these results.
+          return;
+        }
+        setFilteredList(items);
+      });
+    }, 500), // 5ms debounce
+    [fetchFunc]
+  );
+
   useEffect(() => {
-    currentSearch.current = search;
-    fetchFunc(search).then(items => {
-      if (currentSearch.current != search) {
-        // The prefix changed while the network request was pending
-        // so we should throw away these results.
-        return;
-      }
-      setFilteredList(items);
-    });
-  }, [search, fetchFunc]);
+    debouncedFetch(search);
+  }, [search, debouncedFetch]);
 
   /**
-   * This is the last selected value when the dropdown is opened.  We
+   * This is the last selected value when the dropdown is opened. We
    * always ensure that the current ID exists in the dropdown list,
-   * preppending it if necessary.
+   * prepending it if necessary.
    */
   const [hoistedValue, setHoistedValue] = useState(value);
 
@@ -76,6 +91,7 @@ export function DynamicDropdown(
     }
     return filteredList;
   }, [filteredList, hoistedValue]) as string[];
+
   return (
     <Autocomplete
       value={value}

src/jobs/jobServices.tsx

@@ -275,7 +275,7 @@ export class JobService {
     const pageToken = nextPageToken ?? '';
     if (credentials) {
       loggedFetch(
-        `${DATAPROC}/projects/${credentials.project_id}/regions/${credentials.region_id}/jobs?pageSize=50&pageToken=${pageToken}&&clusterName=${clusterName}`,
+        `${DATAPROC}/projects/${credentials.project_id}/regions/${credentials.region_id}/jobs?pageSize=500&pageToken=${pageToken}&&clusterName=${clusterName}`,
         {
           headers: {
             'Content-Type': API_HEADER_CONTENT_TYPE,