From a8400e4b7c3775a34e87366fc91000483c6b386d Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Thu, 12 Nov 2020 10:04:50 -0500
Subject: [PATCH] Add updates related to smart inventories

Add updates related to smart inventories.

* Add popover for `Smart host filter`.
* Add popover for `Instance Groups` on Smart Inventory screen.
* Rename `Host filter` to `Smart host filter` per mockup.
* Add inventory as part of dynamic host filter.

See: https://github.com/ansible/awx/issues/8581
Also: https://github.com/ansible/awx/issues/8548
---
 .../components/Lookup/HostFilterLookup.jsx    | 20 ++++++++--
 .../src/components/Lookup/HostListItem.jsx    | 40 +++++++++++++++++++
 .../components/Lookup/HostListItem.test.jsx   | 25 ++++++++++++
 .../Inventory/shared/SmartInventoryForm.jsx   |  3 ++
 .../shared/SmartInventoryForm.test.jsx        |  4 +-
 5 files changed, 87 insertions(+), 5 deletions(-)
 create mode 100644 awx/ui_next/src/components/Lookup/HostListItem.jsx
 create mode 100644 awx/ui_next/src/components/Lookup/HostListItem.test.jsx

diff --git a/awx/ui_next/src/components/Lookup/HostFilterLookup.jsx b/awx/ui_next/src/components/Lookup/HostFilterLookup.jsx
index 13a89512ea..862d1b0f1a 100644
--- a/awx/ui_next/src/components/Lookup/HostFilterLookup.jsx
+++ b/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` }}
               />
diff --git a/awx/ui_next/src/components/Lookup/HostListItem.jsx b/awx/ui_next/src/components/Lookup/HostListItem.jsx
new file mode 100644
index 0000000000..0a2ae00ce7
--- /dev/null
+++ b/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);
diff --git a/awx/ui_next/src/components/Lookup/HostListItem.test.jsx b/awx/ui_next/src/components/Lookup/HostListItem.test.jsx
new file mode 100644
index 0000000000..7e6fdbb16b
--- /dev/null
+++ b/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'
+    );
+  });
+});
diff --git a/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx
index 2fa96c7ad2..f6670c3c19 100644
--- a/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx
+++ b/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
diff --git a/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.test.jsx b/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.test.jsx
index 3f26decf00..f7815ec5c6 100644
--- a/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.test.jsx
+++ b/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
       );