Disables ability to edit vault ID on the UI side.

awx/ui/src/screens/Credential/shared/CredentialFormFields/CredentialField.js

@@ -1,5 +1,6 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useField, useFormikContext } from 'formik';
 import { shape, string } from 'prop-types';
 import styled from 'styled-components';
@@ -31,6 +32,7 @@ function CredentialInput({
   fieldOptions,
   isFieldGroupValid,
   credentialKind,
+  isVaultIdDisabled,
   ...rest
 }) {
   const [fileName, setFileName] = useState('');
@@ -148,6 +150,7 @@ function CredentialInput({
       onChange={(value, event) => {
         subFormField.onChange(event);
       }}
+      isDisabled={isVaultIdDisabled}
       validated={isValid ? 'default' : 'error'}
     />
   );
@@ -167,6 +170,7 @@ CredentialInput.defaultProps = {
 
 function CredentialField({ credentialType, fieldOptions }) {
   const { values: formikValues } = useFormikContext();
+  const location = useLocation();
   const requiredFields = credentialType?.inputs?.required || [];
   const isRequired = requiredFields.includes(fieldOptions.id);
   const validateField = () => {
@@ -242,6 +246,15 @@ function CredentialField({ credentialType, fieldOptions }) {
       <BecomeMethodField fieldOptions={fieldOptions} isRequired={isRequired} />
     );
   }
+
+  let disabled = false;
+  if (
+    credentialType.kind === 'vault' &&
+    location.pathname.endsWith('edit') &&
+    fieldOptions.id === 'vault_id'
+  ) {
+    disabled = true;
+  }
   return (
     <CredentialPluginField
       fieldOptions={fieldOptions}
@@ -251,6 +264,7 @@ function CredentialField({ credentialType, fieldOptions }) {
       <CredentialInput
         isFieldGroupValid={isValid}
         fieldOptions={fieldOptions}
+        isVaultIdDisabled={disabled}
       />
     </CredentialPluginField>
   );

awx/ui/src/screens/Credential/shared/CredentialFormFields/CredentialField.test.js

@@ -13,6 +13,12 @@ const fieldOptions = {
   secret: true,
 };
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useLocation: () => ({
+    pathname: '/credentials/3/edit',
+  }),
+}));
 describe('<CredentialField />', () => {
   let wrapper;
   test('renders correctly without initial value', () => {
@@ -113,4 +119,33 @@ describe('<CredentialField />', () => {
     expect(wrapper.find('TextInput').props().value).toBe('');
     expect(wrapper.find('TextInput').props().placeholder).toBe('ENCRYPTED');
   });
+  test('Should check to see if the ability to edit vault ID is disabled after creation.', () => {
+    const vaultCredential = credentialTypes.find((type) => type.id === 3);
+    const vaultFieldOptions = {
+      id: 'vault_id',
+      label: 'Vault Identifier',
+      type: 'string',
+      secret: true,
+    };
+    wrapper = mountWithContexts(
+      <Formik
+        initialValues={{
+          passwordPrompts: {},
+          inputs: {
+            password: 'password',
+            vault_id: 'vault_id',
+          },
+        }}
+      >
+        {() => (
+          <CredentialField
+            fieldOptions={vaultFieldOptions}
+            credentialType={vaultCredential}
+          />
+        )}
+      </Formik>
+    );
+    expect(wrapper.find('CredentialInput').props().isDisabled).toBe(true);
+    expect(wrapper.find('KeyIcon').length).toBe(1);
+  });
 });