foreman_remote_execution 4.5.5 → 4.8.0

data/webpack/JobWizard/steps/Schedule/__tests__/Schedule.test.js

@@ -0,0 +1,155 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { fireEvent, screen, render, act } from '@testing-library/react';
+import * as api from 'foremanReact/redux/API';
+import { JobWizard } from '../../../JobWizard';
+import * as selectors from '../../../JobWizardSelectors';
+import { jobTemplate, jobTemplateResponse } from '../../../__tests__/fixtures';
+
+const lodash = require('lodash');
+
+lodash.debounce = fn => fn;
+jest.spyOn(api, 'get');
+jest.spyOn(selectors, 'selectJobTemplate');
+jest.spyOn(selectors, 'selectJobTemplates');
+jest.spyOn(selectors, 'selectJobCategories');
+
+const jobCategories = ['Ansible Commands', 'Puppet', 'Services'];
+
+selectors.selectJobCategories.mockImplementation(() => jobCategories);
+
+selectors.selectJobTemplates.mockImplementation(() => [
+  jobTemplate,
+  { ...jobTemplate, id: 2, name: 'template2' },
+]);
+selectors.selectJobTemplate.mockImplementation(() => jobTemplateResponse);
+api.get.mockImplementation(({ handleSuccess, ...action }) => {
+  if (action.key === 'JOB_CATEGORIES') {
+    handleSuccess && handleSuccess({ data: { job_categories: jobCategories } });
+  } else if (action.key === 'JOB_TEMPLATE') {
+    handleSuccess &&
+      handleSuccess({
+        data: jobTemplateResponse,
+      });
+  } else if (action.key === 'JOB_TEMPLATES') {
+    handleSuccess &&
+      handleSuccess({
+        data: { results: [jobTemplateResponse.job_template] },
+      });
+  }
+  return { type: 'get', ...action };
+});
+
+const mockStore = configureMockStore([]);
+const store = mockStore({});
+jest.useFakeTimers();
+
+describe('Schedule', () => {
+  it('should save date time between steps ', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard />
+      </Provider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Schedule'));
+    });
+    const newStartDate = '2020/03/12';
+    const newStartTime = '12:03';
+    const newEndsDate = '2030/03/12';
+    const newEndsTime = '17:34';
+    const [startsDateField, endsDateField] = screen.getAllByPlaceholderText(
+      'yyyy/mm/dd'
+    );
+    const [startsTimeField, endsTimeField] = screen.getAllByPlaceholderText(
+      'hh:mm'
+    );
+    await act(async () => {
+      await fireEvent.change(startsDateField, {
+        target: { value: newStartDate },
+      });
+      await fireEvent.change(startsTimeField, {
+        target: { value: newStartTime },
+      });
+      await fireEvent.change(endsDateField, { target: { value: newEndsDate } });
+      await fireEvent.change(endsTimeField, { target: { value: newEndsTime } });
+      jest.runAllTimers(); // to handle pf4 date picket popover useTimer
+    });
+    await act(async () => {
+      fireEvent.click(screen.getByText('Category and Template'));
+    });
+    expect(screen.getAllByText('Category and Template')).toHaveLength(3);
+
+    await act(async () => {
+      fireEvent.click(screen.getByText('Schedule'));
+      jest.runAllTimers();
+    });
+    expect(startsDateField.value).toBe(newStartDate);
+    expect(startsTimeField.value).toBe(newStartTime);
+    expect(endsDateField.value).toBe(newEndsDate);
+    expect(endsTimeField.value).toBe(newEndsTime);
+  });
+  it('should remove start date time on execute now', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard />
+      </Provider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Schedule'));
+    });
+    const executeNow = screen.getByLabelText('Execute now');
+    const executeFuture = screen.getByLabelText(
+      'Schedule for future execution'
+    );
+    expect(executeNow.checked).toBeTruthy();
+    const newStartDate = '2020/03/12';
+    const newStartTime = '12:03';
+    const [startsDateField] = screen.getAllByPlaceholderText('yyyy/mm/dd');
+    const [startsTimeField] = screen.getAllByPlaceholderText('hh:mm');
+    await act(async () => {
+      await fireEvent.change(startsDateField, {
+        target: { value: newStartDate },
+      });
+      await fireEvent.change(startsTimeField, {
+        target: { value: newStartTime },
+      });
+      await jest.runOnlyPendingTimers();
+    });
+    expect(startsDateField.value).toBe(newStartDate);
+    expect(startsTimeField.value).toBe(newStartTime);
+    expect(executeFuture.checked).toBeTruthy();
+    await act(async () => {
+      await fireEvent.click(executeNow);
+    });
+    expect(executeNow.checked).toBeTruthy();
+    expect(startsDateField.value).toBe('');
+    expect(startsTimeField.value).toBe('');
+  });
+
+  it('should disable end date on never ends', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard />
+      </Provider>
+    );
+    await act(async () => {
+      await fireEvent.click(screen.getByText('Schedule'));
+      jest.runAllTimers();
+    });
+    const neverEnds = screen.getByLabelText('Never ends');
+    expect(neverEnds.checked).toBeFalsy();
+
+    const [, endsDateField] = screen.getAllByPlaceholderText('yyyy/mm/dd');
+    const [, endsTimeField] = screen.getAllByPlaceholderText('hh:mm');
+    expect(endsDateField.disabled).toBeFalsy();
+    expect(endsTimeField.disabled).toBeFalsy();
+    await act(async () => {
+      fireEvent.click(neverEnds);
+    });
+    expect(neverEnds.checked).toBeTruthy();
+    expect(endsDateField.disabled).toBeTruthy();
+    expect(endsTimeField.disabled).toBeTruthy();
+  });
+});

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

