foreman_remote_execution 4.6.0 → 5.0.1

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

@@ -0,0 +1,178 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Form } from '@patternfly/react-core';
+import { ScheduleType } from './ScheduleType';
+import { RepeatOn } from './RepeatOn';
+import { QueryType } from './QueryType';
+import { StartEndDates } from './StartEndDates';
+import { WIZARD_TITLES, repeatTypes } from '../../JobWizardConstants';
+import { PurposeField } from './PurposeField';
+import { WizardTitle } from '../form/WizardTitle';
+
+const Schedule = ({ scheduleValue, setScheduleValue, setValid }) => {
+  const {
+    repeatType,
+    repeatAmount,
+    repeatData,
+    startsAt,
+    startsBefore,
+    ends,
+    isNeverEnds,
+    isFuture,
+    isTypeStatic,
+    purpose,
+  } = scheduleValue;
+  const [validEnd, setValidEnd] = useState(true);
+  const [repeatValid, setRepeatValid] = useState(true);
+
+  useEffect(() => {
+    if (!validEnd || !repeatValid) {
+      setValid(false);
+    } else if (isFuture && (startsAt.length || startsBefore.length)) {
+      setValid(true);
+    } else if (!isFuture) {
+      setValid(true);
+    } else {
+      setValid(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startsAt, startsBefore, isFuture, validEnd, repeatValid]);
+  return (
+    <>
+      <WizardTitle title={WIZARD_TITLES.schedule} />
+      <Form className="schedule-tab">
+        <ScheduleType
+          isFuture={isFuture}
+          setIsFuture={newValue => {
+            if (!newValue) {
+              // if schedule type is execute now
+              setScheduleValue(current => ({
+                ...current,
+                startsAt: '',
+                startsBefore: '',
+                isFuture: newValue,
+              }));
+            } else {
+              setScheduleValue(current => ({
+                ...current,
+                startsAt: new Date().toISOString(),
+                isFuture: newValue,
+              }));
+            }
+          }}
+        />
+
+        <RepeatOn
+          repeatType={repeatType}
+          repeatData={repeatData}
+          setRepeatType={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatType: newValue,
+              startsBefore: '',
+            }));
+          }}
+          setRepeatData={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatData: newValue,
+            }));
+          }}
+          repeatAmount={repeatAmount}
+          setRepeatAmount={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              repeatAmount: newValue,
+            }));
+          }}
+          setValid={setRepeatValid}
+        />
+        <StartEndDates
+          startsAt={startsAt}
+          setStartsAt={newValue => {
+            if (!isFuture) {
+              setScheduleValue(current => ({
+                ...current,
+                isFuture: true,
+              }));
+            }
+            setScheduleValue(current => ({
+              ...current,
+              startsAt: newValue,
+            }));
+          }}
+          startsBefore={startsBefore}
+          setStartsBefore={newValue => {
+            if (!isFuture) {
+              setScheduleValue(current => ({
+                ...current,
+                isFuture: true,
+              }));
+            }
+            setScheduleValue(current => ({
+              ...current,
+              startsBefore: newValue,
+            }));
+          }}
+          ends={ends}
+          setEnds={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              ends: newValue,
+            }));
+          }}
+          isNeverEnds={isNeverEnds}
+          setIsNeverEnds={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              isNeverEnds: newValue,
+            }));
+          }}
+          validEnd={validEnd}
+          setValidEnd={setValidEnd}
+          isFuture={isFuture}
+          isStartBeforeDisabled={repeatType !== repeatTypes.noRepeat}
+          isEndDisabled={repeatType === repeatTypes.noRepeat}
+        />
+        <QueryType
+          isTypeStatic={isTypeStatic}
+          setIsTypeStatic={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              isTypeStatic: newValue,
+            }));
+          }}
+        />
+        <PurposeField
+          isDisabled={repeatType === repeatTypes.noRepeat}
+          purpose={purpose}
+          setPurpose={newValue => {
+            setScheduleValue(current => ({
+              ...current,
+              purpose: newValue,
+            }));
+          }}
+        />
+      </Form>
+    </>
+  );
+};
+
+Schedule.propTypes = {
+  scheduleValue: PropTypes.shape({
+    repeatType: PropTypes.string.isRequired,
+    repeatAmount: PropTypes.string,
+    repeatData: PropTypes.object,
+    startsAt: PropTypes.string,
+    startsBefore: PropTypes.string,
+    ends: PropTypes.string,
+    isFuture: PropTypes.bool,
+    isNeverEnds: PropTypes.bool,
+    isTypeStatic: PropTypes.bool,
+    purpose: PropTypes.string,
+  }).isRequired,
+  setScheduleValue: PropTypes.func.isRequired,
+  setValid: PropTypes.func.isRequired,
+};
+
+export default Schedule;

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

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  DatePicker,
+  TimePicker,
+  ValidatedOptions,
+} from '@patternfly/react-core';
+import { debounce } from 'lodash';
+import { translate as __, documentLocale } from 'foremanReact/common/I18n';
+
+export const DateTimePicker = ({
+  dateTime,
+  setDateTime,
+  isDisabled,
+  ariaLabel,
+  allowEmpty,
+}) => {
+  const [validated, setValidated] = useState();
+  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 (!newDate.length && allowEmpty) {
+      setDateTime('');
+      setValidated(ValidatedOptions.noval);
+    } else if (isValidDate(parsedNewDate)) {
+      parsedNewDate.setHours(dateObject.getHours());
+      parsedNewDate.setMinutes(dateObject.getMinutes());
+      setDateTime(parsedNewDate.toString());
+      setValidated(ValidatedOptions.noval);
+    } else {
+      setValidated(ValidatedOptions.error);
+    }
+  };
+
+  const onTimeChange = newTime => {
+    if (!newTime.length && allowEmpty) {
+      const parsedNewTime = new Date(`${formattedDate} 00:00`);
+      setDateTime(parsedNewTime.toString());
+      setValidated(ValidatedOptions.noval);
+    } else if (isValidTime(newTime)) {
+      const parsedNewTime = new Date(`${formattedDate} ${newTime}`);
+      setDateTime(parsedNewTime.toString());
+      setValidated(ValidatedOptions.noval);
+    } else {
+      setValidated(ValidatedOptions.error);
+    }
+  };
+  return (
+    <>
+      <DatePicker
+        aria-label={`${ariaLabel} datepicker`}
+        value={formattedDate}
+        placeholder="yyyy/mm/dd"
+        onChange={debounce(onDateChange, 1000, {
+          leading: false,
+          trailing: true,
+        })}
+        dateFormat={dateFormat}
+        dateParse={dateParse}
+        isDisabled={isDisabled}
+        locale={documentLocale()}
+        invalidFormatText={
+          validated === ValidatedOptions.error ? __('Invalid date') : ''
+        }
+        inputProps={{ validated }}
+      />
+      <TimePicker
+        aria-label={`${ariaLabel} 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,
+  ariaLabel: PropTypes.string,
+  allowEmpty: PropTypes.bool,
+};
+DateTimePicker.defaultProps = {
+  dateTime: null,
+  isDisabled: false,
+  ariaLabel: '',
+  allowEmpty: true,
+};

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

@@ -8,6 +8,7 @@ export const helpLabel = (text, id) => {
   return (
     <Popover id={`${id}-help`} bodyContent={text} aria-label="help-text">
       <button
+        type="button"
         aria-label={__('open-help-tooltip-button')}
         onClick={e => e.preventDefault()}
         className="pf-c-form__group-label-help"
@@ -17,3 +18,7 @@ export const helpLabel = (text, id) => {
     </Popover>
   );
 };
+
+export const isPositiveNumber = text => parseInt(text, 10) > 0;
+
+export const isValidDate = d => d instanceof Date && !Number.isNaN(d);

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

@@ -0,0 +1,181 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { FormGroup, TextInput, TextArea } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import SearchBar from 'foremanReact/components/SearchBar';
+import { getControllerSearchProps } from 'foremanReact/constants';
+import { helpLabel } from './FormHelpers';
+import { SelectField } from './SelectField';
+import { ResourceSelectAPI } from './ResourceSelect';
+import { noop } from '../../../helpers';
+
+const TemplateSearchField = ({
+  name,
+  controller,
+  url,
+  labelText,
+  required,
+  defaultValue,
+  setValue,
+  values,
+}) => {
+  const searchQuery = useSelector(
+    state => state.autocomplete?.[name]?.searchQuery
+  );
+  useEffect(() => {
+    setValue({ ...values, [name]: searchQuery });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchQuery]);
+  const id = name.replace(/ /g, '-');
+  const props = getControllerSearchProps(controller.replace('/', '_'), name);
+  return (
+    <FormGroup
+      label={name}
+      labelIcon={helpLabel(labelText, name)}
+      fieldId={id}
+      isRequired={required}
+      className="foreman-search-field"
+    >
+      <SearchBar
+        initialQuery={defaultValue}
+        data={{
+          ...props,
+          autocomplete: {
+            id: name,
+            url,
+            useKeyShortcuts: true,
+          },
+          bookmarks: null,
+        }}
+        onSearch={noop}
+      />
+    </FormGroup>
+  );
+};
+
+export const formatter = (input, values, setValue) => {
+  const isSelectType = !!input?.options;
+  const inputType = input.value_type;
+  const isTextType = inputType === 'plain' || !inputType; // null defaults to plain
+
+  const {
+    name,
+    required,
+    hidden_value: hidden,
+    resource_type: resourceType,
+    value_type: valueType,
+  } = input;
+  const labelText = input.description;
+  const value = values[name];
+  const id = name.replace(/ /g, '-');
+  if (valueType === 'resource') {
+    return (
+      <FormGroup
+        label={name}
+        fieldId={id}
+        labelIcon={helpLabel(labelText, name)}
+        isRequired={required}
+        key={id}
+      >
+        <ResourceSelectAPI
+          name={name}
+          apiKey={resourceType.replace('::', '')}
+          url={`/ui_job_wizard/resources?resource=${resourceType}`}
+          selected={value || {}}
+          setSelected={newValue => setValue({ ...values, [name]: newValue })}
+        />
+      </FormGroup>
+    );
+  }
+  if (isSelectType) {
+    const options = input.options.split(/\r?\n/).map(option => option.trim());
+    return (
+      <SelectField
+        key={id}
+        isRequired={required}
+        label={name}
+        fieldId={id}
+        options={options}
+        labelIcon={helpLabel(labelText, name)}
+        value={value}
+        setValue={newValue => setValue({ ...values, [name]: newValue })}
+      />
+    );
+  }
+  if (isTextType) {
+    return (
+      <FormGroup
+        key={name}
+        label={name}
+        labelIcon={helpLabel(labelText, name)}
+        fieldId={id}
+        isRequired={required}
+      >
+        <TextArea
+          aria-label={name}
+          className={hidden ? 'masked-input' : null}
+          required={required}
+          rows={2}
+          id={id}
+          value={value}
+          onChange={newValue => setValue({ ...values, [name]: newValue })}
+        />
+      </FormGroup>
+    );
+  }
+  if (inputType === 'date') {
+    return (
+      <FormGroup
+        key={name}
+        label={name}
+        labelIcon={helpLabel(labelText, name)}
+        fieldId={id}
+        isRequired={required}
+      >
+        <TextInput
+          aria-label={name}
+          placeholder="YYYY-mm-dd HH:MM"
+          className={hidden ? 'masked-input' : null}
+          required={required}
+          id={id}
+          type="text"
+          value={value}
+          onChange={newValue => setValue({ ...values, [name]: newValue })}
+        />
+      </FormGroup>
+    );
+  }
+  if (inputType === 'search') {
+    const controller = input.resource_type_tableize;
+    return (
+      <TemplateSearchField
+        key={id}
+        name={name}
+        defaultValue={value}
+        controller={resourceType}
+        url={`/${controller}/auto_complete_search`}
+        labelText={labelText}
+        required={required}
+        setValue={setValue}
+        values={values}
+      />
+    );
+  }
+
+  return null;
+};
+
+TemplateSearchField.propTypes = {
+  name: PropTypes.string.isRequired,
+  controller: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
+  labelText: PropTypes.string,
+  required: PropTypes.bool.isRequired,
+  defaultValue: PropTypes.string,
+  setValue: PropTypes.func.isRequired,
+  values: PropTypes.object.isRequired,
+};
+TemplateSearchField.defaultProps = {
+  labelText: null,
+  defaultValue: '',
+};

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

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, TextInput, ValidatedOptions } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { isPositiveNumber } from './FormHelpers';
+
+export const NumberInput = ({ formProps, inputProps }) => {
+  const [validated, setValidated] = useState();
+  const name = inputProps.id.replace(/-/g, ' ');
+  return (
+    <FormGroup
+      {...formProps}
+      helperTextInvalid={__('Has to be a positive number')}
+      validated={validated}
+    >
+      <TextInput
+        aria-label={name}
+        type="text"
+        {...inputProps}
+        onChange={newValue => {
+          setValidated(
+            isPositiveNumber(newValue) || newValue === ''
+              ? ValidatedOptions.noval
+              : ValidatedOptions.error
+          );
+          inputProps.onChange(newValue);
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+NumberInput.propTypes = {
+  formProps: PropTypes.object.isRequired,
+  inputProps: PropTypes.object.isRequired,
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import URI from 'urijs';
+import { get } from 'foremanReact/redux/API';
+import { selectResponse, selectIsLoading } from '../../JobWizardSelectors';
+import { SearchSelect } from '../form/SearchSelect';
+
+export const useNameSearchAPI = (apiKey, url) => {
+  const dispatch = useDispatch();
+  const uri = new URI(url);
+  const onSearch = search => {
+    dispatch(
+      get({
+        key: apiKey,
+        url: uri.addSearch({
+          name: search,
+        }),
+      })
+    );
+  };
+
+  const response = useSelector(state => selectResponse(state, apiKey));
+  const isLoading = useSelector(state => selectIsLoading(state, apiKey));
+  return [onSearch, response, isLoading];
+};
+
+export const ResourceSelectAPI = props => (
+  <SearchSelect {...props} useNameSearch={useNameSearchAPI} />
+);

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

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Select, SelectOption, SelectVariant } from '@patternfly/react-core';
+import Immutable from 'seamless-immutable';
+import { sprintf, translate as __ } from 'foremanReact/common/I18n';
+
+export const maxResults = 100;
+
+export const SearchSelect = ({
+  name,
+  selected,
+  setSelected,
+  placeholderText,
+  useNameSearch,
+  apiKey,
+  url,
+  variant,
+}) => {
+  const [onSearch, response, isLoading] = useNameSearch(apiKey, url);
+  const [isOpen, setIsOpen] = useState(false);
+  const [typingTimeout, setTypingTimeout] = useState(null);
+  const autoSearchDelay = 500;
+  useEffect(() => {
+    onSearch(selected.name || '');
+    if (typingTimeout) {
+      return () => clearTimeout(typingTimeout);
+    }
+    return undefined;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  let selectOptions = [];
+  if (response.subtotal > maxResults) {
+    selectOptions = [
+      <SelectOption
+        isDisabled
+        key={0}
+        description={__('Please refine your search.')}
+      >
+        {sprintf(
+          __('You have %s results to display. Showing first %s results'),
+          response.subtotal,
+          maxResults
+        )}
+      </SelectOption>,
+    ];
+  }
+  selectOptions = [
+    ...selectOptions,
+    ...Immutable.asMutable(response?.results || [])?.map((result, index) => (
+      <SelectOption key={index + 1} value={result.id}>
+        {result.name}
+      </SelectOption>
+    )),
+  ];
+
+  const onSelect = (event, selection) => {
+    if (variant === SelectVariant.typeahead) {
+      setSelected(response.results.find(r => r.id === selection)); // saving the name and id so we will have access to the name between steps
+    } else if (variant === SelectVariant.typeaheadMulti) {
+      if (selected.map(({ id }) => id).includes(selection)) {
+        setSelected(currentSelected =>
+          currentSelected.filter(({ id }) => id !== selection)
+        );
+      } else {
+        setSelected(currentSelected => [
+          ...currentSelected,
+          response.results.find(r => r.id === selection),
+        ]);
+      }
+    }
+  };
+  const autoSearch = searchTerm => {
+    if (typingTimeout) clearTimeout(typingTimeout);
+    setTypingTimeout(setTimeout(() => onSearch(searchTerm), autoSearchDelay));
+  };
+  return (
+    <Select
+      toggleAriaLabel={`${name} toggle`}
+      chipGroupComponent={<></>}
+      variant={variant}
+      selections={
+        variant === SelectVariant.typeahead
+          ? selected.id
+          : selected.map(({ id }) => id)
+      }
+      loadingVariant={isLoading ? 'spinner' : null}
+      onSelect={onSelect}
+      onToggle={setIsOpen}
+      isOpen={isOpen}
+      className="without_select2"
+      maxHeight="45vh"
+      onTypeaheadInputChanged={value => {
+        autoSearch(value || '');
+      }}
+      placeholderText={placeholderText}
+      onFilter={() => null} // https://github.com/patternfly/patternfly-react/issues/6321
+      typeAheadAriaLabel={`${name} typeahead input`}
+    >
+      {selectOptions}
+    </Select>
+  );
+};
+
+SearchSelect.propTypes = {
+  name: PropTypes.string,
+  selected: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  setSelected: PropTypes.func.isRequired,
+  placeholderText: PropTypes.string,
+  apiKey: PropTypes.string.isRequired,
+  url: PropTypes.string,
+  useNameSearch: PropTypes.func.isRequired,
+  variant: PropTypes.string,
+};
+
+SearchSelect.defaultProps = {
+  name: 'typeahead select',
+  selected: {},
+  placeholderText: '',
+  url: '',
+  variant: SelectVariant.typeahead,
+};