foreman_remote_execution 4.3.1 → 4.4.0

data/webpack/JobWizard/JobWizard.scss

@@ -0,0 +1,12 @@
+.job-wizard {
+  .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__main-body {
+    max-width: 500px;
+  }
+}

data/webpack/JobWizard/JobWizardConstants.js

@@ -0,0 +1,5 @@
+import { foremanUrl } from 'foremanReact/common/helpers';
+
+export const JOB_TEMPLATES = 'JOB_TEMPLATES';
+export const JOB_CATEGORIES = 'JOB_CATEGORIES';
+export const templatesUrl = foremanUrl('/api/v2/job_templates');

data/webpack/JobWizard/JobWizardSelectors.js

@@ -0,0 +1,21 @@
+import {
+  selectAPIResponse,
+  selectAPIStatus,
+} from 'foremanReact/redux/API/APISelectors';
+
+import { JOB_TEMPLATES, JOB_CATEGORIES } from './JobWizardConstants';
+
+export const selectJobTemplatesStatus = state =>
+  selectAPIStatus(state, JOB_TEMPLATES);
+
+export const filterJobTemplates = templates =>
+  templates?.filter(template => !template.snippet) || [];
+
+export const selectJobTemplates = state =>
+  filterJobTemplates(selectAPIResponse(state, JOB_TEMPLATES)?.results);
+
+export const selectJobCategories = state =>
+  selectAPIResponse(state, JOB_CATEGORIES).job_categories || [];
+
+export const selectJobCategoriesStatus = state =>
+  selectAPIStatus(state, JOB_CATEGORIES);

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

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

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`JobWizard rendering renders  1`] = `
+<mockConstructor
+  className="job-wizard"
+  height="70vh"
+  navAriaLabel="Run Job steps"
+  onClose={[Function]}
+  steps={
+    Array [
+      Object {
+        "component": <ConnectedCategoryAndTemplate
+          category=""
+          jobTemplate={null}
+          setCategory={[Function]}
+          setJobTemplate={[Function]}
+        />,
+        "name": "Category and template",
+      },
+      Object {
+        "canJumpTo": false,
+        "component": <p>
+          TargetHosts 
+        </p>,
+        "name": "Target hosts",
+      },
+      Object {
+        "canJumpTo": false,
+        "component": <p>
+           AdvancedFields 
+        </p>,
+        "name": "Advanced fields",
+      },
+      Object {
+        "canJumpTo": false,
+        "component": <p>
+          Schedule
+        </p>,
+        "name": "Schedule",
+      },
+      Object {
+        "canJumpTo": false,
+        "component": <p>
+          ReviewDetails
+        </p>,
+        "name": "Review details",
+        "nextButtonText": "Run",
+      },
+    ]
+  }
+/>
+`;
+
+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/steps/CategoryAndTemplate/CategoryAndTemplate.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Title, Text, TextVariants, Form } from '@patternfly/react-core';
+import { translate as __ } from 'foremanReact/common/I18n';
+import { SelectField } from '../form/SelectField';
+import { GroupedSelectField } from '../form/GroupedSelectField';
+
+export const CategoryAndTemplate = ({
+  jobCategories,
+  jobTemplates,
+  setJobTemplate,
+  selectedTemplateID,
+  selectedCategory,
+  setCategory,
+}) => {
+  const templatesGroups = {};
+  jobTemplates.forEach(template => {
+    if (templatesGroups[template.provider_type]?.options)
+      templatesGroups[template.provider_type].options.push({
+        label: template.name,
+        value: template.id,
+      });
+    else
+      templatesGroups[template.provider_type] = {
+        options: [{ label: template.name, value: template.id }],
+        groupLabel: template.provider_type,
+      };
+  });
+
+  const selectedTemplate = jobTemplates.find(
+    template => template.id === selectedTemplateID
+  )?.name;
+
+  const onSelectCategory = newCategory => {
+    setCategory(newCategory);
+    setJobTemplate(null);
+  };
+  return (
+    <>
+      <Title headingLevel="h2">{__('Category And Template')}</Title>
+      <Text component={TextVariants.p}>{__('All fields are required.')}</Text>
+      <Form>
+        <SelectField
+          label={__('Job category')}
+          fieldId="job_category"
+          options={jobCategories}
+          setValue={onSelectCategory}
+          value={selectedCategory}
+        />
+        <GroupedSelectField
+          label={__('Job template')}
+          fieldId="job_template"
+          groups={Object.values(templatesGroups)}
+          setSelected={setJobTemplate}
+          selected={selectedTemplate}
+        />
+      </Form>
+    </>
+  );
+};
+
+CategoryAndTemplate.propTypes = {
+  jobCategories: PropTypes.array,
+  jobTemplates: PropTypes.array,
+  setJobTemplate: PropTypes.func.isRequired,
+  selectedTemplateID: PropTypes.number,
+  setCategory: PropTypes.func.isRequired,
+  selectedCategory: PropTypes.string,
+};
+CategoryAndTemplate.defaultProps = {
+  jobCategories: [],
+  jobTemplates: [],
+  selectedTemplateID: null,
+  selectedCategory: null,
+};
+
+export default CategoryAndTemplate;

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

