diff --git a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
index 1f5e4c7231..55c0fa1883 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx
@@ -23,7 +23,15 @@ import {
 import CodeEditor from './CodeEditor';
 import { JSON_MODE, YAML_MODE } from './constants';
 
-function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) {
+function VariablesDetail({
+  dataCy,
+  helpText,
+  value,
+  label,
+  rows,
+  fullHeight,
+  name,
+}) {
   const [mode, setMode] = useState(
     isJsonObject(value) || isJsonString(value) ? JSON_MODE : YAML_MODE
   );
@@ -76,6 +84,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) {
           setMode={setMode}
           currentValue={currentValue}
           onExpand={() => setIsExpanded(true)}
+          name={name}
         />
       </DetailName>
       <DetailValue
@@ -128,6 +137,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) {
             mode={mode}
             setMode={setMode}
             currentValue={currentValue}
+            name={name}
           />
           <CodeEditor
             id={`${dataCy}-preview-expanded`}
@@ -149,6 +159,7 @@ VariablesDetail.propTypes = {
   rows: oneOfType([number, string]),
   dataCy: string,
   helpText: string,
+  name: string.isRequired,
 };
 VariablesDetail.defaultProps = {
   rows: null,
@@ -156,7 +167,16 @@ VariablesDetail.defaultProps = {
   helpText: '',
 };
 
-function ModeToggle({ id, label, helpText, dataCy, mode, setMode, onExpand }) {
+function ModeToggle({
+  id,
+  label,
+  helpText,
+  dataCy,
+  mode,
+  setMode,
+  onExpand,
+  name,
+}) {
   return (
     <Split hasGutter>
       <SplitItem isFilled>
@@ -184,6 +204,7 @@ function ModeToggle({ id, label, helpText, dataCy, mode, setMode, onExpand }) {
               onChange={newMode => {
                 setMode(newMode);
               }}
+              name={name}
             />
           </SplitItem>
         </Split>
diff --git a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx
index 0e7633e470..71b1dc8581 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx
@@ -230,6 +230,7 @@ function VariablesFieldInternals({
               ]}
               value={mode}
               onChange={setMode}
+              name={name}
             />
           </SplitItem>
         </Split>
diff --git a/awx/ui_next/src/components/CodeEditor/VariablesInput.jsx b/awx/ui_next/src/components/CodeEditor/VariablesInput.jsx
index 354e263b69..09c68a7247 100644
--- a/awx/ui_next/src/components/CodeEditor/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeEditor/VariablesInput.jsx
@@ -16,7 +16,7 @@ const SplitItemRight = styled(SplitItem)`
 `;
 
 function VariablesInput(props) {
-  const { id, label, readOnly, rows, error, onError, className } = props;
+  const { id, label, readOnly, rows, error, onError, className, name } = props;
   /* eslint-disable react/destructuring-assignment */
   const defaultValue = isJsonString(props.value)
     ? formatJson(props.value)
@@ -60,6 +60,7 @@ function VariablesInput(props) {
                 onError(err.message);
               }
             }}
+            name={name}
           />
         </SplitItemRight>
       </Split>
@@ -88,6 +89,7 @@ VariablesInput.propTypes = {
   rows: number,
   onChange: func,
   onError: func,
+  name: string.isRequired,
 };
 VariablesInput.defaultProps = {
   readOnly: false,
diff --git a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
index 4387a694a6..02a9e5982f 100644
--- a/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
+++ b/awx/ui_next/src/components/MultiButtonToggle/MultiButtonToggle.jsx
@@ -11,7 +11,7 @@ const SmallButton = styled(Button)`
   }
 `;
 
-function MultiButtonToggle({ buttons, value, onChange }) {
+function MultiButtonToggle({ buttons, value, onChange, name }) {
   const setValue = newValue => {
     if (value !== newValue) {
       onChange(newValue);
@@ -24,7 +24,7 @@ function MultiButtonToggle({ buttons, value, onChange }) {
         buttons.map(([buttonValue, buttonLabel]) => (
           <SmallButton
             aria-label={buttonLabel}
-            ouiaId={`button-label-${buttonLabel}`}
+            ouiaId={`${name}-${buttonLabel}-button`}
             key={buttonLabel}
             className={`toggle-button-${buttonValue}`}
             onClick={() => setValue(buttonValue)}
@@ -67,6 +67,7 @@ MultiButtonToggle.propTypes = {
   buttons: buttonsPropType.isRequired,
   value: string.isRequired,
   onChange: func.isRequired,
+  name: string.isRequired,
 };
 
 export default MultiButtonToggle;
diff --git a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
index 4069f67270..e6a84583e6 100644
--- a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
+++ b/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
@@ -250,6 +250,7 @@ function PromptDetail({ resource, launchConfig = {}, overrides = {} }) {
                 label={t`Variables`}
                 rows={4}
                 value={overrides.extra_vars}
+                name="extra_vars"
               />
             )}
           </PromptDetailList>
diff --git a/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx
index 11869d150a..0dd41a5066 100644
--- a/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx
+++ b/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx
@@ -168,6 +168,7 @@ function PromptInventorySourceDetail({ resource }) {
           label={t`Source Variables`}
           rows={4}
           value={source_vars}
+          name="source_vars"
         />
       )}
     </>
diff --git a/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx
index b0763d8717..73fdb3a48c 100644
--- a/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx
+++ b/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx
@@ -245,7 +245,12 @@ function PromptJobTemplateDetail({ resource }) {
         />
       )}
       {extra_vars && (
-        <VariablesDetail label={t`Variables`} rows={4} value={extra_vars} />
+        <VariablesDetail
+          label={t`Variables`}
+          rows={4}
+          value={extra_vars}
+          name="extra_vars"
+        />
       )}
     </>
   );
diff --git a/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx b/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx
index 72e10660b8..935c187864 100644
--- a/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx
+++ b/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx
@@ -115,7 +115,12 @@ function PromptWFJobTemplateDetail({ resource }) {
         />
       )}
       {extra_vars && (
-        <VariablesDetail label={t`Variables`} rows={4} value={extra_vars} />
+        <VariablesDetail
+          label={t`Variables`}
+          rows={4}
+          value={extra_vars}
+          name="extra_vars"
+        />
       )}
     </>
   );
diff --git a/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx b/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
index f5a2844b0f..9628c40e19 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
@@ -369,6 +369,7 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
                 value={jsonToYaml(JSON.stringify(extra_data))}
                 rows={4}
                 label={t`Variables`}
+                name="extra_vars"
               />
             )}
           </PromptDetailList>
diff --git a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
index d0e20d8604..01d2326e1f 100644
--- a/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
+++ b/awx/ui_next/src/components/Schedule/ScheduleOccurrences/ScheduleOccurrences.jsx
@@ -51,6 +51,7 @@ function ScheduleOccurrences({ preview = { local: [], utc: [] } }) {
               ]}
               value={mode}
               onChange={newMode => setMode(newMode)}
+              name="timezone"
             />
           </SplitItem>
         </Split>
diff --git a/awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx b/awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx
index 7c3075440f..e5bad514f9 100644
--- a/awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx
+++ b/awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx
@@ -55,6 +55,7 @@ function ActivityStreamDetailButton({ streamItem, user, description }) {
               value={
                 streamItem?.changes ? JSON.stringify(streamItem.changes) : ''
               }
+              name="changes"
             />
           )}
         </DetailList>
diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx
index 72aebabfa3..fbd29d6a01 100644
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx
@@ -80,11 +80,13 @@ function CredentialTypeDetails({ credentialType }) {
           label={t`Input configuration`}
           value={jsonToYaml(JSON.stringify(inputs))}
           rows={6}
+          name="input"
         />
         <VariablesDetail
           label={t`Injector configuration`}
           value={jsonToYaml(JSON.stringify(injectors))}
           rows={6}
+          name="injector"
         />
         <UserDateDetail
           label={t`Created`}
diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
index 204f7afa99..430fb12bc7 100644
--- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
+++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
@@ -100,7 +100,12 @@ function HostDetail({ host }) {
           user={modified_by}
           dataCy="host-last-modified-by"
         />
-        <VariablesDetail label={t`Variables`} rows={4} value={variables} />
+        <VariablesDetail
+          label={t`Variables`}
+          rows={4}
+          value={variables}
+          name="variables"
+        />
       </DetailList>
       <CardActionsRow>
         {user_capabilities?.edit && (
diff --git a/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx b/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx
index ac62cddf42..91093ee530 100644
--- a/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx
+++ b/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx
@@ -36,7 +36,12 @@ function HostFacts({ host }) {
   return (
     <CardBody>
       <DetailList gutter="sm">
-        <VariablesDetail label={t`Facts`} rows="auto" value={facts} />
+        <VariablesDetail
+          label={t`Facts`}
+          rows="auto"
+          value={facts}
+          name="facts"
+        />
       </DetailList>
     </CardBody>
   );
diff --git a/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx b/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx
index 4735a8ffd1..701fabb8de 100644
--- a/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx
@@ -81,6 +81,7 @@ function ContainerGroupDetails({ instanceGroup }) {
                 : instanceGroup.pod_spec_override
             }
             rows={6}
+            name="pod_spec_override"
           />
         )}
       </DetailList>
diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
index f42c77782d..cddbb4c831 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
@@ -104,6 +104,7 @@ function InventoryDetail({ inventory }) {
           label={t`Variables`}
           value={inventory.variables}
           rows={4}
+          name="variables"
         />
         <UserDateDetail
           label={t`Created`}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
index a6ed796e09..fd72fffeb0 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx
@@ -37,7 +37,12 @@ function InventoryGroupDetail({ inventoryGroup }) {
           dataCy="inventory-group-detail-name"
         />
         <Detail label={t`Description`} value={description} />
-        <VariablesDetail label={t`Variables`} value={variables} rows={4} />
+        <VariablesDetail
+          label={t`Variables`}
+          value={variables}
+          rows={4}
+          name="variables"
+        />
         <UserDateDetail label={t`Created`} date={created} user={created_by} />
         <UserDateDetail
           label={t`Last Modified`}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx
index c18f9660ad..67560333c0 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx
@@ -86,7 +86,12 @@ function InventoryHostDetail({ host }) {
           label={t`Last Modified`}
           user={modified_by}
         />
-        <VariablesDetail label={t`Variables`} rows={4} value={variables} />
+        <VariablesDetail
+          label={t`Variables`}
+          rows={4}
+          value={variables}
+          name="variables"
+        />
       </DetailList>
       <CardActionsRow>
         {user_capabilities?.edit && (
diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx
index 2bbc96f55f..5aa0fb6d00 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx
@@ -35,7 +35,12 @@ function InventoryHostFacts({ host }) {
   return (
     <CardBody>
       <DetailList gutter="sm">
-        <VariablesDetail label={t`Facts`} rows="auto" value={result} />
+        <VariablesDetail
+          label={t`Facts`}
+          rows="auto"
+          value={result}
+          name="facts"
+        />
       </DetailList>
     </CardBody>
   );
diff --git a/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx b/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx
index d69f2eb5d4..5f9213328b 100644
--- a/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx
@@ -249,6 +249,7 @@ function InventorySourceDetail({ inventorySource }) {
             label={t`Source variables`}
             rows={4}
             value={source_vars}
+            name="source_vars"
           />
         )}
         <UserDateDetail date={created} label={t`Created`} user={created_by} />
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx
index 6b140678c5..705266376c 100644
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx
@@ -131,7 +131,12 @@ function SmartInventoryDetail({ inventory }) {
               }
             />
           )}
-          <VariablesDetail label={t`Variables`} value={variables} rows={4} />
+          <VariablesDetail
+            label={t`Variables`}
+            value={variables}
+            rows={4}
+            name="variables"
+          />
           <UserDateDetail label={t`Created`} date={created} user={created_by} />
           <UserDateDetail
             label={t`Last modified`}
diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx
index 7f8e78d9c1..d69bf1a58b 100644
--- a/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx
@@ -51,7 +51,12 @@ function SmartInventoryHostDetail({ host }) {
           label={t`Last modified`}
           user={modified_by}
         />
-        <VariablesDetail label={t`Variables`} rows={4} value={variables} />
+        <VariablesDetail
+          label={t`Variables`}
+          rows={4}
+          value={variables}
+          name="variables"
+        />
       </DetailList>
     </CardBody>
   );
diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
index 27dc9252e8..ce86266a2d 100644
--- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
+++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx
@@ -337,6 +337,7 @@ function JobDetail({ job }) {
           value={job.extra_vars}
           rows={4}
           label={t`Variables`}
+          name="extra_vars"
         />
       )}
       {job.artifacts && (
@@ -347,6 +348,7 @@ function JobDetail({ job }) {
           value={JSON.stringify(job.artifacts)}
           rows={4}
           label={t`Artifacts`}
+          name="artifacts"
         />
       )}
       <CardActionsRow>
diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
index 743541b07c..3e13e58ba9 100644
--- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx
@@ -353,6 +353,7 @@ function JobTemplateDetail({ template }) {
           rows={4}
           label={t`Variables`}
           dataCy={`jt-details-${template.id}`}
+          name="extra_vars"
         />
       </DetailList>
       <CardActionsRow>
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
index 8b94505558..f3b02c812b 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx
@@ -217,7 +217,12 @@ function WorkflowJobTemplateDetail({ template }) {
             }
           />
         )}
-        <VariablesDetail label={t`Variables`} value={extra_vars} rows={4} />
+        <VariablesDetail
+          label={t`Variables`}
+          value={extra_vars}
+          rows={4}
+          name="extra_vars"
+        />
       </DetailList>
       <CardActionsRow>
         {summary_fields.user_capabilities &&