foreman_remote_execution 4.5.1 → 4.5.5

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

@@ -1,40 +1,27 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
 import { mount } from '@theforeman/test';
 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 { jobTemplates, jobTemplateResponse as jobTemplate } from './fixtures';
+import {
+  testSetup,
+  mockApi,
+  jobCategories,
+  jobTemplateResponse as jobTemplate,
+} from './fixtures';
 
-jest.spyOn(api, 'get');
-jest.spyOn(selectors, 'selectJobTemplate');
-jest.spyOn(selectors, 'selectJobTemplates');
-jest.spyOn(selectors, 'selectJobCategories');
-jest.spyOn(selectors, 'selectJobCategoriesStatus');
+const store = testSetup(selectors, api);
 
-const jobCategories = ['Ansible Commands', 'Puppet', 'Services'];
+selectors.selectJobTemplate.mockImplementation(() => {});
 
 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: jobTemplate,
-      });
   }
   return { type: 'get', ...action };
 });
-
-selectors.selectJobTemplate.mockImplementation(() => null);
-selectors.selectJobCategories.mockImplementation(() => jobCategories);
-selectors.selectJobCategoriesStatus.mockImplementation(() => null);
-selectors.selectJobTemplates.mockImplementation(() => jobTemplates);
-
-const mockStore = configureMockStore([]);
-const store = mockStore({});
 describe('Job wizard fill', () => {
   it('should select template', async () => {
     const wrapper = mount(
@@ -51,7 +38,10 @@ describe('Job wizard fill', () => {
     selectors.selectJobTemplate.mockImplementation(() => jobTemplate);
     wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click');
     await act(async () => {
-      await wrapper.find('.pf-c-select__menu-item').simulate('click');
+      await wrapper
+        .find('.pf-c-select__menu-item')
+        .first()
+        .simulate('click');
       await wrapper.update();
     });
     expect(store.getActions().slice(-1)).toMatchSnapshot('select template');
@@ -60,74 +50,12 @@ describe('Job wizard fill', () => {
     );
   });
 
-  it('should save data between steps for advanced fields', async () => {
-    const wrapper = mount(
-      <Provider store={store}>
-        <JobWizard advancedValues={{}} setAdvancedValues={jest.fn()} />
-      </Provider>
-    );
-    // setup
-    selectors.selectJobCategoriesStatus.mockImplementation(() => 'RESOLVED');
-    selectors.selectJobTemplate.mockImplementation(() => jobTemplate);
-    wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click');
-    wrapper.find('.pf-c-select__menu-item').simulate('click');
-
-    // test
-    expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(
-      0
-    );
-    wrapper
-      .find('.pf-c-wizard__nav-link')
-      .at(2)
-      .simulate('click'); // Advanced step
-    const effectiveUserInput = () => wrapper.find('input#effective-user');
-    const effectiveUesrValue = 'effective user new value';
-    effectiveUserInput().getDOMNode().value = effectiveUesrValue;
-    await act(async () => {
-      await effectiveUserInput().simulate('change');
-      wrapper.update();
-    });
-
-    expect(effectiveUserInput().prop('value')).toEqual(effectiveUesrValue);
-
-    wrapper
-      .find('.pf-c-wizard__nav-link')
-      .at(1)
-      .simulate('click');
-
-    expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-current').text()).toEqual(
-      'Target Hosts'
-    );
-    wrapper
-      .find('.pf-c-wizard__nav-link')
-      .at(2)
-      .simulate('click'); // Advanced step
-
-    expect(effectiveUserInput().prop('value')).toEqual(effectiveUesrValue);
-  });
-
   it('have all steps', async () => {
     selectors.selectJobCategoriesStatus.mockImplementation(() => null);
     selectors.selectJobTemplate.mockRestore();
     selectors.selectJobTemplates.mockRestore();
     selectors.selectJobCategories.mockRestore();
-    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: jobTemplate,
-          });
-      } else if (action.key === 'JOB_TEMPLATES') {
-        handleSuccess &&
-          handleSuccess({
-            data: { results: [jobTemplate.job_template] },
-          });
-      }
-      return { type: 'get', ...action };
-    });
+    mockApi(api);
 
     render(
       <Provider store={store}>

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

@@ -3,7 +3,11 @@ 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 { selectJobTemplate } from '../../JobWizardSelectors';
+import {
+  selectEffectiveUser,
+  selectAdvancedTemplateInputs,
+  selectTemplateInputs,
+} from '../../JobWizardSelectors';
 import {
   EffectiveUserField,
   TimeoutToKillField,
@@ -12,17 +16,25 @@ import {
   EffectiveUserPasswordField,
   ConcurrencyLevelField,
   TimeSpanLevelField,
+  TemplateInputsFields,
 } from './Fields';
+import { DescriptionField } from './DescriptionField';
 
 export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
-  const jobTemplate = useSelector(selectJobTemplate);
-  const effectiveUser = jobTemplate.effective_user;
+  const effectiveUser = useSelector(selectEffectiveUser);
+  const advancedTemplateInputs = useSelector(selectAdvancedTemplateInputs);
+  const templateInputs = useSelector(selectTemplateInputs);
   return (
     <>
       <Title headingLevel="h2" className="advanced-fields-title">
         {__('Advanced Fields')}
       </Title>
-      <Form>
+      <Form id="advanced-fields-job-template" autoComplete="off">
+        <TemplateInputsFields
+          inputs={advancedTemplateInputs}
+          value={advancedValues.templateValues}
+          setValue={newValue => setAdvancedValues({ templateValues: newValue })}
+        />
         {effectiveUser?.overridable && (
           <EffectiveUserField
             value={advancedValues.effectiveUserValue}
@@ -33,6 +45,11 @@ export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
             }
           />
         )}
+        <DescriptionField
+          inputs={templateInputs}
+          value={advancedValues.description}
+          setValue={newValue => setAdvancedValues({ description: newValue })}
+        />
         <TimeoutToKillField
           value={advancedValues.timeoutToKill}
           setValue={newValue =>

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { FormGroup, TextInput, Button } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+
+export const DescriptionField = ({ inputs, value, setValue }) => {
+  const generateDesc = () => {
+    let newDesc = value;
+    if (value) {
+      const re = new RegExp('%\\{([^\\}]+)\\}', 'gm');
+      const results = [...newDesc.matchAll(re)].map(result => ({
+        name: result[1],
+        text: result[0],
+      }));
+      results.forEach(result => {
+        newDesc = newDesc.replace(
+          result.text,
+          // TODO: Replace with the value of the input from Target Hosts step
+          inputs.find(input => input.name === result.name)?.name || result.text
+        );
+      });
+    }
+    return newDesc;
+  };
+  const [generatedDesc, setGeneratedDesc] = useState(generateDesc());
+  const [isPreview, setIsPreview] = useState(true);
+
+  const togglePreview = () => {
+    setGeneratedDesc(generateDesc());
+    setIsPreview(v => !v);
+  };
+
+  return (
+    <FormGroup
+      label={__('Description')}
+      fieldId="description"
+      helperText={
+        <Button variant="link" isInline onClick={togglePreview}>
+          {isPreview
+            ? __('Edit job description template')
+            : __('Preview job description')}
+        </Button>
+      }
+    >
+      {isPreview ? (
+        <TextInput id="description-preview" value={generatedDesc} isDisabled />
+      ) : (
+        <TextInput
+          type="text"
+          autoComplete="description"
+          id="description"
+          value={value}
+          onChange={newValue => setValue(newValue)}
+        />
+      )}
+    </FormGroup>
+  );
+};
+
+DescriptionField.propTypes = {
+  inputs: PropTypes.array.isRequired,
+  value: PropTypes.string,
+  setValue: PropTypes.func.isRequired,
+};
+DescriptionField.defaultProps = {
+  value: '',
+};

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

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { FormGroup, TextInput } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import { helpLabel } from '../form/FormHelpers';
+import { formatter } from '../form/Formatter';
+import { NumberInput } from '../form/NumberInput';
 
 export const EffectiveUserField = ({ value, setValue }) => (
   <FormGroup
@@ -26,25 +28,25 @@ export const EffectiveUserField = ({ value, setValue }) => (
 );
 
 export const TimeoutToKillField = ({ value, setValue }) => (
-  <FormGroup
-    label={__('Timeout to kill')}
-    labelIcon={helpLabel(
-      __(
-        'Time in seconds from the start on the remote host after which the job should be killed.'
+  <NumberInput
+    formProps={{
+      label: __('Timeout to kill'),
+      labelIcon: helpLabel(
+        __(
+          'Time in seconds from the start on the remote host after which the job should be killed.'
+        ),
+        'timeout-to-kill'
       ),
-      'timeout-to-kill'
-    )}
-    fieldId="timeout-to-kill"
-  >
-    <TextInput
-      type="number"
-      value={value}
-      placeholder={__('For example: 1, 2, 3, 4, 5...')}
-      autoComplete="timeout-to-kill"
-      id="timeout-to-kill"
-      onChange={newValue => setValue(newValue)}
-    />
-  </FormGroup>
+      fieldId: 'timeout-to-kill',
+    }}
+    inputProps={{
+      value,
+      placeholder: __('For example: 1, 2, 3, 4, 5...'),
+      autoComplete: 'timeout-to-kill',
+      id: 'timeout-to-kill',
+      onChange: newValue => setValue(newValue),
+    }}
+  />
 );
 
 export const PasswordField = ({ value, setValue }) => (
@@ -56,11 +58,11 @@ export const PasswordField = ({ value, setValue }) => (
       ),
       'password'
     )}
-    fieldId="password"
+    fieldId="job-password"
   >
     <TextInput
-      autoComplete="password"
-      id="password"
+      autoComplete="new-password" // to prevent firefox from autofilling the user password
+      id="job-password"
       type="password"
       placeholder="*****"
       value={value}
@@ -114,51 +116,54 @@ export const EffectiveUserPasswordField = ({ value, setValue }) => (
 );
 
 export const ConcurrencyLevelField = ({ value, setValue }) => (
-  <FormGroup
-    label={__('Concurrency level')}
-    labelIcon={helpLabel(
-      __(
-        'Run at most N tasks at a time. If this is set and proxy batch triggering is enabled, then tasks are triggered on the smart proxy in batches of size 1.'
+  <NumberInput
+    formProps={{
+      label: __('Concurrency level'),
+      labelIcon: helpLabel(
+        __(
+          'Run at most N tasks at a time. If this is set and proxy batch triggering is enabled, then tasks are triggered on the smart proxy in batches of size 1.'
+        ),
+        'concurrency-level'
       ),
-      'concurrency-level'
-    )}
-    fieldId="concurrency-level"
-  >
-    <TextInput
-      min={1}
-      type="number"
-      autoComplete="concurrency-level"
-      id="concurrency-level"
-      placeholder={__('For example: 1, 2, 3, 4, 5...')}
-      value={value}
-      onChange={newValue => setValue(newValue)}
-    />
-  </FormGroup>
+      fieldId: 'concurrency-level',
+    }}
+    inputProps={{
+      min: 1,
+      autoComplete: 'concurrency-level',
+      id: 'concurrency-level',
+      placeholder: __('For example: 1, 2, 3, 4, 5...'),
+      value,
+      onChange: newValue => setValue(newValue),
+    }}
+  />
 );
 
 export const TimeSpanLevelField = ({ value, setValue }) => (
-  <FormGroup
-    label={__('Time span')}
-    labelIcon={helpLabel(
-      __(
-        'Distribute execution over N seconds. If this is set and proxy batch triggering is enabled, then tasks are triggered on the smart proxy in batches of size 1.'
+  <NumberInput
+    formProps={{
+      label: __('Time span'),
+      labelIcon: helpLabel(
+        __(
+          'Distribute execution over N seconds. If this is set and proxy batch triggering is enabled, then tasks are triggered on the smart proxy in batches of size 1.'
+        ),
+        'time-span'
       ),
-      'time-span'
-    )}
-    fieldId="time-span"
-  >
-    <TextInput
-      min={1}
-      type="number"
-      autoComplete="time-span"
-      id="time-span"
-      placeholder={__('For example: 1, 2, 3, 4, 5...')}
-      value={value}
-      onChange={newValue => setValue(newValue)}
-    />
-  </FormGroup>
+      fieldId: 'time-span',
+    }}
+    inputProps={{
+      min: 1,
+      autoComplete: 'time-span',
+      id: 'time-span',
+      placeholder: __('For example: 1, 2, 3, 4, 5...'),
+      value,
+      onChange: newValue => setValue(newValue),
+    }}
+  />
 );
 
+export const TemplateInputsFields = ({ inputs, value, setValue }) => (
+  <>{inputs?.map(input => formatter(input, value, setValue))}</>
+);
 EffectiveUserField.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   setValue: PropTypes.func.isRequired,
@@ -179,3 +184,12 @@ ConcurrencyLevelField.propTypes = EffectiveUserField.propTypes;
 ConcurrencyLevelField.defaultProps = EffectiveUserField.defaultProps;
 TimeSpanLevelField.propTypes = EffectiveUserField.propTypes;
 TimeSpanLevelField.defaultProps = EffectiveUserField.defaultProps;
+TemplateInputsFields.propTypes = {
+  inputs: PropTypes.array.isRequired,
+  value: PropTypes.object,
+  setValue: PropTypes.func.isRequired,
+};
+
+TemplateInputsFields.defaultProps = {
+  value: {},
+};

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

@@ -1,25 +1,144 @@
 import React from 'react';
 import { Provider } from 'react-redux';
-import configureMockStore from 'redux-mock-store';
-import * as patternfly from '@patternfly/react-core';
 import { mount } from '@theforeman/test';
-import { AdvancedFields } from '../AdvancedFields';
-
-jest.spyOn(patternfly, 'FormGroup');
-patternfly.FormGroup.mockImplementation(props => (
-  <div>{props.navAriaLabel}</div>
-));
-const mockStore = configureMockStore([]);
-const store = mockStore({
-  JOB_TEMPLATE: { response: { effective_user: { overridable: true } } },
-});
+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 {
+  jobTemplateResponse as jobTemplate,
+  testSetup,
+  mockApi,
+} from '../../../__tests__/fixtures';
+
+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('rendring', () => {
-    const component = mount(
+  it('should save data between steps for advanced fields', async () => {
+    const wrapper = mount(
       <Provider store={store}>
-        <AdvancedFields advancedValues={{}} setAdvancedValues={jest.fn()} />
+        <JobWizard advancedValues={{}} setAdvancedValues={jest.fn()} />
       </Provider>
     );
-    expect(component).toMatchSnapshot();
+    // setup
+    wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click');
+    wrapper
+      .find('.pf-c-select__menu-item')
+      .first()
+      .simulate('click');
+
+    // test
+    expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(
+      0
+    );
+    wrapper
+      .find('.pf-c-wizard__nav-link')
+      .at(2)
+      .simulate('click'); // Advanced step
+    const effectiveUserInput = () => wrapper.find('input#effective-user');
+    const advancedTemplateInput = () =>
+      wrapper.find('.pf-c-form__group-control textarea');
+    const effectiveUesrValue = 'effective user new value';
+    const advancedTemplateInputValue = 'advanced input new value';
+    effectiveUserInput().getDOMNode().value = effectiveUesrValue;
+
+    effectiveUserInput().simulate('change');
+    wrapper.update();
+    advancedTemplateInput().getDOMNode().value = advancedTemplateInputValue;
+    advancedTemplateInput().simulate('change');
+    expect(effectiveUserInput().prop('value')).toEqual(effectiveUesrValue);
+    expect(advancedTemplateInput().prop('value')).toEqual(
+      advancedTemplateInputValue
+    );
+
+    wrapper
+      .find('.pf-c-wizard__nav-link')
+      .at(1)
+      .simulate('click');
+
+    expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-current').text()).toEqual(
+      'Target Hosts'
+    );
+    wrapper
+      .find('.pf-c-wizard__nav-link')
+      .at(2)
+      .simulate('click'); // Advanced step
+
+    expect(effectiveUserInput().prop('value')).toEqual(effectiveUesrValue);
+    expect(advancedTemplateInput().prop('value')).toEqual(
+      advancedTemplateInputValue
+    );
+  });
+  it('fill template fields', async () => {
+    render(
+      <Provider store={store}>
+        <JobWizard />
+      </Provider>
+    );
+    await act(async () => {
+      fireEvent.click(screen.getByText('Advanced Fields'));
+    });
+    const searchValue = 'search test';
+    const textValue = 'I am a text';
+    const dateValue = '08/07/2021';
+    const textField = screen.getByLabelText('adv plain hidden', {
+      selector: 'textarea',
+    });
+    const selectField = screen.getByText('option 1');
+    const searchField = screen.getByPlaceholderText('Filter...');
+    const dateField = screen.getByLabelText('adv date', {
+      selector: 'input',
+    });
+
+    fireEvent.click(selectField);
+    await act(async () => {
+      await fireEvent.click(screen.getByText('option 2'));
+      fireEvent.click(screen.getAllByText('Advanced Fields')[0]); // to remove focus
+      await fireEvent.change(textField, {
+        target: { value: textValue },
+      });
+
+      await fireEvent.change(searchField, {
+        target: { value: searchValue },
+      });
+      await fireEvent.change(dateField, {
+        target: { value: dateValue },
+      });
+    });
+    expect(
+      screen.getByLabelText('adv plain hidden', {
+        selector: 'textarea',
+      }).value
+    ).toBe(textValue);
+    expect(searchField.value).toBe(searchValue);
+    expect(dateField.value).toBe(dateValue);
+    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('Advanced Fields'));
+    });
+    expect(textField.value).toBe(textValue);
+    expect(searchField.value).toBe(searchValue);
+    expect(dateField.value).toBe(dateValue);
+    expect(screen.queryAllByText('option 1')).toHaveLength(0);
+    expect(screen.queryAllByText('option 2')).toHaveLength(1);
   });
 });