Merge pull request #4140 from zherman0/filtertweaks

Bug 1795713: Fix labels and Enable typeahead filter for name filter
openshift · Feb 15, 2020 · abe5a08 · abe5a08
2 parents 3860843 + cde30f3
commit abe5a08
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 36 deletions.
diff --git a/frontend/public/components/search-filter-dropdown.tsx b/frontend/public/components/search-filter-dropdown.tsx
@@ -10,9 +10,8 @@ export enum searchFilterValues {
 export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props) => {
   const [isOpen, setOpen] = React.useState(false);
   const [selected, setSelected] = React.useState(searchFilterValues.Label);
-  const [inputValue, setInputValue] = React.useState('');
 
-  const { onChange } = props;
+  const { onChange, nameFilterInput, labelFilterInput } = props;
 
   const onToggle = (open: boolean) => setOpen(open);
   const onSelect = (event: React.SyntheticEvent) => {
@@ -29,11 +28,15 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
   ];
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
-      onChange(selected, inputValue);
-      setInputValue('');
+      const { value } = e.target as HTMLInputElement;
+      onChange(selected, value, true);
     }
   };
 
+  const handleInputValue = (value: string) => {
+    onChange(selected, value, false);
+  };
+
   return (
     <div className="form-group co-search-group__filter">
       <div className="pf-c-input-group">
@@ -50,13 +53,11 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
           dropdownItems={dropdownItems}
         />
         <TextInput
-          onChange={setInputValue}
-          placeholder={
-            selected === searchFilterValues.Label ? 'Filter by label...' : 'Filter by name...'
-          }
+          onChange={handleInputValue}
+          placeholder={selected === searchFilterValues.Label ? 'app=frontend' : 'my-resource'}
           name="search-filter-input"
           id="search-filter-input"
-          value={inputValue}
+          value={selected === searchFilterValues.Label ? labelFilterInput : nameFilterInput}
           onKeyDown={handleKeyDown}
         />
       </div>
@@ -65,5 +66,7 @@ export const SearchFilterDropdown: React.SFC<SearchFilterDropdownProps> = (props
 };
 
 export type SearchFilterDropdownProps = {
-  onChange: (type: string, value: string) => void;
+  onChange: (type: string, value: string, endOfString: boolean) => void;
+  nameFilterInput: string;
+  labelFilterInput: string;
 };
diff --git a/frontend/public/components/search.tsx b/frontend/public/components/search.tsx
@@ -56,8 +56,9 @@ const ResourceList = connectToModel(({ kindObj, mock, namespace, selector, nameF
 const SearchPage_: React.FC<SearchProps> = (props) => {
   const [selectedItems, setSelectedItems] = React.useState(new Set<string>([]));
   const [collapsedKinds, setCollapsedKinds] = React.useState(new Set<string>([]));
-  const [nameFilter, setNameFilter] = React.useState([]);
   const [labelFilter, setLabelFilter] = React.useState([]);
+  const [labelFilterInput, setLabelFilterInput] = React.useState('');
+  const [typeaheadNameFilter, setTypeaheadNameFilter] = React.useState('');
 
   const { namespace, noProjectsAvailable } = props;
 
@@ -77,11 +78,9 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
       setSelectedItems(new Set(kind.split(',')));
     }
     const tags = split(q || '');
-    const nameTags = split(name || '');
     const validTags = _.reject(tags, (tag) => requirementFromString(tag) === undefined);
-    const validNameTags = _.reject(nameTags, (tag) => requirementFromString(tag) === undefined);
     setLabelFilter(validTags);
-    setNameFilter(validNameTags);
+    setTypeaheadNameFilter(name || '');
   }, []);
 
   const updateSelectedItems = (selection: string) => {
@@ -97,7 +96,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
   };
 
   const clearNameFilter = () => {
-    setNameFilter([]);
+    setTypeaheadNameFilter('');
     setQueryArgument('name', '');
   };
 
@@ -119,25 +118,25 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
   };
 
   const updateNameFilter = (value: string) => {
-    setNameFilter([...nameFilter, value]);
-    setQueryArgument('name', [...nameFilter, value].join(','));
+    setTypeaheadNameFilter(value);
+    setQueryArgument('name', value);
   };
 
-  const updateLabelFilter = (value: string) => {
+  const updateLabelFilter = (value: string, endOfString: boolean) => {
+    setLabelFilterInput(value);
     if (requirementFromString(value) !== undefined) {
-      setLabelFilter([...labelFilter, value]);
-      setQueryArgument('q', [...labelFilter, value].join(','));
+      if (endOfString) {
+        setLabelFilter([...labelFilter, value]);
+        setQueryArgument('q', [...labelFilter, value].join(','));
+        setLabelFilterInput('');
+      }
     }
   };
 
-  const updateSearchFilter = (type: string, value: string) => {
-    type === searchFilterValues.Label ? updateLabelFilter(value) : updateNameFilter(value);
-  };
-
-  const removeNameFilter = (value: string) => {
-    const newNames = nameFilter.filter((keepItem: string) => keepItem !== value);
-    setNameFilter(newNames);
-    setQueryArgument('name', newNames.join(','));
+  const updateSearchFilter = (type: string, value: string, endOfString: boolean) => {
+    type === searchFilterValues.Label
+      ? updateLabelFilter(value, endOfString)
+      : updateNameFilter(value);
   };
 
   const removeLabelFilter = (value: string) => {
@@ -163,7 +162,11 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
             onChange={updateSelectedItems}
             className="co-search-group__resource"
           />
-          <SearchFilterDropdown onChange={updateSearchFilter} />
+          <SearchFilterDropdown
+            onChange={updateSearchFilter}
+            nameFilterInput={typeaheadNameFilter}
+            labelFilterInput={labelFilterInput}
+          />
         </div>
         <div className="form-group">
           <ChipGroup withToolbar defaultIsOpen={false}>
@@ -197,12 +200,12 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
               )}
             </ChipGroupToolbarItem>
             <ChipGroupToolbarItem key="name-category" categoryName={searchFilterValues.Name}>
-              {nameFilter.map((chip) => (
-                <Chip key={chip} onClick={() => removeNameFilter(chip)}>
-                  {chip}
+              {typeaheadNameFilter !== '' && (
+                <Chip key="typehaed-chip" onClick={clearNameFilter}>
+                  {typeaheadNameFilter}
                 </Chip>
-              ))}
-              {nameFilter.length > 0 && (
+              )}
+              {typeaheadNameFilter !== '' && (
                 <span>
                   <Button variant="plain" aria-label="Close" onClick={clearNameFilter}>
                     <CloseIcon />
@@ -211,7 +214,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
               )}
             </ChipGroupToolbarItem>
           </ChipGroup>
-          {(selectedItems.size > 0 || labelFilter.length > 0 || nameFilter.length > 0) && (
+          {(selectedItems.size > 0 || labelFilter.length > 0 || typeaheadNameFilter !== '') && (
             <Button variant="link" key="clear-filters" onClick={clearAll}>
               Clear all filters
             </Button>
@@ -236,7 +239,7 @@ const SearchPage_: React.FC<SearchProps> = (props) => {
                     <ResourceList
                       kind={item}
                       selector={selectorFromString(labelFilter.join(','))}
-                      nameFilter={nameFilter.join(',')}
+                      nameFilter={typeaheadNameFilter}
                       namespace={namespace}
                       mock={noProjectsAvailable}
                       key={item}