Add tooltips to Instance form; change name field to host name. (#12912)

awx/ui/src/screens/Instances/Shared/InstanceForm.js

@@ -1,25 +1,21 @@
 import React from 'react';
 import { t } from '@lingui/macro';
-import { Formik, useField } from 'formik';
+import { Formik } from 'formik';
-import {
+import { Form, FormGroup, CardBody } from '@patternfly/react-core';
-  Form,
-  FormGroup,
-  CardBody,
-  Switch,
-  Popover,
-} from '@patternfly/react-core';
 import { FormColumnLayout } from 'components/FormLayout';
-import FormField, { FormSubmitError } from 'components/FormField';
+import FormField, {
+  FormSubmitError,
+  CheckboxField,
+} from 'components/FormField';
 import FormActionGroup from 'components/FormActionGroup';
 import { required } from 'util/validators';
 
 function InstanceFormFields() {
-  const [enabled, , enabledHelpers] = useField('enabled');
   return (
     <>
       <FormField
-        id="name"
+        id="hostname"
-        label={t`Name`}
+        label={t`Host Name`}
         name="hostname"
         type="text"
         validate={required(null)}
@@ -36,6 +32,7 @@ function InstanceFormFields() {
         label={t`Instance State`}
         name="node_state"
         type="text"
+        tooltip={t`Sets the current life cycle stage of this instance. Default is "installed."`}
         isDisabled
       />
       <FormField
@@ -43,6 +40,7 @@ function InstanceFormFields() {
         label={t`Listener Port`}
         name="listener_port"
         type="number"
+        tooltip={t`Select the port that Receptor will listen on for incoming connections. Default is 27199.`}
         isRequired
       />
       <FormField
@@ -50,27 +48,15 @@ function InstanceFormFields() {
         label={t`Instance Type`}
         name="node_type"
         type="text"
+        tooltip={t`Sets the role that this instance will play within mesh topology. Default is "execution."`}
         isDisabled
       />
-      <FormGroup
+      <FormGroup fieldId="instance-option-checkboxes" label={t`Options`}>
-        label={t`Enable Instance`}
+        <CheckboxField
-        aria-label={t`Enable Instance`}
-        labelIcon={
-          <Popover
-            content={t`If enabled, the instance will be ready to accept work.`}
-          />
-        }
-      >
-        <Switch
-          css="display: inline-flex;"
           id="enabled"
-          label={t`Enabled`}
+          name="enabled"
-          labelOff={t`Disabled`}
+          label={t`Enable Instance`}
-          isChecked={enabled.value}
+          tooltip={t`Set the instance enabled or disabled. If disabled, jobs will not be assigned to this instance.`}
-          onChange={() => {
-            enabledHelpers.setValue(!enabled.value);
-          }}
-          ouiaId="enable-instance-switch"
         />
       </FormGroup>
     </>

awx/ui/src/screens/Instances/Shared/InstanceForm.test.js

@@ -40,7 +40,7 @@ describe('<InstanceForm />', () => {
 
   test('should display form fields properly', async () => {
     await waitForElement(wrapper, 'InstanceForm', (el) => el.length > 0);
-    expect(wrapper.find('FormGroup[label="Name"]').length).toBe(1);
+    expect(wrapper.find('FormGroup[label="Host Name"]').length).toBe(1);
     expect(wrapper.find('FormGroup[label="Description"]').length).toBe(1);
     expect(wrapper.find('FormGroup[label="Instance State"]').length).toBe(1);
     expect(wrapper.find('FormGroup[label="Listener Port"]').length).toBe(1);
@@ -49,13 +49,13 @@ describe('<InstanceForm />', () => {
 
   test('should update form values', async () => {
     await act(async () => {
-      wrapper.find('input#name').simulate('change', {
+      wrapper.find('input#hostname').simulate('change', {
         target: { value: 'new Foo', name: 'hostname' },
       });
     });
 
     wrapper.update();
-    expect(wrapper.find('input#name').prop('value')).toEqual('new Foo');
+    expect(wrapper.find('input#hostname').prop('value')).toEqual('new Foo');
   });
 
   test('should call handleCancel when Cancel button is clicked', async () => {
@@ -68,7 +68,7 @@ describe('<InstanceForm />', () => {
   test('should call handleSubmit when Cancel button is clicked', async () => {
     expect(handleSubmit).not.toHaveBeenCalled();
     await act(async () => {
-      wrapper.find('input#name').simulate('change', {
+      wrapper.find('input#hostname').simulate('change', {
         target: { value: 'new Foo', name: 'hostname' },
       });
       wrapper.find('input#instance-description').simulate('change', {