foreman_remote_execution 4.5.5 → 4.5.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 99202dff05c36d40eac36950a23298ca1cf2ca4510e2506787bace85c72f0fd9
-  data.tar.gz: '059cd0dd0b427bb2fc1a80c59a47ec26e2fedb4d0e27f989c1ec859e52e1191a'
+  metadata.gz: 0f14506c337ce696f794a63b0c30b59f6d301edc4d55b9d654e2b5360215beb9
+  data.tar.gz: 0b9d86b4a422b84d507dfd977dea5dd9f2dc8b30e464b3e4383c8ea421e0615b
 SHA512:
-  metadata.gz: 19e978232f3ee68a30d65ceb7c1b799b180894c16f5060c80ed4c5b85870fbe1f0f7ed320b44924cbb7177e280deb32309a061ab2737ff9bc2cc944092a48b63
-  data.tar.gz: 9ac86095eb5c6cdf2bed666e911895462e44b0cbf96ddf40023c062604f0de947ebf4851e48d556332ed6624a59d6748608bdb472ce63c3e593ebcc3e5a21d52
+  metadata.gz: 250ec14568078576a42664e40e2d96b974282765e6cfcffca8ec58bdff9e72c8948f2e28e7ba5fdafe36fb45457e2f38c03bd3c39842ba0bebaa303970ea5f09
+  data.tar.gz: 4f6469e5ad8535b7996d1a8c78d266edbba4c03e1e3eb9b52e0588c653351e153b87b4d6daaf082e039d7af47207fdf5e3e6267920cde4d2a233c4e11ac5ca57

data/app/models/job_invocation_composer.rb

@@ -636,7 +636,7 @@ class JobInvocationComposer
     setting_value = Setting['remote_execution_form_job_template']
     return default_value unless setting_value
 
-    form_template = JobTemplate.find_by :name => setting_value
+    form_template = JobTemplate.authorized(:view_job_templates).find_by :name => setting_value
     return default_value unless form_template
 
     if block_given?

data/lib/foreman_remote_execution/version.rb

@@ -1,3 +1,3 @@
 module ForemanRemoteExecution
-  VERSION = '4.5.5'.freeze
+  VERSION = '4.5.6'.freeze
 end

data/webpack/JobWizard/JobWizard.js

@@ -3,43 +3,59 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Wizard } from '@patternfly/react-core';
 import { get } from 'foremanReact/redux/API';
-import { translate as __ } from 'foremanReact/common/I18n';
 import history from 'foremanReact/history';
 import CategoryAndTemplate from './steps/CategoryAndTemplate/';
 import { AdvancedFields } from './steps/AdvancedFields/AdvancedFields';
-import { JOB_TEMPLATE } from './JobWizardConstants';
+import { JOB_TEMPLATE, WIZARD_TITLES } from './JobWizardConstants';
 import { selectTemplateError } from './JobWizardSelectors';
 import Schedule from './steps/Schedule/';
