foreman_remote_execution 4.7.0 → 5.0.2

data/webpack/JobWizard/JobWizard.scss

@@ -1,53 +1,106 @@
 .job-wizard {
+  .wizard-title {
+    margin-bottom: 25px;
+  }
+
+  .pf-c-wizard__nav.pf-m-expanded {
+    z-index: calc(
+      var(--pf-c-wizard__footer--ZIndex) + 2
+    ); // So the small screen navigation can be shown above the select box
+  }
+
   .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
   }
-
+  .pf-c-wizard__nav {
+    z-index: calc(
+      var(--pf-c-wizard__footer--ZIndex) + 2
+    ); // So the navigation box can be shown above the wizard body
+  }
   .pf-c-wizard__main-body {
     max-width: 500px;
     .advanced-fields-title {
       margin-bottom: 10px;
     }
-    #advanced-fields-job-template {
-      .foreman-search-field {
-        // 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;
-          }
-        }
+
+  }
+
+  .gray-text {
+    color: var(--pf-global--Color--dark-200);
+  }
+
+  .target-hosts-and-inputs {
+    .hosts-chip-group {
+      margin-top: 8px;
+      float: left;
+      clear: left;
+      display: block;
+    }
+    .clear-chips {
+      margin-top: 8px;
+    }
+    .pf-c-select__toggle-typeahead {
+      border: 0px;
+    }
+
+    .target-method-select {
+      .pf-c-select__toggle-wrapper {
+        flex-wrap: nowrap;
       }
     }
   }
-
+  input[type='radio'],
+  input[type='checkbox'] {
+    margin: 0;
+  }
   .schedule-tab {
-    input[type='radio'],
-    input[type='checkbox'] {
-      margin: 0;
-    }
     .advanced-scheduling-button {
       text-align: start;
     }
+    #repeat-on-weekly {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+    }
+    .pf-l-grid {
+      gap: var(--pf-c-form--GridGap);
+    }
+    #repeat-on-hourly {
+      max-height: 300px;
+      overflow: scroll;
+    }
+  }
+
+  .pf-c-date-picker {
+    vertical-align: top;
+  }
+
+  .time-picker {
+    width: 150px;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    // overwriting bootstrap/_forms.scss margin: 4px 0 0;
+    margin: 0;
+  }
+  textarea {
+    min-height: 40px;
+    min-width: 100px;
+  }
+  #host-selection {
+    width: 500px;
+  }
+
+  .pf-c-modal-box {
+    width: auto;
+  }
+
+  .review-details {
+    .advanced-fields {
+      margin-left: 10px;
+    }
   }
 }

data/webpack/JobWizard/JobWizardConstants.js

@@ -4,6 +4,7 @@ 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 JOB_INVOCATION = 'JOB_INVOCATION';
 export const templatesUrl = foremanUrl('/api/v2/job_templates');
 
 export const repeatTypes = {
@@ -14,3 +15,46 @@ 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'),
+};
+
+export const initialScheduleState = {
+  repeatType: repeatTypes.noRepeat,
+  repeatAmount: '',
+  repeatData: {},
+  startsAt: '',
+  startsBefore: '',
+  ends: '',
+  isFuture: false,
+  isNeverEnds: false,
+  isTypeStatic: true,
+  purpose: '',
+};
+export const HOSTS_API = 'HOSTS_API';
+export const HOSTS = 'HOSTS';
+export const HOST_COLLECTIONS = 'HOST_COLLECTIONS';
+export const HOST_GROUPS = 'HOST_GROUPS';
+export const hostMethods = {
+  hosts: __('Hosts'),
+  hostCollections: __('Host collections'),
+  hostGroups: __('Host groups'),
+  searchQuery: __('Search query'),
+};
+
+export const hostQuerySearchID = 'searchBar'; // until https://projects.theforeman.org/issues/33737 is used
+export const hostsController = 'hosts';
+
+export const dataName = {
+  [HOSTS]: 'hosts',
+  [HOST_GROUPS]: 'hostgroups',
+};
+export const HOSTS_TO_PREVIEW_AMOUNT = 20;
+
+export const DEBOUNCE_HOST_COUNT = 700;
+export const HOST_IDS = 'HOST_IDS';

data/webpack/JobWizard/JobWizardSelectors.js

@@ -1,13 +1,18 @@
+import URI from 'urijs';
 import {
   selectAPIResponse,
   selectAPIStatus,
   selectAPIErrorMessage,
 } from 'foremanReact/redux/API/APISelectors';
+import { STATUS } from 'foremanReact/constants';
+import { selectRouterLocation } from 'foremanReact/routes/RouterSelector';
 
 import {
   JOB_TEMPLATES,
   JOB_CATEGORIES,
   JOB_TEMPLATE,
+  HOSTS_API,
+  JOB_INVOCATION,
 } from './JobWizardConstants';
 
 export const selectJobTemplatesStatus = state =>
