Merge pull request #10260 from mabashian/8249-resource-name-launch

Adds resource name and description to launch and schedule prompt wizards

SUMMARY
link #8249
link #7254
Launch with description:

Launch without description:

ISSUE TYPE

Feature Pull Request

COMPONENT NAME

UI

Reviewed-by: Keith Grant <keithjgrant@gmail.com>
Reviewed-by: Kersom <None>
Reviewed-by: Michael Abashian <None>
Reviewed-by: Tiago Góes <tiago.goes2009@gmail.com>

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

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Wizard } from '@patternfly/react-core';
+import { ExpandableSection, Wizard } from '@patternfly/react-core';
-
 import { t } from '@lingui/macro';
 import { Formik, useFormikContext } from 'formik';
 import ContentError from '../ContentError';
@@ -20,6 +19,7 @@ function PromptModalForm({
   resourceDefaultCredentials,
 }) {
   const { setFieldTouched, values } = useFormikContext();
+  const [showDescription, setShowDescription] = useState(false);
 
   const {
     steps,
@@ -102,7 +102,24 @@ function PromptModalForm({
           validateStep(nextStep.id);
         }
       }}
-      title={t`Prompts`}
+      title={t`Launch | ${resource.name}`}
+      description={
+        resource.description.length > 512 ? (
+          <ExpandableSection
+            toggleText={
+              showDescription ? t`Hide description` : t`Show description`
+            }
+            onToggle={() => {
+              setShowDescription(!showDescription);
+            }}
+            isExpanded={showDescription}
+          >
+            {resource.description}
+          </ExpandableSection>
+        ) : (
+          resource.description
+        )
+      }
       steps={
         isReady
           ? steps

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

@@ -24,6 +24,8 @@ jest.mock('../../api/models/JobTemplates');
 let config;
 const resource = {
   id: 1,
+  description: 'Foo Description',
+  name: 'Foobar',
   type: 'job_template',
 };
 const noop = () => {};
@@ -147,6 +149,10 @@ describe('LaunchPrompt', () => {
     expect(steps[3].name.props.children).toEqual('Other prompts');
     expect(steps[4].name.props.children).toEqual('Survey');
     expect(steps[5].name.props.children).toEqual('Preview');
+    expect(wizard.find('WizardHeader').prop('title')).toBe('Launch | Foobar');
+    expect(wizard.find('WizardHeader').prop('description')).toBe(
+      'Foo Description'
+    );
   });
 
   test('should add inventory step', async () => {

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

@@ -66,6 +66,8 @@ describe('<ScheduleAdd />', () => {
             type: 'job_template',
             inventory: 2,
             summary_fields: { credentials: [] },
+            name: 'Foo Job Template',
+            description: '',
           }}
           launchConfig={launchConfig}
         />
@@ -417,6 +419,8 @@ describe('<ScheduleAdd />', () => {
             type: 'job_template',
             inventory: 2,
             summary_fields: { credentials: [] },
+            name: 'Foo Job Template',
+            description: '',
           }}
           launchConfig={launchConfig}
           surveyConfig={{

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

@@ -142,6 +142,8 @@ describe('<ScheduleEdit />', () => {
                 { name: 'job template credential', id: 75, kind: 'ssh' },
               ],
             },
+            name: 'Foo Job Template',
+            description: '',
           }}
           resourceDefaultCredentials={[]}
           launchConfig={{
@@ -654,6 +656,8 @@ describe('<ScheduleEdit />', () => {
                 { name: 'job template credential', id: 75, kind: 'ssh' },
               ],
             },
+            name: 'Foo Job Template',
+            description: '',
           }}
           resourceDefaultCredentials={[]}
           launchConfig={{

awx/ui_next/src/components/Schedule/shared/ScheduleForm.test.jsx

@@ -150,7 +150,12 @@ describe('<ScheduleForm />', () => {
                 description: '',
               },
             }}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
       });
@@ -199,7 +204,13 @@ describe('<ScheduleForm />', () => {
                 description: '',
               },
             }}
-            resource={{ id: 23, type: 'job_template', inventory: 1 }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              inventory: 1,
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
       });
@@ -232,6 +243,8 @@ describe('<ScheduleForm />', () => {
               summary_fields: {
                 credentials: [],
               },
+              name: 'Foo Job Template',
+              description: '',
             }}
             launchConfig={{
               can_start_without_user_input: false,
@@ -370,6 +383,8 @@ describe('<ScheduleForm />', () => {
             resource={{
               id: 23,
               type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
             }}
             launchConfig={{
               can_start_without_user_input: false,
@@ -422,7 +437,13 @@ describe('<ScheduleForm />', () => {
           <ScheduleForm
             handleSubmit={jest.fn()}
             handleCancel={jest.fn()}
-            resource={{ id: 23, type: 'job_template', inventory: 1 }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              inventory: 1,
+              name: 'Foo Job Template',
+              description: '',
+            }}
             launchConfig={{
               can_start_without_user_input: true,
               passwords_needed_to_start: [],
@@ -758,7 +779,12 @@ describe('<ScheduleForm />', () => {
             handleSubmit={jest.fn()}
             handleCancel={jest.fn()}
             schedule={{ inventory: null, ...mockSchedule }}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
             launchConfig={{
               can_start_without_user_input: true,
               passwords_needed_to_start: [],
@@ -794,7 +820,12 @@ describe('<ScheduleForm />', () => {
           <ScheduleForm
             handleSubmit={jest.fn()}
             handleCancel={jest.fn()}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
             launchConfig={{
               can_start_without_user_input: true,
               passwords_needed_to_start: [],
@@ -835,6 +866,8 @@ describe('<ScheduleForm />', () => {
               id: 23,
               type: 'project',
               inventory: 2,
+              name: 'Foo Project',
+              description: '',
             }}
           />
         );
@@ -858,7 +891,12 @@ describe('<ScheduleForm />', () => {
             handleCancel={jest.fn()}
             schedule={mockSchedule}
             launchConfig={{ inventory_needed_to_start: false }}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
       });
@@ -888,7 +926,12 @@ describe('<ScheduleForm />', () => {
                 'DTSTART;TZID=America/New_York:20200402T144500 RRULE:INTERVAL=10;FREQ=MINUTELY',
               dtend: null,
             })}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
       });
@@ -923,7 +966,12 @@ describe('<ScheduleForm />', () => {
               dtend: '2020-04-03T03:45:00Z',
               until: '',
             })}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
       });
@@ -959,7 +1007,12 @@ describe('<ScheduleForm />', () => {
               dtend: null,
               until: '',
             })}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
         expect(wrapper.find('ScheduleForm').length).toBe(1);
@@ -994,7 +1047,12 @@ describe('<ScheduleForm />', () => {
               dtend: '2020-10-30T18:45:00Z',
               until: '2021-01-01T00:00:00',
             })}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
       });
@@ -1053,7 +1111,12 @@ describe('<ScheduleForm />', () => {
               dtend: null,
               until: '',
             })}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
         expect(wrapper.find('ScheduleForm').length).toBe(1);
@@ -1100,7 +1163,12 @@ describe('<ScheduleForm />', () => {
               dtend: null,
               until: '',
             })}
-            resource={{ id: 23, type: 'job_template' }}
+            resource={{
+              id: 23,
+              type: 'job_template',
+              name: 'Foo Job Template',
+              description: '',
+            }}
           />
         );
         expect(wrapper.find('ScheduleForm').length).toBe(1);

awx/ui_next/src/components/Schedule/shared/SchedulePromptableFields.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Wizard } from '@patternfly/react-core';
+import { ExpandableSection, Wizard } from '@patternfly/react-core';
-
 import { t } from '@lingui/macro';
 import { useFormikContext } from 'formik';
 import AlertModal from '../../AlertModal';
@@ -37,11 +36,10 @@ function SchedulePromptableFields({
     launchConfig,
     schedule,
     resource,
-
     credentials,
     resourceDefaultCredentials
   );
-
+  const [showDescription, setShowDescription] = useState(false);
   const { error, dismissError } = useDismissableError(contentError);
   const cancelPromptableValues = async () => {
     resetForm({
@@ -107,7 +105,24 @@ function SchedulePromptableFields({
           validateStep(nextStep.id);
         }
       }}
-      title={t`Prompts`}
+      title={t`Prompt | ${resource.name}`}
+      description={
+        resource.description.length > 512 ? (
+          <ExpandableSection
+            toggleText={
+              showDescription ? t`Hide description` : t`Show description`
+            }
+            onToggle={() => {
+              setShowDescription(!showDescription);
+            }}
+            isExpanded={showDescription}
+          >
+            {resource.description}
+          </ExpandableSection>
+        ) : (
+          resource.description
+        )
+      }
       steps={
         isReady
           ? steps