foreman_remote_execution 4.8.0 → 5.0.0

data/webpack/JobWizard/steps/Schedule/RepeatHour.js

@@ -0,0 +1,54 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  FormGroup,
+  Select,
+  SelectOption,
+  SelectVariant,
+} from '@patternfly/react-core';
+import { range } from 'lodash';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const RepeatHour = ({ repeatData, setRepeatData, setValid }) => {
+  const { minute } = repeatData;
+  useEffect(() => {
+    if (minute) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, minute]);
+  const [minuteOpen, setMinuteOpen] = useState(false);
+  return (
+    <FormGroup label={__('At minute')} isRequired>
+      <Select
+        id="repeat-on-hourly"
+        variant={SelectVariant.typeahead}
+        typeAheadAriaLabel="repeat-at-minute-typeahead"
+        onSelect={(event, selection) => {
+          setRepeatData({ minute: selection });
+          setMinuteOpen(false);
+        }}
+        selections={minute || ''}
+        onToggle={toggle => {
+          setMinuteOpen(toggle);
+        }}
+        isOpen={minuteOpen}
+        width={85}
+        menuAppendTo={() => document.querySelector('.pf-c-form.schedule-tab')}
+        toggleAriaLabel="select minute toggle"
+        validated={minute ? 'success' : 'error'}
+      >
+        {range(60).map(minuteNumber => (
+          <SelectOption key={minuteNumber} value={`${minuteNumber}`} />
+        ))}
+      </Select>
+    </FormGroup>
+  );
+};
+RepeatHour.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

data/webpack/JobWizard/steps/Schedule/RepeatMonth.js

@@ -0,0 +1,46 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { TextInput, FormGroup, ValidatedOptions } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { RepeatDaily } from './RepeatDaily';
+import { noop } from '../../../helpers';
+
+export const RepeatMonth = ({ repeatData, setRepeatData, setValid }) => {
+  const { days, at } = repeatData;
+  useEffect(() => {
+    if (days && at) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, days, at]);
+  return (
+    <>
+      <FormGroup label={__('Days')} isRequired>
+        <TextInput
+          isRequired
+          validated={days ? ValidatedOptions.noval : ValidatedOptions.error}
+          aria-label="days"
+          placeholder="1,2..."
+          type="text"
+          value={repeatData.days || ''}
+          onChange={newTime => {
+            setRepeatData({ ...repeatData, days: newTime });
+          }}
+        />
+      </FormGroup>
+      <RepeatDaily
+        repeatData={repeatData}
+        setRepeatData={setRepeatData}
+        setValid={noop}
+      />
+    </>
+  );
+};
+
+RepeatMonth.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

data/webpack/JobWizard/steps/Schedule/RepeatOn.js

@@ -4,51 +4,112 @@ import { TextInput, Grid, GridItem, FormGroup } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { SelectField } from '../form/SelectField';
 import { repeatTypes } from '../../JobWizardConstants';
