Merge pull request #6786 from nixocio/ui_issue_6511

Fix searching for a blank string creates a blank search filter Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
ansible · Apr 22, 2020 · b6be891 · b6be891
2 parents 546df65 + 2a86a3e
commit b6be891
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 15 deletions.
diff --git a/awx/ui_next/src/components/Search/Search.jsx b/awx/ui_next/src/components/Search/Search.jsx
@@ -80,17 +80,19 @@ class Search extends React.Component {
     const { searchKey, searchValue } = this.state;
     const { onSearch, qsConfig } = this.props;
 
-    const isNonStringField =
-      qsConfig.integerFields.find(field => field === searchKey) ||
-      qsConfig.dateFields.find(field => field === searchKey);
+    if (searchValue) {
+      const isNonStringField =
+        qsConfig.integerFields.find(field => field === searchKey) ||
+        qsConfig.dateFields.find(field => field === searchKey);
 
-    const actualSearchKey = isNonStringField
-      ? searchKey
-      : `${searchKey}__icontains`;
+      const actualSearchKey = isNonStringField
+        ? searchKey
+        : `${searchKey}__icontains`;
 
-    onSearch(actualSearchKey, searchValue);
+      onSearch(actualSearchKey, searchValue);
 
-    this.setState({ searchValue: '' });
+      this.setState({ searchValue: '' });
+    }
   }
 
   handleSearchInputChange(searchValue) {
@@ -276,13 +278,16 @@ class Search extends React.Component {
                       onChange={this.handleSearchInputChange}
                       onKeyDown={this.handleTextKeyDown}
                     />
-                    <Button
-                      variant={ButtonVariant.control}
-                      aria-label={i18n._(t`Search submit button`)}
-                      onClick={this.handleSearch}
-                    >
-                      <SearchIcon />
-                    </Button>
+                    <div css={!searchValue && `cursor:not-allowed`}>
+                      <Button
+                        variant={ButtonVariant.control}
+                        isDisabled={!searchValue}
+                        aria-label={i18n._(t`Search submit button`)}
+                        onClick={this.handleSearch}
+                      >
+                        <SearchIcon />
+                      </Button>
+                    </div>
                   </InputGroup>
                 )}
             </DataToolbarFilter>

diff --git a/awx/ui_next/src/components/Search/Search.test.jsx b/awx/ui_next/src/components/Search/Search.test.jsx
@@ -92,4 +92,53 @@ describe('<Search />', () => {
       .handleDropdownSelect({ target: { innerText: 'Description' } });
     expect(wrapper.state('searchKey')).toEqual('description');
   });
+
+  test('attempt to search with empty string', () => {
+    const searchButton = 'button[aria-label="Search submit button"]';
+    const searchTextInput = 'input[aria-label="Search text input"]';
+    const columns = [{ name: 'Name', key: 'name', isDefault: true }];
+    const onSearch = jest.fn();
+    const wrapper = mountWithContexts(
+      <DataToolbar
+        id={`${QS_CONFIG.namespace}-list-toolbar`}
+        clearAllFilters={() => {}}
+        collapseListedFiltersBreakpoint="md"
+      >
+        <DataToolbarContent>
+          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
+        </DataToolbarContent>
+      </DataToolbar>
+    );
+
+    wrapper.find(searchTextInput).instance().value = '';
+    wrapper.find(searchTextInput).simulate('change');
+    wrapper.find(searchButton).simulate('click');
+
+    expect(onSearch).toHaveBeenCalledTimes(0);
+  });
+
+  test('search with a valid string', () => {
+    const searchButton = 'button[aria-label="Search submit button"]';
+    const searchTextInput = 'input[aria-label="Search text input"]';
+    const columns = [{ name: 'Name', key: 'name', isDefault: true }];
+    const onSearch = jest.fn();
+    const wrapper = mountWithContexts(
+      <DataToolbar
+        id={`${QS_CONFIG.namespace}-list-toolbar`}
+        clearAllFilters={() => {}}
+        collapseListedFiltersBreakpoint="md"
+      >
+        <DataToolbarContent>
+          <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
+        </DataToolbarContent>
+      </DataToolbar>
+    );
+
+    wrapper.find(searchTextInput).instance().value = 'test-321';
+    wrapper.find(searchTextInput).simulate('change');
+    wrapper.find(searchButton).simulate('click');
+
+    expect(onSearch).toHaveBeenCalledTimes(1);
+    expect(onSearch).toBeCalledWith('name__icontains', 'test-321');
+  });
 });