diff --git a/awx/ui/src/components/DataListToolbar/DataListToolbar.js b/awx/ui/src/components/DataListToolbar/DataListToolbar.js
index e412dddadc..bd3eca8b04 100644
--- a/awx/ui/src/components/DataListToolbar/DataListToolbar.js
+++ b/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,
diff --git a/awx/ui/src/components/ListHeader/ListHeader.js b/awx/ui/src/components/ListHeader/ListHeader.js
index 965a6551ff..27055f1c45 100644
--- a/awx/ui/src/components/ListHeader/ListHeader.js
+++ b/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,
diff --git a/awx/ui/src/components/PaginatedTable/PaginatedTable.js b/awx/ui/src/components/PaginatedTable/PaginatedTable.js
index c80b9d7ef8..37ac22c4a9 100644
--- a/awx/ui/src/components/PaginatedTable/PaginatedTable.js
+++ b/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,
diff --git a/awx/ui/src/components/Search/AdvancedSearch.js b/awx/ui/src/components/Search/AdvancedSearch.js
index 6f7525b644..861c0cd33a 100644
--- a/awx/ui/src/components/Search/AdvancedSearch.js
+++ b/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
- ? searchableKeys.find((k) => k.key === keySelection).type
- : null;
+ keySelection && !relatedSearchKeySelected ? selectedKey?.type : null;
useEffect(() => {
if (relatedSearchKeySelected) {
@@ -234,12 +232,12 @@ function AdvancedSearch({
}
AdvancedSearch.propTypes = {
- onSearch: PropTypes.func.isRequired,
- searchableKeys: PropTypes.arrayOf(PropTypes.string),
- relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
- maxSelectHeight: PropTypes.string,
- enableNegativeFiltering: PropTypes.bool,
- enableRelatedFuzzyFiltering: PropTypes.bool,
+ onSearch: func.isRequired,
+ searchableKeys: SearchableKeys,
+ relatedSearchableKeys: arrayOf(string),
+ maxSelectHeight: string,
+ enableNegativeFiltering: bool,
+ enableRelatedFuzzyFiltering: bool,
};
AdvancedSearch.defaultProps = {
diff --git a/awx/ui/src/components/Search/AdvancedSearch.test.js b/awx/ui/src/components/Search/AdvancedSearch.test.js
index 79b63fe462..5050ff63af 100644
--- a/awx/ui/src/components/Search/AdvancedSearch.test.js
+++ b/awx/ui/src/components/Search/AdvancedSearch.test.js
@@ -10,22 +10,14 @@ describe('', () => {
jest.clearAllMocks();
});
- test('initially renders without crashing', () => {
- wrapper = mountWithContexts(
-
- );
- expect(wrapper.length).toBe(1);
- });
-
test('Remove duplicates from searchableKeys/relatedSearchableKeys list', () => {
wrapper = mountWithContexts(
);
@@ -42,7 +34,10 @@ describe('', () => {
wrapper = mountWithContexts(
);
@@ -155,7 +150,10 @@ describe('', () => {
wrapper = mountWithContexts(
);
@@ -239,7 +237,7 @@ describe('', () => {
wrapper = mountWithContexts(
);
@@ -278,7 +276,7 @@ describe('', () => {
wrapper = mountWithContexts(
);
@@ -375,7 +373,10 @@ describe('', () => {
wrapper = mountWithContexts(
@@ -399,7 +400,10 @@ describe('', () => {
wrapper = mountWithContexts(
diff --git a/awx/ui/src/components/Search/Search.js b/awx/ui/src/components/Search/Search.js
index 3cd1fac4a4..e614314305 100644
--- a/awx/ui/src/components/Search/Search.js
+++ b/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;
diff --git a/awx/ui/src/types.js b/awx/ui/src/types.js
index 3be7f55bc5..f0f95b1aa6 100644
--- a/awx/ui/src/types.js
+++ b/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,
+ })
+);
diff --git a/awx/ui_next/src/components/Search/LookupTypeInput.js b/awx/ui_next/src/components/Search/LookupTypeInput.js
index 4bf629f0b4..b14af41703 100644
--- a/awx/ui_next/src/components/Search/LookupTypeInput.js
+++ b/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 }) {
);
}
+LookupTypeInput.propTypes = {
+ type: string,
+ value: oneOfType([string, arrayOf(string)]),
+ setValue: func.isRequired,
+ maxSelectHeight: string,
+};
+LookupTypeInput.defaultProps = {
+ type: 'string',
+ value: '',
+ maxSelectHeight: '300px',
+};
export default LookupTypeInput;