@@ -22,6 +27,9 @@ export const selectJobTemplates = state =>
 export const selectJobCategories = state =>
   selectAPIResponse(state, JOB_CATEGORIES).job_categories || [];
 
+export const selectWithKatello = state =>
+  selectAPIResponse(state, JOB_CATEGORIES).with_katello || false;
+
 export const selectJobCategoriesStatus = state =>
   selectAPIStatus(state, JOB_CATEGORIES);
 
@@ -45,3 +53,27 @@ export const selectAdvancedTemplateInputs = state =>
 
 export const selectTemplateInputs = state =>
   selectAPIResponse(state, JOB_TEMPLATE).template_inputs || [];
+
+export const selectHostCount = state =>
+  selectAPIResponse(state, HOSTS_API).subtotal || 0;
+
+export const selectHosts = state =>
+  (selectAPIResponse(state, HOSTS_API).results || []).map(host => host.name);
+
+export const selectIsLoadingHosts = state =>
+  !selectAPIStatus(state, HOSTS_API) ||
+  selectAPIStatus(state, HOSTS_API) === STATUS.PENDING;
+
+export const selectResponse = selectAPIResponse;
+
+export const selectIsLoading = (state, key) =>
+  selectAPIStatus(state, key) === STATUS.PENDING;
+
+export const selectIsSubmitting = state =>
+  selectAPIStatus(state, JOB_INVOCATION) === STATUS.PENDING ||
+  selectAPIStatus(state, JOB_INVOCATION) === STATUS.RESOLVED;
+
+export const selectRouterSearch = state => {
+  const { search } = selectRouterLocation(state);
+  return URI.parseQuery(search);
+};

data/webpack/JobWizard/__tests__/fixtures.js

@@ -1,4 +1,6 @@
 import configureMockStore from 'redux-mock-store';
+import hostsQuery from '../steps/HostsAndInputs/hosts.gql';
+import hostgroupsQuery from '../steps/HostsAndInputs/hostgroups.gql';
 
 export const jobTemplate = {
   id: 178,
@@ -9,7 +11,6 @@ export const jobTemplate = {
   default: true,
   job_category: 'Ansible Commands',
   provider_type: 'Ansible',
-  description_format: 'Run %{command}',
   execution_timeout_interval: 2,
   description: null,
 };
@@ -48,6 +49,16 @@ export const jobTemplateResponse = {
       default: '',
       hidden_value: false,
     },
+    {
+      name: 'adv resource select',
+      required: false,
+      input_type: 'user',
+      value_type: 'resource',
+      advanced: true,
+      resource_type: 'ForemanTasks::Task',
+      default: '',
+      hidden_value: false,
+    },
     {
       name: 'adv search',
       required: false,
@@ -57,6 +68,7 @@ export const jobTemplateResponse = {
       resource_type: 'foreman_tasks/tasks',
       default: '',
       hidden_value: false,
+      url: 'foreman_tasks/tasks',
     },
     {
       name: 'adv date',
@@ -92,21 +104,47 @@ export const testSetup = (selectors, api) => {
   jest.spyOn(selectors, 'selectJobTemplates');
   jest.spyOn(selectors, 'selectJobCategories');
   jest.spyOn(selectors, 'selectJobCategoriesStatus');
+  jest.spyOn(selectors, 'selectWithKatello');
 
+  jest.spyOn(selectors, 'selectTemplateInputs');
+  jest.spyOn(selectors, 'selectAdvancedTemplateInputs');
+  selectors.selectWithKatello.mockImplementation(() => true);
+  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' },
   ]);
+  selectors.selectJobTemplate.mockImplementation(() => jobTemplateResponse);
   const mockStore = configureMockStore([]);
-  const store = mockStore({});
+  const store = mockStore({
+    ForemanTasksTask: {
+      response: {
+        subtotal: 10,
+        results: [
+          { id: '1', name: 'resource1' },
+          { id: '2', name: 'resource2' },
+        ],
+      },
+    },
+    HOST_COLLECTIONS: {
+      response: {
+        subtotal: 3,
+        results: [
+          { id: '74', name: 'host_collection1' },
+          { id: '43', name: 'host_collection2' },
+        ],
+      },
+    },
+  });
   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') {
@@ -122,7 +160,52 @@ export const mockApi = api => {
         handleSuccess({
           data: { results: [jobTemplate] },
         });
+    } else if (action.key === 'HOST_IDS') {
+      handleSuccess &&
+        handleSuccess({
+          data: { results: [{ name: 'host1' }, { name: 'host3' }] },
+        });
     }
     return { type: 'get', ...action };
   });
 };