+import HostsAndInputs from './steps/HostsAndInputs/';
 import './JobWizard.scss';
 
 export const JobWizard = () => {
   const [jobTemplateID, setJobTemplateID] = useState(null);
   const [category, setCategory] = useState('');
   const [advancedValues, setAdvancedValues] = useState({});
+  const [templateValues, setTemplateValues] = useState({}); // TODO use templateValues in advanced fields - description https://github.com/theforeman/foreman_remote_execution/pull/605
+  const [selectedHosts, setSelectedHosts] = useState(['host1', 'host2']);
   const dispatch = useDispatch();
 
   const setDefaults = useCallback(
     ({
       data: {
+        template_inputs,
         advanced_template_inputs,
         effective_user,
-        job_template: { executionTimeoutInterval, description_format },
+        job_template: { execution_timeout_interval, description_format },
       },
     }) => {
       const advancedTemplateValues = {};
+      const defaultTemplateValues = {};
+      const inputs = template_inputs;
       const advancedInputs = advanced_template_inputs;
-      if (advancedInputs) {
-        advancedInputs.forEach(input => {
-          advancedTemplateValues[input.name] = input?.default || '';
+      if (inputs) {
+        setTemplateValues(() => {
+          inputs.forEach(input => {
+            defaultTemplateValues[input.name] = input?.default || '';
+          });
+          return defaultTemplateValues;
         });
       }
-      setAdvancedValues(currentAdvancedValues => ({
-        ...currentAdvancedValues,
-        effectiveUserValue: effective_user?.value || '',
-        timeoutToKill: executionTimeoutInterval || '',
-        templateValues: advancedTemplateValues,
-        description: description_format || '',
-      }));
+      setAdvancedValues(currentAdvancedValues => {
+        if (advancedInputs) {
+          advancedInputs.forEach(input => {
+            advancedTemplateValues[input.name] = input?.default || '';
+          });
+        }
+        return {
+          ...currentAdvancedValues,
+          effectiveUserValue: effective_user?.value || '',
+          timeoutToKill: execution_timeout_interval || '',
+          templateValues: advancedTemplateValues,
+          description: description_format || '',
+          isRandomizedOrdering: false,
+        };
+      });
     },
     []
   );
@@ -59,7 +75,7 @@ export const JobWizard = () => {
   const isTemplate = !templateError && !!jobTemplateID;
   const steps = [
     {
-      name: __('Category and Template'),
+      name: WIZARD_TITLES.categoryAndTemplate,
       component: (
         <CategoryAndTemplate
           jobTemplate={jobTemplateID}
@@ -70,12 +86,19 @@ export const JobWizard = () => {
       ),
     },
     {
-      name: __('Target Hosts'),
-      component: <p>Target Hosts</p>,
+      name: WIZARD_TITLES.hostsAndInputs,
+      component: (
+        <HostsAndInputs
+          templateValues={templateValues}
+          setTemplateValues={setTemplateValues}
+          selectedHosts={selectedHosts}
+          setSelectedHosts={setSelectedHosts}
+        />
+      ),
       canJumpTo: isTemplate,
     },
     {
-      name: __('Advanced Fields'),
+      name: WIZARD_TITLES.advanced,
       component: (
         <AdvancedFields
           advancedValues={advancedValues}
@@ -91,12 +114,12 @@ export const JobWizard = () => {
       canJumpTo: isTemplate,
     },
     {
-      name: __('Schedule'),
+      name: WIZARD_TITLES.schedule,
       component: <Schedule />,
       canJumpTo: isTemplate,
     },
     {
-      name: __('Review Details'),
+      name: WIZARD_TITLES.review,
       component: <p>Review Details</p>,
       nextButtonText: 'Run',
       canJumpTo: isTemplate,

data/webpack/JobWizard/JobWizard.scss

@@ -1,5 +1,10 @@
 .job-wizard {
+  .wizard-title {
+    margin-bottom: 25px;
+  }
+
   .pf-c-wizard__main {
+    overflow: visible;
     z-index: calc(
       var(--pf-c-wizard__footer--ZIndex) + 1
     ); // So the select box can be shown above the wizard footer
@@ -12,6 +17,9 @@
     }
     #advanced-fields-job-template {
       .foreman-search-field {
+        .rbt-input-hint input{
+          display: none;
+        }
         // Giving pf3 search bar a pf4 look
         .search-bar {
           display: block;
@@ -41,6 +49,13 @@
     }
   }
 
+  .hosts-chip-group {
+    margin-top: 8px;
+  }
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin: 0;
+  }
   .schedule-tab {
     input[type='radio'],
     input[type='checkbox'] {
@@ -50,4 +65,8 @@
       text-align: start;
     }
   }
+  textarea {
+    min-height: 40px;
+    min-width: 100px;
+  }
 }

data/webpack/JobWizard/JobWizardConstants.js

@@ -14,3 +14,11 @@ export const repeatTypes = {
   daily: __('Daily'),
   hourly: __('Hourly'),
 };
+
+export const WIZARD_TITLES = {
+  categoryAndTemplate: __('Category and Template'),
+  hostsAndInputs: __('Target hosts and inputs'),
+  advanced: __('Advanced Fields'),
+  schedule: __('Schedule'),
+  review: __('Review Details'),
+};

data/webpack/JobWizard/__tests__/fixtures.js

@@ -93,6 +93,14 @@ export const testSetup = (selectors, api) => {
   jest.spyOn(selectors, 'selectJobCategories');
   jest.spyOn(selectors, 'selectJobCategoriesStatus');
 
+  jest.spyOn(selectors, 'selectTemplateInputs');
+  jest.spyOn(selectors, 'selectAdvancedTemplateInputs');
+  selectors.selectTemplateInputs.mockImplementation(
+    () => jobTemplateResponse.template_inputs
+  );
+  selectors.selectAdvancedTemplateInputs.mockImplementation(
+    () => jobTemplateResponse.advanced_template_inputs
+  );
   selectors.selectJobCategories.mockImplementation(() => jobCategories);
   selectors.selectJobTemplates.mockImplementation(() => [
     jobTemplate,

data/webpack/JobWizard/__tests__/integration.test.js

@@ -5,6 +5,7 @@ import { render, fireEvent, screen, act } from '@testing-library/react';
 import * as api from 'foremanReact/redux/API';
 import { JobWizard } from '../JobWizard';
 import * as selectors from '../JobWizardSelectors';
+import { WIZARD_TITLES } from '../JobWizardConstants';
 import {
   testSetup,
   mockApi,
@@ -62,13 +63,8 @@ describe('Job wizard fill', () => {
         <JobWizard />
       </Provider>
     );
-    const steps = [
-      'Target Hosts',
-      'Advanced Fields',
-      'Schedule',
-      'Review Details',
-      'Category and Template',
-    ];
+    const titles = Object.values(WIZARD_TITLES);
+    const steps = [titles[1], titles[0], ...titles.slice(2)]; // the first title is selected at the beggining
     // eslint-disable-next-line no-unused-vars
     for await (const step of steps) {
       const stepSelector = screen.getByText(step);

data/webpack/JobWizard/steps/AdvancedFields/AdvancedFields.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { Title, Form } from '@patternfly/react-core';
-import { translate as __ } from 'foremanReact/common/I18n';
+import { Form } from '@patternfly/react-core';
 import {
   selectEffectiveUser,
   selectAdvancedTemplateInputs,
@@ -17,8 +16,11 @@ import {
   ConcurrencyLevelField,
   TimeSpanLevelField,
   TemplateInputsFields,
+  ExecutionOrderingField,
 } from './Fields';
 import { DescriptionField } from './DescriptionField';
+import { WIZARD_TITLES } from '../../JobWizardConstants';
+import { WizardTitle } from '../form/WizardTitle';
 
 export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
   const effectiveUser = useSelector(selectEffectiveUser);
@@ -26,9 +28,10 @@ export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
   const templateInputs = useSelector(selectTemplateInputs);
   return (
     <>
-      <Title headingLevel="h2" className="advanced-fields-title">
-        {__('Advanced Fields')}
-      </Title>
+      <WizardTitle
+        title={WIZARD_TITLES.advanced}
+        className="advanced-fields-title"
+      />
       <Form id="advanced-fields-job-template" autoComplete="off">
         <TemplateInputsFields
           inputs={advancedTemplateInputs}
@@ -98,6 +101,14 @@ export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
             })
           }
         />
+        <ExecutionOrderingField
+          isRandomizedOrdering={advancedValues.isRandomizedOrdering}
+          setValue={newValue =>
+            setAdvancedValues({
+              isRandomizedOrdering: newValue,
+            })
+          }
+        />
       </Form>
     </>
   );

data/webpack/JobWizard/steps/AdvancedFields/Fields.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, TextInput } from '@patternfly/react-core';
+import { FormGroup, TextInput, Radio } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { helpLabel } from '../form/FormHelpers';
 import { formatter } from '../form/Formatter';
@@ -18,6 +18,7 @@ export const EffectiveUserField = ({ value, setValue }) => (
     fieldId="effective-user"
   >
     <TextInput
+      aria-label="effective user"
       autoComplete="effective-user"
       id="effective-user"
       type="text"
@@ -61,6 +62,7 @@ export const PasswordField = ({ value, setValue }) => (
     fieldId="job-password"
   >
     <TextInput
+      aria-label="job password"
       autoComplete="new-password" // to prevent firefox from autofilling the user password
       id="job-password"
       type="password"
@@ -83,6 +85,7 @@ export const KeyPassphraseField = ({ value, setValue }) => (
     fieldId="key-passphrase"
   >
     <TextInput
+      aria-label="key passphrase"
       autoComplete="key-passphrase"
       id="key-passphrase"
       type="password"
@@ -105,6 +108,7 @@ export const EffectiveUserPasswordField = ({ value, setValue }) => (
     fieldId="effective-user-password"
   >
     <TextInput
+      aria-label="effective userpassword"
       autoComplete="effective-user-password"
       id="effective-user-password"
       type="password"
@@ -161,6 +165,41 @@ export const TimeSpanLevelField = ({ value, setValue }) => (
   />
 );
 
+export const ExecutionOrderingField = ({ isRandomizedOrdering, setValue }) => (
+  <FormGroup
+    label={__('Execution ordering')}
+    fieldId="schedule-type"
+    labelIcon={helpLabel(
+      <div
+        dangerouslySetInnerHTML={{
+          __html: __(
+            'Execution ordering determines whether the jobs should be executed on hosts in alphabetical order or in randomized order.<br><ul><li><b>Ordered</b> - executes the jobs on hosts in alphabetical order</li><li><b>Randomized</b> - randomizes the order in which jobs are executed on hosts</li></ul>'
+          ),
+        }}
+      />,
+      'effective-user-password'
+    )}
+    isInline
+  >
+    <Radio
+      aria-label="execution order alphabetical"
+      isChecked={!isRandomizedOrdering}
+      name="execution-order"
+      onChange={() => setValue(false)}
+      id="execution-order-alphabetical"
+      label={__('Alphabetical')}
+    />
+    <Radio
+      aria-label="execution order randomized"
+      isChecked={isRandomizedOrdering}
+      name="execution-order"
+      onChange={() => setValue(true)}
+      id="execution-order-randomized"
+      label={__('Randomized')}
+    />
+  </FormGroup>
+);
+
 export const TemplateInputsFields = ({ inputs, value, setValue }) => (
   <>{inputs?.map(input => formatter(input, value, setValue))}</>
 );
@@ -184,6 +223,14 @@ ConcurrencyLevelField.propTypes = EffectiveUserField.propTypes;
 ConcurrencyLevelField.defaultProps = EffectiveUserField.defaultProps;
 TimeSpanLevelField.propTypes = EffectiveUserField.propTypes;
 TimeSpanLevelField.defaultProps = EffectiveUserField.defaultProps;
+ExecutionOrderingField.propTypes = {
+  isRandomizedOrdering: PropTypes.bool,
+  setValue: PropTypes.func.isRequired,
+};
+ExecutionOrderingField.defaultProps = {
+  isRandomizedOrdering: false,
+};
+
 TemplateInputsFields.propTypes = {
   inputs: PropTypes.array.isRequired,
   value: PropTypes.object,

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

@@ -10,24 +10,16 @@ import {
   testSetup,
   mockApi,
 } from '../../../__tests__/fixtures';
+import { WIZARD_TITLES } from '../../../JobWizardConstants';
 
 const store = testSetup(selectors, api);
 mockApi(api);
 
 jest.spyOn(selectors, 'selectEffectiveUser');
-jest.spyOn(selectors, 'selectTemplateInputs');
-jest.spyOn(selectors, 'selectAdvancedTemplateInputs');
 
 selectors.selectEffectiveUser.mockImplementation(
   () => jobTemplate.effective_user
 );
-selectors.selectTemplateInputs.mockImplementation(
-  () => jobTemplate.template_inputs
-);
-
-selectors.selectAdvancedTemplateInputs.mockImplementation(
-  () => jobTemplate.advanced_template_inputs
-);
 describe('AdvancedFields', () => {
   it('should save data between steps for advanced fields', async () => {
     const wrapper = mount(
@@ -72,7 +64,7 @@ describe('AdvancedFields', () => {
       .simulate('click');
 
     expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-current').text()).toEqual(
-      'Target Hosts'
+      'Target hosts and inputs'
     );
     wrapper
       .find('.pf-c-wizard__nav-link')
@@ -91,7 +83,7 @@ describe('AdvancedFields', () => {
       </Provider>
     );
     await act(async () => {
-      fireEvent.click(screen.getByText('Advanced Fields'));
+      fireEvent.click(screen.getByText(WIZARD_TITLES.advanced));
     });
     const searchValue = 'search test';
     const textValue = 'I am a text';
@@ -108,7 +100,7 @@ describe('AdvancedFields', () => {
     fireEvent.click(selectField);
     await act(async () => {
       await fireEvent.click(screen.getByText('option 2'));
-      fireEvent.click(screen.getAllByText('Advanced Fields')[0]); // to remove focus
+      fireEvent.click(screen.getAllByText(WIZARD_TITLES.advanced)[0]); // to remove focus
       await fireEvent.change(textField, {
         target: { value: textValue },
       });
@@ -128,9 +120,11 @@ describe('AdvancedFields', () => {
     expect(searchField.value).toBe(searchValue);
     expect(dateField.value).toBe(dateValue);
     await act(async () => {
-      fireEvent.click(screen.getByText('Category and Template'));
+      fireEvent.click(screen.getByText(WIZARD_TITLES.categoryAndTemplate));
     });
-    expect(screen.getAllByText('Category and Template')).toHaveLength(3);
+    expect(screen.getAllByText(WIZARD_TITLES.categoryAndTemplate)).toHaveLength(
+      3
+    );
 
     await act(async () => {
       fireEvent.click(screen.getByText('Advanced Fields'));
@@ -141,4 +135,25 @@ describe('AdvancedFields', () => {
     expect(screen.queryAllByText('option 1')).toHaveLength(0);
     expect(screen.queryAllByText('option 2')).toHaveLength(1);
   });
+  it('fill defaults into fields', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard />
+      </Provider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Advanced Fields'));
+    });
+
+    expect(
+      screen.getByLabelText('effective user', {
+        selector: 'input',
+      }).value
+    ).toBe('default effective user');
+    expect(
+      screen.getByLabelText('timeout to kill', {
+        selector: 'input',
+      }).value
+    ).toBe('2');
+  });
 });

data/webpack/JobWizard/steps/CategoryAndTemplate/CategoryAndTemplate.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Title, Text, TextVariants, Form, Alert } from '@patternfly/react-core';
+import { Text, TextVariants, Form, Alert } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { SelectField } from '../form/SelectField';
 import { GroupedSelectField } from '../form/GroupedSelectField';
+import { WizardTitle } from '../form/WizardTitle';
+import { WIZARD_TITLES } from '../../JobWizardConstants';
 
 export const CategoryAndTemplate = ({
   jobCategories,
@@ -40,7 +42,7 @@ export const CategoryAndTemplate = ({
   const isError = !!(categoryError || allTemplatesError || templateError);
   return (
     <>
-      <Title headingLevel="h2">{__('Category and Template')}</Title>
+      <WizardTitle title={WIZARD_TITLES.categoryAndTemplate} />
       <Text component={TextVariants.p}>{__('All fields are required.')}</Text>
       <Form>
         <SelectField

data/webpack/JobWizard/steps/CategoryAndTemplate/CategoryAndTemplate.test.js

@@ -5,6 +5,7 @@ import * as api from 'foremanReact/redux/API';
 import { JobWizard } from '../../JobWizard';
 import * as selectors from '../../JobWizardSelectors';
 import { testSetup, mockApi } from '../../__tests__/fixtures';
+import { WIZARD_TITLES } from '../../JobWizardConstants';
 
 const store = testSetup(selectors, api);
 mockApi(api);
@@ -32,7 +33,7 @@ describe('Category And Template', () => {
     await act(async () => {
       await fireEvent.click(screen.getByText('Puppet'));
     });
-    fireEvent.click(screen.getAllByText('Category and Template')[0]); // to remove focus
+    fireEvent.click(screen.getAllByText(WIZARD_TITLES.categoryAndTemplate)[0]); // to remove focus
     expect(
       screen.queryAllByLabelText('Ansible Commands', { selector: 'button' })
     ).toHaveLength(0);
@@ -47,7 +48,7 @@ describe('Category And Template', () => {
     await act(async () => {
       await fireEvent.click(screen.getByText('template2'));
     });
-    fireEvent.click(screen.getAllByText('Category and Template')[0]); // to remove focus
+    fireEvent.click(screen.getAllByText(WIZARD_TITLES.categoryAndTemplate)[0]); // to remove focus
     expect(
       screen.queryAllByDisplayValue('template1', { selector: 'button' })
     ).toHaveLength(0);

data/webpack/JobWizard/steps/HostsAndInputs/SelectedChips.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Chip, ChipGroup } from '@patternfly/react-core';
+
+export const SelectedChips = ({ selected, setSelected }) => {
+  const deleteItem = itemToRemove => {
+    setSelected(oldSelected =>
+      oldSelected.filter(item => item !== itemToRemove)
+    );
+  };
+  return (
+    <ChipGroup className="hosts-chip-group">
+      {selected.map(chip => (
+        <Chip key={chip} id={chip} onClick={() => deleteItem(chip)}>
+          {chip}
+        </Chip>
+      ))}
+    </ChipGroup>
+  );
+};
+
+SelectedChips.propTypes = {
+  selected: PropTypes.array.isRequired,
+  setSelected: PropTypes.func.isRequired,
+};

data/webpack/JobWizard/steps/HostsAndInputs/TemplateInputs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { formatter } from '../form/Formatter';
+
+export const TemplateInputs = ({ inputs, value, setValue }) => {
+  if (inputs.length)
+    return inputs.map(input => formatter(input, value, setValue));
+  return (
+    <p className="gray-text">
+      {__('There are no available input fields for the selected template.')}
+    </p>
+  );
+};
+TemplateInputs.propTypes = {
+  inputs: PropTypes.array.isRequired,
+  value: PropTypes.object,
+  setValue: PropTypes.func.isRequired,
+};
+
+TemplateInputs.defaultProps = {
+  value: {},
+};

data/webpack/JobWizard/steps/HostsAndInputs/__tests__/SelectedChips.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+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 { testSetup, mockApi } from '../../../__tests__/fixtures';
+
+const store = testSetup(selectors, api);
+mockApi(api);
+
+describe('TemplateInputs', () => {
+  it('should save data between steps for template input fields', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard advancedValues={{}} setAdvancedValues={jest.fn()} />
+      </Provider>
+    );
+    await act(async () => {
+      await fireEvent.click(
+        screen.getByText('Target hosts and inputs', { selector: 'button' })
+      );
+    });
+
+    expect(
+      screen.getAllByLabelText('host2', { selector: 'button' })
+    ).toHaveLength(1);
+    const chip1 = screen.getByLabelText('host1', { selector: 'button' });
+    fireEvent.click(chip1);
+    expect(
+      screen.queryAllByLabelText('host1', { selector: 'button' })
+    ).toHaveLength(0);
+    expect(
+      screen.queryAllByLabelText('host2', { selector: 'button' })
+    ).toHaveLength(1);
+  });
+});

data/webpack/JobWizard/steps/HostsAndInputs/__tests__/TemplateInputs.test.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+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 { testSetup, mockApi } from '../../../__tests__/fixtures';
+import { WIZARD_TITLES } from '../../../JobWizardConstants';
+
+const store = testSetup(selectors, api);
+mockApi(api);
+
+describe('TemplateInputs', () => {
+  it('should save data between steps for template input fields', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard />
+      </Provider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.hostsAndInputs));
+    });
+    const textValue = 'I am a plain text';
+    const textField = screen.getByLabelText('plain hidden', {
+      selector: 'textarea',
+    });
+
+    await act(async () => {
+      await fireEvent.change(textField, {
+        target: { value: textValue },
+      });
+    });
+    expect(
+      screen.getByLabelText('plain hidden', {
+        selector: 'textarea',
+      }).value
+    ).toBe(textValue);
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.categoryAndTemplate));
+    });
+    expect(screen.getAllByText(WIZARD_TITLES.categoryAndTemplate)).toHaveLength(
+      3
+    );
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.hostsAndInputs));
+    });
+    expect(textField.value).toBe(textValue);
+  });
+});

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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Button, Form, FormGroup } from '@patternfly/react-core';
+import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectTemplateInputs } from '../../JobWizardSelectors';
+import { SelectField } from '../form/SelectField';
+import { SelectedChips } from './SelectedChips';
+import { TemplateInputs } from './TemplateInputs';
+import { WIZARD_TITLES } from '../../JobWizardConstants';
+import { WizardTitle } from '../form/WizardTitle';
+
+const HostsAndInputs = ({
+  templateValues,
+  setTemplateValues,
+  selectedHosts,
+  setSelectedHosts,
+}) => {
+  const templateInputs = useSelector(selectTemplateInputs);
+  const hostMethods = [
+    __('Hosts'),
+    __('Host collection'),
+    __('Host group'),
+    __('Search query'),
+  ];
+  const [hostMethod, setHostMethod] = useState(hostMethods[0]);
+  return (
+    <>
+      <WizardTitle title={WIZARD_TITLES.hostsAndInputs} />
+      <Form>
+        <FormGroup fieldId="host_selection">
+          <SelectField
+            fieldId="host_methods"
+            options={hostMethods}
+            setValue={setHostMethod}
+            value={hostMethod}
+          />
+          <SelectedChips
+            selected={selectedHosts}
+            setSelected={setSelectedHosts}
+          />
+        </FormGroup>
+        <span>
+          {__('Apply to')}{' '}
+          <Button variant="link" isInline>
+            {selectedHosts.length} {__('hosts')}
+          </Button>
+        </span>
+        <TemplateInputs
+          inputs={templateInputs}
+          value={templateValues}
+          setValue={setTemplateValues}
+        />
+      </Form>
+    </>
+  );
+};
+
+HostsAndInputs.propTypes = {
+  templateValues: PropTypes.object.isRequired,
+  setTemplateValues: PropTypes.func.isRequired,
+  selectedHosts: PropTypes.array.isRequired,
+  setSelectedHosts: PropTypes.func.isRequired,
+};
+
+export default HostsAndInputs;

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

@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
-import { Title, Button, Form } from '@patternfly/react-core';
+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 { repeatTypes, WIZARD_TITLES } from '../../JobWizardConstants';
+import { WizardTitle } from '../form/WizardTitle';
 
 const Schedule = () => {
   const [repeatType, setRepeatType] = useState(repeatTypes.noRepeat);
@@ -14,27 +15,29 @@ const Schedule = () => {
   const [ends, setEnds] = useState('');
 
   return (
-    <Form className="schedule-tab">
-      <Title headingLevel="h2">{__('Schedule')}</Title>
-      <ScheduleType />
+    <>
+      <WizardTitle title={WIZARD_TITLES.schedule} />
+      <Form className="schedule-tab">
+        <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>
+        <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>
+    </>
   );
 };
 

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}

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

@@ -5,6 +5,7 @@ import { translate as __ } from 'foremanReact/common/I18n';
 
 export const NumberInput = ({ formProps, inputProps }) => {
   const [validated, setValidated] = useState();
+  const name = inputProps.id.replace(/-/g, ' ');
   return (
     <FormGroup
       {...formProps}
@@ -12,6 +13,7 @@ export const NumberInput = ({ formProps, inputProps }) => {
       validated={validated}
     >
       <TextInput
+        aria-label={name}
         type="text"
         {...inputProps}
         onChange={newValue => {

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Title } from '@patternfly/react-core';
+
+export const WizardTitle = ({ title, ...props }) => (
+  <Title headingLevel="h2" className="wizard-title" {...props}>
+    {title}
+  </Title>
+);
+
+WizardTitle.propTypes = {
+  title: PropTypes.string.isRequired,
+};
+export default WizardTitle;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: foreman_remote_execution
 version: !ruby/object:Gem::Version
-  version: 4.5.5
+  version: 4.5.6
 platform: ruby
 authors:
 - Foreman Remote Execution team
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-08-17 00:00:00.000000000 Z
+date: 2021-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: deface
@@ -416,6 +416,11 @@ files:
 - webpack/JobWizard/steps/CategoryAndTemplate/CategoryAndTemplate.js
 - webpack/JobWizard/steps/CategoryAndTemplate/CategoryAndTemplate.test.js
 - webpack/JobWizard/steps/CategoryAndTemplate/index.js
+- webpack/JobWizard/steps/HostsAndInputs/SelectedChips.js
+- webpack/JobWizard/steps/HostsAndInputs/TemplateInputs.js
+- webpack/JobWizard/steps/HostsAndInputs/__tests__/SelectedChips.test.js
+- webpack/JobWizard/steps/HostsAndInputs/__tests__/TemplateInputs.test.js
+- webpack/JobWizard/steps/HostsAndInputs/index.js
 - webpack/JobWizard/steps/Schedule/QueryType.js
 - webpack/JobWizard/steps/Schedule/RepeatOn.js
 - webpack/JobWizard/steps/Schedule/ScheduleType.js
@@ -427,6 +432,7 @@ files:
 - webpack/JobWizard/steps/form/GroupedSelectField.js
 - webpack/JobWizard/steps/form/NumberInput.js
 - webpack/JobWizard/steps/form/SelectField.js
+- webpack/JobWizard/steps/form/WizardTitle.js
 - webpack/JobWizard/steps/form/__tests__/Formatter.test.js.example
 - webpack/Routes/routes.js
 - webpack/__mocks__/foremanReact/common/I18n.js