diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.jsx
index 154f31a44d..f7e8ed1c36 100644
--- a/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.jsx
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.jsx
@@ -14,9 +14,11 @@ function PreviewStep({ resource, config, survey, formErrors }) {
       .filter(q => q.type === 'password')
       .map(q => q.variable);
     const masked = maskPasswords(surveyValues, passwordFields);
-    extraVars = yaml.safeDump(mergeExtraVars(values.extra_vars, masked));
+    extraVars = yaml.safeDump(
+      mergeExtraVars(values.extra_vars || '---', masked)
+    );
   } else {
-    extraVars = values.extra_vars;
+    extraVars = values.extra_vars || '---';
   }
   return (
     <>
diff --git a/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.test.jsx b/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.test.jsx
new file mode 100644
index 0000000000..623620662d
--- /dev/null
+++ b/awx/ui_next/src/components/LaunchPrompt/steps/PreviewStep.test.jsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { Formik } from 'formik';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import PreviewStep from './PreviewStep';
+
+const resource = {
+  id: 1,
+  type: 'job_template',
+  summary_fields: {
+    inventory: { id: 12 },
+    recent_jobs: [],
+  },
+  related: {},
+};
+
+const survey = {
+  name: '',
+  spec: [
+    {
+      variable: 'foo',
+      type: 'text',
+    },
+  ],
+};
+
+describe('PreviewStep', () => {
+  test('should render PromptDetail', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik initialValues={{ limit: '4', survey_foo: 'abc' }}>
+          <PreviewStep
+            resource={resource}
+            config={{
+              ask_limit_on_launch: true,
+              survey_enabled: true,
+            }}
+            survey={survey}
+          />
+        </Formik>
+      );
+    });
+
+    const detail = wrapper.find('PromptDetail');
+    expect(detail).toHaveLength(1);
+    expect(detail.prop('resource')).toEqual(resource);
+    expect(detail.prop('overrides')).toEqual({
+      extra_vars: 'foo: abc\n',
+      limit: '4',
+      survey_foo: 'abc',
+    });
+  });
+
+  test('should render PromptDetail without survey', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <Formik initialValues={{ limit: '4' }}>
+          <PreviewStep
+            resource={resource}
+            config={{
+              ask_limit_on_launch: true,
+            }}
+          />
+        </Formik>
+      );
+    });
+
+    const detail = wrapper.find('PromptDetail');
+    expect(detail).toHaveLength(1);
+    expect(detail.prop('resource')).toEqual(resource);
+    expect(detail.prop('overrides')).toEqual({
+      extra_vars: '---',
+      limit: '4',
+    });
+  });
+});