Cleanup handling of extra_vars in workflow node prompting

awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.jsx

@@ -51,7 +51,9 @@ function PreviewStep({
         mergeExtraVars(initialExtraVars, masked)
       );
     } else {
-      overrides.extra_vars = initialExtraVars;
+      overrides.extra_vars = yaml.safeDump(
+        mergeExtraVars(initialExtraVars, {})
+      );
     }
   }
 

awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.test.jsx

@@ -126,7 +126,7 @@ describe('PreviewStep', () => {
     expect(detail).toHaveLength(1);
     expect(detail.prop('resource')).toEqual(resource);
     expect(detail.prop('overrides')).toEqual({
-      extra_vars: 'one: 1',
+      extra_vars: 'one: 1\n',
     });
   });
   test('should remove survey with empty array value', async () => {
@@ -152,7 +152,7 @@ describe('PreviewStep', () => {
     expect(detail).toHaveLength(1);
     expect(detail.prop('resource')).toEqual(resource);
     expect(detail.prop('overrides')).toEqual({
-      extra_vars: 'one: 1',
+      extra_vars: 'one: 1\n',
     });
   });
 });

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.jsx

@@ -93,9 +93,10 @@ function NodeModalForm({
           mergeExtraVars(initialExtraVars, surveyValues)
         );
       } else {
-        extraVars = initialExtraVars;
+        extraVars = yaml.safeDump(mergeExtraVars(initialExtraVars, {}));
       }
       values.extra_data = extraVars && parseVariableField(extraVars);
+      delete values.extra_vars;
     }
 
     onSave(values, launchConfig);

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx

@@ -305,7 +305,6 @@ describe('NodeModal', () => {
           verbosity: '0',
           job_tags: '',
           skip_tags: '',
-          extra_vars: '---',
           diff_mode: false,
           survey_bar: 'answer',
           nodeResource: mockJobTemplate,

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/useWorkflowNodeSteps.js

@@ -134,26 +134,18 @@ const getNodeToEditDefaultValues = (launchConfig, surveyConfig, nodeToEdit) => {
     initialValues.diff_mode = sourceOfValues?.diff_mode || false;
   }
 
-  if (launchConfig.ask_variables_on_launch && launchConfig.survey_enabled) {
+  if (launchConfig.ask_variables_on_launch) {
-    if (nodeToEdit?.promptValues?.extra_vars) {
+    const newExtraData = { ...sourceOfValues.extra_data };
-      initialValues.extra_vars = nodeToEdit.promptValues.extra_vars;
+    if (launchConfig.survey_enabled && surveyConfig.spec) {
-    } else {
+      surveyConfig.spec.forEach(question => {
-      const newExtraData = { ...nodeToEdit.originalNodeObject.extra_data };
+        if (
-      if (surveyConfig.spec) {
+          Object.prototype.hasOwnProperty.call(newExtraData, question.variable)
-        surveyConfig.spec.forEach(question => {
+        ) {
-          if (
+          delete newExtraData[question.variable];
-            Object.prototype.hasOwnProperty.call(
+        }
-              newExtraData,
+      });
-              question.variable
-            )
-          ) {
-            delete newExtraData[question.variable];
-          }
-        });
-      }
-
-      initialValues.extra_vars = jsonToYaml(JSON.stringify(newExtraData));
     }
+    initialValues.extra_vars = jsonToYaml(JSON.stringify(newExtraData));
   }
 
   if (surveyConfig?.spec) {

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx

@@ -79,8 +79,9 @@ function VisualizerToolbar({
           <Badge id="visualizer-total-nodes-badge" isRead>
             {totalNodes}
           </Badge>
-          <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
+          <Tooltip content={i18n._(t`Toggle legend`)} position="bottom">
             <ActionButton
+              aria-label={i18n._(t`Toggle legend`)}
               id="visualizer-toggle-legend"
               isActive={totalNodes > 0 && showLegend}
               isDisabled={totalNodes === 0}
@@ -90,8 +91,9 @@ function VisualizerToolbar({
               <CompassIcon />
             </ActionButton>
           </Tooltip>
-          <Tooltip content={i18n._(t`Toggle Tools`)} position="bottom">
+          <Tooltip content={i18n._(t`Toggle tools`)} position="bottom">
             <ActionButton
+              aria-label={i18n._(t`Toggle tools`)}
               id="visualizer-toggle-tools"
               isActive={totalNodes > 0 && showTools}
               isDisabled={totalNodes === 0}
@@ -101,33 +103,43 @@ function VisualizerToolbar({
               <WrenchIcon />
             </ActionButton>
           </Tooltip>
-          <ActionButton
+          <Tooltip
-            aria-label={i18n._(t`Workflow Documentation`)}
+            content={i18n._(t`Workflow documentation`)}
-            id="visualizer-documentation"
+            position="bottom"
-            variant="plain"
-            component="a"
-            target="_blank"
-            href={DOCLINK}
           >
-            <BookIcon />
+            <ActionButton
-          </ActionButton>
+              aria-label={i18n._(t`Workflow documentation`)}
+              id="visualizer-documentation"
+              variant="plain"
+              component="a"
+              target="_blank"
+              href={DOCLINK}
+            >
+              <BookIcon />
+            </ActionButton>
+          </Tooltip>
           {template.summary_fields?.user_capabilities?.start && (
-            <LaunchButton resource={template} aria-label={i18n._(t`Launch`)}>
+            <Tooltip content={i18n._(t`Launch workflow`)} position="bottom">
-              {({ handleLaunch }) => (
+              <LaunchButton
-                <ActionButton
+                resource={template}
-                  id="visualizer-launch"
+                aria-label={i18n._(t`Launch workflow`)}
-                  variant="plain"
+              >
-                  isDisabled={hasUnsavedChanges || totalNodes === 0}
+                {({ handleLaunch }) => (
-                  onClick={handleLaunch}
+                  <ActionButton
-                >
+                    id="visualizer-launch"
-                  <RocketIcon />
+                    variant="plain"
-                </ActionButton>
+                    isDisabled={hasUnsavedChanges || totalNodes === 0}
-              )}
+                    onClick={handleLaunch}
-            </LaunchButton>
+                  >
+                    <RocketIcon />
+                  </ActionButton>
+                )}
+              </LaunchButton>
+            </Tooltip>
           )}
           {!readOnly && (
             <>
-              <Tooltip content={i18n._(t`Delete All Nodes`)} position="bottom">
+              <Tooltip content={i18n._(t`Delete all nodes`)} position="bottom">
                 <ActionButton
                   id="visualizer-delete-all"
                   aria-label={i18n._(t`Delete all nodes`)}