@@ -1,22 +1,23 @@
 import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, act } from '@testing-library/react';
 import { StartEndDates } from '../StartEndDates';
 
 const setEnds = jest.fn();
+const setIsNeverEnds = jest.fn();
 const props = {
   starts: '',
   setStarts: jest.fn(),
   ends: 'some-end-date',
   setEnds,
+  setIsNeverEnds,
+  isNeverEnds: false,
 };
 
 describe('StartEndDates', () => {
-  it('never ends', () => {
-    render(<StartEndDates {...props} />);
-    const neverEnds = screen.getByLabelText('Never ends', {
-      selector: 'input',
-    });
-    fireEvent.click(neverEnds);
-    expect(setEnds).toBeCalledWith('');
+  it('never ends', async () => {
+    await act(async () => render(<StartEndDates {...props} />));
+    const neverEnds = screen.getByRole('checkbox', { name: 'Never ends' });
+    await act(async () => fireEvent.click(neverEnds));
+    expect(setIsNeverEnds).toBeCalledWith(true);
   });
 });

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

@@ -1,41 +1,102 @@
-import React, { useState } from 'react';
-import { Title, Button, Form } from '@patternfly/react-core';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Form } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { ScheduleType } from './ScheduleType';
 import { RepeatOn } from './RepeatOn';
 import { QueryType } from './QueryType';
 import { StartEndDates } from './StartEndDates';
-import { repeatTypes } from '../../JobWizardConstants';
+import { WIZARD_TITLES } from '../../JobWizardConstants';
+import { WizardTitle } from '../form/WizardTitle';
 
-const Schedule = () => {
-  const [repeatType, setRepeatType] = useState(repeatTypes.noRepeat);
-  const [repeatAmount, setRepeatAmount] = useState('');
-  const [starts, setStarts] = useState('');
-  const [ends, setEnds] = useState('');
+const Schedule = ({ scheduleValue, setScheduleValue }) => {
+  const { repeatType, repeatAmount, starts, ends, isNeverEnds } = scheduleValue;
 
   return (
-    <Form className="schedule-tab">
-      <Title headingLevel="h2">{__('Schedule')}</Title>
-      <ScheduleType />
+    <>
+      <WizardTitle title={WIZARD_TITLES.schedule} />
+      <Form className="schedule-tab">
+        <ScheduleType
+          isFuture={scheduleValue.isFuture}
+          setIsFuture={newValue => {
+            if (!newValue) {
+              // if schedule type is execute now
+              setScheduleValue(current => ({
+                ...current,
+                starts: '',
+              }));
+            }
+            setScheduleValue(current => ({
+              ...current,
+              isFuture: newValue,
+            }));
+          }}
+        />
 
-      <RepeatOn
-        repeatType={repeatType}
-        setRepeatType={setRepeatType}
-        repeatAmount={repeatAmount}
-        setRepeatAmount={setRepeatAmount}
-      />
-      <StartEndDates
-        starts={starts}
-        setStarts={setStarts}
-        ends={ends}
-        setEnds={setEnds}
-      />
-      <Button variant="link" className="advanced-scheduling-button" isInline>
-        {__('Advanced scheduling')}
-      </Button>
-      <QueryType />
-    </Form>
+        <RepeatOn
+          repeatType={repeatType}
+          setRepeatType={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatType: newValue,
+            }));
+          }}
+          repeatAmount={repeatAmount}
+          setRepeatAmount={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatAmount: newValue,
+            }));
+          }}
+        />
+        <StartEndDates
+          starts={starts}
+          setStarts={newValue => {
+            if (!scheduleValue.isFuture) {
+              setScheduleValue(current => ({
+                ...current,
+                isFuture: true,
+              }));
+            }
+            setScheduleValue(current => ({
+              ...current,
+              starts: newValue,
+            }));
+          }}
+          ends={ends}
+          setEnds={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              ends: newValue,
+            }));
+          }}
+          isNeverEnds={isNeverEnds}
+          setIsNeverEnds={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              isNeverEnds: newValue,
+            }));
+          }}
+        />
+        <Button variant="link" className="advanced-scheduling-button" isInline>
+          {__('Advanced scheduling')}
+        </Button>
+        <QueryType />
+      </Form>
+    </>
   );
 };
 
