diff --git a/awx/ui_next/src/api/models/WorkflowJobTemplates.js b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
index 691c444379..922d5cde00 100644
--- a/awx/ui_next/src/api/models/WorkflowJobTemplates.js
+++ b/awx/ui_next/src/api/models/WorkflowJobTemplates.js
@@ -6,6 +6,24 @@ class WorkflowJobTemplates extends Base {
this.baseUrl = '/api/v2/workflow_job_templates/';
}
+ associateLabel(id, label, orgId) {
+ return this.http.post(`${this.baseUrl}${id}/labels/`, {
+ name: label.name,
+ organization: orgId,
+ });
+ }
+
+ createNode(id, data) {
+ return this.http.post(`${this.baseUrl}${id}/workflow_nodes/`, data);
+ }
+
+ disassociateLabel(id, label) {
+ return this.http.post(`${this.baseUrl}${id}/labels/`, {
+ id: label.id,
+ disassociate: true,
+ });
+ }
+
launch(id, data) {
return this.http.post(`${this.baseUrl}${id}/launch/`, data);
}
@@ -20,17 +38,16 @@ class WorkflowJobTemplates extends Base {
});
}
+ readScheduleList(id, params) {
+ return this.http.get(`${this.baseUrl}${id}/schedules/`, {
+ params
+ });
+ }
+
readWebhookKey(id) {
return this.http.get(`${this.baseUrl}${id}/webhook_key/`);
}
- createNode(id, data) {
- return this.http.post(`${this.baseUrl}${id}/workflow_nodes/`, data);
- }
-
- readScheduleList(id, params) {
- return this.http.get(`${this.baseUrl}${id}/schedules/`, { params });
- }
}
export default WorkflowJobTemplates;
diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
index 717b1b5f89..913fcfb648 100644
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useCallback } from 'react';
import { useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
-import { Card } from '@patternfly/react-core';
+import { Card, PageSection } from '@patternfly/react-core';
import {
JobTemplatesAPI,
@@ -141,7 +141,7 @@ function TemplateList({ i18n }) {
);
return (
- <>
+
-
+
);
}
diff --git a/awx/ui_next/src/screens/Template/Templates.jsx b/awx/ui_next/src/screens/Template/Templates.jsx
index c8eb2f243e..456f8b3ca4 100644
--- a/awx/ui_next/src/screens/Template/Templates.jsx
+++ b/awx/ui_next/src/screens/Template/Templates.jsx
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Route, withRouter, Switch } from 'react-router-dom';
-import { PageSection } from '@patternfly/react-core';
import { Config } from '@contexts/Config';
import Breadcrumbs from '@components/Breadcrumbs/Breadcrumbs';
@@ -10,6 +9,7 @@ import { TemplateList } from './TemplateList';
import Template from './Template';
import WorkflowJobTemplate from './WorkflowJobTemplate';
import JobTemplateAdd from './JobTemplateAdd';
+import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
class Templates extends Component {
constructor(props) {
@@ -20,6 +20,9 @@ class Templates extends Component {
breadcrumbConfig: {
'/templates': i18n._(t`Templates`),
'/templates/job_template/add': i18n._(t`Create New Job Template`),
+ '/templates/workflow_job_template/add': i18n._(
+ t`Create New Workflow Job Template`
+ ),
},
};
}
@@ -56,47 +59,49 @@ class Templates extends Component {
return (
<>
-
-
- }
- />
- (
-
- {({ me }) => (
-
- )}
-
- )}
- />
- (
-
- {({ me }) => (
-
- )}
-
- )}
- />
- } />
-
-
+
+ }
+ />
+ }
+ />
+ (
+
+ {({ me }) => (
+
+ )}
+
+ )}
+ />
+ (
+
+ {({ me }) => (
+
+ )}
+
+ )}
+ />
+ } />
+
);
}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
index bdb9ca8ad6..5bb13eab8d 100644
--- a/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplate.jsx
@@ -13,6 +13,7 @@ import RoutedTabs from '@components/RoutedTabs';
import ScheduleList from '@components/ScheduleList';
import { WorkflowJobTemplatesAPI, CredentialsAPI } from '@api';
import WorkflowJobTemplateDetail from './WorkflowJobTemplateDetail';
+import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
import { Visualizer } from './WorkflowJobTemplateVisualizer';
class WorkflowJobTemplate extends Component {
@@ -134,73 +135,99 @@ class WorkflowJobTemplate extends Component {
}
return (
-
- {cardHeader}
-
-
- {template && (
- (
-
- )}
+
+
+ {cardHeader}
+
+
- )}
- {template && (
- (
-
-
-
-
-
- )}
- />
- )}
- {template?.id && (
-
- (
+
+ )}
/>
-
- )}
- {template && (
+ )}
+ {template && (
+ (
+
+ )}
+ />
+ )}
+ {template && (
+ (
+
+
+
+
+
+ )}
+ />
+ )}
+ {template?.id && (
+
+
+
+ )}
+
+ {template?.id && (
+
+
+
+ )}
+ {template && (
+ (
+
+ )}
+ />
+ )}
}
+ key="not-found"
+ path="*"
+ render={() =>
+ !hasContentLoading && (
+
+ {match.params.id && (
+
+ {i18n._(`View Template Details`)}
+
+ )}
+
+ )
+ }
/>
- )}
-
- !hasContentLoading && (
-
- {match.params.id && (
-
- {i18n._(`View Template Details`)}
-
- )}
-
- )
- }
- />
-
-
+
+
+
);
}
}
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
new file mode 100644
index 0000000000..96874360d5
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { Card, PageSection } from '@patternfly/react-core';
+import { CardBody } from '@components/Card';
+
+import { WorkflowJobTemplatesAPI } from '@api';
+import WorkflowJobTemplateForm from '../shared/WorkflowJobTemplateForm';
+
+function WorkflowJobTemplateAdd() {
+ const [formSubmitError, setFormSubmitError] = useState();
+ const history = useHistory();
+ const handleSubmit = async values => {
+ const { labels, organizationId, ...remainingValues } = values;
+ try {
+ const {
+ data: { id },
+ } = await WorkflowJobTemplatesAPI.create(remainingValues);
+ await Promise.all([submitLabels(id, labels, organizationId)]);
+ history.push(`/templates/workflow_job_template/${id}/details`);
+ } catch (err) {
+ setFormSubmitError(err);
+ }
+ };
+ const submitLabels = (templateId, labels = [], organizationId) => {
+ const associatePromises = labels.map(label =>
+ WorkflowJobTemplatesAPI.associateLabel(templateId, label, organizationId)
+ );
+ return Promise.all([...associatePromises]);
+ };
+ const handleCancel = () => {
+ history.push(`/templates`);
+ };
+ return (
+
+
+
+
+
+ {formSubmitError ? formSubmitError
: ''}
+
+
+ );
+}
+
+export default WorkflowJobTemplateAdd;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
new file mode 100644
index 0000000000..584a27cb7b
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/WorkflowJobTemplateAdd.test.jsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { WorkflowJobTemplatesAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
+
+import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
+
+jest.mock('@api');
+
+describe('', () => {
+ let wrapper;
+ let history;
+ beforeEach(async () => {
+ WorkflowJobTemplatesAPI.create.mockResolvedValue({ data: { id: 1 } });
+ await act(async () => {
+ history = createMemoryHistory({
+ initialEntries: ['/templates/workflow_job_template/add'],
+ });
+ wrapper = mountWithContexts(
+ }
+ />,
+ {
+ context: {
+ router: {
+ history,
+ route: {
+ location: history.location,
+ },
+ },
+ },
+ }
+ );
+ });
+ });
+ afterEach(async () => {
+ wrapper.unmount();
+ });
+ test('initially renders successfully', async () => {
+ expect(wrapper.length).toBe(1);
+ });
+ test('calls workflowJobTemplatesAPI with correct information on submit', async () => {
+ await act(async () => {
+ await wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
+ name: 'Alex',
+ labels: [{ name: 'Foo', id: 1 }, { name: 'bar', id: 2 }],
+ organizationId: 1,
+ });
+ });
+ expect(WorkflowJobTemplatesAPI.create).toHaveBeenCalledWith({
+ name: 'Alex',
+ });
+ expect(WorkflowJobTemplatesAPI.associateLabel).toHaveBeenCalledTimes(2);
+ });
+ test('handleCancel navigates the user to the /templates', async () => {
+ await act(async () => {
+ await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
+ });
+ expect(history.location.pathname).toBe('/templates');
+ });
+});
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js
new file mode 100644
index 0000000000..51111ce0fb
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateAdd/index.js
@@ -0,0 +1 @@
+export { default } from './WorkflowJobTemplateAdd';
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
new file mode 100644
index 0000000000..e2f12dcbd7
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { CardBody } from '@components/Card';
+import { getAddedAndRemoved } from '@util/lists';
+import { WorkflowJobTemplatesAPI, OrganizationsAPI } from '@api';
+import ContentLoading from '@components/ContentLoading';
+import { WorkflowJobTemplateForm } from '../shared';
+
+function WorkflowJobTemplateEdit({ template, hasContentLoading }) {
+ const [formSubmitError, setFormSubmitError] = useState();
+ const history = useHistory();
+
+ const handleSubmit = async values => {
+ const { labels, ...remainingValues } = values;
+ try {
+ await WorkflowJobTemplatesAPI.update(template.id, remainingValues);
+ await Promise.all([submitLabels(labels, values.organization)]);
+ history.push(`/templates/workflow_job_template/${template.id}/details`);
+ } catch (err) {
+ setFormSubmitError(err);
+ }
+ };
+ const submitLabels = async (labels = [], orgId) => {
+ const { added, removed } = getAddedAndRemoved(
+ template.summary_fields.labels.results,
+ labels
+ );
+ if (!orgId && !template.organization) {
+ try {
+ const {
+ data: { results },
+ } = await OrganizationsAPI.read();
+ orgId = results[0].id;
+ } catch (err) {
+ setFormSubmitError(err);
+ }
+ }
+ const disassociationPromises = removed.map(label =>
+ WorkflowJobTemplatesAPI.disassociateLabel(template.id, label)
+ );
+ const associationPromises = added.map(label => {
+ return WorkflowJobTemplatesAPI.associateLabel(
+ template.id,
+ label,
+ orgId || template.organization
+ );
+ });
+
+ const results = await Promise.all([
+ ...disassociationPromises,
+ ...associationPromises,
+ ]);
+ return results;
+ };
+
+ const handleCancel = () => {
+ history.push(`/templates`);
+ };
+ if (hasContentLoading) {
+ return ;
+ }
+ return (
+ <>
+
+
+
+ {formSubmitError ? formSubmitError
: ''}
+
+ );
+}
+export default WorkflowJobTemplateEdit;
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
new file mode 100644
index 0000000000..c5bfbe7e6e
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/WorkflowJobTemplateEdit.test.jsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { act } from 'react-dom/test-utils';
+import { WorkflowJobTemplatesAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import { createMemoryHistory } from 'history';
+import WorkflowJobTemplateEdit from './WorkflowJobTemplateEdit';
+
+jest.mock('@api');
+const mockTemplate = {
+ id: 6,
+ name: 'Foo',
+ description: 'Foo description',
+ summary_fields: {
+ inventory: { id: 1, name: 'Inventory 1' },
+ organization: { id: 1, name: 'Organization 1' },
+ labels: {
+ results: [{ name: 'Label 1', id: 1 }, { name: 'Label 2', id: 2 }],
+ },
+ },
+ scm_branch: 'devel',
+ limit: '5000',
+ variables: '---',
+};
+describe('', () => {
+ let wrapper;
+ let history;
+ beforeEach(async () => {
+ await act(async () => {
+ history = createMemoryHistory({
+ initialEntries: ['/templates/workflow_job_template/6/edit'],
+ });
+ wrapper = mountWithContexts(
+ }
+ />,
+ {
+ context: {
+ router: {
+ history,
+ route: {
+ location: history.location,
+ match: { params: { id: 6 } },
+ },
+ },
+ },
+ }
+ );
+ });
+ });
+ afterEach(async () => {
+ wrapper.unmount();
+ });
+ test('renders successfully', () => {
+ expect(wrapper.find('WorkflowJobTemplateEdit').length).toBe(1);
+ });
+ test('api is called to properly to save the updated template.', async () => {
+ await act(async () => {
+ await wrapper.find('WorkflowJobTemplateForm').invoke('handleSubmit')({
+ id: 6,
+ name: 'Alex',
+ description: 'Apollo and Athena',
+ inventory: { id: 1, name: 'Inventory 1' },
+ organization: 2,
+ labels: [{ name: 'Label 2', id: 2 }, { name: 'Generated Label' }],
+ scm_branch: 'master',
+ limit: '5000',
+ variables: '---',
+ });
+ });
+ expect(WorkflowJobTemplatesAPI.update).toHaveBeenCalledWith(6, {
+ id: 6,
+ name: 'Alex',
+ description: 'Apollo and Athena',
+ inventory: { id: 1, name: 'Inventory 1' },
+ organization: 2,
+ scm_branch: 'master',
+ limit: '5000',
+ variables: '---',
+ });
+ wrapper.update();
+ await expect(WorkflowJobTemplatesAPI.disassociateLabel).toBeCalledWith(6, {
+ name: 'Label 1',
+ id: 1,
+ });
+ wrapper.update();
+
+ await expect(WorkflowJobTemplatesAPI.associateLabel).toBeCalledTimes(1);
+ });
+ test('handleCancel navigates the user to the /templates', async () => {
+ await act(async () => {
+ await wrapper.find('WorkflowJobTemplateForm').invoke('handleCancel')();
+ });
+ expect(history.location.pathname).toBe('/templates');
+ });
+});
diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js
new file mode 100644
index 0000000000..bd84799fb0
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateEdit/index.js
@@ -0,0 +1 @@
+export { default } from './WorkflowJobTemplateEdit';
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
new file mode 100644
index 0000000000..f30cea96b5
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
@@ -0,0 +1,176 @@
+import React, { useState } from 'react';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+import { Formik, Field } from 'formik';
+
+import { Form, FormGroup } from '@patternfly/react-core';
+import { required } from '@util/validators';
+import PropTypes from 'prop-types';
+
+import FormRow from '@components/FormRow';
+import FormField, { FieldTooltip } from '@components/FormField';
+import OrganizationLookup from '@components/Lookup/OrganizationLookup';
+import { InventoryLookup } from '@components/Lookup';
+import { VariablesField } from '@components/CodeMirrorInput';
+import FormActionGroup from '@components/FormActionGroup';
+import ContentError from '@components/ContentError';
+import LabelSelect from './LabelSelect';
+
+function WorkflowJobTemplateForm({
+ handleSubmit,
+ handleCancel,
+ i18n,
+ template = {},
+}) {
+ const [contentError, setContentError] = useState(null);
+ const [inventory, setInventory] = useState(
+ template?.summary_fields?.inventory || null
+ );
+ const [organization, setOrganization] = useState(
+ template?.summary_fields?.organization || null
+ );
+
+ if (contentError) {
+ return ;
+ }
+ return (
+
+ {formik => (
+
+ )}
+
+ );
+}
+
+WorkflowJobTemplateForm.propTypes = {
+ handleSubmit: PropTypes.func.isRequired,
+ handleCancel: PropTypes.func.isRequired,
+};
+export default withI18n()(WorkflowJobTemplateForm);
diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
new file mode 100644
index 0000000000..9c05c53dff
--- /dev/null
+++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
@@ -0,0 +1,137 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import WorkflowJobTemplateForm from './WorkflowJobTemplateForm';
+
+describe('', () => {
+ let wrapper;
+ const handleSubmit = jest.fn();
+ const handleCancel = jest.fn();
+ const mockTemplate = {
+ id: 6,
+ name: 'Foo',
+ description: 'Foo description',
+ summary_fields: {
+ inventory: { id: 1, name: 'Inventory 1' },
+ organization: { id: 1, name: 'Organization 1' },
+ labels: {
+ results: [{ name: 'Label 1', id: 1 }, { name: 'Label 2', id: 2 }],
+ },
+ },
+ scm_branch: 'devel',
+ limit: '5000',
+ variables: '---',
+ };
+ beforeEach(() => {
+ act(() => {
+ wrapper = mountWithContexts(
+
+ );
+ });
+ });
+ afterEach(() => {
+ wrapper.unmount();
+ jest.clearAllMocks();
+ });
+ test('renders successfully', () => {
+ expect(wrapper.length).toBe(1);
+ });
+ test('all the fields render successfully', () => {
+ const fields = [
+ 'name',
+ 'description',
+ 'organization',
+ 'inventory',
+ 'limit',
+ 'scmBranch',
+ 'labels',
+ 'variables',
+ ];
+ const assertField = (field, index) => {
+ expect(
+ wrapper
+ .find('Field')
+ .at(index)
+ .prop('name')
+ ).toBe(`${field}`);
+ };
+ fields.map((field, index) => assertField(field, index));
+ });
+ test('changing inputs should update values', async () => {
+ const inputsToChange = [
+ { element: 'wfjt-name', value: { value: 'new foo', name: 'name' } },
+ {
+ element: 'wfjt-description',
+ value: { value: 'new bar', name: 'description' },
+ },
+ { element: 'wfjt-limit', value: { value: 1234567890, name: 'limit' } },
+ {
+ element: 'wfjt-scmBranch',
+ value: { value: 'new branch', name: 'scmBranch' },
+ },
+ ];
+ const changeInputs = async ({ element, value }) => {
+ wrapper.find(`input#${element}`).simulate('change', {
+ target: value,
+ });
+ };
+
+ await act(async () => {
+ inputsToChange.map(input => changeInputs(input));
+ wrapper.find('LabelSelect').invoke('onChange')([
+ { name: 'new label', id: 5 },
+ { name: 'Label 1', id: 1 },
+ { name: 'Label 2', id: 2 },
+ ]);
+ wrapper.find('InventoryLookup').invoke('onChange')({
+ id: 3,
+ name: 'inventory',
+ });
+ wrapper.find('OrganizationLookup').invoke('onChange')({
+ id: 3,
+ name: 'organization',
+ });
+ });
+ wrapper.update();
+ const assertChanges = ({ element, value }) => {
+ expect(wrapper.find(`input#${element}`).prop('value')).toEqual(
+ typeof value.value === 'string' ? `${value.value}` : value.value
+ );
+ };
+
+ inputsToChange.map(input => assertChanges(input));
+ expect(wrapper.find('InventoryLookup').prop('value')).toEqual({
+ id: 3,
+ name: 'inventory',
+ });
+ expect(wrapper.find('OrganizationLookup').prop('value')).toEqual({
+ id: 3,
+ name: 'organization',
+ });
+ expect(wrapper.find('LabelSelect').prop('value')).toEqual([
+ { name: 'new label', id: 5 },
+ { name: 'Label 1', id: 1 },
+ { name: 'Label 2', id: 2 },
+ ]);
+ });
+ test('handleSubmit is called on submit button click', async () => {
+ await act(async () => {
+ await wrapper.find('button[aria-label="Save"]').simulate('click');
+ });
+
+ act(() => {
+ expect(handleSubmit).toBeCalled();
+ });
+ });
+ test('handleCancel is called on cancel button click', () => {
+ act(() => {
+ wrapper.find('button[aria-label="Cancel"]').simulate('click');
+ });
+
+ expect(handleCancel).toBeCalled();
+ });
+});
diff --git a/awx/ui_next/src/screens/Template/shared/index.js b/awx/ui_next/src/screens/Template/shared/index.js
index 4e4c871715..a446c029c5 100644
--- a/awx/ui_next/src/screens/Template/shared/index.js
+++ b/awx/ui_next/src/screens/Template/shared/index.js
@@ -1 +1,2 @@
-export { default } from './JobTemplateForm';
+export { default as JobTemplateForm } from './JobTemplateForm';
+export { default as WorkflowJobTemplateForm } from './WorkflowJobTemplateForm';