diff --git a/awx/ui/src/components/DataListToolbar/DataListToolbar.js b/awx/ui/src/components/DataListToolbar/DataListToolbar.js
index 2bcc0a1721..e412dddadc 100644
--- a/awx/ui/src/components/DataListToolbar/DataListToolbar.js
+++ b/awx/ui/src/components/DataListToolbar/DataListToolbar.js
@@ -200,7 +200,7 @@ DataListToolbar.propTypes = {
clearAllFilters: PropTypes.func,
qsConfig: QSConfig.isRequired,
searchColumns: SearchColumns.isRequired,
- searchableKeys: PropTypes.arrayOf(PropTypes.string),
+ searchableKeys: PropTypes.arrayOf(PropTypes.string), // TODO: Update
relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
sortColumns: SortColumns,
isAllSelected: PropTypes.bool,
diff --git a/awx/ui/src/components/Search/AdvancedSearch.js b/awx/ui/src/components/Search/AdvancedSearch.js
index 16e3c0bce8..6f7525b644 100644
--- a/awx/ui/src/components/Search/AdvancedSearch.js
+++ b/awx/ui/src/components/Search/AdvancedSearch.js
@@ -16,6 +16,8 @@ import { SearchIcon, QuestionCircleIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
import { useConfig } from 'contexts/Config';
import getDocsBaseUrl from 'util/getDocsBaseUrl';
+import RelatedLookupTypeInput from './RelatedLookupTypeInput';
+import LookupTypeInput from './LookupTypeInput';
const AdvancedGroup = styled.div`
display: flex;
@@ -42,31 +44,36 @@ function AdvancedSearch({
// for now, I'm spreading set to get rid of duplicate keys...when they are grouped
// we might want to revisit that.
const allKeys = [
- ...new Set([...(searchableKeys || []), ...(relatedSearchableKeys || [])]),
+ ...new Set([
+ ...(searchableKeys.map((k) => k.key) || []),
+ ...(relatedSearchableKeys || []),
+ ]),
];
const [isPrefixDropdownOpen, setIsPrefixDropdownOpen] = useState(false);
- const [isLookupDropdownOpen, setIsLookupDropdownOpen] = useState(false);
const [isKeyDropdownOpen, setIsKeyDropdownOpen] = useState(false);
const [prefixSelection, setPrefixSelection] = useState(null);
const [lookupSelection, setLookupSelection] = useState(null);
const [keySelection, setKeySelection] = useState(null);
const [searchValue, setSearchValue] = useState('');
- const [relatedSearchKeySelected, setRelatedSearchKeySelected] =
- useState(false);
+ // const [relatedSearchKeySelected, setRelatedSearchKeySelected] =
+ // useState(false);
const config = useConfig();
+ const relatedSearchKeySelected =
+ keySelection &&
+ relatedSearchableKeys.indexOf(keySelection) > -1 &&
+ !searchableKeys.find((k) => k.key === keySelection);
+ const lookupKeyType =
+ keySelection && !relatedSearchKeySelected
+ ? searchableKeys.find((k) => k.key === keySelection).type
+ : null;
+
useEffect(() => {
- if (
- keySelection &&
- relatedSearchableKeys.indexOf(keySelection) > -1 &&
- searchableKeys.indexOf(keySelection) === -1
- ) {
+ if (relatedSearchKeySelected) {
setLookupSelection('name__icontains');
- setRelatedSearchKeySelected(true);
} else {
setLookupSelection(null);
- setRelatedSearchKeySelected(false);
}
}, [keySelection]); // eslint-disable-line react-hooks/exhaustive-deps
@@ -136,160 +143,6 @@ function AdvancedSearch({
);
- const renderRelatedLookupType = () => (
-
- );
-
- const renderLookupType = () => (
-
- );
-
return (
{lookupSelection === 'search' ? (
@@ -328,9 +181,21 @@ function AdvancedSearch({
))}
- {relatedSearchKeySelected
- ? renderRelatedLookupType()
- : renderLookupType()}
+ {relatedSearchKeySelected ? (
+
+ ) : (
+
+ )}
val.slice(0, -8)),
- searchableKeys: Object.keys(orgActions.data.actions?.GET || {}).filter(
- (key) => orgActions.data.actions?.GET[key].filterable
- ),
+ // searchableKeys: Object.keys(orgActions.data.actions?.GET || {}).filter(
+ // (key) => orgActions.data.actions?.GET[key].filterable
+ // ),
+ searchableKeys: Object.keys(keys)
+ .filter((key) => keys[key].filterable)
+ .map((key) => ({
+ key,
+ type: keys[key].type,
+ })),
};
}, [location]),
{
diff --git a/awx/ui_next/src/components/Search/LookupTypeInput.js b/awx/ui_next/src/components/Search/LookupTypeInput.js
new file mode 100644
index 0000000000..4bf629f0b4
--- /dev/null
+++ b/awx/ui_next/src/components/Search/LookupTypeInput.js
@@ -0,0 +1,141 @@
+import React, { useState } from 'react';
+import { t } from '@lingui/macro';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+function Option({ show, ...props }) {
+ if (!show) {
+ return null;
+ }
+ return ;
+}
+Option.defaultProps = {
+ show: true,
+};
+
+function LookupTypeInput({ value, type, setValue, maxSelectHeight }) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ );
+}
+
+export default LookupTypeInput;
diff --git a/awx/ui_next/src/components/Search/RelatedLookupTypeInput.js b/awx/ui_next/src/components/Search/RelatedLookupTypeInput.js
new file mode 100644
index 0000000000..effbc4199a
--- /dev/null
+++ b/awx/ui_next/src/components/Search/RelatedLookupTypeInput.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { t } from '@lingui/macro';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+
+function RelatedLookupTypeInput({
+ value,
+ setValue,
+ maxSelectHeight,
+ enableFuzzyFiltering,
+}) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+
+ );
+}
+
+export default RelatedLookupTypeInput;