+Schedule.propTypes = {
+  scheduleValue: PropTypes.shape({
+    repeatType: PropTypes.string.isRequired,
+    repeatAmount: PropTypes.string,
+    starts: PropTypes.string,
+    ends: PropTypes.string,
+    isFuture: PropTypes.bool,
+    isNeverEnds: PropTypes.bool,
+  }).isRequired,
+  setScheduleValue: PropTypes.func.isRequired,
+};
+
 export default Schedule;

data/webpack/JobWizard/steps/form/DateTimePicker.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DatePicker, TimePicker } from '@patternfly/react-core';
+import { debounce } from 'lodash';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const DateTimePicker = ({ dateTime, setDateTime, isDisabled }) => {
+  const dateFormat = date =>
+    `${date.getFullYear()}/${(date.getMonth() + 1)
+      .toString()
+      .padStart(2, '0')}/${date
+      .getDate()
+      .toString()
+      .padStart(2, '0')}`;
+
+  const dateObject = dateTime ? new Date(dateTime) : new Date();
+  const formattedDate = dateTime ? dateFormat(dateObject) : '';
+  const dateParse = date =>
+    new Date(`${date} ${dateObject.getHours()}:${dateObject.getMinutes()}`);
+
+  const isValidDate = date => date && !Number.isNaN(date.getTime());
+
+  const isValidTime = time => {
+    if (!time) return false;
+    const split = time.split(':');
+    if (!(split[0].length === 2 && split[1].length === 2)) return false;
+    if (isValidDate(new Date(`${formattedDate} ${time}`))) return true;
+    if (!formattedDate.length && isValidDate(new Date(`01/01/2020 ${time}`))) {
+      const today = new Date();
+      today.setHours(split[0]);
+      today.setMinutes(split[1]);
+      setDateTime(today.toString());
+    }
+    return false;
+  };
+
+  const onDateChange = newDate => {
+    const parsedNewDate = new Date(newDate);
+
+    if (isValidDate(parsedNewDate)) {
+      parsedNewDate.setHours(dateObject.getHours());
+      parsedNewDate.setMinutes(dateObject.getMinutes());
+      setDateTime(parsedNewDate.toString());
+    }
+  };
+
+  const onTimeChange = newTime => {
+    if (isValidTime(newTime)) {
+      const parsedNewTime = new Date(`${formattedDate} ${newTime}`);
+      setDateTime(parsedNewTime.toString());
+    }
+  };
+  return (
+    <>
+      <DatePicker
+        value={formattedDate}
+        placeholder="yyyy/mm/dd"
+        onChange={debounce(onDateChange, 1000, {
+          leading: false,
+          trailing: true,
+        })}
+        dateFormat={dateFormat}
+        dateParse={dateParse}
+        isDisabled={isDisabled}
+        invalidFormatText={__('Invalid date')}
+      />
+      <TimePicker
+        className="time-picker"
+        time={dateTime ? dateObject.toString() : ''}
+        inputProps={dateTime ? {} : { value: '' }}
+        placeholder="hh:mm"
+        onChange={debounce(onTimeChange, 1000, {
+          leading: false,
+          trailing: true,
+        })}
+        is24Hour
+        isDisabled={isDisabled}
+        invalidFormatErrorMessage={__('Invalid time format')}
+        menuAppendTo={() => document.body}
+      />
+    </>
+  );
+};
+
+DateTimePicker.propTypes = {
+  dateTime: PropTypes.string,
+  setDateTime: PropTypes.func.isRequired,
+  isDisabled: PropTypes.bool,
+};
+DateTimePicker.defaultProps = {
+  dateTime: null,
+  isDisabled: false,
+};

