Fix prompted values section of schedule details and updated PromptDetail to match ScheduleDetail prompt UX

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

@@ -5,7 +5,7 @@ import { withI18n } from '@lingui/react';
 import { t, Trans } from '@lingui/macro';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { Chip, Divider } from '@patternfly/react-core';
+import { Chip, Divider, Title } from '@patternfly/react-core';
 import { toTitleCase } from '../../util/strings';
 
 import CredentialChip from '../CredentialChip';
@@ -18,9 +18,19 @@ import PromptInventorySourceDetail from './PromptInventorySourceDetail';
 import PromptJobTemplateDetail from './PromptJobTemplateDetail';
 import PromptWFJobTemplateDetail from './PromptWFJobTemplateDetail';
 
-const PromptHeader = styled.h2`
-  font-weight: bold;
-  margin: var(--pf-global--spacer--lg) 0;
+const PromptTitle = styled(Title)`
+  margin-top: 40px;
+  --pf-c-title--m-md--FontWeight: 700;
+  grid-column: 1 / -1;
+`;
+
+const PromptDivider = styled(Divider)`
+  margin-top: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-global--spacer--lg);
+`;
+
+const PromptDetailList = styled(DetailList)`
+  padding: 0px 20px;
 `;
 
 function formatTimeout(timeout) {
@@ -136,9 +146,11 @@ function PromptDetail({ i18n, resource, launchConfig = {}, overrides = {} }) {
 
       {hasPromptData(launchConfig) && hasOverrides && (
         <>
-          <Divider css="margin-top: var(--pf-global--spacer--lg)" />
-          <PromptHeader>{i18n._(t`Prompted Values`)}</PromptHeader>
-          <DetailList aria-label={i18n._(t`Prompt Overrides`)}>
+          <PromptTitle headingLevel="h2">
+            {i18n._(t`Prompted Values`)}
+          </PromptTitle>
+          <PromptDivider />
+          <PromptDetailList aria-label={i18n._(t`Prompt Overrides`)}>
             {launchConfig.ask_job_type_on_launch && (
               <Detail
                 label={i18n._(t`Job Type`)}
@@ -250,7 +262,7 @@ function PromptDetail({ i18n, resource, launchConfig = {}, overrides = {} }) {
                 value={overrides.extra_vars}
               />
             )}
-          </DetailList>
+          </PromptDetailList>
         </>
       )}
     </>

awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx

@@ -5,7 +5,7 @@ import { RRule, rrulestr } from 'rrule';
 import styled from 'styled-components';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Chip, Title, Button } from '@patternfly/react-core';
+import { Chip, Divider, Title, Button } from '@patternfly/react-core';
 import { Schedule } from '../../../types';
 import AlertModal from '../../AlertModal';
 import { CardBody, CardActionsRow } from '../../Card';
@@ -27,11 +27,21 @@ import ErrorDetail from '../../ErrorDetail';
 import ChipGroup from '../../ChipGroup';
 import { VariablesDetail } from '../../CodeMirrorInput';
 
+const PromptDivider = styled(Divider)`
+  margin-top: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-global--spacer--lg);
+`;
+
 const PromptTitle = styled(Title)`
