Enable source vars for all inventory types

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/AzureSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -27,6 +27,11 @@ const AzureSubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/azure/azcollection/azure_rm_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -45,7 +50,26 @@ const AzureSubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
-      <SourceVarsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                azure_rm
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/CloudFormsSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -27,6 +27,9 @@ const CloudFormsSubForm = ({ i18n }) => {
     [setFieldValue]
   );
 
+  const configLink =
+    'https://github.com/ansible-collections/community.general/blob/main/scripts/inventory/cloudforms.ini';
+
   return (
     <>
       <CredentialLookup
@@ -44,7 +47,21 @@ const CloudFormsSubForm = ({ i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
-      <SourceVarsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Override variables found in cloudforms.ini and used by the
+              inventory update script. For an example variable configuration{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                view cloudforms.ini in the Ansible Collections github repo.
+              </a>
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/EC2SubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -23,6 +23,11 @@ const EC2SubForm = ({ i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/amazon/aws/aws_ec2_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -36,7 +41,26 @@ const EC2SubForm = ({ i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
-      <SourceVarsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                aws_ec2
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/GCESubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -9,6 +9,7 @@ import {
   EnabledVarField,
   EnabledValueField,
   HostFilterField,
+  SourceVarsField,
 } from './SharedFields';
 import { required } from '../../../../util/validators';
 
@@ -26,6 +27,11 @@ const GCESubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/google/cloud/gcp_compute_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -44,6 +50,26 @@ const GCESubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                gcp_compute
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/GCESubForm.test.jsx

@@ -56,6 +56,9 @@ describe('<GCESubForm />', () => {
     expect(
       wrapper.find('FormGroup[label="Cache timeout (seconds)"]')
     ).toHaveLength(1);
+    expect(
+      wrapper.find('VariablesField[label="Source variables"]')
+    ).toHaveLength(1);
   });
 
   test('should make expected api calls', () => {

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/OpenStackSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -27,6 +27,11 @@ const OpenStackSubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/openstack/cloud/openstack_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -45,7 +50,26 @@ const OpenStackSubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
-      <SourceVarsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                openstack
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SatelliteSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -27,6 +27,11 @@ const SatelliteSubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/theforeman/foreman/foreman_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -45,7 +50,26 @@ const SatelliteSubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
-      <SourceVarsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                foreman
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SharedFields.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import { useField } from 'formik';
 import { FormGroup } from '@patternfly/react-core';
 import { minMaxValue, regExp } from '../../../../util/validators';
@@ -13,15 +13,66 @@ import {
 } from '../../../../components/FormLayout';
 import Popover from '../../../../components/Popover';
 
-export const SourceVarsField = withI18n()(({ i18n }) => (
+export const SourceVarsField = withI18n()(({ i18n, popoverContent }) => {
-  <FormFullWidthLayout>
+  const jsonExample = `
-    <VariablesField
+  {
-      id="source_vars"
+    "somevar": "somevalue"
-      name="source_vars"
+    "somepassword": "Magic"
-      label={i18n._(t`Source variables`)}
+  }
-    />
+`;
-  </FormFullWidthLayout>
+  const yamlExample = `
-));
+  ---
+  somevar: somevalue
+  somepassword: magic
+`;
+  return (
+    <FormFullWidthLayout>
+      <VariablesField
+        id="source_vars"
+        name="source_vars"
+        label={i18n._(t`Source variables`)}
+        tooltip={
+          <div>
+            {popoverContent}
+            <Trans>
+              Enter variables using either JSON or YAML syntax. Use the radio
+              button to toggle between the two.
+            </Trans>
+            <br />
+            <br />
+            <Trans>JSON:</Trans>
+            <pre>{jsonExample}</pre>
+            <br />
+            <Trans>YAML:</Trans>
+            <pre>{yamlExample}</pre>
+            <br />
+            <Trans>
+              View JSON examples at{' '}
+              <a
+                href="http://www.json.org"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                www.json.org
+              </a>
+            </Trans>
+            <br />
+            <Trans>
+              View YAML examples at{' '}
+              <a
+                href="http://docs.ansible.com/YAMLSyntax.html"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                docs.ansible.com
+              </a>
+            </Trans>
+          </div>
+        }
+      />
+    </FormFullWidthLayout>
+  );
+});
 
 export const VerbosityField = withI18n()(({ i18n }) => {
   const [field, meta, helpers] = useField('verbosity');

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/TowerSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -9,6 +9,7 @@ import {
   EnabledVarField,
   EnabledValueField,
   HostFilterField,
+  SourceVarsField,
 } from './SharedFields';
 import { required } from '../../../../util/validators';
 
@@ -26,6 +27,11 @@ const TowerSubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/awx/awx/tower_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -44,6 +50,26 @@ const TowerSubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                Tower
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/TowerSubForm.test.jsx

@@ -50,6 +50,9 @@ describe('<TowerSubForm />', () => {
     expect(
       wrapper.find('FormGroup[label="Cache timeout (seconds)"]')
     ).toHaveLength(1);
+    expect(
+      wrapper.find('VariablesField[label="Source variables"]')
+    ).toHaveLength(1);
   });
 
   test('should make expected api calls', () => {

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/VMwareSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -27,6 +27,11 @@ const VMwareSubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/community/vmware/vmware_vm_inventory_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -45,7 +50,26 @@ const VMwareSubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
-      <SourceVarsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                vmware_vm_inventory
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/VirtualizationSubForm.jsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { useField, useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
-import { t } from '@lingui/macro';
+import { t, Trans } from '@lingui/macro';
 import CredentialLookup from '../../../../components/Lookup/CredentialLookup';
 import {
   OptionsField,
@@ -9,6 +9,7 @@ import {
   EnabledVarField,
   EnabledValueField,
   HostFilterField,
+  SourceVarsField,
 } from './SharedFields';
 import { required } from '../../../../util/validators';
 
@@ -26,6 +27,11 @@ const VirtualizationSubForm = ({ autoPopulateCredential, i18n }) => {
     [setFieldValue]
   );
 
+  const pluginLink =
+    'http://docs.ansible.com/ansible-tower/latest/html/userguide/inventories.html#inventory-plugins';
+  const configLink =
+    'https://docs.ansible.com/ansible/latest/collections/ovirt/ovirt/ovirt_inventory.html';
+
   return (
     <>
       <CredentialLookup
@@ -44,6 +50,26 @@ const VirtualizationSubForm = ({ autoPopulateCredential, i18n }) => {
       <EnabledVarField />
       <EnabledValueField />
       <OptionsField />
+      <SourceVarsField
+        popoverContent={
+          <>
+            <Trans>
+              Enter variables to configure the inventory source. For a detailed
+              description of how to configure this plugin, see{' '}
+              <a href={pluginLink} target="_blank" rel="noopener noreferrer">
+                Inventory Plugins
+              </a>{' '}
+              in the documentation and the{' '}
+              <a href={configLink} target="_blank" rel="noopener noreferrer">
+                ovirt
+              </a>{' '}
+              plugin configuration guide.
+            </Trans>
+            <br />
+            <br />
+          </>
+        }
+      />
     </>
   );
 };

awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/VirtualizationSubForm.test.jsx

@@ -50,6 +50,9 @@ describe('<VirtualizationSubForm />', () => {
     expect(
       wrapper.find('FormGroup[label="Cache timeout (seconds)"]')
     ).toHaveLength(1);
+    expect(
+      wrapper.find('VariablesField[label="Source variables"]')
+    ).toHaveLength(1);
   });
 
   test('should make expected api calls', () => {