cleanup tests/advanced search changes

awx/ui/src/components/DataListToolbar/DataListToolbar.js

@@ -20,7 +20,7 @@ import {
   AngleRightIcon,
   SearchIcon,
 } from '@patternfly/react-icons';
-import { SearchColumns, SortColumns, QSConfig } from 'types';
+import { SearchColumns, SortColumns, QSConfig, SearchableKeys } from 'types';
 import { KebabifiedProvider } from 'contexts/Kebabified';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
@@ -200,7 +200,7 @@ DataListToolbar.propTypes = {
   clearAllFilters: PropTypes.func,
   qsConfig: QSConfig.isRequired,
   searchColumns: SearchColumns.isRequired,
-  searchableKeys: PropTypes.arrayOf(PropTypes.string), // TODO: Update
+  searchableKeys: SearchableKeys,
   relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
   sortColumns: SortColumns,
   isAllSelected: PropTypes.bool,

awx/ui/src/components/ListHeader/ListHeader.js

@@ -10,7 +10,7 @@ import {
   removeParams,
   updateQueryString,
 } from 'util/qs';
-import { QSConfig, SearchColumns, SortColumns } from 'types';
+import { QSConfig, SearchColumns, SortColumns, SearchableKeys } from 'types';
 import DataListToolbar from '../DataListToolbar';
 
 const EmptyStateControlsWrapper = styled.div`
@@ -146,7 +146,7 @@ ListHeader.propTypes = {
   itemCount: PropTypes.number.isRequired,
   qsConfig: QSConfig.isRequired,
   searchColumns: SearchColumns.isRequired,
-  searchableKeys: PropTypes.arrayOf(PropTypes.string),
+  searchableKeys: SearchableKeys,
   relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
   sortColumns: SortColumns,
   renderToolbar: PropTypes.func,

awx/ui/src/components/PaginatedTable/PaginatedTable.js

@@ -7,7 +7,7 @@ import { t } from '@lingui/macro';
 import { useLocation, useHistory } from 'react-router-dom';
 
 import { parseQueryString, updateQueryString } from 'util/qs';
-import { QSConfig, SearchColumns } from 'types';
+import { QSConfig, SearchColumns, SearchableKeys } from 'types';
 import ListHeader from '../ListHeader';
 import ContentEmpty from '../ContentEmpty';
 import ContentError from '../ContentError';
@@ -184,7 +184,7 @@ PaginatedTable.propTypes = {
   qsConfig: QSConfig.isRequired,
   renderRow: PropTypes.func.isRequired,
   toolbarSearchColumns: SearchColumns,
-  toolbarSearchableKeys: PropTypes.arrayOf(PropTypes.string),
+  toolbarSearchableKeys: SearchableKeys,
   toolbarRelatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
   showPageSizeOptions: PropTypes.bool,
   renderToolbar: PropTypes.func,

awx/ui/src/components/Search/AdvancedSearch.js

@@ -1,6 +1,6 @@
 import 'styled-components/macro';
 import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
+import { string, func, bool, arrayOf } from 'prop-types';
 import { t } from '@lingui/macro';
 import {
   Button,
@@ -16,6 +16,7 @@ import { SearchIcon, QuestionCircleIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import { useConfig } from 'contexts/Config';
 import getDocsBaseUrl from 'util/getDocsBaseUrl';
+import { SearchableKeys } from 'types';
 import RelatedLookupTypeInput from './RelatedLookupTypeInput';
 import LookupTypeInput from './LookupTypeInput';
 
@@ -56,18 +57,15 @@ function AdvancedSearch({
   const [lookupSelection, setLookupSelection] = useState(null);
   const [keySelection, setKeySelection] = useState(null);
   const [searchValue, setSearchValue] = useState('');
-  // const [relatedSearchKeySelected, setRelatedSearchKeySelected] =
-  //   useState(false);
   const config = useConfig();
 
+  const selectedKey = searchableKeys.find((k) => k.key === keySelection);
   const relatedSearchKeySelected =
     keySelection &&
     relatedSearchableKeys.indexOf(keySelection) > -1 &&
-    !searchableKeys.find((k) => k.key === keySelection);
+    !selectedKey;
   const lookupKeyType =
-    keySelection && !relatedSearchKeySelected
+    keySelection && !relatedSearchKeySelected ? selectedKey?.type : null;
-      ? searchableKeys.find((k) => k.key === keySelection).type
-      : null;
 
   useEffect(() => {
     if (relatedSearchKeySelected) {
@@ -234,12 +232,12 @@ function AdvancedSearch({
 }
 
 AdvancedSearch.propTypes = {
-  onSearch: PropTypes.func.isRequired,
+  onSearch: func.isRequired,
-  searchableKeys: PropTypes.arrayOf(PropTypes.string),
+  searchableKeys: SearchableKeys,
-  relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
+  relatedSearchableKeys: arrayOf(string),
-  maxSelectHeight: PropTypes.string,
+  maxSelectHeight: string,
-  enableNegativeFiltering: PropTypes.bool,
+  enableNegativeFiltering: bool,
-  enableRelatedFuzzyFiltering: PropTypes.bool,
+  enableRelatedFuzzyFiltering: bool,
 };
 
 AdvancedSearch.defaultProps = {

awx/ui/src/components/Search/AdvancedSearch.test.js

@@ -10,22 +10,14 @@ describe('<AdvancedSearch />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders without crashing', () => {
-    wrapper = mountWithContexts(
-      <AdvancedSearch
-        onSearch={jest.fn}
-        searchableKeys={[]}
-        relatedSearchableKeys={[]}
-      />
-    );
-    expect(wrapper.length).toBe(1);
-  });
-
   test('Remove duplicates from searchableKeys/relatedSearchableKeys list', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={jest.fn}
-        searchableKeys={['foo', 'bar']}
+        searchableKeys={[
+          { key: 'foo', type: 'string' },
+          { key: 'bar', type: 'string' },
+        ]}
         relatedSearchableKeys={['bar', 'baz']}
       />
     );
@@ -42,7 +34,10 @@ describe('<AdvancedSearch />', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={advancedSearchMock}
-        searchableKeys={['foo', 'bar']}
+        searchableKeys={[
+          { key: 'foo', type: 'string' },
+          { key: 'bar', type: 'string' },
+        ]}
         relatedSearchableKeys={['bar', 'baz']}
       />
     );
@@ -155,7 +150,10 @@ describe('<AdvancedSearch />', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={advancedSearchMock}
-        searchableKeys={['foo', 'bar']}
+        searchableKeys={[
+          { key: 'foo', type: 'string' },
+          { key: 'bar', type: 'string' },
+        ]}
         relatedSearchableKeys={['bar', 'baz']}
       />
     );
@@ -239,7 +237,7 @@ describe('<AdvancedSearch />', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={advancedSearchMock}
-        searchableKeys={['foo']}
+        searchableKeys={[{ key: 'foo', type: 'string' }]}
         relatedSearchableKeys={[]}
       />
     );
@@ -278,7 +276,7 @@ describe('<AdvancedSearch />', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={advancedSearchMock}
-        searchableKeys={['foo']}
+        searchableKeys={[{ key: 'foo', type: 'string' }]}
         relatedSearchableKeys={[]}
       />
     );
@@ -375,7 +373,10 @@ describe('<AdvancedSearch />', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={jest.fn}
-        searchableKeys={['foo', 'bar']}
+        searchableKeys={[
+          { key: 'foo', type: 'string' },
+          { key: 'bar', type: 'string' },
+        ]}
         relatedSearchableKeys={['bar', 'baz']}
         enableNegativeFiltering={false}
       />
@@ -399,7 +400,10 @@ describe('<AdvancedSearch />', () => {
     wrapper = mountWithContexts(
       <AdvancedSearch
         onSearch={jest.fn}
-        searchableKeys={['foo', 'bar']}
+        searchableKeys={[
+          { key: 'foo', type: 'string' },
+          { key: 'bar', type: 'string' },
+        ]}
         relatedSearchableKeys={['bar', 'baz']}
         enableRelatedFuzzyFiltering={false}
       />

awx/ui/src/components/Search/Search.js

@@ -19,7 +19,7 @@ import {
 import { SearchIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import { parseQueryString } from 'util/qs';
-import { QSConfig, SearchColumns } from 'types';
+import { QSConfig, SearchColumns, SearchableKeys } from 'types';
 import AdvancedSearch from './AdvancedSearch';
 import getChipsByKey from './getChipsByKey';
 
@@ -276,6 +276,7 @@ Search.propTypes = {
   maxSelectHeight: PropTypes.string,
   enableNegativeFiltering: PropTypes.bool,
   enableRelatedFuzzyFiltering: PropTypes.bool,
+  searchableKeys: SearchableKeys,
 };
 
 Search.defaultProps = {
@@ -285,6 +286,7 @@ Search.defaultProps = {
   maxSelectHeight: '300px',
   enableNegativeFiltering: true,
   enableRelatedFuzzyFiltering: true,
+  searchableKeys: [],
 };
 
 export default Search;

awx/ui/src/types.js

@@ -421,3 +421,10 @@ export const ExecutionEnvironment = shape({
   description: string,
   pull: string,
 });
+
+export const SearchableKeys = arrayOf(
+  shape({
+    key: string.isRequired,
+    type: string.isRequired,
+  })
+);

awx/ui_next/src/components/Search/LookupTypeInput.js

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { string, oneOfType, arrayOf, func } from 'prop-types';
 import { t } from '@lingui/macro';
 import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
 
@@ -137,5 +138,16 @@ function LookupTypeInput({ value, type, setValue, maxSelectHeight }) {
     </Select>
   );
 }
+LookupTypeInput.propTypes = {
+  type: string,
+  value: oneOfType([string, arrayOf(string)]),
+  setValue: func.isRequired,
+  maxSelectHeight: string,
+};
+LookupTypeInput.defaultProps = {
+  type: 'string',
+  value: '',
+  maxSelectHeight: '300px',
+};
 
 export default LookupTypeInput;