From 04f6fe6cd29f44a06c70b60b2978891d9a9dead5 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Thu, 10 Jun 2021 16:27:23 -0400
Subject: [PATCH] Disable inventory field when editing host

Disable inventory field when editing host

See: https://github.com/ansible/awx/issues/10229
---
 .../src/components/HostForm/HostForm.jsx      | 48 ++++++++++++-------
 .../src/components/HostForm/HostForm.test.jsx | 15 ++++++
 .../src/components/Lookup/InventoryLookup.jsx |  9 ++--
 awx/ui_next/src/components/Lookup/Lookup.jsx  |  2 +
 .../src/screens/Host/HostEdit/HostEdit.jsx    |  1 +
 5 files changed, 56 insertions(+), 19 deletions(-)

diff --git a/awx/ui_next/src/components/HostForm/HostForm.jsx b/awx/ui_next/src/components/HostForm/HostForm.jsx
index a9e1162909..6df19164d5 100644
--- a/awx/ui_next/src/components/HostForm/HostForm.jsx
+++ b/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
-        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 ? (
+        <Tooltip content={t`Unable to change inventory on a host`}>
+          {renderInventoryLookup}
+        </Tooltip>
+      ) : (
+        renderInventoryLookup
+      )}
     </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 };
diff --git a/awx/ui_next/src/components/HostForm/HostForm.test.jsx b/awx/ui_next/src/components/HostForm/HostForm.test.jsx
index 087eea4409..b72d3231c1 100644
--- a/awx/ui_next/src/components/HostForm/HostForm.test.jsx
+++ b/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);
+  });
 });
diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
index 66a7bd841f..f4653321e9 100644
--- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx
+++ b/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);
diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx
index 04842332ad..0be5b61b85 100644
--- a/awx/ui_next/src/components/Lookup/Lookup.jsx
+++ b/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 };
diff --git a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
index 8e90b6d535..f5680562f7 100644
--- a/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
+++ b/awx/ui_next/src/screens/Host/HostEdit/HostEdit.jsx
@@ -34,6 +34,7 @@ function HostEdit({ host }) {
         handleSubmit={handleSubmit}
         handleCancel={handleCancel}
         submitError={formError}
+        disableInventoryLookup
       />
     </CardBody>
   );