foreman_remote_execution 4.3.1 → 4.5.2

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

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { FormGroup, Radio } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { helpLabel } from '../form/FormHelpers';
+
+export const QueryType = () => {
+  const [isTypeStatic, setIsTypeStatic] = useState(true);
+  return (
+    <FormGroup
+      label={__('Query type')}
+      fieldId="query-type"
+      labelIcon={helpLabel(
+        <p>
+          {__('Type has impact on when is the query evaluated to hosts.')}
+          <br />
+          <ul>
+            <li>
+              <b>{__('Static')}</b> -{' '}
+              {__('evaluates just after you submit this form')}
+            </li>
+            <li>
+              <b>{__('Dynamic')}</b> -{' '}
+              {__(
+                "evaluates just before the execution is started, so if it's planed in future, targeted hosts set may change before it"
+              )}
+            </li>
+          </ul>
+        </p>,
+        'query-type'
+      )}
+    >
+      <Radio
+        isChecked={isTypeStatic}
+        name="query-type"
+        onChange={() => setIsTypeStatic(true)}
+        id="query-type-static"
+        label={__('Static query')}
+      />
+      <Radio
+        isChecked={!isTypeStatic}
+        name="query-type"
+        onChange={() => setIsTypeStatic(false)}
+        id="query-type-dynamic"
+        label={__('Dynamic query')}
+      />
+    </FormGroup>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+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';
+
+export const RepeatOn = ({
+  repeatType,
+  setRepeatType,
+  repeatAmount,
+  setRepeatAmount,
+}) => {
+  const [repeatValidated, setRepeatValidated] = useState('default');
+  const handleRepeatInputChange = newValue => {
+    setRepeatValidated(newValue >= 1 ? 'default' : 'error');
+    setRepeatAmount(newValue);
+  };
+  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>
+      </GridItem>
+    </Grid>
+  );
+};
+
+RepeatOn.propTypes = {
+  repeatType: PropTypes.oneOf(Object.values(repeatTypes)).isRequired,
+  setRepeatType: PropTypes.func.isRequired,
+  repeatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    .isRequired,
+  setRepeatAmount: PropTypes.func.isRequired,
+};

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

@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+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>
+  );
+};

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, TextInput, Checkbox } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+// TODO: change to datepicker
+export const StartEndDates = ({ starts, setStarts, ends, setEnds }) => {
+  const [isNeverEnds, setIsNeverEnds] = useState(false);
+  const toggleIsNeverEnds = (checked, event) => {
+    const value = event?.target?.checked;
+    setIsNeverEnds(value);
+    setEnds('');
+  };
+  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>
+      <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"
+        />
+        <Checkbox
+          label={__('Never ends')}
+          isChecked={isNeverEnds}
+          onChange={toggleIsNeverEnds}
+          id="never-ends"
+          name="never-ends"
+        />
+      </FormGroup>
+    </>
+  );
+};
+
+StartEndDates.propTypes = {
+  starts: PropTypes.string.isRequired,
+  setStarts: PropTypes.func.isRequired,
+  ends: PropTypes.string.isRequired,
+  setEnds: PropTypes.func.isRequired,
+};

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

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

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

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Title, 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';
+
+const Schedule = () => {
+  const [repeatType, setRepeatType] = useState(repeatTypes.noRepeat);
+  const [repeatAmount, setRepeatAmount] = useState('');
+  const [starts, setStarts] = useState('');
+  const [ends, setEnds] = useState('');
+
+  return (
+    <Form className="schedule-tab">
+      <Title headingLevel="h2">{__('Schedule')}</Title>
+      <ScheduleType />
+
+      <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>
+  );
+};
+
+export default Schedule;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Popover } from '@patternfly/react-core';
+import { HelpIcon } from '@patternfly/react-icons';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const helpLabel = (text, id) => {
+  if (!text) return null;
+  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"
+      >
+        <HelpIcon noVerticalAlign />
+      </button>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,149 @@
+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 { helpLabel } from './FormHelpers';
+import { SelectField } from './SelectField';
+
+const TemplateSearchField = ({
+  name,
+  controller,
+  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]);
+  return (
+    <FormGroup
+      label={name}
+      labelIcon={helpLabel(labelText, name)}
+      fieldId={name}
+      isRequired={required}
+      className="foreman-search-field"
+    >
+      <SearchBar
+        initialQuery={defaultValue}
+        data={{
+          controller,
+          autocomplete: {
+            id: name,
+            url: `/${controller}/auto_complete_search`,
+            useKeyShortcuts: true,
+          },
+        }}
+        onSearch={() => null}
+      />
+    </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 } = input;
+  const labelText = input.description;
+  const value = values[name];
+
+  if (isSelectType) {
+    const options = input.options.split(/\r?\n/).map(option => option.trim());
+    return (
+      <SelectField
+        aria-label={name}
+        key={name}
+        isRequired={required}
+        label={name}
+        fieldId={name}
+        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={name}
+        isRequired={required}
+      >
+        <TextArea
+          aria-label={name}
+          className={hidden ? 'masked-input' : null}
+          required={required}
+          rows={2}
+          id={name}
+          value={value}
+          onChange={newValue => setValue({ ...values, [name]: newValue })}
+        />
+      </FormGroup>
+    );
+  }
+  if (inputType === 'date') {
+    return (
+      <FormGroup
+        key={name}
+        label={name}
+        labelIcon={helpLabel(labelText, name)}
+        fieldId={name}
+        isRequired={required}
+      >
+        <TextInput
+          aria-label={name}
+          placeholder="YYYY-mm-dd HH:MM"
+          className={hidden ? 'masked-input' : null}
+          required={required}
+          id={name}
+          type="text"
+          value={value}
+          onChange={newValue => setValue({ ...values, [name]: newValue })}
+        />
+      </FormGroup>
+    );
+  }
+  if (inputType === 'search') {
+    const controller = input.resource_type;
+    // TODO: get text from redux autocomplete
+    return (
+      <TemplateSearchField
+        key={name}
+        name={name}
+        defaultValue={value}
+        controller={controller}
+        labelText={labelText}
+        required={required}
+        setValue={setValue}
+        values={values}
+      />
+    );
+  }
+
+  return null;
+};
+
+TemplateSearchField.propTypes = {
+  name: PropTypes.string.isRequired,
+  controller: 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/GroupedSelectField.js

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  SelectOption,
+  Select,
+  SelectGroup,
+  SelectVariant,
+  FormGroup,
+} from '@patternfly/react-core';
+
+export const GroupedSelectField = ({
+  label,
+  fieldId,
+  groups,
+  selected,
+  setSelected,
+  ...props
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onSelect = selection => {
+    setIsOpen(false);
+    setSelected(selection);
+  };
+
+  const onClear = () => {
+    onSelect(null);
+  };
+
+  const options = groups.map((group, groupIndex) => (
+    <SelectGroup key={groupIndex} label={group.groupLabel}>
+      {group.options.map((option, optionIndex) => (
+        <SelectOption
+          key={optionIndex}
+          value={option.label}
+          onClick={() => onSelect(option.value)}
+        />
+      ))}
+    </SelectGroup>
+  ));
+
+  const onFilter = evt => {
+    const textInput = evt?.target?.value || '';
+    if (textInput === '') {
+      return options;
+    }
+    return options
+      .map(group => {
+        const filteredGroup = React.cloneElement(group, {
+          children: group.props.children.filter(item =>
+            item.props.value.toLowerCase().includes(textInput.toLowerCase())
+          ),
+        });
+        if (filteredGroup.props.children.length > 0) return filteredGroup;
+        return null;
+      })
+      .filter(newGroup => newGroup);
+  };
+
+  return (
+    <FormGroup label={label} fieldId={fieldId}>
+      <Select
+        isGrouped
+        variant={SelectVariant.typeahead}
+        onToggle={setIsOpen}
+        onFilter={onFilter}
+        isOpen={isOpen}
+        onSelect={() => null}
+        selections={selected}
+        className="without_select2"
+        onClear={onClear}
+        menuAppendTo={() => document.body}
+        {...props}
+      >
+        {options}
+      </Select>
+    </FormGroup>
+  );
+};
+
+GroupedSelectField.propTypes = {
+  label: PropTypes.string.isRequired,
+  fieldId: PropTypes.string.isRequired,
+  groups: PropTypes.array,
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  setSelected: PropTypes.func.isRequired,
+};
+
+GroupedSelectField.defaultProps = {
+  groups: [],
+  selected: null,
+};