+
+export const gqlMock = [
+  {
+    request: {
+      query: hostsQuery,
+      variables: {
+        search: 'name~"" and organization_id=1 and location_id=2',
+      },
+    },
+    result: {
+      data: {
+        hosts: {
+          totalCount: 3,
+          nodes: [{ name: 'host1' }, { name: 'host2' }, { name: 'host3' }],
+        },
+      },
+    },
+  },
+
+  {
+    request: {
+      query: hostgroupsQuery,
+      variables: {
+        search: 'name~"" and organization_id=1 and location_id=2',
+      },
+    },
+    result: {
+      data: {
+        hostgroups: {
+          totalCount: 3,
+          nodes: [
+            { name: 'host_group1' },
+            { name: 'host_group2' },
+            { name: 'host_group3' },
+          ],
+        },
+      },
+    },
+  },
+];

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

@@ -2,31 +2,41 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { mount } from '@theforeman/test';
 import { render, fireEvent, screen, act } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
 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,
+  gqlMock,
 } from './fixtures';
 
 const store = testSetup(selectors, api);
 
-selectors.selectJobTemplate.mockImplementation(() => {});
-
-api.get.mockImplementation(({ handleSuccess, ...action }) => {
-  if (action.key === 'JOB_CATEGORIES') {
-    handleSuccess && handleSuccess({ data: { job_categories: jobCategories } });
-  }
-  return { type: 'get', ...action };
-});
 describe('Job wizard fill', () => {
   it('should select template', async () => {
+    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.mockRestore();
+    jest.spyOn(selectors, 'selectJobTemplate');
+    selectors.selectJobTemplate.mockImplementation(() => ({}));
     const wrapper = mount(
       <Provider store={store}>
-        <JobWizard advancedValues={{}} setAdvancedValues={jest.fn()} />
+        <JobWizard />
       </Provider>
     );
     expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(
@@ -34,7 +44,8 @@ describe('Job wizard fill', () => {
     );
     selectors.selectJobCategoriesStatus.mockImplementation(() => 'RESOLVED');
     expect(store.getActions()).toMatchSnapshot('initial');
-
+    selectors.selectJobTemplate.mockRestore();
+    jest.spyOn(selectors, 'selectJobTemplate');
     selectors.selectJobTemplate.mockImplementation(() => jobTemplate);
     wrapper.find('.pf-c-button.pf-c-select__toggle-button').simulate('click');
     await act(async () => {
@@ -42,9 +53,9 @@ describe('Job wizard fill', () => {
         .find('.pf-c-select__menu-item')
         .first()
         .simulate('click');
-      await wrapper.update();
     });
     expect(store.getActions().slice(-1)).toMatchSnapshot('select template');
+    wrapper.update();
     expect(wrapper.find('.pf-c-wizard__nav-link.pf-m-disabled')).toHaveLength(
       0
     );
@@ -52,23 +63,19 @@ describe('Job wizard fill', () => {
 
   it('have all steps', async () => {
     selectors.selectJobCategoriesStatus.mockImplementation(() => null);
-    selectors.selectJobTemplate.mockRestore();
     selectors.selectJobTemplates.mockRestore();
     selectors.selectJobCategories.mockRestore();
     mockApi(api);
 
     render(
-      <Provider store={store}>
-        <JobWizard />
-      </Provider>
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
     );
-    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/__tests__/validation.test.js

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { render, fireEvent, screen, act } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import '@testing-library/jest-dom';
+import * as api from 'foremanReact/redux/API';
+import { JobWizard } from '../JobWizard';
+import * as selectors from '../JobWizardSelectors';
+import { testSetup, mockApi, jobTemplateResponse, gqlMock } from './fixtures';
+import { WIZARD_TITLES } from '../JobWizardConstants';
+
+const store = testSetup(selectors, api);
+
+mockApi(api);
+const templateInputs = [...jobTemplateResponse.template_inputs];
+const advancedTemplateInputs = [
+  ...jobTemplateResponse.advanced_template_inputs,
+];
+templateInputs[0].default = null;
+advancedTemplateInputs[0].default = null;
+selectors.selectTemplateInputs.mockImplementation(() => templateInputs);
+selectors.selectAdvancedTemplateInputs.mockImplementation(
+  () => advancedTemplateInputs
+);
+
+describe('Job wizard validation', () => {
+  afterAll(() => {
+    selectors.selectTemplateInputs.mockRestore();
+    selectors.selectAdvancedTemplateInputs.mockRestore();
+  });
+  it('requeried', async () => {
+    render(
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
+    );
+    expect(screen.getByText(WIZARD_TITLES.advanced)).toBeDisabled();
+    expect(screen.getByText(WIZARD_TITLES.schedule)).toBeDisabled();
+    expect(screen.getByText(WIZARD_TITLES.review)).toBeDisabled();
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.hostsAndInputs));
+    });
+    const textField = screen.getByLabelText('plain hidden', {
+      selector: 'textarea',
+    });
+    await act(async () => {
+      await fireEvent.change(textField, {
+        target: { value: 'text' },
+      });
+    });
+    expect(screen.getByText(WIZARD_TITLES.advanced)).toBeEnabled();
+    expect(screen.getByText(WIZARD_TITLES.schedule)).toBeDisabled();
+    expect(screen.getByText(WIZARD_TITLES.review)).toBeDisabled();
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.advanced));
+    });
+    const advTextField = screen.getByLabelText('adv plain hidden', {
+      selector: 'textarea',
+    });
+    await act(async () => {
+      await fireEvent.change(advTextField, {
+        target: { value: 'text' },
+      });
+    });
+
+    expect(
+      screen.getByText(WIZARD_TITLES.advanced, { selector: 'button' })
+    ).toBeEnabled();
+    expect(screen.getByText(WIZARD_TITLES.schedule)).toBeEnabled();
+    expect(screen.getByText(WIZARD_TITLES.review)).toBeEnabled();
+  });
+
+  it('advanced number', async () => {
+    render(
+      <MockedProvider mocks={gqlMock} addTypename={false}>
+        <Provider store={store}>
+          <JobWizard />
+        </Provider>
+      </MockedProvider>
+    );
+
+    // setup
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.hostsAndInputs));
+    });
+    await act(async () => {
+      await fireEvent.change(
+        screen.getByLabelText('plain hidden', {
+          selector: 'textarea',
+        }),
+        {
+          target: { value: 'text' },
+        }
+      );
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByText(WIZARD_TITLES.advanced));
+    });
+    await act(async () => {
+      await fireEvent.change(
+        screen.getByLabelText('adv plain hidden', {
+          selector: 'textarea',
+        }),
+        {
+          target: { value: 'text' },
+        }
+      );
+    });
+    expect(
+      screen.getByText(WIZARD_TITLES.advanced, { selector: 'button' })
+    ).toBeEnabled();
+    expect(screen.getByText(WIZARD_TITLES.schedule)).toBeEnabled();
+    expect(screen.getByText(WIZARD_TITLES.review)).toBeEnabled();
+
+    // test
+    const timeoutField = screen.getByLabelText('timeout to kill', {
+      selector: 'input',
+    });
+    await act(async () => {
+      await fireEvent.change(timeoutField, {
+        target: { value: 'text' },
+      });
+    });
+
+    expect(screen.getByText(WIZARD_TITLES.schedule)).toBeDisabled();
+    expect(screen.getByText(WIZARD_TITLES.review)).toBeDisabled();
+
+    await act(async () => {
+      await fireEvent.change(timeoutField, {
+        target: { value: 123 },
+      });
+    });
+
+    expect(screen.getByText(WIZARD_TITLES.schedule)).toBeEnabled();
+    expect(screen.getByText(WIZARD_TITLES.review)).toBeEnabled();
+  });
+});

