fix: fix searchbar X button (flyteorg#564)

chore: fix searchbar X button Signed-off-by: Carina Ursu <[email protected]> Signed-off-by: Carina Ursu <[email protected]>
eapolinario · Aug 16, 2022 · 1f89e2b · 1f89e2b
1 parent 3f2bbfb
commit 1f89e2b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 28 deletions.
diff --git a/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx b/packages/zapp/console/src/components/LaunchPlan/SearchableLaunchPlanNameList.tsx
@@ -4,10 +4,11 @@ import { useNamedEntityListStyles } from 'components/common/SearchableNamedEntit
 import { useCommonStyles } from 'components/common/styles';
 import { separatorColor, primaryTextColor, launchPlanLabelColor } from 'components/Theme/constants';
 import * as React from 'react';
+import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { debounce } from 'lodash';
-import { Typography, FormGroup } from '@material-ui/core';
+import { FormGroup } from '@material-ui/core';
 import { ResourceType } from 'models/Common/types';
 import { MuiLaunchPlanIcon } from '@flyteconsole/ui-atoms';
 import { LaunchPlanListStructureItem } from './types';
@@ -120,18 +121,22 @@ export const SearchableLaunchPlanNameList: React.FC<SearchableLaunchPlanNameList
   launchPlans,
 }) => {
   const styles = useStyles();
-  const [search, setSearch] = React.useState('');
+  const [search, setSearch] = useState('');
   const { results, setSearchString } = useSearchableListState({
     items: launchPlans,
     propertyGetter: ({ id }) => id.name,
   });
 
+  useEffect(() => {
+    const debouncedSearch = debounce(() => setSearchString(search), 1000);
+    debouncedSearch();
+  }, [search]);
+
   const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const searchString = event.target.value;
     setSearch(searchString);
-    const debouncedSearch = debounce(() => setSearchString(searchString), 1000);
-    debouncedSearch();
   };
+
   const onClear = () => setSearch('');
 
   return (

diff --git a/packages/zapp/console/src/components/Literals/__stories__/helpers/typeGenerators.ts b/packages/zapp/console/src/components/Literals/__stories__/helpers/typeGenerators.ts
@@ -1,8 +1,5 @@
 import { Core } from 'flyteidl';
-import {
-  blobScalars,
-  schemaScalars,
-} from '../scalarValues';
+import { blobScalars, schemaScalars } from '../scalarValues';
 
 // SIMPLE
 type GeneratedSimpleType = {

diff --git a/packages/zapp/console/src/components/Literals/test/helpers/mock_simpleTypes.ts b/packages/zapp/console/src/components/Literals/test/helpers/mock_simpleTypes.ts
@@ -1,17 +1,17 @@
 import { Core } from 'flyteidl';
 
 export function extractSimpleTypes() {
-  const simpleTypes= Object.keys(Core.SimpleType).map((key) => ({
-    [key]: {
-      type: 'simple',
-      simple: Core.SimpleType[key],
-    },
-  })).reduce((acc, v) => ({...acc, ...v}), {});
+  const simpleTypes = Object.keys(Core.SimpleType)
+    .map((key) => ({
+      [key]: {
+        type: 'simple',
+        simple: Core.SimpleType[key],
+      },
+    }))
+    .reduce((acc, v) => ({ ...acc, ...v }), {});
   return simpleTypes;
 }
 
 const simple: Core.SimpleType[] = extractSimpleTypes() as any;
 
-export  {
-  simple
-};
+export { simple };
diff --git a/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx b/packages/zapp/console/src/components/Workflow/SearchableWorkflowNameList.tsx
@@ -5,6 +5,7 @@ import { useNamedEntityListStyles } from 'components/common/SearchableNamedEntit
 import { useCommonStyles } from 'components/common/styles';
 import { separatorColor, primaryTextColor, workflowLabelColor } from 'components/Theme/constants';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Routes } from 'routes/routes';
 import { Shimmer } from 'components/common/Shimmer';
@@ -23,7 +24,6 @@ import ArchiveOutlined from '@material-ui/icons/ArchiveOutlined';
 import { useMutation } from 'react-query';
 import { NamedEntityState } from 'models/enums';
 import { updateWorkflowState } from 'models/Workflow/api';
-import { useState } from 'react';
 import { useSnackbar } from 'notistack';
 import { padExecutionPaths, padExecutions } from 'common/utils';
 import { WorkflowListStructureItem } from './types';
@@ -322,18 +322,22 @@ export const SearchableWorkflowNameList: React.FC<SearchableWorkflowNameListProp
   showArchived,
 }) => {
   const styles = useStyles();
-  const [search, setSearch] = React.useState('');
+  const [search, setSearch] = useState('');
   const { results, setSearchString } = useSearchableListState({
     items: workflows,
     propertyGetter: ({ id }) => id.name,
   });
 
+  useEffect(() => {
+    const debouncedSearch = debounce(() => setSearchString(search), 1000);
+    debouncedSearch();
+  }, [search]);
+
   const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const searchString = event.target.value;
     setSearch(searchString);
-    const debouncedSearch = debounce(() => setSearchString(searchString), 1000);
-    debouncedSearch();
   };
+
   const onClear = () => setSearch('');
 
   return (

diff --git a/packages/zapp/console/src/components/common/FilterableNamedEntityList.tsx b/packages/zapp/console/src/components/common/FilterableNamedEntityList.tsx
@@ -2,6 +2,7 @@ import { Checkbox, debounce, FormControlLabel, FormGroup } from '@material-ui/co
 import { makeStyles, Theme } from '@material-ui/core/styles';
 import { NamedEntity } from 'models/Common/types';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 import { NoResults } from './NoResults';
 import { SearchableInput, SearchResult } from './SearchableList';
 import { useCommonStyles } from './styles';
@@ -60,18 +61,21 @@ export const FilterableNamedEntityList: React.FC<FilterableNamedEntityListProps>
   archiveCheckboxLabel,
 }) => {
   const styles = useStyles();
-  const [search, setSearch] = React.useState('');
+  const [search, setSearch] = useState('');
 
   const { results, setSearchString } = useSearchableListState({
     items: names,
     propertyGetter: ({ id }) => id.name,
   });
 
+  useEffect(() => {
+    const debouncedSearch = debounce(() => setSearchString(search), 1000);
+    debouncedSearch();
+  }, [search]);
+
   const onSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const searchString = event.target.value;
     setSearch(searchString);
-    const debouncedSearch = debounce(() => setSearchString(searchString), 1000);
-    debouncedSearch();
   };
 
   const onClear = () => setSearch('');

diff --git a/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx b/packages/zapp/console/src/components/flytegraph/ReactFlow/ReactFlowWrapper.tsx
@@ -41,15 +41,15 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
     edges: rfGraphJson.edges,
     version: version,
     reactFlowInstance: null,
-    needFitView: false
+    needFitView: false,
   });
 
   useEffect(() => {
     setState((state) => ({
       ...state,
       shouldUpdate: true,
       nodes: rfGraphJson.nodes,
-      edges: rfGraphJson.edges.map(edge => ({ ...edge, zIndex: 0 })),
+      edges: rfGraphJson.edges.map((edge) => ({ ...edge, zIndex: 0 })),
     }));
   }, [rfGraphJson]);
 
@@ -96,8 +96,8 @@ export const ReactFlowWrapper: React.FC<RFWrapperProps> = ({
   };
 
   const onNodeClick = () => {
-    setState((state) => ({ ...state, needFitView: false }))
-  }
+    setState((state) => ({ ...state, needFitView: false }));
+  };
 
   return (
     <ReactFlow