NewRecurringJobModal.js in foreman_ansible-10.1.0

- old
+ new

@@ -1,7 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useDispatch } from 'react-redux';
+import { push } from 'connected-react-router';
 import { Formik, Field as FormikField } from 'formik';
 import { useMutation } from '@apollo/client';
 import { translate as __ } from 'foremanReact/common/I18n';
 
 import {
@@ -31,10 +33,11 @@
 import createJobInvocation from '../../../../graphql/mutations/createJobInvocation.gql';
 import jobsQuery from '../../../../graphql/queries/recurringJobs.gql';
 
 const NewRecurringJobModal = props => {
   const { onClose, resourceId, resourceName } = props;
+  const dispatch = useDispatch();
 
   const [callMutation] = useMutation(createJobInvocation, {
     refetchQueries: [
       {
         query: jobsQuery,
@@ -79,14 +82,35 @@
 
         if (formProps.isSubmitting) {
           actions.push(<Spinner key="spinner" size="lg" />);
         }
 
+        const modalDescription = (
+          <>
+            {__('This job will run all the assigned Ansible roles.')}
+            <br />
+            {__('For more advanced scheduling options')}{' '}
+            <Button
+              variant="link"
+              isInline
+              onClick={() =>
+                dispatch(
+                  push(`/job_invocations/new?host_ids%5B%5D=${resourceId}`)
+                )
+              }
+              key="schedule-job-action"
+            >
+              {__('view remote execution page.')}
+            </Button>
+          </>
+        );
+
         return (
           <Modal
-            variant={ModalVariant.large}
-            title="Create New Recurring Ansible Run"
+            variant={ModalVariant.small}
+            title={__('Schedule recurring Ansible roles job')}
+            description={modalDescription}
             ouiaId="modal-recurring-ansible-run"
             isOpen={props.isOpen}
             className="foreman-modal modal-high"
             showClose={false}
             actions={actions}
@@ -101,17 +125,19 @@
                 selectItems={frequencyOpts}
               />
               <FormikField
                 name="startTime"
                 component={TimePickerField}
-                label="Start Time"
+                label="Start time"
                 isRequired
                 is24Hour
+                width="250px"
+                menuAppendTo={() => document.body}
               />
               <FormikField
                 name="startDate"
                 component={DatePickerField}
-                label="Start Date"
+                label="Start date"
                 isRequired
                 validators={[rangeValidator]}
               />
             </PfForm>
           </Modal>