Merge pull request #11208 from AlexSCorey/7741-GroupAdvanceSearchKeys

Groups Advanced Search Keys

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-
+import { useLocation } from 'react-router-dom';
 import { t } from '@lingui/macro';
 import {
   Button,
@@ -56,6 +56,7 @@ function DataListToolbar({
   enableNegativeFiltering,
   enableRelatedFuzzyFiltering,
 }) {
+  const { search } = useLocation();
   const showExpandCollapse = onCompact && onExpand;
   const [isKebabOpen, setIsKebabOpen] = useState(false);
   const [isKebabModalOpen, setIsKebabModalOpen] = useState(false);
@@ -81,7 +82,7 @@ function DataListToolbar({
       id={`${qsConfig.namespace}-list-toolbar`}
       clearAllFilters={clearAllFilters}
       collapseListedFiltersBreakpoint="lg"
-      clearFiltersButtonText={t`Clear all filters`}
+      clearFiltersButtonText={Boolean(search) && t`Clear all filters`}
     >
       <ToolbarContent>
         {onExpandAll && (

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

@@ -5,6 +5,14 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import DataListToolbar from './DataListToolbar';
 import AddDropDownButton from '../AddDropDownButton/AddDropDownButton';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/organizations',
+    search: 'template.name__icontains=name',
+  }),
+}));
+
 describe('<DataListToolbar />', () => {
   let toolbar;
 

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

@@ -5,8 +5,10 @@ import { t } from '@lingui/macro';
 import {
   Button,
   ButtonVariant,
+  Divider,
   InputGroup,
   Select,
+  SelectGroup,
   SelectOption,
   SelectVariant,
   TextInput,
@@ -41,15 +43,9 @@ function AdvancedSearch({
   enableNegativeFiltering,
   enableRelatedFuzzyFiltering,
 }) {
-  // TODO: blocked by pf bug, eventually separate these into two groups in the select
-  // 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.map((k) => k.key) || []),
-      ...(relatedSearchableKeys || []),
-    ]),
-  ];
+  const relatedKeys = relatedSearchableKeys.filter(
+    (sKey) => !searchableKeys.map(({ key }) => key).includes(sKey)
+  );
 
   const [isPrefixDropdownOpen, setIsPrefixDropdownOpen] = useState(false);
   const [isKeyDropdownOpen, setIsKeyDropdownOpen] = useState(false);
@@ -165,19 +161,44 @@ function AdvancedSearch({
         isOpen={isKeyDropdownOpen}
         placeholderText={t`Key`}
         isCreatable
+        isGrouped
         onCreateOption={setKeySelection}
         maxHeight={maxSelectHeight}
         noResultsFoundText={t`No results found`}
       >
-        {allKeys.map((optionKey) => (
-          <SelectOption
-            key={optionKey}
-            value={optionKey}
-            id={`select-option-${optionKey}`}
-          >
-            {optionKey}
-          </SelectOption>
-        ))}
+        {[
+          ...(searchableKeys.length
+            ? [
+                <SelectGroup key="direct keys" label={t`Direct Keys`}>
+                  {searchableKeys.map((k) => (
+                    <SelectOption
+                      value={k.key}
+                      key={k.key}
+                      id={`select-option-${k.key}`}
+                    >
+                      {k.key}
+                    </SelectOption>
+                  ))}
+                </SelectGroup>,
+                <Divider key="divider" />,
+              ]
+            : []),
+          ...(relatedKeys.length
+            ? [
+                <SelectGroup key="related keys" label={t`Related Keys`}>
+                  {relatedKeys.map((rKey) => (
+                    <SelectOption
+                      value={rKey}
+                      key={rKey}
+                      id={`select-option-${rKey}`}
+                    >
+                      {rKey}
+                    </SelectOption>
+                  ))}
+                </SelectGroup>,
+              ]
+            : []),
+        ]}
       </Select>
       {relatedSearchKeySelected ? (
         <RelatedLookupTypeInput