data/webpack/JobWizard/steps/form/Formatter.js

@@ -22,11 +22,12 @@ const TemplateSearchField = ({
     setValue({ ...values, [name]: searchQuery });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
+  const id = name.replace(/ /g, '-');
   return (
     <FormGroup
       label={name}
       labelIcon={helpLabel(labelText, name)}
-      fieldId={name}
+      fieldId={id}
       isRequired={required}
       className="foreman-search-field"
     >
@@ -54,16 +55,16 @@ export const formatter = (input, values, setValue) => {
   const { name, required, hidden_value: hidden } = input;
   const labelText = input.description;
   const value = values[name];
-
+  const id = name.replace(/ /g, '-');
   if (isSelectType) {
     const options = input.options.split(/\r?\n/).map(option => option.trim());
     return (
       <SelectField
         aria-label={name}
-        key={name}
+        key={id}
         isRequired={required}
         label={name}
-        fieldId={name}
+        fieldId={id}
         options={options}
         labelIcon={helpLabel(labelText, name)}
         value={value}
@@ -77,7 +78,7 @@ export const formatter = (input, values, setValue) => {
         key={name}
         label={name}
         labelIcon={helpLabel(labelText, name)}
-        fieldId={name}
+        fieldId={id}
         isRequired={required}
       >
         <TextArea
@@ -85,7 +86,7 @@ export const formatter = (input, values, setValue) => {
           className={hidden ? 'masked-input' : null}
           required={required}
           rows={2}
-          id={name}
+          id={id}
           value={value}
           onChange={newValue => setValue({ ...values, [name]: newValue })}
         />
@@ -98,7 +99,7 @@ export const formatter = (input, values, setValue) => {
         key={name}
         label={name}
         labelIcon={helpLabel(labelText, name)}
-        fieldId={name}
+        fieldId={id}
         isRequired={required}
       >
         <TextInput
@@ -106,7 +107,7 @@ export const formatter = (input, values, setValue) => {
           placeholder="YYYY-mm-dd HH:MM"
           className={hidden ? 'masked-input' : null}
           required={required}
-          id={name}
+          id={id}
           type="text"
           value={value}
           onChange={newValue => setValue({ ...values, [name]: newValue })}
@@ -119,7 +120,7 @@ export const formatter = (input, values, setValue) => {
     // TODO: get text from redux autocomplete
     return (
       <TemplateSearchField
-        key={name}
+        key={id}
         name={name}
         defaultValue={value}
         controller={controller}