Moves request to generate preview down into the ScheduleDetail component

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

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { rrulestr } from 'rrule';
 import styled from 'styled-components';
-import { shape } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Schedule } from '@types';
@@ -21,7 +20,7 @@ const PromptTitle = styled(Title)`
   --pf-c-title--m-md--FontWeight: 700;
 `;
 
-function ScheduleDetail({ preview, schedule, i18n }) {
+function ScheduleDetail({ schedule, i18n }) {
   const {
     id,
     created,
@@ -44,21 +43,26 @@ function ScheduleDetail({ preview, schedule, i18n }) {
   } = schedule;
 
   const {
-    result: credentials,
+    result: [credentials, preview],
     isLoading,
     error,
-    request: fetchCredentials,
+    request: fetchCredentialsAndPreview,
   } = useRequest(
     useCallback(async () => {
-      const { data } = await SchedulesAPI.readCredentials(id);
-      return data.results;
-    }, [id]),
+      const [{ data }, { data: schedulePreview }] = await Promise.all([
+        SchedulesAPI.readCredentials(id),
+        SchedulesAPI.createPreview({
+          rrule,
+        }),
+      ]);
+      return [data.results, schedulePreview];
+    }, [id, rrule]),
     []
   );
 
   useEffect(() => {
-    fetchCredentials();
-  }, [fetchCredentials]);
+    fetchCredentialsAndPreview();
+  }, [fetchCredentialsAndPreview]);
 
   const rule = rrulestr(rrule);
   const repeatFrequency =
@@ -192,12 +196,7 @@ function ScheduleDetail({ preview, schedule, i18n }) {
 }
 
 ScheduleDetail.propTypes = {
-  preview: shape(),
   schedule: Schedule.isRequired,
 };
 
-ScheduleDetail.defaultProps = {
-  preview: { local: [], utc: [] },
-};
-
 export default withI18n()(ScheduleDetail);

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

@@ -52,10 +52,12 @@ const schedule = {
   next_run: '2020-03-16T04:00:00Z',
 };
 
-const preview = {
-  local: [],
-  utc: [],
-};
+SchedulesAPI.createPreview.mockResolvedValue({
+  data: {
+    local: [],
+    utc: [],
+  },
+});
 
 describe('<ScheduleDetail />', () => {
   let wrapper;
@@ -76,9 +78,7 @@ describe('<ScheduleDetail />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/templates/job_template/:id/schedules/:scheduleId"
-          component={() => (
-            <ScheduleDetail schedule={schedule} preview={preview} />
-          )}
+          component={() => <ScheduleDetail schedule={schedule} />}
         />,
         {
           context: {
@@ -159,9 +159,7 @@ describe('<ScheduleDetail />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/templates/job_template/:id/schedules/:scheduleId"
-          component={() => (
-            <ScheduleDetail schedule={scheduleWithPrompts} preview={preview} />
-          )}
+          component={() => <ScheduleDetail schedule={scheduleWithPrompts} />}
         />,
         {
           context: {
@@ -243,9 +241,7 @@ describe('<ScheduleDetail />', () => {
       wrapper = mountWithContexts(
         <Route
           path="/templates/job_template/:id/schedules/:scheduleId"
-          component={() => (
-            <ScheduleDetail schedule={schedule} preview={preview} />
-          )}
+          component={() => <ScheduleDetail schedule={schedule} />}
         />,
         {
           context: {

awx/ui_next/src/screens/Template/JobTemplateSchedule/JobTemplateSchedule.jsx

@@ -22,7 +22,6 @@ import { SchedulesAPI } from '@api';
 
 function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
   const [jobTemplateSchedule, setJobTemplateSchedule] = useState(null);
-  const [schedulePreview, setSchedulePreview] = useState(null);
   const [contentLoading, setContentLoading] = useState(true);
   const [contentError, setContentError] = useState(null);
   const { id: jobTemplateId, scheduleId } = useParams();
@@ -32,12 +31,7 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
     const loadData = async () => {
       try {
         const { data } = await SchedulesAPI.readDetail(scheduleId);
-        const { data: preview } = await SchedulesAPI.createPreview({
-          rrule: data.rrule,
-        });
-
         setJobTemplateSchedule(data);
-        setSchedulePreview(preview);
         setBreadcrumb(jobTemplate, data);
       } catch (err) {
         setContentError(err);
@@ -122,12 +116,7 @@ function JobTemplateSchedule({ i18n, setBreadcrumb, jobTemplate }) {
             key="details"
             path="/templates/job_template/:id/schedules/:scheduleId/details"
             render={() => {
-              return (
-                <ScheduleDetail
-                  schedule={jobTemplateSchedule}
-                  preview={schedulePreview}
-                />
-              );
+              return <ScheduleDetail schedule={jobTemplateSchedule} />;
             }}
           />,
         ]}