@@ -0,0 +1,45 @@
+import { testComponentSnapshotsWithFixtures } from '@theforeman/test';
+import { CategoryAndTemplate } from './CategoryAndTemplate';
+
+const fixtures = {
+  'renders with props': {
+    jobCategories: [
+      'Commands',
+      'Ansible Playbook',
+      'Ansible Galaxy',
+      'Ansible Roles Installation',
+    ],
+    jobTemplates: [
+      {
+        id: 190,
+        name: 'ab Run Command - SSH Default clone',
+        job_category: 'Commands',
+        provider_type: 'SSH',
+        snippet: false,
+      },
+      {
+        id: 168,
+        name: 'Ansible Roles - Ansible Default',
+        job_category: 'Ansible Playbook',
+        provider_type: 'Ansible',
+        snippet: false,
+      },
+      {
+        id: 170,
+        name: 'Ansible Roles - Install from git',
+        job_category: 'Ansible Roles Installation',
+        provider_type: 'Ansible',
+        snippet: false,
+      },
+    ],
+    setJobTemplate: jest.fn(),
+    selectedTemplateID: 190,
+    setCategory: jest.fn(),
+    selectedCategory: 'I am a category',
+  },
+};
+
+describe('CategoryAndTemplate', () => {
+  describe('rendering', () =>
+    testComponentSnapshotsWithFixtures(CategoryAndTemplate, fixtures));
+});

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

