Enable typeahead filter for searchFilter

openshift · Jan 31, 2020 · 57ec0fe · 57ec0fe
1 parent 46b8a85
commit 57ec0fe
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 10 deletions.
diff --git a/frontend/public/components/search-filter-dropdown.tsx b/frontend/public/components/search-filter-dropdown.tsx
@@ -29,11 +29,15 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
   ];
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      onChange(selected, inputValue);
+      onChange(selected, inputValue, true);
       setInputValue('');
     }
   };
 
+  const handleInputValue = (value: string, event: React.FormEvent<HTMLInputElement>) => {
+    setInputValue(value);
+    onChange(selected, value, false);
+  };
   return (
     <div className="form-group co-search-group__filter">
       <div className="pf-c-input-group">
@@ -50,7 +54,7 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
           dropdownItems={dropdownItems}
         />
         <TextInput
-          onChange={setInputValue}
+          onChange={handleInputValue}
           placeholder={
             selected === searchFilterValues.Label ? 'Filter by label...' : 'Filter by name...'
           }
@@ -65,5 +69,5 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
 };
 
 export type SearchFilterDropdownProps = {
-  onChange: (type: string, value: string) => void;
+  onChange: (type: string, value: string, endOfString: boolean) => void;
 };
diff --git a/frontend/public/components/search.tsx b/frontend/public/components/search.tsx
@@ -47,6 +47,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
   const [collaspedState, setCollaspedState] = React.useState(new Set<string>([]));
   const [nameFilter, setNameFilter] = React.useState([]);
   const [labelFilter, setLabelFilter] = React.useState([]);
+  const [inputFilter, setInputFilter] = React.useState('');
 
   const { namespace, noProjectsAvailable } = props;
 
@@ -111,20 +112,27 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
     setCollaspedState(newCollasped);
   };
 
-  const updateNameFilter = (value: string) => {
+  const updateNameFilter = (value: string, endOfString: boolean) => {
     setNameFilter([...nameFilter, value]);
     setQueryArgument('name', [...nameFilter, value].join(','));
   };
 
-  const updateLabelFilter = (value: string) => {
+  const updateLabelFilter = (value: string, endOfString: boolean) => {
     if (requirementFromString(value) !== undefined) {
-      setLabelFilter([...labelFilter, value]);
-      setQueryArgument('q', [...labelFilter, value].join(','));
+      if (endOfString) {
+        setInputFilter('');
+        setLabelFilter([...labelFilter, value]);
+        setQueryArgument('q', [...labelFilter, value].join(','));
+      } else {
+        setInputFilter(value);
+      }
     }
   };
 
-  const updateSearchFilter = (type: string, value: string) => {
-    type === searchFilterValues.Label ? updateLabelFilter(value) : updateNameFilter(value);
+  const updateSearchFilter = (type: string, value: string, endOfString: boolean) => {
+    type === searchFilterValues.Label
+      ? updateLabelFilter(value, endOfString)
+      : updateNameFilter(value, endOfString);
   };
 
   const removeNameFilter = (value: string) => {
@@ -225,7 +233,9 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
             >
               <ResourceList
                 kind={item}
-                selector={selectorFromString(labelFilter.join(','))}
+                selector={selectorFromString(
+                  (inputFilter !== '' ? [...labelFilter, inputFilter] : labelFilter).join(','),
+                )}
                 nameFilter={nameFilter.join(',')}
                 namespace={namespace}
                 mock={noProjectsAvailable}