data/webpack/JobWizard/autofill.js

@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { get } from 'foremanReact/redux/API';
+import { HOST_IDS } from './JobWizardConstants';
+import { selectRouterSearch } from './JobWizardSelectors';
+import './JobWizard.scss';
+
+export const useAutoFill = ({ setSelectedTargets, setHostsSearchQuery }) => {
+  const fills = useSelector(selectRouterSearch);
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (Object.keys(fills).length) {
+      if (fills['host_ids[]']) {
+        dispatch(
+          get({
+            key: HOST_IDS,
+            url: '/api/hosts',
+            params: { search: `id = ${fills['host_ids[]'].join(' or id = ')}` },
+            handleSuccess: ({ data }) => {
+              setSelectedTargets(currentTargets => ({
+                ...currentTargets,
+                hosts: (data.results || []).map(({ name }) => ({
+                  id: name,
+                  name,
+                })),
+              }));
+            },
+          })
+        );
+      }
+      if (fills.search) {
+        setHostsSearchQuery(fills.search);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

data/webpack/JobWizard/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Title, Divider } from '@patternfly/react-core';
 import { translate as __ } from 'foremanReact/common/I18n';
 import PageLayout from 'foremanReact/routes/common/PageLayout/PageLayout';
@@ -29,4 +30,10 @@ const JobWizardPage = () => {
   );
 };
 
+JobWizardPage.propTypes = {
+  location: PropTypes.shape({
+    search: PropTypes.string,
+  }).isRequired,
+};
+
 export default JobWizardPage;