@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CategoryAndTemplate rendering renders with props 1`] = `
+<Fragment>
+  <Title
+    headingLevel="h2"
+  >
+    Category And Template
+  </Title>
+  <Text
+    component="p"
+  >
+    All fields are required.
+  </Text>
+  <Form>
+    <SelectField
+      fieldId="job_category"
+      label="Job category"
+      options={
+        Array [
+          "Commands",
+          "Ansible Playbook",
+          "Ansible Galaxy",
+          "Ansible Roles Installation",
+        ]
+      }
+      setValue={[Function]}
+      value="I am a category"
+    />
+    <GroupedSelectField
+      fieldId="job_template"
+      groups={
+        Array [
+          Object {
+            "groupLabel": "SSH",
+            "options": Array [
+              Object {
+                "label": "ab Run Command - SSH Default clone",
+                "value": 190,
+              },
+            ],
+          },
+          Object {
+            "groupLabel": "Ansible",
+            "options": Array [
+              Object {
+                "label": "Ansible Roles - Ansible Default",
+                "value": 168,
+              },
+              Object {
+                "label": "Ansible Roles - Install from git",
+                "value": 170,
+              },
+            ],
+          },
+        ]
+      }
+      label="Job template"
+      selected="ab Run Command - SSH Default clone"
+      setSelected={[MockFunction]}
+    />
+  </Form>
+</Fragment>
+`;

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

@@ -0,0 +1,86 @@
+import React, { useEffect } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import URI from 'urijs';
+import { get } from 'foremanReact/redux/API';
+import {
+  selectJobCategories,
+  selectJobTemplates,
+  selectJobCategoriesStatus,
+  filterJobTemplates,
+} from '../../JobWizardSelectors';
+import { CategoryAndTemplate } from './CategoryAndTemplate';
+
+import {
+  JOB_TEMPLATES,
+  JOB_CATEGORIES,
+  templatesUrl,
+} from '../../JobWizardConstants';
+
+const ConnectedCategoryAndTemplate = ({
+  jobTemplate,
+  setJobTemplate,
+  category,
+  setCategory,
+}) => {
+  const dispatch = useDispatch();
+
+  const jobCategoriesStatus = useSelector(selectJobCategoriesStatus);
+  useEffect(() => {
+    if (!jobCategoriesStatus) {
+      // Don't reload categories if they are already loaded
+      dispatch(
+        get({
+          key: JOB_CATEGORIES,
+          url: '/ui_job_wizard/categories',
+          handleSuccess: response =>
+            setCategory(response.data.job_categories[0] || ''),
+        })
+      );
+    }
+  }, [jobCategoriesStatus, dispatch, setCategory]);
+
+  const jobCategories = useSelector(selectJobCategories);
+
+  useEffect(() => {
+    if (category) {
+      const templatesUrlObject = new URI(templatesUrl);
+      dispatch(
+        get({
+          key: JOB_TEMPLATES,
+          url: templatesUrlObject.addSearch({
+            search: `job_category="${category}"`,
+            per_page: 'all',
+          }),
+          handleSuccess: response =>
+            setJobTemplate(
+              Number(filterJobTemplates(response?.data?.results)[0]?.id) || null
+            ),
+        })
+      );
+    }
+  }, [category, dispatch, setJobTemplate]);
+
+  const jobTemplates = useSelector(selectJobTemplates);
+
+  return (
+    <CategoryAndTemplate
+      jobTemplates={jobTemplates}
+      jobCategories={jobCategories}
+      setJobTemplate={setJobTemplate}
+      selectedTemplateID={jobTemplate}
+      setCategory={setCategory}
+      selectedCategory={category}
+    />
+  );
+};
+
+ConnectedCategoryAndTemplate.propTypes = {
+  jobTemplate: PropTypes.number,
+  setJobTemplate: PropTypes.func.isRequired,
+  category: PropTypes.string.isRequired,
+  setCategory: PropTypes.func.isRequired,
+};
+ConnectedCategoryAndTemplate.defaultProps = { jobTemplate: null };
+
+export default ConnectedCategoryAndTemplate;

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

@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  SelectOption,
+  Select,
+  SelectGroup,
+  SelectVariant,
+  FormGroup,
+} from '@patternfly/react-core';
+
+export const GroupedSelectField = ({
+  label,
+  fieldId,
+  groups,
+  selected,
+  setSelected,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onSelect = selection => {
+    setIsOpen(false);
+    setSelected(selection);
+  };
+
+  const onClear = () => {
+    onSelect(null);
+  };
+
+  const options = groups.map((group, groupIndex) => (
+    <SelectGroup key={groupIndex} label={group.groupLabel}>
+      {group.options.map((option, optionIndex) => (
+        <SelectOption
+          key={optionIndex}
+          value={option.label}
+          onClick={() => onSelect(option.value)}
+        />
+      ))}
+    </SelectGroup>
+  ));
+
+  const onFilter = evt => {
+    const textInput = evt?.target?.value || '';
+    if (textInput === '') {
+      return options;
+    }
+    return options
+      .map(group => {
+        const filteredGroup = React.cloneElement(group, {
+          children: group.props.children.filter(item =>
+            item.props.value.toLowerCase().includes(textInput.toLowerCase())
+          ),
+        });
+        if (filteredGroup.props.children.length > 0) return filteredGroup;
+        return null;
+      })
+      .filter(newGroup => newGroup);
+  };
+
+  return (
+    <FormGroup label={label} fieldId={fieldId}>
+      <Select
+        isGrouped
+        variant={SelectVariant.typeahead}
+        onToggle={setIsOpen}
+        onFilter={onFilter}
+        isOpen={isOpen}
+        onSelect={() => null}
+        selections={selected}
+        className="without_select2"
+        onClear={onClear}
+      >
+        {options}
+      </Select>
+    </FormGroup>
+  );
+};
+
+GroupedSelectField.propTypes = {
+  label: PropTypes.string.isRequired,
+  fieldId: PropTypes.string.isRequired,
+  groups: PropTypes.array,
+  selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  setSelected: PropTypes.func.isRequired,
+};
+
+GroupedSelectField.defaultProps = {
+  groups: [],
+  selected: null,
+};