Merge pull request #8587 from nixocio/ui_issue_8548

Add updates related to smart inventories

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/Lookup/HostFilterLookup.jsx

@@ -14,9 +14,11 @@ import {
   Modal,
 } from '@patternfly/react-core';
 import ChipGroup from '../ChipGroup';
+import Popover from '../Popover';
 import DataListToolbar from '../DataListToolbar';
 import LookupErrorMessage from './shared/LookupErrorMessage';
-import PaginatedDataList, { PaginatedDataListItem } from '../PaginatedDataList';
+import PaginatedDataList from '../PaginatedDataList';
+import HostListItem from './HostListItem';
 import { HostsAPI } from '../../api';
 import { getQSConfig, mergeParams, parseQueryString } from '../../util/qs';
 import useRequest, { useDismissableError } from '../../util/useRequest';
@@ -246,12 +248,22 @@ function HostFilterLookup({
       fieldId="host-filter"
       helperTextInvalid={helperTextInvalid}
       isRequired
-      label={i18n._(t`Host filter`)}
+      label={i18n._(t`Smart host filter`)}
       validated={isValid ? 'default' : 'error'}
+      labelIcon={
+        <Popover
+          content={i18n._(
+            t`Populate the hosts for this inventory by using a search
+              filter. Example: ansible_facts.ansible_distribution:"RedHat".
+              Refer to the Ansible Tower documentation for further syntax and
+              examples.`
+          )}
+        />
+      }
     >
       <InputGroup onBlur={onBlur}>
         <Button
-          aria-label="Search"
+          aria-label={i18n._(t`Search`)}
           id="host-filter"
           isDisabled={isDisabled}
           onClick={handleOpenModal}
@@ -306,7 +318,7 @@ function HostFilterLookup({
             pluralizedItemName={i18n._(t`hosts`)}
             qsConfig={QS_CONFIG}
             renderItem={item => (
-              <PaginatedDataListItem
+              <HostListItem
                 key={item.id}
                 item={{ ...item, url: `/hosts/${item.id}/details` }}
               />

awx/ui_next/src/components/Lookup/HostListItem.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  TextContent,
+} from '@patternfly/react-core';
+import DataListCell from '../DataListCell';
+
+function HostListItem({ item, i18n }) {
+  return (
+    <DataListItem
+      aria-labelledby={`items-list-item-${item.id}`}
+      key={item.id}
+      id={`${item.id}`}
+    >
+      <DataListItemRow>
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell key="name" aria-label={i18n._(t`name`)}>
+              <TextContent>
+                <Link to={{ pathname: item.url }}>
+                  <b id={`items-list-item-${item.id}`}>{item.name}</b>
+                </Link>
+              </TextContent>
+            </DataListCell>,
+            <DataListCell key="inventory" aria-label={i18n._(t`inventory`)}>
+              {item.summary_fields.inventory.name}
+            </DataListCell>,
+          ]}
+        />
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+
+export default withI18n()(HostListItem);

awx/ui_next/src/components/Lookup/HostListItem.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import HostListItem from './HostListItem';
+
+describe('HostListItem', () => {
+  let wrapper;
+  const mockInventory = {
+    id: 1,
+    type: 'inventory',
+    name: 'Foo',
+    summary_fields: {
+      inventory: {
+        name: 'Bar',
+      },
+    },
+  };
+  test('initially renders successfully', () => {
+    wrapper = mountWithContexts(<HostListItem item={mockInventory} />);
+    expect(wrapper.find('HostListItem').length).toBe(1);
+    expect(wrapper.find('DataListCell[aria-label="name"]').text()).toBe('Foo');
+    expect(wrapper.find('DataListCell[aria-label="inventory"]').text()).toBe(
+      'Bar'
+    );
+  });
+});

awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx

@@ -81,6 +81,9 @@ const SmartInventoryFormFields = withI18n()(({ i18n, inventory }) => {
         onChange={value => {
           instanceGroupsHelpers.setValue(value);
         }}
+        tooltip={i18n._(
+          t`Select the Instance Groups for this Inventory to run on.`
+        )}
       />
       <FormFullWidthLayout>
         <VariablesField

awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.test.jsx

@@ -60,7 +60,9 @@ describe('<SmartInventoryForm />', () => {
       expect(wrapper.find('FormGroup[label="Name"]')).toHaveLength(1);
       expect(wrapper.find('FormGroup[label="Description"]')).toHaveLength(1);
       expect(wrapper.find('FormGroup[label="Organization"]')).toHaveLength(1);
-      expect(wrapper.find('FormGroup[label="Host filter"]')).toHaveLength(1);
+      expect(wrapper.find('FormGroup[label="Smart host filter"]')).toHaveLength(
+        1
+      );
       expect(wrapper.find('FormGroup[label="Instance Groups"]')).toHaveLength(
         1
       );