Banner test deploySchedule (#636)

* Banner test deploySchedule

* update copy

app/models/BannerTests.scala

@@ -26,6 +26,8 @@ case class BannerVariant(
     tickerSettings: Option[TickerSettings] = None,
 )
 
+case class BannerTestDeploySchedule(daysBetween: Int)
+
 case class BannerTest(
     name: String,
     channel: Option[Channel],
@@ -44,6 +46,7 @@ case class BannerTest(
     signedInStatus: Option[SignedInStatus] = Some(SignedInStatus.All),
     isBanditTest: Option[Boolean] = None,
     consentStatus: Option[ConsentStatus] = Some(ConsentStatus.All),
+    deploySchedule: Option[BannerTestDeploySchedule] = None,
 ) extends ChannelTest[BannerTest] {
 
   override def withChannel(channel: Channel): BannerTest =

public/src/components/channelManagement/bannerTests/bannerTestEditor.tsx

@@ -16,7 +16,12 @@ import TestEditorTargetAudienceSelector from '../testEditorTargetAudienceSelecto
 import TestEditorArticleCountEditor, {
   DEFAULT_ARTICLES_VIEWED_SETTINGS,
 } from '../testEditorArticleCountEditor';
-import { BannerContent, BannerTest, BannerVariant } from '../../../models/banner';
+import {
+  BannerContent,
+  BannerTest,
+  BannerTestDeploySchedule,
+  BannerVariant,
+} from '../../../models/banner';
 import { getDefaultVariant } from './utils/defaults';
 import VariantSummary from '../../tests/variants/variantSummary';
 import BannerVariantPreview from './bannerVariantPreview';
@@ -33,6 +38,7 @@ import {
 import TestEditorContextTargeting from '../testEditorContextTargeting';
 import { getDesignForVariant } from '../../../utils/bannerDesigns';
 import { BanditEditor } from '../banditEditor';
+import { DeployScheduleEditor } from './deployScheduleEditor';
 
 const copyHasTemplate = (content: BannerContent, template: string): boolean =>
   (content.heading && content.heading.includes(template)) ||
@@ -152,6 +158,13 @@ const BannerTestEditor: React.FC<ValidatedTestEditorProps<BannerTest>> = ({
     });
   };
 
+  const onDeployScheduleChange = (updatedDeploySchedule?: BannerTestDeploySchedule): void => {
+    updateTest({
+      ...test,
+      deploySchedule: updatedDeploySchedule,
+    });
+  };
+
   const renderVariantEditor = (variant: BannerVariant): React.ReactElement => (
     <VariantEditor
       key={`banner-${test.name}-${variant.name}`}
@@ -307,6 +320,19 @@ const BannerTestEditor: React.FC<ValidatedTestEditorProps<BannerTest>> = ({
             isDisabled={!userHasTestLocked}
           />
         </div>
+
+        <div className={classes.sectionContainer}>
+          <Typography variant={'h3'} className={classes.sectionHeader}>
+            Deploy schedule override
+          </Typography>
+
+          <DeployScheduleEditor
+            deploySchedule={test.deploySchedule}
+            onDeployScheduleChange={onDeployScheduleChange}
+            onValidationChange={isValid => setValidationStatusForField('deploySchedule', isValid)}
+            isDisabled={!userHasTestLocked}
+          />
+        </div>
       </div>
     );
   }

public/src/components/channelManagement/bannerTests/deployScheduleEditor.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect } from 'react';
+import { makeStyles } from '@mui/styles';
+import { FormControl, FormControlLabel, Radio, RadioGroup, TextField, Theme } from '@mui/material';
+import { BannerTestDeploySchedule } from '../../../models/banner';
+import { useForm } from 'react-hook-form';
+import { EMPTY_ERROR_HELPER_TEXT, notNumberValidator } from '../helpers/validation';
+
+const useStyles = makeStyles(({ spacing }: Theme) => ({
+  container: {
+    '& > * + *': {
+      marginTop: spacing(3),
+    },
+  },
+}));
+
+interface DeployScheduleEditorProps {
+  deploySchedule?: BannerTestDeploySchedule;
+  onDeployScheduleChange: (deploySchedule?: BannerTestDeploySchedule) => void;
+  onValidationChange: (isValid: boolean) => void;
+  isDisabled: boolean;
+}
+
+const DeployScheduleEditor: React.FC<DeployScheduleEditorProps> = ({
+  deploySchedule,
+  onDeployScheduleChange,
+  onValidationChange,
+  isDisabled,
+}: DeployScheduleEditorProps) => {
+  const classes = useStyles();
+
+  const defaultValues: BannerTestDeploySchedule = {
+    daysBetween: 1,
+  };
+  const { register, errors, handleSubmit } = useForm<BannerTestDeploySchedule>({
+    mode: 'onChange',
+    defaultValues,
+  });
+
+  useEffect(() => {
+    const isValid = Object.keys(errors).length === 0 || !deploySchedule;
+    onValidationChange(isValid);
+  }, [errors.daysBetween]);
+
+  const onRadioGroupChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    if (event.target.value === 'enabled') {
+      onDeployScheduleChange(defaultValues);
+    } else {
+      onDeployScheduleChange(undefined);
+    }
+  };
+
+  const onSubmit = (data: BannerTestDeploySchedule): void => {
+    onDeployScheduleChange(data);
+  };
+
+  return (
+    <FormControl>
+      <div className={classes.container}>
+        <RadioGroup value={deploySchedule ? 'enabled' : 'disabled'} onChange={onRadioGroupChange}>
+          <FormControlLabel
+            value="disabled"
+            key="disabled"
+            control={<Radio />}
+            label="Disabled - use channel deploy schedule"
+            disabled={isDisabled}
+          />
+          <FormControlLabel
+            value="enabled"
+            key="enabled"
+            control={<Radio />}
+            label="Enabled - override channel deploy schedule"
+            disabled={isDisabled}
+          />
+        </RadioGroup>
+
+        {deploySchedule && (
+          <TextField
+            inputRef={register({
+              required: EMPTY_ERROR_HELPER_TEXT,
+              validate: notNumberValidator,
+            })}
+            error={errors.daysBetween !== undefined}
+            helperText={errors.daysBetween?.message || 'Must be a number'}
+            onBlur={handleSubmit(onSubmit)}
+            name="daysBetween"
+            label="Days between deploys"
+            InputLabelProps={{ shrink: true }}
+            variant="outlined"
+            fullWidth
+            disabled={isDisabled}
+          />
+        )}
+      </div>
+    </FormControl>
+  );
+};
+
+export { DeployScheduleEditor };

public/src/models/banner.ts

@@ -35,6 +35,10 @@ export interface BannerVariant extends Variant {
   tickerSettings?: TickerSettings;
 }
 
+export interface BannerTestDeploySchedule {
+  daysBetween: number;
+}
+
 export interface BannerTest extends Test {
   name: string;
   nickname?: string;
@@ -47,4 +51,5 @@ export interface BannerTest extends Test {
   deviceType?: DeviceType;
   campaignName?: string;
   contextTargeting: PageContextTargeting;
+  deploySchedule?: BannerTestDeploySchedule;
 }