foreman_remote_execution 4.5.6 → 4.6.0

data/webpack/JobWizard/JobWizard.js

@@ -1,64 +1,28 @@
-/* eslint-disable camelcase */
 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, WIZARD_TITLES } from './JobWizardConstants';
+import { JOB_TEMPLATE } 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: { execution_timeout_interval, description_format },
-      },
-    }) => {
-      const advancedTemplateValues = {};
-      const defaultTemplateValues = {};
-      const inputs = template_inputs;
-      const advancedInputs = advanced_template_inputs;
-      if (inputs) {
-        setTemplateValues(() => {
-          inputs.forEach(input => {
-            defaultTemplateValues[input.name] = input?.default || '';
-          });
-          return defaultTemplateValues;
-        });
-      }
-      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,
-        };
-      });
-    },
-    []
-  );
+  const setDefaults = useCallback(response => {
+    const responseJob = response.data;
+    setAdvancedValues({
+      effectiveUserValue: responseJob.effective_user?.value || '',
+      timeoutToKill: responseJob.job_template.execution_timeout_interval || '',
+    });
+  }, []);
   useEffect(() => {
     if (jobTemplateID) {
       dispatch(
@@ -75,7 +39,7 @@ export const JobWizard = () => {
   const isTemplate = !templateError && !!jobTemplateID;
   const steps = [
     {
-      name: WIZARD_TITLES.categoryAndTemplate,
+      name: __('Category and Template'),
       component: (
         <CategoryAndTemplate
           jobTemplate={jobTemplateID}
@@ -86,19 +50,12 @@ export const JobWizard = () => {
       ),
     },
     {
-      name: WIZARD_TITLES.hostsAndInputs,
-      component: (
-        <HostsAndInputs
-          templateValues={templateValues}
-          setTemplateValues={setTemplateValues}
-          selectedHosts={selectedHosts}
-          setSelectedHosts={setSelectedHosts}
-        />
-      ),
+      name: __('Target Hosts'),
+      component: <p>Target Hosts</p>,
       canJumpTo: isTemplate,
     },
     {
-      name: WIZARD_TITLES.advanced,
+      name: __('Advanced Fields'),
       component: (
         <AdvancedFields
           advancedValues={advancedValues}
@@ -114,12 +71,12 @@ export const JobWizard = () => {
       canJumpTo: isTemplate,
     },
     {
-      name: WIZARD_TITLES.schedule,
-      component: <Schedule />,
+      name: __('Schedule'),
+      component: <p>Schedule</p>,
       canJumpTo: isTemplate,
     },
     {
-      name: WIZARD_TITLES.review,
+      name: __('Review Details'),
       component: <p>Review Details</p>,
       nextButtonText: 'Run',
       canJumpTo: isTemplate,

data/webpack/JobWizard/JobWizard.scss

@@ -1,10 +1,5 @@
 .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
@@ -15,58 +10,5 @@
     .advanced-fields-title {
       margin-bottom: 10px;
     }
-    #advanced-fields-job-template {
-      .foreman-search-field {
-        .rbt-input-hint input{
-          display: none;
-        }
-        // Giving pf3 search bar a pf4 look
-        .search-bar {
-          display: block;
-        }
-        .input-group-btn {
-          display: none;
-        }
-        li {
-          font-size: 16px;
-        }
-        input {
-          font-size: 16px;
-          height: 36px;
-        }
-        .foreman-autocomplete .autocomplete-focus-shortcut {
-          top: 8px;
-          font-size: 16px;
-        }
-        .foreman-autocomplete .autocomplete-aux {
-          top: 8px;
-          font-size: 16px;
-          .autocomplete-clear-button {
-            font-size: 16px;
-          }
-        }
-      }
-    }
-  }
-
-  .hosts-chip-group {
-    margin-top: 8px;
-  }
-  input[type='radio'],
-  input[type='checkbox'] {
-    margin: 0;
-  }
-  .schedule-tab {
-    input[type='radio'],
-    input[type='checkbox'] {
-      margin: 0;
-    }
-    .advanced-scheduling-button {
-      text-align: start;
-    }
-  }
-  textarea {
-    min-height: 40px;
-    min-width: 100px;
   }
 }

data/webpack/JobWizard/JobWizardConstants.js

@@ -1,24 +1,6 @@
-import { translate as __ } from 'foremanReact/common/I18n';
 import { foremanUrl } from 'foremanReact/common/helpers';
 
 export const JOB_TEMPLATES = 'JOB_TEMPLATES';
 export const JOB_CATEGORIES = 'JOB_CATEGORIES';
 export const JOB_TEMPLATE = 'JOB_TEMPLATE';
 export const templatesUrl = foremanUrl('/api/v2/job_templates');
-
-export const repeatTypes = {
-  noRepeat: __('Does not repeat'),
-  cronline: __('Cronline'),
-  monthly: __('Monthly'),
-  weekly: __('Weekly'),
-  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/JobWizardSelectors.js

@@ -36,12 +36,3 @@ export const selectTemplateError = state =>
 
 export const selectJobTemplate = state =>
   selectAPIResponse(state, JOB_TEMPLATE);
-
-export const selectEffectiveUser = state =>
-  selectAPIResponse(state, JOB_TEMPLATE).effective_user;
-
-export const selectAdvancedTemplateInputs = state =>
-  selectAPIResponse(state, JOB_TEMPLATE).advanced_template_inputs || [];
-
-export const selectTemplateInputs = state =>
-  selectAPIResponse(state, JOB_TEMPLATE).template_inputs || [];

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as patternfly from '@patternfly/react-core';
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import JobWizardPage from '../index';
+
+jest.spyOn(patternfly, 'Wizard');
+patternfly.Wizard.mockImplementation(props => <div>{props.navAriaLabel}</div>);
+
+const fixtures = {
+  'renders ': {},
+};
+describe('JobWizardPage rendering', () =>
+  testComponentSnapshotsWithFixtures(JobWizardPage, fixtures));

data/webpack/JobWizard/__tests__/__snapshots__/JobWizard.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JobWizardPage rendering renders  1`] = `
+<PageLayout
+  breadcrumbOptions={
+    Object {
+      "breadcrumbItems": Array [
+        Object {
+          "caption": "Jobs",
+          "url": "/jobs",
+        },
+        Object {
+          "caption": "Run job",
+        },
+      ],
+    }
+  }
+  header="Run job"
+  searchable={false}
+>
+  <Title
+    headingLevel="h2"
+    size="2xl"
+  >
+    Run job
+  </Title>
+  <Divider
+    component="div"
+  />
+  <JobWizard />
+</PageLayout>
+`;

data/webpack/JobWizard/__tests__/fixtures.js

@@ -1,8 +1,6 @@
-import configureMockStore from 'redux-mock-store';
-
-export const jobTemplate = {
+const jobTemplate = {
   id: 178,
-  name: 'template1',
+  name: 'Run Command - Ansible Default',
   template:
     "---\n- hosts: all\n  tasks:\n    - shell:\n        cmd: |\n<%=       indent(10) { input('command') } %>\n      register: out\n    - debug: var=out",
   snippet: false,
@@ -25,112 +23,4 @@ export const jobTemplateResponse = {
     overridable: true,
     current_user: false,
   },
-  advanced_template_inputs: [
-    {
-      name: 'adv plain hidden',
-      required: true,
-      input_type: 'user',
-      description: 'some Description',
-      advanced: true,
-      value_type: 'plain',
-      resource_type: 'ansible_roles',
-      default: 'Default val',
-      hidden_value: true,
-    },
-    {
-      name: 'adv plain select',
-      required: false,
-      input_type: 'user',
-      options: 'option 1\r\noption 2\r\noption 3\r\noption 4',
-      advanced: true,
-      value_type: 'plain',
-      resource_type: 'ansible_roles',
-      default: '',
-      hidden_value: false,
-    },
-    {
-      name: 'adv search',
-      required: false,
-      options: '',
-      advanced: true,
-      value_type: 'search',
-      resource_type: 'foreman_tasks/tasks',
-      default: '',
-      hidden_value: false,
-    },
-    {
-      name: 'adv date',
-      required: false,
-      options: '',
-      advanced: true,
-      value_type: 'date',
-      resource_type: 'ansible_roles',
-      default: '',
-      hidden_value: false,
-    },
-  ],
-  template_inputs: [
-    {
-      name: 'plain hidden',
-      required: true,
-      input_type: 'user',
-      description: 'some Description',
-      advanced: false,
-      value_type: 'plain',
-      resource_type: 'ansible_roles',
-      default: 'Default val',
-      hidden_value: true,
-    },
-  ],
-};
-
-export const jobCategories = ['Ansible Commands', 'Puppet', 'Services'];
-
-export const testSetup = (selectors, api) => {
-  jest.spyOn(api, 'get');
-  jest.spyOn(selectors, 'selectJobTemplate');
-  jest.spyOn(selectors, 'selectJobTemplates');
-  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,
-    { ...jobTemplate, id: 2, name: 'template2' },
-  ]);
-  const mockStore = configureMockStore([]);
-  const store = mockStore({});
-  return store;
-};
-
-export const mockTemplate = selectors => {
-  selectors.selectJobTemplate.mockImplementation(() => jobTemplate);
-  selectors.selectJobCategoriesStatus.mockImplementation(() => 'RESOLVED');
-};
-export const mockApi = api => {
-  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: jobTemplateResponse,
-        });
-    } else if (action.key === 'JOB_TEMPLATES') {
-      handleSuccess &&
-        handleSuccess({
-          data: { results: [jobTemplate] },
-        });
-    }
-    return { type: 'get', ...action };
-  });
 };

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

@@ -1,28 +1,40 @@
 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 { WIZARD_TITLES } from '../JobWizardConstants';
-import {
-  testSetup,
-  mockApi,
-  jobCategories,
-  jobTemplateResponse as jobTemplate,
-} from './fixtures';
+import { jobTemplates, jobTemplateResponse as jobTemplate } from './fixtures';
 
-const store = testSetup(selectors, api);
+jest.spyOn(api, 'get');
+jest.spyOn(selectors, 'selectJobTemplate');
+jest.spyOn(selectors, 'selectJobTemplates');
+jest.spyOn(selectors, 'selectJobCategories');
+jest.spyOn(selectors, 'selectJobCategoriesStatus');
 
-selectors.selectJobTemplate.mockImplementation(() => {});
+const jobCategories = ['Ansible Commands', 'Puppet', 'Services'];
 
 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(
@@ -39,10 +51,7 @@ 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')
-        .first()
-        .simulate('click');
+      await wrapper.find('.pf-c-select__menu-item').simulate('click');
       await wrapper.update();
     });
     expect(store.getActions().slice(-1)).toMatchSnapshot('select template');
@@ -51,20 +60,87 @@ 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();
-    mockApi(api);
+    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 };
+    });
 
     render(
       <Provider store={store}>
         <JobWizard />
       </Provider>
     );
-    const titles = Object.values(WIZARD_TITLES);
-    const steps = [titles[1], titles[0], ...titles.slice(2)]; // the first title is selected at the beggining
+    const steps = [
+      'Target Hosts',
+      'Advanced Fields',
+      'Schedule',
+      'Review Details',
+      'Category and Template',
+    ];
     // 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,12 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { Form } from '@patternfly/react-core';
-import {
-  selectEffectiveUser,
-  selectAdvancedTemplateInputs,
-  selectTemplateInputs,
-} from '../../JobWizardSelectors';
+import { Title, Form } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { selectJobTemplate } from '../../JobWizardSelectors';
 import {
   EffectiveUserField,
   TimeoutToKillField,
@@ -15,29 +12,17 @@ import {
   EffectiveUserPasswordField,
   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);
-  const advancedTemplateInputs = useSelector(selectAdvancedTemplateInputs);
-  const templateInputs = useSelector(selectTemplateInputs);
+  const jobTemplate = useSelector(selectJobTemplate);
+  const effectiveUser = jobTemplate.effective_user;
   return (
     <>
-      <WizardTitle
-        title={WIZARD_TITLES.advanced}
-        className="advanced-fields-title"
-      />
-      <Form id="advanced-fields-job-template" autoComplete="off">
-        <TemplateInputsFields
-          inputs={advancedTemplateInputs}
-          value={advancedValues.templateValues}
-          setValue={newValue => setAdvancedValues({ templateValues: newValue })}
-        />
+      <Title headingLevel="h2" className="advanced-fields-title">
+        {__('Advanced Fields')}
+      </Title>
+      <Form>
         {effectiveUser?.overridable && (
           <EffectiveUserField
             value={advancedValues.effectiveUserValue}
@@ -48,11 +33,6 @@ export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
             }
           />
         )}
-        <DescriptionField
-          inputs={templateInputs}
-          value={advancedValues.description}
-          setValue={newValue => setAdvancedValues({ description: newValue })}
-        />
         <TimeoutToKillField
           value={advancedValues.timeoutToKill}
           setValue={newValue =>
@@ -101,14 +81,6 @@ export const AdvancedFields = ({ advancedValues, setAdvancedValues }) => {
             })
           }
         />
-        <ExecutionOrderingField
-          isRandomizedOrdering={advancedValues.isRandomizedOrdering}
-          setValue={newValue =>
-            setAdvancedValues({
-              isRandomizedOrdering: newValue,
-            })
-          }
-        />
       </Form>
     </>
   );