+import { RepeatCron } from './RepeatCron';
+import { RepeatHour } from './RepeatHour';
+import { RepeatMonth } from './RepeatMonth';
+import { RepeatDaily } from './RepeatDaily';
+import { RepeatWeek } from './RepeatWeek';
 
 export const RepeatOn = ({
   repeatType,
   setRepeatType,
   repeatAmount,
   setRepeatAmount,
+  repeatData,
+  setRepeatData,
+  setValid,
 }) => {
   const [repeatValidated, setRepeatValidated] = useState('default');
   const handleRepeatInputChange = newValue => {
     setRepeatValidated(newValue >= 1 ? 'default' : 'error');
     setRepeatAmount(newValue);
   };
+
+  const getRepeatComponent = () => {
+    switch (repeatType) {
+      case repeatTypes.cronline:
+        return (
+          <RepeatCron
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.monthly:
+        return (
+          <RepeatMonth
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.weekly:
+        return (
+          <RepeatWeek
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.daily:
+        return (
+          <RepeatDaily
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.hourly:
+        return (
+          <RepeatHour
+            repeatData={repeatData}
+            setRepeatData={setRepeatData}
+            setValid={setValid}
+          />
+        );
+      case repeatTypes.noRepeat:
+      default:
+        return null;
+    }
+  };
   return (
-    <Grid>
-      <GridItem span={6}>
-        <SelectField
-          fieldId="repeat-select"
-          options={Object.values(repeatTypes)}
-          setValue={newValue => {
-            setRepeatType(newValue);
-            if (newValue === repeatTypes.noRepeat) {
-              setRepeatValidated('default');
-            }
-          }}
-          value={repeatType}
-        />
-      </GridItem>
-      <GridItem span={1} />
-      <GridItem span={5}>
-        <FormGroup
-          isInline
-          helperTextInvalid={__('Repeat amount can only be a positive number')}
-          validated={repeatValidated}
-        >
-          <TextInput
-            isDisabled={repeatType === repeatTypes.noRepeat}
-            id="repeat-amount"
-            value={repeatAmount}
-            type="text"
-            onChange={newValue => handleRepeatInputChange(newValue)}
-            placeholder={__('Repeat N times')}
+    <FormGroup label={__('Repeat On')}>
+      <Grid>
+        <GridItem span={6}>
+          <SelectField
+            isRequired
+            fieldId="repeat-select"
+            options={Object.values(repeatTypes)}
+            setValue={newValue => {
+              setRepeatType(newValue);
+              if (newValue === repeatTypes.noRepeat) {
+                setRepeatValidated('default');
+              }
+            }}
+            value={repeatType}
           />
-        </FormGroup>
-      </GridItem>
-    </Grid>
+        </GridItem>
+        <GridItem span={1} />
+        <GridItem span={5}>
+          <FormGroup
+            helperTextInvalid={__(
+              'Repeat amount can only be a positive number'
+            )}
+            validated={repeatValidated}
+          >
+            <TextInput
+              isDisabled={repeatType === repeatTypes.noRepeat}
+              id="repeat-amount"
+              value={repeatAmount}
+              type="text"
+              onChange={newValue => handleRepeatInputChange(newValue)}
+              placeholder={__('Repeat N times')}
+            />
+          </FormGroup>
+        </GridItem>
+        {getRepeatComponent()}
+      </Grid>
+    </FormGroup>
   );
 };
 
@@ -58,4 +119,7 @@ RepeatOn.propTypes = {
   repeatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     .isRequired,
   setRepeatAmount: PropTypes.func.isRequired,
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
 };

data/webpack/JobWizard/steps/Schedule/RepeatWeek.js

@@ -0,0 +1,70 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, Checkbox } from '@patternfly/react-core';
+import { translate as __, documentLocale } from 'foremanReact/common/I18n';
+import { RepeatDaily } from './RepeatDaily';
+import { noop } from '../../../helpers';
+
+const getWeekDays = () => {
+  const locale = documentLocale().replace(/-/g, '_');
+  const baseDate = new Date(Date.UTC(2017, 0, 2)); // just a Monday
+  const weekDays = [];
+  for (let i = 0; i < 7; i++) {
+    try {
+      weekDays.push(baseDate.toLocaleDateString(locale, { weekday: 'short' }));
+    } catch {
+      weekDays.push(baseDate.toLocaleDateString('en', { weekday: 'short' }));
+    }
+    baseDate.setDate(baseDate.getDate() + 1);
+  }
+  return weekDays;
+};
+
+export const RepeatWeek = ({ repeatData, setRepeatData, setValid }) => {
+  const { daysOfWeek, at } = repeatData;
+  useEffect(() => {
+    if (daysOfWeek && Object.values(daysOfWeek).includes(true) && at) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    return () => setValid(true);
+  }, [setValid, daysOfWeek, at]);
+  const days = getWeekDays();
+  const handleChangeDays = (checked, { target: { name } }) => {
+    setRepeatData({
+      ...repeatData,
+      daysOfWeek: { ...repeatData.daysOfWeek, [name]: checked },
+    });
+  };
+  return (
+    <>
+      <FormGroup label={__('Days of week')} isRequired>
+        <div id="repeat-on-weekly">
+          {days.map((day, index) => (
+            <Checkbox
+              aria-label={`${day} checkbox`}
+              key={index}
+              isChecked={daysOfWeek?.[index]}
+              name={index}
+              id={`repeat-on-day-${index}`}
+              onChange={handleChangeDays}
+              label={day}
+            />
+          ))}
+        </div>
+      </FormGroup>
+
+      <RepeatDaily
+        repeatData={repeatData}
+        setRepeatData={setRepeatData}
+        setValid={noop}
+      />
+    </>
+  );
+};
+RepeatWeek.propTypes = {
+  repeatData: PropTypes.object.isRequired,
+  setRepeatData: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};

data/webpack/JobWizard/steps/Schedule/StartEndDates.js

@@ -1,48 +1,81 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FormGroup, Checkbox } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { DateTimePicker } from '../form/DateTimePicker';
+import { helpLabel } from '../form/FormHelpers';
 
 export const StartEndDates = ({
-  starts,
-  setStarts,
+  startsAt,
+  setStartsAt,
+  startsBefore,
+  setStartsBefore,
   ends,
   setEnds,
   isNeverEnds,
   setIsNeverEnds,
+  validEnd,
+  setValidEnd,
+  isFuture,
+  isStartBeforeDisabled,
+  isEndDisabled,
 }) => {
   const toggleIsNeverEnds = (checked, event) => {
     const value = event?.target?.checked;
     setIsNeverEnds(value);
   };
-  const validateEndDate = () => {
-    if (isNeverEnds) return 'success';
-    if (!starts || !ends) return 'success';
-    if (new Date(starts).getTime() <= new Date(ends).getTime())
-      return 'success';
-    return 'error';
-  };
+  useEffect(() => {
+    if (isNeverEnds) setValidEnd(true);
+    else if ((!startsAt.length && !startsBefore.length) || !ends)
+      setValidEnd(true);
+    else if (
+      startsAt.length
+        ? new Date(startsAt).getTime() <= new Date(ends).getTime()
+        : new Date(startsBefore).getTime() <= new Date(ends).getTime()
+    )
+      setValidEnd(true);
+    else setValidEnd(false);
+  }, [startsAt, startsBefore, ends, isNeverEnds, setValidEnd]);
   return (
     <>
+      <FormGroup label={__('Starts at')} fieldId="start-at-date">
+        <DateTimePicker
+          allowEmpty={!isFuture}
+          ariaLabel="starts at"
+          dateTime={startsAt}
+          setDateTime={setStartsAt}
+        />
+      </FormGroup>
+
       <FormGroup
-        className="start-date"
-        label={__('Starts')}
-        fieldId="start-date"
+        label={__('Starts before')}
+        fieldId="start-before-date"
+        labelIcon={helpLabel(
+          __(
+            'Indicates that the action should be cancelled if it cannot be started before this time.'
+          ),
+          'start-before-date'
+        )}
       >
-        <DateTimePicker dateTime={starts} setDateTime={setStarts} />
+        <DateTimePicker
+          isDisabled={isStartBeforeDisabled}
+          allowEmpty={!isFuture}
+          ariaLabel="starts before"
+          dateTime={startsBefore}
+          setDateTime={setStartsBefore}
+        />
       </FormGroup>
       <FormGroup
-        className="end-date"
         label={__('Ends')}
         fieldId="end-date"
         helperTextInvalid={__('End time needs to be after start time')}
-        validated={validateEndDate()}
+        validated={validEnd ? 'success' : 'error'}
       >
         <DateTimePicker
+          ariaLabel="ends"
           dateTime={ends}
           setDateTime={setEnds}
-          isDisabled={isNeverEnds}
+          isDisabled={isNeverEnds || isEndDisabled}
         />
         <Checkbox
           label={__('Never ends')}
@@ -57,10 +90,17 @@ export const StartEndDates = ({
 };
 
 StartEndDates.propTypes = {
-  starts: PropTypes.string.isRequired,
-  setStarts: PropTypes.func.isRequired,
+  startsAt: PropTypes.string.isRequired,
+  setStartsAt: PropTypes.func.isRequired,
+  startsBefore: PropTypes.string.isRequired,
+  setStartsBefore: PropTypes.func.isRequired,
   ends: PropTypes.string.isRequired,
   setEnds: PropTypes.func.isRequired,
   isNeverEnds: PropTypes.bool.isRequired,
   setIsNeverEnds: PropTypes.func.isRequired,
+  validEnd: PropTypes.bool.isRequired,
+  setValidEnd: PropTypes.func.isRequired,
+  isFuture: PropTypes.bool.isRequired,
+  isStartBeforeDisabled: PropTypes.bool.isRequired,
+  isEndDisabled: PropTypes.bool.isRequired,
 };