+  margin-top: 40px;
   --pf-c-title--m-md--FontWeight: 700;
   grid-column: 1 / -1;
 `;
 
+const PromptDetailList = styled(DetailList)`
+  padding: 0px 20px;
+`;
+
 function ScheduleDetail({ schedule, i18n }) {
   const {
     id,
@@ -41,6 +51,7 @@ function ScheduleDetail({ schedule, i18n }) {
     dtend,
     dtstart,
     extra_data,
+    inventory,
     job_tags,
     job_type,
     limit,
@@ -140,18 +151,25 @@ function ScheduleDetail({ schedule, i18n }) {
     survey_enabled,
   } = launchData || {};
 
+  const showCredentialsDetail =
+    ask_credential_on_launch && credentials.length > 0;
+  const showInventoryDetail = ask_inventory_on_launch && inventory;
+  const showVariablesDetail =
+    (ask_variables_on_launch || survey_enabled) &&
+    ((typeof extra_data === 'string' && extra_data !== '') ||
+      (typeof extra_data === 'object' && Object.keys(extra_data).length > 0));
+
   const showPromptedFields =
-    ask_credential_on_launch ||
+    showCredentialsDetail ||
     ask_diff_mode_on_launch ||
-    ask_inventory_on_launch ||
+    showInventoryDetail ||
     ask_job_type_on_launch ||
     ask_limit_on_launch ||
     ask_scm_branch_on_launch ||
     ask_skip_tags_on_launch ||
     ask_tags_on_launch ||
-    ask_variables_on_launch ||
     ask_verbosity_on_launch ||
-    survey_enabled;
+    showVariablesDetail;
 
   if (isLoading) {
     return <ContentLoading />;
@@ -189,15 +207,18 @@ function ScheduleDetail({ schedule, i18n }) {
           date={modified}
           user={summary_fields.modified_by}
         />
-        {showPromptedFields && (
-          <>
-            <PromptTitle headingLevel="h2">
-              {i18n._(t`Prompted Fields`)}
-            </PromptTitle>
+      </DetailList>
+      {showPromptedFields && (
+        <>
+          <PromptTitle headingLevel="h2">
+            {i18n._(t`Prompted Values`)}
+          </PromptTitle>
+          <PromptDivider />
+          <PromptDetailList>
             {ask_job_type_on_launch && (
               <Detail label={i18n._(t`Job Type`)} value={job_type} />
             )}
-            {ask_inventory_on_launch && (
+            {showInventoryDetail && (
               <Detail
                 label={i18n._(t`Inventory`)}
                 value={
@@ -232,7 +253,7 @@ function ScheduleDetail({ schedule, i18n }) {
                 value={diff_mode ? i18n._(t`On`) : i18n._(t`Off`)}
               />
             )}
-            {ask_credential_on_launch && (
+            {showCredentialsDetail && (
               <Detail
                 fullWidth
                 label={i18n._(t`Credentials`)}
@@ -281,16 +302,16 @@ function ScheduleDetail({ schedule, i18n }) {
                 }
               />
             )}
-            {(ask_variables_on_launch || survey_enabled) && (
+            {showVariablesDetail && (
               <VariablesDetail
                 value={extra_data}
                 rows={4}
                 label={i18n._(t`Variables`)}
               />
             )}
-          </>
-        )}
-      </DetailList>
+          </PromptDetailList>
+        </>
+      )}
       <CardActionsRow>
         {summary_fields?.user_capabilities?.edit && (
           <Button

awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.test.jsx

@@ -159,7 +159,7 @@ describe('<ScheduleDetail />', () => {
     expect(wrapper.find('Detail[label="Repeat Frequency"]').length).toBe(1);
     expect(wrapper.find('Detail[label="Created"]').length).toBe(1);
     expect(wrapper.find('Detail[label="Last Modified"]').length).toBe(1);
-    expect(wrapper.find('Title[children="Prompted Fields"]').length).toBe(0);
+    expect(wrapper.find('Title[children="Prompted Values"]').length).toBe(0);
     expect(wrapper.find('Detail[label="Job Type"]').length).toBe(0);
     expect(wrapper.find('Detail[label="Inventory"]').length).toBe(0);
     expect(wrapper.find('Detail[label="Source Control Branch"]').length).toBe(
@@ -245,7 +245,7 @@ describe('<ScheduleDetail />', () => {
     expect(wrapper.find('Detail[label="Repeat Frequency"]').length).toBe(1);
     expect(wrapper.find('Detail[label="Created"]').length).toBe(1);
     expect(wrapper.find('Detail[label="Last Modified"]').length).toBe(1);
-    expect(wrapper.find('Title[children="Prompted Fields"]').length).toBe(1);
+    expect(wrapper.find('Title[children="Prompted Values"]').length).toBe(1);
     expect(
       wrapper
         .find('Detail[label="Job Type"]')