add schedule exceptions to details

awx/ui/src/components/Schedule/ScheduleDetail/FrequencyDetails.js

@@ -10,7 +10,13 @@ const Label = styled.div`
   font-weight: var(--pf-global--FontWeight--bold);
 `;
 
-export default function FrequencyDetails({ type, label, options, timezone }) {
+export default function FrequencyDetails({
+  type,
+  label,
+  options,
+  timezone,
+  isException,
+}) {
   const getRunEveryLabel = () => {
     const { interval } = options;
     switch (type) {
@@ -81,7 +87,10 @@ export default function FrequencyDetails({ type, label, options, timezone }) {
     <div>
       <Label>{label}</Label>
       <DetailList gutter="sm">
-        <Detail label={t`Run every`} value={getRunEveryLabel()} />
+        <Detail
+          label={isException ? t`Skip every` : t`Run every`}
+          value={getRunEveryLabel()}
+        />
         {type === 'week' ? (
           <Detail
             label={t`On days`}

awx/ui/src/components/Schedule/ScheduleDetail/ScheduleDetail.js

@@ -2,7 +2,6 @@ import 'styled-components/macro';
 import React, { useCallback, useEffect } from 'react';
 import { Link, useHistory, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
-
 import { t } from '@lingui/macro';
 import { Chip, Divider, Title, Button } from '@patternfly/react-core';
 import { Schedule } from 'types';
@@ -60,6 +59,10 @@ const FrequencyDetailsContainer = styled.div`
     padding-bottom: var(--pf-global--spacer--md);
     border-bottom: 1px solid var(--pf-global--palette--black-300);
   }
+
+  & + & {
+    margin-top: calc(var(--pf-global--spacer--lg) * -1);
+  }
 `;
 
 function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
@@ -161,10 +164,14 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
     month: t`Month`,
     year: t`Year`,
   };
-  const { frequency, frequencyOptions } = parseRuleObj(schedule);
+  const { frequency, frequencyOptions, exceptionFrequency, exceptionOptions } =
+    parseRuleObj(schedule);
   const repeatFrequency = frequency.length
     ? frequency.map((f) => frequencies[f]).join(', ')
     : t`None (Run Once)`;
+  const exceptionRepeatFrequency = exceptionFrequency.length
+    ? exceptionFrequency.map((f) => frequencies[f]).join(', ')
+    : t`None (Run Once)`;
 
   const {
     ask_credential_on_launch,
@@ -288,6 +295,10 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
           helpText={helpText.localTimeZone(config)}
         />
         <Detail label={t`Repeat Frequency`} value={repeatFrequency} />
+        <Detail
+          label={t`Exception Frequency`}
+          value={exceptionRepeatFrequency}
+        />
       </DetailList>
       {frequency.length ? (
         <FrequencyDetailsContainer>
@@ -305,6 +316,23 @@ function ScheduleDetail({ hasDaysToKeepField, schedule, surveyConfig }) {
           ))}
         </FrequencyDetailsContainer>
       ) : null}
+      {exceptionFrequency.length ? (
+        <FrequencyDetailsContainer>
+          <p css="border-top: 0">
+            <strong>{t`Frequency Exception Details`}</strong>
+          </p>
+          {exceptionFrequency.map((freq) => (
+            <FrequencyDetails
+              key={freq}
+              type={freq}
+              label={frequencies[freq]}
+              options={exceptionOptions[freq]}
+              timezone={timezone}
+              isException
+            />
+          ))}
+        </FrequencyDetailsContainer>
+      ) : null}
       <DetailList gutter="sm">
         {hasDaysToKeepField ? (
           <Detail label={t`Days of Data to Keep`} value={daysToKeep} />

awx/ui/src/components/Schedule/shared/FrequencyDetailSubform.js

@@ -45,7 +45,7 @@ const Checkbox = styled(_Checkbox)`
   }
 `;
 
-const FrequencyDetailSubform = ({ frequency, prefix }) => {
+const FrequencyDetailSubform = ({ frequency, prefix, isException }) => {
   const id = prefix.replace('.', '-');
   const [runOnDayMonth] = useField({
     name: `${prefix}.runOnDayMonth`,
@@ -220,7 +220,7 @@ const FrequencyDetailSubform = ({ frequency, prefix }) => {
         validated={
           !intervalMeta.touched || !intervalMeta.error ? 'default' : 'error'
         }
-        label={t`Run every`}
+        label={isException ? t`Skip every` : t`Run every`}
       >
         <div css="display: flex">
           <TextInput

awx/ui/src/components/Schedule/shared/ScheduleFormFields.js

@@ -191,6 +191,7 @@ export default function ScheduleFormFields({
               <FrequencyDetailSubform
                 frequency={val}
                 prefix={`exceptionOptions.${val}`}
+                isException
               />
             </FormColumnLayout>
           ))}