Disable inventory field when editing host

Disable inventory field when editing host

See: https://github.com/ansible/awx/issues/10229

awx/ui_next/src/components/HostForm/HostForm.jsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { bool, func, shape } from 'prop-types';
 import { Formik, useField, useFormikContext } from 'formik';
 import { t } from '@lingui/macro';
-import { Form, FormGroup } from '@patternfly/react-core';
+import { Form, FormGroup, Tooltip } from '@patternfly/react-core';
 import FormField, { FormSubmitError } from '../FormField';
 import FormActionGroup from '../FormActionGroup/FormActionGroup';
 import { VariablesField } from '../CodeEditor';
@@ -11,7 +11,7 @@ import { FormColumnLayout, FormFullWidthLayout } from '../FormLayout';
 import Popover from '../Popover';
 import { required } from '../../util/validators';
 
-const InventoryLookupField = () => {
+const InventoryLookupField = ({ isDisabled }) => {
   const { setFieldValue, setFieldTouched } = useFormikContext();
   const [inventoryField, inventoryMeta, inventoryHelpers] = useField(
     'inventory'
@@ -25,6 +25,23 @@ const InventoryLookupField = () => {
     [setFieldValue, setFieldTouched]
   );
 
+  const renderInventoryLookup = (
+    <InventoryLookup
+      fieldId="inventory-lookup"
+      value={inventoryField.value}
+      onBlur={() => inventoryHelpers.setTouched()}
+      tooltip={t`Select the inventory that this host will belong to.`}
+      isValid={!inventoryMeta.touched || !inventoryMeta.error}
+      helperTextInvalid={inventoryMeta.error}
+      onChange={handleInventoryUpdate}
+      required
+      touched={inventoryMeta.touched}
+      error={inventoryMeta.error}
+      validate={required(t`Select a value for this field`)}
+      isDisabled={isDisabled}
+    />
+  );
+
   return (
     <FormGroup
       label={t`Inventory`}
@@ -40,19 +57,13 @@ const InventoryLookupField = () => {
       }
       helperTextInvalid={inventoryMeta.error}
     >
-      <InventoryLookup
+      {isDisabled ? (
-        fieldId="inventory-lookup"
+        <Tooltip content={t`Unable to change inventory on a host`}>
-        value={inventoryField.value}
+          {renderInventoryLookup}
-        onBlur={() => inventoryHelpers.setTouched()}
+        </Tooltip>
-        tooltip={t`Select the inventory that this host will belong to.`}
+      ) : (
-        isValid={!inventoryMeta.touched || !inventoryMeta.error}
+        renderInventoryLookup
-        helperTextInvalid={inventoryMeta.error}
+      )}
-        onChange={handleInventoryUpdate}
-        required
-        touched={inventoryMeta.touched}
-        error={inventoryMeta.error}
-        validate={required(t`Select a value for this field`)}
-      />
     </FormGroup>
   );
 };
@@ -63,6 +74,7 @@ const HostForm = ({
   host,
   isInventoryVisible,
   submitError,
+  disableInventoryLookup,
 }) => {
   return (
     <Formik
@@ -91,7 +103,9 @@ const HostForm = ({
               type="text"
               label={t`Description`}
             />
-            {isInventoryVisible && <InventoryLookupField />}
+            {isInventoryVisible && (
+              <InventoryLookupField isDisabled={disableInventoryLookup} />
+            )}
             <FormFullWidthLayout>
               <VariablesField
                 id="host-variables"
@@ -117,6 +131,7 @@ HostForm.propTypes = {
   host: shape({}),
   isInventoryVisible: bool,
   submitError: shape({}),
+  disableInventoryLookup: bool,
 };
 
 HostForm.defaultProps = {
@@ -131,6 +146,7 @@ HostForm.defaultProps = {
   },
   isInventoryVisible: true,
   submitError: null,
+  disableInventoryLookup: false,
 };
 
 export { HostForm as _HostForm };

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

@@ -55,6 +55,7 @@ describe('<HostForm />', () => {
     expect(wrapper.find('input#host-description').prop('value')).toEqual(
       'new bar'
     );
+    expect(wrapper.find('InventoryLookup').prop('isDisabled')).toEqual(false);
   });
 
   test('calls handleSubmit when form submitted', async () => {
@@ -84,4 +85,18 @@ describe('<HostForm />', () => {
     });
     expect(wrapper.find('InventoryLookupField').length).toBe(0);
   });
+
+  test('inventory lookup field should be disabled', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <HostForm
+          host={mockData}
+          handleSubmit={jest.fn()}
+          handleCancel={jest.fn()}
+          disableInventoryLookup
+        />
+      );
+    });
+    expect(wrapper.find('InventoryLookup').prop('isDisabled')).toEqual(true);
+  });
 });

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

@@ -31,6 +31,7 @@ function InventoryLookup({
   isOverrideDisabled,
   validate,
   fieldName,
+  isDisabled,
 }) {
   const {
     result: {
@@ -105,7 +106,7 @@ function InventoryLookup({
         label={t`Inventory`}
         promptId={promptId}
         promptName={promptName}
-        isDisabled={!canEdit}
+        isDisabled={!canEdit || isDisabled}
         tooltip={t`Select the inventory containing the hosts
             you want this job to manage.`}
       >
@@ -120,7 +121,7 @@ function InventoryLookup({
           fieldName={fieldName}
           validate={validate}
           isLoading={isLoading}
-          isDisabled={!canEdit}
+          isDisabled={!canEdit || isDisabled}
           qsConfig={QS_CONFIG}
           renderOptionsList={({ state, dispatch, canDelete }) => (
             <OptionsList
@@ -176,7 +177,7 @@ function InventoryLookup({
         onBlur={onBlur}
         required={required}
         isLoading={isLoading}
-        isDisabled={!canEdit}
+        isDisabled={!canEdit || isDisabled}
         qsConfig={QS_CONFIG}
         renderOptionsList={({ state, dispatch, canDelete }) => (
           <OptionsList
@@ -228,6 +229,7 @@ InventoryLookup.propTypes = {
   isOverrideDisabled: bool,
   validate: func,
   fieldName: string,
+  isDisabled: bool,
 };
 
 InventoryLookup.defaultProps = {
@@ -236,6 +238,7 @@ InventoryLookup.defaultProps = {
   isOverrideDisabled: false,
   validate: () => {},
   fieldName: 'inventory',
+  isDisabled: false,
 };
 
 export default withRouter(InventoryLookup);

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

@@ -215,6 +215,7 @@ Lookup.propTypes = {
   fieldName: string.isRequired,
   validate: func,
   onDebounce: func,
+  isDisabled: bool,
 };
 
 Lookup.defaultProps = {
@@ -235,6 +236,7 @@ Lookup.defaultProps = {
   ),
   validate: () => undefined,
   onDebounce: () => undefined,
+  isDisabled: false,
 };
 
 export { Lookup as _Lookup };

awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx

@@ -34,6 +34,7 @@ function HostEdit({ host }) {
         handleSubmit={handleSubmit}
         handleCancel={handleCancel}
         submitError={formError}
+        disableInventoryLookup
       />
     </CardBody>
   );