foreman_remote_execution 4.8.0 → 5.0.0

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

@@ -3,12 +3,16 @@ 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,
@@ -23,6 +27,7 @@ const TemplateSearchField = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
   const id = name.replace(/ /g, '-');
+  const props = getControllerSearchProps(controller.replace('/', '_'), name);
   return (
     <FormGroup
       label={name}
@@ -34,14 +39,15 @@ const TemplateSearchField = ({
       <SearchBar
         initialQuery={defaultValue}
         data={{
-          controller,
+          ...props,
           autocomplete: {
             id: name,
-            url: `/${controller}/auto_complete_search`,
+            url,
             useKeyShortcuts: true,
           },
+          bookmarks: null,
         }}
-        onSearch={() => null}
+        onSearch={noop}
       />
     </FormGroup>
   );
@@ -52,15 +58,39 @@ export const formatter = (input, values, setValue) => {
   const inputType = input.value_type;
   const isTextType = inputType === 'plain' || !inputType; // null defaults to plain
 
-  const { name, required, hidden_value: hidden } = input;
+  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
-        aria-label={name}
         key={id}
         isRequired={required}
         label={name}
@@ -116,14 +146,14 @@ export const formatter = (input, values, setValue) => {
     );
   }
   if (inputType === 'search') {
-    const controller = input.resource_type;
-    // TODO: get text from redux autocomplete
+    const controller = input.resource_type_tableize;
     return (
       <TemplateSearchField
         key={id}
         name={name}
         defaultValue={value}
-        controller={controller}
+        controller={resourceType}
+        url={`/${controller}/auto_complete_search`}
         labelText={labelText}
         required={required}
         setValue={setValue}
@@ -138,6 +168,7 @@ export const formatter = (input, values, setValue) => {
 TemplateSearchField.propTypes = {
   name: PropTypes.string.isRequired,
   controller: PropTypes.string.isRequired,
+  url: PropTypes.string.isRequired,
   labelText: PropTypes.string,
   required: PropTypes.bool.isRequired,
   defaultValue: PropTypes.string,

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

@@ -2,6 +2,7 @@ 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();
@@ -9,7 +10,7 @@ export const NumberInput = ({ formProps, inputProps }) => {
   return (
     <FormGroup
       {...formProps}
-      helperTextInvalid={__('Has to be a number')}
+      helperTextInvalid={__('Has to be a positive number')}
       validated={validated}
     >
       <TextInput
@@ -18,7 +19,7 @@ export const NumberInput = ({ formProps, inputProps }) => {
         {...inputProps}
         onChange={newValue => {
           setValidated(
-            /^\d+$/.test(newValue) || newValue === ''
+            isPositiveNumber(newValue) || newValue === ''
               ? ValidatedOptions.noval
               : ValidatedOptions.error
           );

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,
+};

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

@@ -17,6 +17,16 @@ export const SelectField = ({
     setIsOpen(false);
   };
   const [isOpen, setIsOpen] = useState(false);
+  const selectOptions = [
+    !isRequired && (
+      <SelectOption key={0} value="">
+        <p> </p>
+      </SelectOption>
+    ),
+    ...options.map((option, index) => (
+      <SelectOption key={index + 1} value={option} />
+    )),
+  ];
   return (
     <FormGroup
       label={label}
@@ -32,11 +42,12 @@ export const SelectField = ({
         className="without_select2"
         maxHeight="45vh"
         menuAppendTo={() => document.body}
+        placeholderText=" " // To prevent showing first option as selected
+        aria-labelledby={fieldId}
+        toggleAriaLabel={`${label} toggle`}
         {...props}
       >
-        {options.map((option, index) => (
-          <SelectOption key={index} value={option} />
-        ))}
+        {selectOptions.filter(option => option)}
       </Select>
     </FormGroup>
   );

data/webpack/JobWizard/steps/form/__tests__/SelectSearch.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { SearchSelect } from '../SearchSelect';
+
+const apiKey = 'HOSTS_KEY';
+
+describe('SearchSelect', () => {
+  it('too many', () => {
+    const onSearch = jest.fn();
+    render(
+      <SearchSelect
+        selected={['hosts1,host2']}
+        setSelected={jest.fn()}
+        apiKey={apiKey}
+        url="/hosts"
+        placeholderText="Test hosts"
+        useNameSearch={() => [
+          onSearch,
+          { results: ['host1', 'host2', 'host3'], subtotal: 101 },
+          false,
+        ]}
+      />
+    );
+    const openSelectbutton = screen.getByRole('button', {
+      name: 'typeahead select toggle',
+    });
+    fireEvent.click(openSelectbutton);
+    const tooMany = screen.queryAllByText(
+      'You have %s results to display. Showing first %s results + 101 + 100'
+    );
+    expect(tooMany).toHaveLength(1);
+  });
+});

data/webpack/JobWizard/submit.js

@@ -0,0 +1,120 @@
+import { post } from 'foremanReact/redux/API';
+import { repeatTypes, JOB_INVOCATION } from './JobWizardConstants';
+import { buildHostQuery } from './steps/HostsAndInputs/buildHostQuery';
+
+export const submit = ({
+  jobTemplateID,
+  templateValues,
+  advancedValues,
+  scheduleValue,
+  selectedTargets,
+  hostsSearchQuery,
+  location,
+  organization,
+  dispatch,
+}) => {
+  const {
+    repeatAmount,
+    repeatType,
+    repeatData,
+    startsAt,
+    startsBefore,
+    ends,
+    purpose,
+  } = scheduleValue;
+  const {
+    effectiveUserValue,
+    effectiveUserPassword,
+    description,
+    timeoutToKill,
+    isRandomizedOrdering,
+    timeSpan,
+    concurrencyLevel,
+    templateValues: advancedTemplateValues,
+    password,
+    keyPassphrase,
+  } = advancedValues;
+  const getCronLine = () => {
+    const [hour, minute] = repeatData.at
+      ? repeatData.at.split(':')
+      : [null, null];
+    switch (repeatType) {
+      case repeatTypes.cronline:
+        return repeatData.cronline;
+      case repeatTypes.monthly:
+        return `${minute} ${hour} ${repeatData.days} * *`;
+      case repeatTypes.weekly:
+        return `${minute} ${hour} * * ${repeatData.daysOfWeek}`;
+      case repeatTypes.daily:
+        return `${minute} ${hour} * * *`;
+      case repeatTypes.hourly:
+        return `${repeatData.minute} * * * *`;
+      case repeatTypes.noRepeat:
+      default:
+        return null;
+    }
+  };
+  const api = {
+    location,
+    organization,
+    job_invocation: {
+      job_template_id: jobTemplateID,
+      targeting_type: scheduleValue?.isTypeStatic
+        ? 'static_query'
+        : 'dynamic_query',
+      randomized_ordering: isRandomizedOrdering,
+      inputs: { ...templateValues, ...advancedTemplateValues },
+      ssh: {
+        effective_user: effectiveUserValue,
+        effective_user_password: effectiveUserPassword,
+      },
+      password,
+      key_passphrase: keyPassphrase,
+      recurrence:
+        repeatType !== repeatTypes.noRepeat
+          ? {
+              cron_line: getCronLine(),
+              max_iteration: repeatAmount,
+              end_time: ends.length ? new Date(ends).toISOString() : null,
+              purpose,
+            }
+          : null,
+      scheduling:
+        startsAt?.length || startsBefore?.length
+          ? {
+              start_at: startsAt?.length
+                ? new Date(startsAt).toISOString()
+                : null,
+              start_before: startsBefore?.length
+                ? new Date(startsBefore).toISOString()
+                : null,
+            }
+          : null,
+      concurrency_control: {
+        time_span: timeSpan,
+        concurrency_level: concurrencyLevel,
+      },
+      bookmark_id: null,
+      search_query:
+        buildHostQuery(selectedTargets, hostsSearchQuery) || 'name ~ *',
+      description_format: description,
+      execution_timeout_interval: timeoutToKill,
+      feature: '', // TODO add value after https://github.com/theforeman/foreman_remote_execution/pull/629
+    },
+  };
+
+  dispatch(
+    post({
+      key: JOB_INVOCATION,
+      url: '/api/job_invocations',
+      params: api,
+      handleSuccess: ({ data: { id } }) => {
+        window.location.href = `/job_invocations/${id}`;
+      },
+      errorToast: ({ response }) =>
+        response?.date?.error?.message ||
+        response?.message ||
+        response?.statusText,
+    })
+  );
+};

data/webpack/JobWizard/validation.js

@@ -0,0 +1,53 @@
+import { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  selectTemplateInputs,
+  selectAdvancedTemplateInputs,
+} from './JobWizardSelectors';
+import { isPositiveNumber, isValidDate } from './steps/form/FormHelpers';
+import './JobWizard.scss';
+
+export const useValidation = ({ advancedValues, templateValues }) => {
+  const [valid, setValid] = useState({});
+  const templateInputs = useSelector(selectTemplateInputs);
+  const advancedTemplateInputs = useSelector(selectAdvancedTemplateInputs);
+  useEffect(() => {
+    setValid({
+      hostsAndInputs: true,
+      advanced: true,
+      schedule: true,
+    });
+    const inputValidation = (inputs, values, setInvalid) => {
+      inputs.forEach(({ name, required, value_type: valueType }) => {
+        const value = values[name];
+        if (required && !value) {
+          setInvalid();
+        }
+        if (value && valueType === 'date') {
+          if (!isValidDate(value) && !isValidDate(new Date(value))) {
+            setInvalid();
+          }
+        }
+      });
+    };
+    inputValidation(templateInputs, templateValues, () =>
+      setValid(currValid => ({ ...currValid, hostsAndInputs: false }))
+    );
+
+    inputValidation(advancedTemplateInputs, advancedValues.templateValues, () =>
+      setValid(currValid => ({ ...currValid, advanced: false }))
+    );
+    [
+      advancedValues.timeoutToKill,
+      advancedValues.concurrencyLevel,
+      advancedValues.timeSpan,
+    ].forEach(value => {
+      if (value && !isPositiveNumber(value)) {
+        setValid(currValid => ({ ...currValid, advanced: false }));
+      }
+    });
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [advancedValues, templateValues]);
+  return [valid, setValid];
+};

data/webpack/__mocks__/foremanReact/Root/Context/ForemanContext/index.js

@@ -0,0 +1,2 @@
+export const useForemanOrganization = () => ({ id: 1 });
+export const useForemanLocation = () => ({ id: 2 });

data/webpack/__mocks__/foremanReact/common/I18n.js

@@ -1 +1,3 @@
+export const sprintf = (string, ...args) => [string, ...args].join(' + ');
 export const translate = s => s;
+export const documentLocale = () => 'en';

data/webpack/__mocks__/foremanReact/components/AutoComplete/AutoCompleteActions.js

@@ -0,0 +1 @@
+export const resetData = payload => ({ type: 'REST_DATA', payload });

data/webpack/__mocks__/foremanReact/components/AutoComplete/AutoCompleteConstants.js

@@ -0,0 +1 @@
+export const TRIGGERS = { INPUT_CHANGE: 'INPUT_CHANGE' };

data/webpack/__mocks__/foremanReact/routes/RouterSelector.js

@@ -0,0 +1 @@
+export const selectRouterLocation = jest.fn(() => ({}));

data/webpack/helpers.js

@@ -0,0 +1 @@
+export const noop = Function.prototype;

data/webpack/react_app/components/RecentJobsCard/RecentJobsCard.js

@@ -21,7 +21,7 @@ const RecentJobsCard = ({ hostDetails: { name, id } }) => {
 
   return (
     <CardTemplate
-      overrideGridProps={{ xl: 8, lg: 8, md: 12 }}
+      overrideGridProps={{ xl2: 6, xl: 8, lg: 8, md: 12 }}
       header={__('Recent jobs')}
       dropdownItems={[
         <DropdownItem