Advanced search

awx/ui_next/src/api/models/Applications.js

@@ -11,6 +11,10 @@ class Applications extends Base {
       params,
     });
   }
+
+  readTokenOptions(appId) {
+    return this.http.options(`${this.baseUrl}${appId}/tokens/`);
+  }
 }
 
 export default Applications;

awx/ui_next/src/api/models/Users.js

@@ -60,6 +60,10 @@ class Users extends Base {
       params,
     });
   }
+
+  readTokenOptions(userId) {
+    return this.http.options(`${this.baseUrl}${userId}/tokens/`);
+  }
 }
 
 export default Users;

awx/ui_next/src/components/AddRole/AddResourceRole.jsx

@@ -156,16 +156,16 @@ class AddResourceRole extends React.Component {
     const userSearchColumns = [
       {
         name: i18n._(t`Username`),
-        key: 'username',
+        key: 'username__icontains',
         isDefault: true,
       },
       {
         name: i18n._(t`First Name`),
-        key: 'first_name',
+        key: 'first_name__icontains',
       },
       {
         name: i18n._(t`Last Name`),
-        key: 'last_name',
+        key: 'last_name__icontains',
       },
     ];
 

awx/ui_next/src/components/AddRole/SelectResourceStep.test.jsx

@@ -13,7 +13,7 @@ describe('<SelectResourceStep />', () => {
   const searchColumns = [
     {
       name: 'Username',
-      key: 'username',
+      key: 'username__icontains',
       isDefault: true,
     },
   ];

awx/ui_next/src/components/AssociateModal/AssociateModal.jsx

@@ -114,16 +114,16 @@ function AssociateModal({
           searchColumns={[
             {
               name: i18n._(t`Name`),
-              key: 'name',
+              key: 'name__icontains',
               isDefault: true,
             },
             {
               name: i18n._(t`Created By (Username)`),
-              key: 'created_by__username',
+              key: 'created_by__username__icontains',
             },
             {
               name: i18n._(t`Modified By (Username)`),
-              key: 'modified_by__username',
+              key: 'modified_by__username__icontains',
             },
           ]}
           sortColumns={[

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -23,6 +23,8 @@ class DataListToolbar extends React.Component {
       itemCount,
       clearAllFilters,
       searchColumns,
+      searchableKeys,
+      relatedSearchableKeys,
       sortColumns,
       showSelectAll,
       isAllSelected,
@@ -64,7 +66,12 @@ class DataListToolbar extends React.Component {
             <ToolbarItem>
               <Search
                 qsConfig={qsConfig}
-                columns={searchColumns}
+                columns={[
+                  ...searchColumns,
+                  { name: i18n._(t`Advanced`), key: 'advanced' },
+                ]}
+                searchableKeys={searchableKeys}
+                relatedSearchableKeys={relatedSearchableKeys}
                 onSearch={onSearch}
                 onReplaceSearch={onReplaceSearch}
                 onRemove={onRemove}
@@ -106,6 +113,8 @@ DataListToolbar.propTypes = {
   clearAllFilters: PropTypes.func,
   qsConfig: QSConfig.isRequired,
   searchColumns: SearchColumns.isRequired,
+  searchableKeys: PropTypes.arrayOf(PropTypes.string),
+  relatedSearchableKeys: PropTypes.arrayOf(PropTypes.string),
   sortColumns: SortColumns.isRequired,
   showSelectAll: PropTypes.bool,
   isAllSelected: PropTypes.bool,
@@ -121,6 +130,8 @@ DataListToolbar.propTypes = {
 
 DataListToolbar.defaultProps = {
   itemCount: 0,
+  searchableKeys: [],
+  relatedSearchableKeys: [],
   clearAllFilters: null,
   showSelectAll: false,
   isAllSelected: false,

awx/ui_next/src/components/DataListToolbar/DataListToolbar.test.jsx

@@ -25,7 +25,9 @@ describe('<DataListToolbar />', () => {
   const onSelectAll = jest.fn();
 
   test('it triggers the expected callbacks', () => {
-    const searchColumns = [{ name: 'Name', key: 'name', isDefault: true }];
+    const searchColumns = [
+      { name: 'Name', key: 'name__icontains', isDefault: true },
+    ];
     const sortColumns = [{ name: 'Name', key: 'name' }];
     const search = 'button[aria-label="Search submit button"]';
     const searchTextInput = 'input[aria-label="Search text input"]';
@@ -66,11 +68,12 @@ describe('<DataListToolbar />', () => {
 
   test('dropdown items sortable/searchable columns work', () => {
     const sortDropdownToggleSelector = 'button[id="awx-sort"]';
-    const searchDropdownToggleSelector = 'button[id="awx-search"]';
+    const searchDropdownToggleSelector =
+      'Select[aria-label="Simple key select"] SelectToggle';
     const sortDropdownMenuItems =
       'DropdownMenu > ul[aria-labelledby="awx-sort"]';
     const searchDropdownMenuItems =
-      'DropdownMenu > ul[aria-labelledby="awx-search"]';
+      'Select[aria-label="Simple key select"] SelectOption';
 
     const NEW_QS_CONFIG = {
       namespace: 'organization',
@@ -108,7 +111,7 @@ describe('<DataListToolbar />', () => {
     searchDropdownToggle.simulate('click');
     toolbar.update();
     let searchDropdownItems = toolbar.find(searchDropdownMenuItems).children();
-    expect(searchDropdownItems.length).toBe(1);
+    expect(searchDropdownItems.length).toBe(2);
     const mockedSortEvent = { target: { innerText: 'Bar' } };
     searchDropdownItems.at(0).simulate('click', mockedSortEvent);
     toolbar = mountWithContexts(
@@ -144,7 +147,7 @@ describe('<DataListToolbar />', () => {
     toolbar.update();
 
     searchDropdownItems = toolbar.find(searchDropdownMenuItems).children();
-    expect(searchDropdownItems.length).toBe(1);
+    expect(searchDropdownItems.length).toBe(2);
 
     const mockedSearchEvent = { target: { innerText: 'Bar' } };
     searchDropdownItems.at(0).simulate('click', mockedSearchEvent);
@@ -283,4 +286,31 @@ describe('<DataListToolbar />', () => {
     const checkbox = toolbar.find('Checkbox');
     expect(checkbox.prop('isChecked')).toBe(true);
   });
+
+  test('always adds advanced item to search column array', () => {
+    const searchColumns = [{ name: 'Name', key: 'name', isDefault: true }];
+    const sortColumns = [{ name: 'Name', key: 'name' }];
+
+    toolbar = mountWithContexts(
+      <DataListToolbar
+        qsConfig={QS_CONFIG}
+        searchColumns={searchColumns}
+        sortColumns={sortColumns}
+        onSearch={onSearch}
+        onReplaceSearch={onReplaceSearch}
+        onSort={onSort}
+        onSelectAll={onSelectAll}
+        additionalControls={[
+          <button key="1" id="test" type="button">
+            click
+          </button>,
+        ]}
+      />
+    );
+
+    const search = toolbar.find('Search');
+    expect(
+      search.prop('columns').filter(col => col.key === 'advanced').length
+    ).toBe(1);
+  });
 });

awx/ui_next/src/components/JobList/JobList.jsx

@@ -38,20 +38,35 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
   const [selected, setSelected] = useState([]);
   const location = useLocation();
   const {
-    result: { results, count },
+    result: { results, count, actions, relatedSearchFields },
     error: contentError,
     isLoading,
     request: fetchJobs,
   } = useRequest(
     useCallback(
       async () => {
         const params = parseQueryString(QS_CONFIG, location.search);
-        const { data } = await UnifiedJobsAPI.read({ ...params });
-        return data;
+        const [response, actionsResponse] = await Promise.all([
+          UnifiedJobsAPI.read({ ...params }),
+          UnifiedJobsAPI.readOptions(),
+        ]);
+        return {
+          results: response.data.results,
+          count: response.data.count,
+          actions: actionsResponse.data.actions,
+          relatedSearchFields: (
+            actionsResponse?.data?.related_search_fields || []
+          ).map(val => val.slice(0, -8)),
+        };
       },
       [location] // eslint-disable-line react-hooks/exhaustive-deps
     ),
-    { results: [], count: 0 }
+    {
+      results: [],
+      count: 0,
+      actions: {},
+      relatedSearchFields: [],
+    }
   );
   useEffect(() => {
     fetchJobs();
@@ -123,6 +138,11 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
     }
   };
 
+  const relatedSearchableKeys = relatedSearchFields || [];
+  const searchableKeys = Object.keys(actions?.GET || {}).filter(
+    key => actions.GET[key].filterable
+  );
+
   return (
     <>
       <Card>
@@ -137,7 +157,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
           toolbarSearchColumns={[
             {
               name: i18n._(t`Name`),
-              key: 'name',
+              key: 'name__icontains',
               isDefault: true,
             },
             {
@@ -146,11 +166,11 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
             },
             {
               name: i18n._(t`Label Name`),
-              key: 'labels__name',
+              key: 'labels__name__icontains',
             },
             {
               name: i18n._(t`Job Type`),
-              key: `type`,
+              key: `or__type`,
               options: [
                 [`project_update`, i18n._(t`Source Control Update`)],
                 [`inventory_update`, i18n._(t`Inventory Sync`)],
@@ -162,7 +182,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
             },
             {
               name: i18n._(t`Launched By (Username)`),
-              key: 'created_by__username',
+              key: 'created_by__username__icontains',
             },
             {
               name: i18n._(t`Status`),
@@ -209,6 +229,8 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
               key: 'started',
             },
           ]}
+          toolbarSearchableKeys={searchableKeys}
+          toolbarRelatedSearchableKeys={relatedSearchableKeys}
           renderToolbar={props => (
             <DatalistToolbar
               {...props}

awx/ui_next/src/components/JobList/JobList.test.jsx

@@ -96,6 +96,16 @@ UnifiedJobsAPI.read.mockResolvedValue({
   data: { count: 3, results: mockResults },
 });
 
+UnifiedJobsAPI.readOptions.mockResolvedValue({
+  data: {
+    actions: {
+      GET: {},
+      POST: {},
+    },
+    related_search_fields: [],
+  },
+});
+
 function waitForLoaded(wrapper) {
   return waitForElement(
     wrapper,

awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.jsx

@@ -52,7 +52,7 @@ function CredentialsStep({ i18n }) {
   }, [fetchTypes]);
 
   const {
-    result: { credentials, count },
+    result: { credentials, count, actions, relatedSearchFields },
     error: credentialsError,
     isLoading: isCredentialsLoading,
     request: fetchCredentials,
@@ -62,16 +62,23 @@ function CredentialsStep({ i18n }) {
         return { credentials: [], count: 0 };
       }
       const params = parseQueryString(QS_CONFIG, history.location.search);
-      const { data } = await CredentialsAPI.read({
-        ...params,
-        credential_type: selectedType.id,
-      });
+      const [{ data }, actionsResponse] = await Promise.all([
+        CredentialsAPI.read({
+          ...params,
+          credential_type: selectedType.id,
+        }),
+        CredentialsAPI.readOptions(),
+      ]);
       return {
         credentials: data.results,
         count: data.count,
+        actions: actionsResponse.data.actions,
+        relatedSearchFields: (
+          actionsResponse?.data?.related_search_fields || []
+        ).map(val => val.slice(0, -8)),
       };
     }, [selectedType, history.location.search]),
-    { credentials: [], count: 0 }
+    { credentials: [], count: 0, actions: {}, relatedSearchFields: [] }
   );
 
   useEffect(() => {
@@ -97,6 +104,11 @@ function CredentialsStep({ i18n }) {
     />
   );
 
+  const relatedSearchableKeys = relatedSearchFields || [];
+  const searchableKeys = Object.keys(actions?.GET || {}).filter(
+    key => actions.GET[key].filterable
+  );
+
   return (
     <>
       {types && types.length > 0 && (
@@ -129,16 +141,16 @@ function CredentialsStep({ i18n }) {
           searchColumns={[
             {
               name: i18n._(t`Name`),
-              key: 'name',
+              key: 'name__icontains',
               isDefault: true,
             },
             {
               name: i18n._(t`Created By (Username)`),
-              key: 'created_by__username',
+              key: 'created_by__username__icontains',
             },
             {
               name: i18n._(t`Modified By (Username)`),
-              key: 'modified_by__username',
+              key: 'modified_by__username__icontains',
             },
           ]}
           sortColumns={[
@@ -147,6 +159,8 @@ function CredentialsStep({ i18n }) {
               key: 'name',
             },
           ]}
+          searchableKeys={searchableKeys}
+          relatedSearchableKeys={relatedSearchableKeys}
           multiple={isVault}
           header={i18n._(t`Credentials`)}
           name="credentials"

awx/ui_next/src/components/LaunchPrompt/steps/CredentialsStep.test.jsx

@@ -31,6 +31,15 @@ describe('CredentialsStep', () => {
         count: 5,
       },
     });
+    CredentialsAPI.readOptions.mockResolvedValue({
+      data: {
+        actions: {
+          GET: {},
+          POST: {},
+        },
+        related_search_fields: [],
+      },
+    });
   });
 
   test('should load credentials', async () => {