Fixes bug where page would crash on preview step if extra vars was malformed

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

@@ -6,10 +6,10 @@ import { Formik, useFormikContext } from 'formik';
 import ContentError from '../ContentError';
 import ContentLoading from '../ContentLoading';
 import { useDismissableError } from '../../util/useRequest';
-import mergeExtraVars from './mergeExtraVars';
+import mergeExtraVars from '../../util/prompt/mergeExtraVars';
+import getSurveyValues from '../../util/prompt/getSurveyValues';
 import useLaunchSteps from './useLaunchSteps';
 import AlertModal from '../AlertModal';
-import getSurveyValues from './getSurveyValues';
 
 function PromptModalForm({
   launchConfig,

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

@@ -6,9 +6,10 @@ import { t } from '@lingui/macro';
 import { useFormikContext } from 'formik';
 import { withI18n } from '@lingui/react';
 import yaml from 'js-yaml';
-import { parseVariableField } from '../../../util/yaml';
+import mergeExtraVars, {
-import mergeExtraVars, { maskPasswords } from '../mergeExtraVars';
+  maskPasswords,
-import getSurveyValues from '../getSurveyValues';
+} from '../../../util/prompt/mergeExtraVars';
+import getSurveyValues from '../../../util/prompt/getSurveyValues';
 import PromptDetail from '../../PromptDetail';
 
 const ExclamationCircleIcon = styled(PFExclamationCircleIcon)`
@@ -54,9 +55,6 @@ function PreviewStep({
     }
   }
 
-  values.extra_data =
-    overrides.extra_vars && parseVariableField(overrides?.extra_vars);
-
   return (
     <Fragment>
       {formErrors && (

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

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Formik, useFormikContext } from 'formik';
-
+import yaml from 'js-yaml';
 import { bool, node, func } from 'prop-types';
 import {
   Button,
@@ -18,6 +18,9 @@ import ContentLoading from '../../../../../components/ContentLoading';
 import useRequest, {
   useDismissableError,
 } from '../../../../../util/useRequest';
+import mergeExtraVars from '../../../../../util/prompt/mergeExtraVars';
+import getSurveyValues from '../../../../../util/prompt/getSurveyValues';
+import { parseVariableField } from '../../../../../util/yaml';
 import {
   WorkflowDispatchContext,
   WorkflowStateContext,
@@ -76,6 +79,25 @@ function NodeModalForm({
       delete values.timeoutMinutes;
       delete values.timeoutSeconds;
     }
+
+    if (
+      ['job_template', 'workflow_job_template'].includes(values.nodeType) &&
+      (launchConfig.ask_variables_on_launch || launchConfig.survey_enabled)
+    ) {
+      let extraVars;
+      const surveyValues = getSurveyValues(values);
+      const initialExtraVars =
+        launchConfig.ask_variables_on_launch && (values.extra_vars || '---');
+      if (surveyConfig?.spec) {
+        extraVars = yaml.safeDump(
+          mergeExtraVars(initialExtraVars, surveyValues)
+        );
+      } else {
+        extraVars = initialExtraVars;
+      }
+      values.extra_data = extraVars && parseVariableField(extraVars);
+    }
+
     onSave(values, launchConfig);
   };