use PromptDetail in launch prompt preview

awx/ui_next/src/components/ErrorDetail/getErrorMessage.js

@@ -1,5 +1,5 @@
 export default function getErrorMessage(response) {
-  if (!response.data) {
+  if (!response?.data) {
     return null;
   }
   if (typeof response.data === 'string') {

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

@@ -1,8 +1,11 @@
-import React from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { Wizard } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Formik } from 'formik';
+import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '@api';
+import useRequest from '@util/useRequest';
+import ContentError from '@components/ContentError';
 import InventoryStep from './InventoryStep';
 import CredentialsStep from './CredentialsStep';
 import OtherPromptsStep from './OtherPromptsStep';
@@ -11,6 +14,30 @@ import PreviewStep from './PreviewStep';
 import mergeExtraVars from './mergeExtraVars';
 
 function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
+  const {
+    result: survey,
+    request: fetchSurvey,
+    error: surveyError,
+  } = useRequest(
+    useCallback(async () => {
+      if (!config.survey_enabled) {
+        return {};
+      }
+      const { data } =
+        resource.type === 'workflow_job_template'
+          ? await WorkflowJobTemplatesAPI.readSurvey(resource.id)
+          : await JobTemplatesAPI.readSurvey(resource.id);
+      return data;
+    }, [config.survey_enabled, resource])
+  );
+  useEffect(() => {
+    fetchSurvey();
+  }, [fetchSurvey]);
+
+  if (surveyError) {
+    return <ContentError error={surveyError} />;
+  }
+
   const steps = [];
   const initialValues = {};
   if (config.ask_inventory_on_launch) {
@@ -73,12 +100,14 @@ function LaunchPrompt({ config, resource, onLaunch, onCancel, i18n }) {
     initialValues.survey = {};
     steps.push({
       name: i18n._(t`Survey`),
-      component: <SurveyStep template={resource} />,
+      component: <SurveyStep survey={survey} />,
     });
   }
   steps.push({
     name: i18n._(t`Preview`),
-    component: <PreviewStep />,
+    component: (
+      <PreviewStep resource={resource} config={config} survey={survey} />
+    ),
     nextButtonText: i18n._(t`Launch`),
   });
 

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

@@ -1,7 +1,20 @@
 import React from 'react';
+import { useFormikContext } from 'formik';
+import PromptDetail from '@components/PromptDetail';
+import { encodeExtraVars } from './mergeExtraVars';
 
-function PreviewStep() {
+function PreviewStep({ resource, config, survey }) {
-  return <div>Preview of selected values will appear here</div>;
+  const { values } = useFormikContext();
+  return (
+    <PromptDetail
+      resource={resource}
+      launchConfig={config}
+      promptResponses={{
+        ...values,
+        extra_vars: encodeExtraVars(values.extra_vars, values.survey),
+      }}
+    />
+  );
 }
 
 export default PreviewStep;

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

@@ -23,24 +23,8 @@ import {
   combine,
 } from '@util/validators';
 
-function SurveyStep({ template, i18n }) {
+function SurveyStep({ survey, i18n }) {
-  const { result: survey, request: fetchSurvey, isLoading, error } = useRequest(
+  if (!survey) {
-    useCallback(async () => {
-      const { data } =
-        template.type === 'workflow_job_template'
-          ? await WorkflowJobTemplatesAPI.readSurvey(template.id)
-          : await JobTemplatesAPI.readSurvey(template.id);
-      return data;
-    }, [template])
-  );
-  useEffect(() => {
-    fetchSurvey();
-  }, [fetchSurvey]);
-
-  if (error) {
-    return <ContentError error={error} />;
-  }
-  if (isLoading || !survey) {
     return <ContentLoading />;
   }
 

awx/ui_next/src/components/LaunchPrompt/mergeExtraVars.js

@@ -9,3 +9,8 @@ export default function mergeExtraVars(extraVars, survey = {}) {
 }
 
 // TODO: "safe" version that obscures passwords for preview step
+
+export function encodeExtraVars(extraVars, survey = {}) {
+  const vars = mergeExtraVars(extraVars, survey);
+  return yaml.safeDump(vars);
+}

awx/ui_next/src/components/PromptDetail/PromptDetail.jsx

@@ -78,7 +78,7 @@ function omitOverrides(resource, overrides) {
 
 // TODO: When prompting is hooked up, update function
 // to filter based on prompt overrides
-function partitionPromptDetails(resource, launchConfig) {
+function partitionPromptDetails(resource, userResponses, launchConfig) {
   const { defaults = {} } = launchConfig;
   const overrides = {};
 
@@ -150,7 +150,12 @@ function partitionPromptDetails(resource, launchConfig) {
   return [withoutOverrides, overrides];
 }
 
-function PromptDetail({ i18n, resource, launchConfig = {} }) {
+function PromptDetail({
+  i18n,
+  resource,
+  launchConfig = {},
+  promptResponses = {},
+}) {
   const VERBOSITY = {
     0: i18n._(t`0 (Normal)`),
     1: i18n._(t`1 (Verbose)`),
@@ -159,7 +164,13 @@ function PromptDetail({ i18n, resource, launchConfig = {} }) {
     4: i18n._(t`4 (Connection Debug)`),
   };
 
-  const [details, overrides] = partitionPromptDetails(resource, launchConfig);
+  // const [details, overrides] = partitionPromptDetails(
+  //   resource,
+  //   promptResponses,
+  //   launchConfig
+  // );
+  const overrides = promptResponses;
+  const details = omitOverrides(resource, overrides);
   const hasOverrides = Object.keys(overrides).length > 0;
 
   return (