foreman_remote_execution 4.7.0 → 5.0.2

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/ScheduleType.js

@@ -1,25 +1,28 @@
-import React, { useState } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { FormGroup, Radio } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 
-export const ScheduleType = () => {
-  const [isFuture, setIsFuture] = useState(false);
-  return (
-    <FormGroup label={__('Schedule type')} fieldId="schedule-type">
-      <Radio
-        isChecked={!isFuture}
-        name="schedule-type"
-        onChange={() => setIsFuture(false)}
-        id="schedule-type-now"
-        label={__('Execute now')}
-      />
-      <Radio
-        isChecked={isFuture}
-        name="schedule-type"
-        onChange={() => setIsFuture(true)}
-        id="schedule-type-future"
-        label={__('Schedule for future execution')}
-      />
-    </FormGroup>
-  );
+export const ScheduleType = ({ isFuture, setIsFuture }) => (
+  <FormGroup label={__('Schedule type')} fieldId="schedule-type">
+    <Radio
+      isChecked={!isFuture}
+      name="schedule-type"
+      onChange={() => setIsFuture(false)}
+      id="schedule-type-now"
+      label={__('Execute now')}
+    />
+    <Radio
+      isChecked={isFuture}
+      name="schedule-type"
+      onChange={() => setIsFuture(true)}
+      id="schedule-type-future"
+      label={__('Schedule for future execution')}
+    />
+  </FormGroup>
+);
+
+ScheduleType.propTypes = {
+  isFuture: PropTypes.bool.isRequired,
+  setIsFuture: PropTypes.func.isRequired,
 };

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

@@ -1,35 +1,81 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, TextInput, Checkbox } from '@patternfly/react-core';
+import { FormGroup, Checkbox } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
+import { DateTimePicker } from '../form/DateTimePicker';
+import { helpLabel } from '../form/FormHelpers';
 
-// TODO: change to datepicker
-export const StartEndDates = ({ starts, setStarts, ends, setEnds }) => {
-  const [isNeverEnds, setIsNeverEnds] = useState(false);
+export const StartEndDates = ({
+  startsAt,
+  setStartsAt,
+  startsBefore,
+  setStartsBefore,
+  ends,
+  setEnds,
+  isNeverEnds,
+  setIsNeverEnds,
+  validEnd,
+  setValidEnd,
+  isFuture,
+  isStartBeforeDisabled,
+  isEndDisabled,
+}) => {
   const toggleIsNeverEnds = (checked, event) => {
     const value = event?.target?.checked;
     setIsNeverEnds(value);
-    setEnds('');
   };
+  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')} fieldId="start-date">
-        <TextInput
-          id="start-date"
-          value={starts}
-          type="text"
-          onChange={newValue => setStarts(newValue)}
-          placeholder="mm/dd/yy, hh:mm UTC"
+      <FormGroup label={__('Starts at')} fieldId="start-at-date">
+        <DateTimePicker
+          allowEmpty={!isFuture}
+          ariaLabel="starts at"
+          dateTime={startsAt}
+          setDateTime={setStartsAt}
         />
       </FormGroup>
-      <FormGroup label={__('Ends')} fieldId="end-date">
-        <TextInput
-          isDisabled={isNeverEnds}
-          id="end-date"
-          value={ends}
-          type="text"
-          onChange={newValue => setEnds(newValue)}
-          placeholder="mm/dd/yy, hh:mm UTC"
+
+      <FormGroup
+        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
+          isDisabled={isStartBeforeDisabled}
+          allowEmpty={!isFuture}
+          ariaLabel="starts before"
+          dateTime={startsBefore}
+          setDateTime={setStartsBefore}
+        />
+      </FormGroup>
+      <FormGroup
+        label={__('Ends')}
+        fieldId="end-date"
+        helperTextInvalid={__('End time needs to be after start time')}
+        validated={validEnd ? 'success' : 'error'}
+      >
+        <DateTimePicker
+          ariaLabel="ends"
+          dateTime={ends}
+          setDateTime={setEnds}
+          isDisabled={isNeverEnds || isEndDisabled}
         />
         <Checkbox
           label={__('Never ends')}
@@ -44,8 +90,17 @@ export const StartEndDates = ({ starts, setStarts, ends, setEnds }) => {
 };
 
 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,
 };