diff --git a/awx/ui_next/src/api/index.js b/awx/ui_next/src/api/index.js index 7d05309b3a..526cb7c35c 100644 --- a/awx/ui_next/src/api/index.js +++ b/awx/ui_next/src/api/index.js @@ -1,5 +1,7 @@ import AdHocCommands from './models/AdHocCommands'; import Config from './models/Config'; +import CredentialTypes from './models/CredentialTypes'; +import Credentials from './models/Credentials'; import InstanceGroups from './models/InstanceGroups'; import Inventories from './models/Inventories'; import InventorySources from './models/InventorySources'; @@ -23,6 +25,8 @@ import WorkflowJobTemplates from './models/WorkflowJobTemplates'; const AdHocCommandsAPI = new AdHocCommands(); const ConfigAPI = new Config(); +const CredentialsAPI = new Credentials(); +const CredentialTypesAPI = new CredentialTypes(); const InstanceGroupsAPI = new InstanceGroups(); const InventoriesAPI = new Inventories(); const InventorySourcesAPI = new InventorySources(); @@ -47,6 +51,8 @@ const WorkflowJobTemplatesAPI = new WorkflowJobTemplates(); export { AdHocCommandsAPI, ConfigAPI, + CredentialsAPI, + CredentialTypesAPI, InstanceGroupsAPI, InventoriesAPI, InventorySourcesAPI, diff --git a/awx/ui_next/src/api/models/CredentialTypes.js b/awx/ui_next/src/api/models/CredentialTypes.js new file mode 100644 index 0000000000..65906cdcbd --- /dev/null +++ b/awx/ui_next/src/api/models/CredentialTypes.js @@ -0,0 +1,10 @@ +import Base from '../Base'; + +class CredentialTypes extends Base { + constructor(http) { + super(http); + this.baseUrl = '/api/v2/credential_types/'; + } +} + +export default CredentialTypes; diff --git a/awx/ui_next/src/api/models/Credentials.js b/awx/ui_next/src/api/models/Credentials.js new file mode 100644 index 0000000000..2e3634b4e5 --- /dev/null +++ b/awx/ui_next/src/api/models/Credentials.js @@ -0,0 +1,10 @@ +import Base from '../Base'; + +class Credentials extends Base { + constructor(http) { + super(http); + this.baseUrl = '/api/v2/credentials/'; + } +} + +export default Credentials; diff --git a/awx/ui_next/src/api/models/JobTemplates.js b/awx/ui_next/src/api/models/JobTemplates.js index cff6858db7..1587f6c86b 100644 --- a/awx/ui_next/src/api/models/JobTemplates.js +++ b/awx/ui_next/src/api/models/JobTemplates.js @@ -44,6 +44,19 @@ class JobTemplates extends InstanceGroupsMixin(NotificationsMixin(Base)) { readCredentials(id, params) { return this.http.get(`${this.baseUrl}${id}/credentials/`, { params }); } + + associateCredentials(id, credentialId) { + return this.http.post(`${this.baseUrl}${id}/credentials/`, { + id: credentialId, + }); + } + + disassociateCredentials(id, credentialId) { + return this.http.post(`${this.baseUrl}${id}/credentials/`, { + id: credentialId, + disassociate: true, + }); + } } export default JobTemplates; diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index 874571fcb0..dfe6c2ad00 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -15,16 +15,19 @@ import { ButtonVariant, InputGroup as PFInputGroup, Modal, + ToolbarItem, } from '@patternfly/react-core'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import styled from 'styled-components'; +import AnsibleSelect from '../AnsibleSelect'; import PaginatedDataList from '../PaginatedDataList'; +import VerticalSeperator from '../VerticalSeparator'; import DataListToolbar from '../DataListToolbar'; import CheckboxListItem from '../CheckboxListItem'; import SelectedList from '../SelectedList'; -import { ChipGroup, Chip } from '../Chip'; +import { ChipGroup, Chip, CredentialChip } from '../Chip'; import { getQSConfig, parseQueryString } from '../../util/qs'; const SearchButton = styled(Button)` @@ -83,14 +86,20 @@ class Lookup extends React.Component { } componentDidUpdate(prevProps) { - const { location } = this.props; - if (location !== prevProps.location) { + const { location, selectedCategory } = this.props; + if ( + location !== prevProps.location || + prevProps.selectedCategory !== selectedCategory + ) { this.getData(); } } assertCorrectValueType() { - const { multiple, value } = this.props; + const { multiple, value, selectCategoryOptions } = this.props; + if (selectCategoryOptions) { + return; + } if (!multiple && Array.isArray(value)) { throw new Error( 'Lookup value must not be an array unless `multiple` is set' @@ -123,7 +132,13 @@ class Lookup extends React.Component { } toggleSelected(row) { - const { name, onLookupSave, multiple } = this.props; + const { + name, + onLookupSave, + multiple, + onToggleItem, + selectCategoryOptions, + } = this.props; const { lookupSelectedItems: updatedSelectedItems, isModalOpen, @@ -132,8 +147,10 @@ class Lookup extends React.Component { const selectedIndex = updatedSelectedItems.findIndex( selectedRow => selectedRow.id === row.id ); - if (multiple) { + if (selectCategoryOptions) { + onToggleItem(row, isModalOpen); + } if (selectedIndex > -1) { updatedSelectedItems.splice(selectedIndex, 1); this.setState({ lookupSelectedItems: updatedSelectedItems }); @@ -156,7 +173,7 @@ class Lookup extends React.Component { handleModalToggle() { const { isModalOpen } = this.state; - const { value, multiple } = this.props; + const { value, multiple, selectCategory } = this.props; // Resets the selected items from parent state whenever modal is opened // This handles the case where the user closes/cancels the modal and // opens it again @@ -168,6 +185,9 @@ class Lookup extends React.Component { this.setState({ lookupSelectedItems }); } else { this.clearQSParams(); + if (selectCategory) { + selectCategory(null, 'Machine'); + } } this.setState(prevState => ({ isModalOpen: !prevState.isModalOpen, @@ -180,8 +200,9 @@ class Lookup extends React.Component { const value = multiple ? lookupSelectedItems : lookupSelectedItems[0] || null; - onLookupSave(value, name); + this.handleModalToggle(); + onLookupSave(value, name); } clearQSParams() { @@ -201,6 +222,7 @@ class Lookup extends React.Component { count, } = this.state; const { + form, id, lookupHeader, value, @@ -208,27 +230,40 @@ class Lookup extends React.Component { multiple, name, onBlur, + selectCategory, required, i18n, + selectCategoryOptions, + selectedCategory, } = this.props; - const header = lookupHeader || i18n._(t`Items`); const canDelete = !required || (multiple && value.length > 1); - - const chips = value ? ( - - {(multiple ? value : [value]).map(chip => ( - this.toggleSelected(chip)} - isReadOnly={!canDelete} - > - {chip.name} - - ))} - - ) : null; - + const chips = () => { + return selectCategoryOptions && selectCategoryOptions.length > 0 ? ( + + {(multiple ? value : [value]).map(chip => ( + this.toggleSelected(chip)} + isReadOnly={!canDelete} + credential={chip} + /> + ))} + + ) : ( + + {(multiple ? value : [value]).map(chip => ( + this.toggleSelected(chip)} + isReadOnly={!canDelete} + > + {chip.name} + + ))} + + ); + }; return ( @@ -240,7 +275,9 @@ class Lookup extends React.Component { > - {chips} + + {value ? chips(value) : null} + , ]} > + {selectCategoryOptions && selectCategoryOptions.length > 0 && ( + + Selected Category + + + + )} i.id === item.id)} + isSelected={ + selectCategoryOptions + ? value.some(i => i.id === item.id) + : lookupSelectedItems.some(i => i.id === item.id) + } onSelect={() => this.toggleSelected(item)} - isRadio={!multiple} + isRadio={ + !multiple || + (selectCategoryOptions && + selectCategoryOptions.length && + selectedCategory.value !== 'Vault') + } /> )} renderToolbar={props => } @@ -288,10 +349,13 @@ class Lookup extends React.Component { {lookupSelectedItems.length > 0 && ( 0 + } /> )} {error ?
error
: ''} diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx new file mode 100644 index 0000000000..b73ca373a3 --- /dev/null +++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx @@ -0,0 +1,162 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withI18n } from '@lingui/react'; +import { t } from '@lingui/macro'; +import { FormGroup, Tooltip } from '@patternfly/react-core'; +import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons'; +import styled from 'styled-components'; + +import { CredentialsAPI, CredentialTypesAPI } from '@api'; +import Lookup from '@components/Lookup'; + +const QuestionCircleIcon = styled(PFQuestionCircleIcon)` + margin-left: 10px; +`; + +class MultiCredentialsLookup extends React.Component { + constructor(props) { + super(props); + + this.state = { + selectedCredentialType: { label: 'Machine', id: 1, kind: 'ssh' }, + credentialTypes: [], + }; + this.loadCredentialTypes = this.loadCredentialTypes.bind(this); + this.handleCredentialTypeSelect = this.handleCredentialTypeSelect.bind( + this + ); + this.loadCredentials = this.loadCredentials.bind(this); + this.toggleCredentialSelection = this.toggleCredentialSelection.bind(this); + } + + componentDidMount() { + this.loadCredentialTypes(); + } + + async loadCredentialTypes() { + const { onError } = this.props; + try { + const { data } = await CredentialTypesAPI.read(); + const acceptableTypes = ['machine', 'cloud', 'net', 'ssh', 'vault']; + const credentialTypes = []; + data.results.forEach(cred => { + acceptableTypes.forEach(aT => { + if (aT === cred.kind) { + // This object has several repeated values as some of it's children + // require different field values. + cred = { + id: cred.id, + key: cred.id, + kind: cred.kind, + type: cred.namespace, + value: cred.name, + label: cred.name, + isDisabled: false, + }; + credentialTypes.push(cred); + } + }); + }); + this.setState({ credentialTypes }); + } catch (err) { + onError(err); + } + } + + async loadCredentials(params) { + const { selectedCredentialType } = this.state; + params.credential_type = selectedCredentialType.id || 1; + return CredentialsAPI.read(params); + } + + toggleCredentialSelection(newCredential) { + const { onChange, credentials: credentialsToUpdate } = this.props; + + let newCredentialsList; + const isSelectedCredentialInState = + credentialsToUpdate.filter(cred => cred.id === newCredential.id).length > + 0; + + if (isSelectedCredentialInState) { + newCredentialsList = credentialsToUpdate.filter( + cred => cred.id !== newCredential.id + ); + } else { + newCredentialsList = credentialsToUpdate.filter( + credential => + credential.kind === 'vault' || credential.kind !== newCredential.kind + ); + newCredentialsList = [...newCredentialsList, newCredential]; + } + onChange(newCredentialsList); + } + + handleCredentialTypeSelect(value, type) { + const { credentialTypes } = this.state; + const selectedType = credentialTypes.filter(item => item.label === type); + this.setState({ selectedCredentialType: selectedType[0] }); + } + + render() { + const { selectedCredentialType, credentialTypes } = this.state; + const { tooltip, i18n, credentials } = this.props; + return ( + + {tooltip && ( + + + + )} + {credentialTypes && ( + {}} + getItems={this.loadCredentials} + qsNamespace="credentials" + columns={[ + { + name: i18n._(t`Name`), + key: 'name', + isSortable: true, + isSearchable: true, + }, + ]} + sortedColumnKey="name" + /> + )} + + ); + } +} + +MultiCredentialsLookup.propTypes = { + tooltip: PropTypes.string, + credentials: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.number, + name: PropTypes.string, + description: PropTypes.string, + kind: PropTypes.string, + clound: PropTypes.bool, + }) + ), + onChange: PropTypes.func.isRequired, + onError: PropTypes.func.isRequired, +}; + +MultiCredentialsLookup.defaultProps = { + tooltip: '', + credentials: [], +}; +export { MultiCredentialsLookup as _MultiCredentialsLookup }; + +export default withI18n()(MultiCredentialsLookup); diff --git a/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx new file mode 100644 index 0000000000..a525fb9e9a --- /dev/null +++ b/awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx @@ -0,0 +1,113 @@ +import React from 'react'; + +import { mountWithContexts } from '@testUtils/enzymeHelpers'; +import MultiCredentialsLookup from './MultiCredentialsLookup'; +import { CredentialsAPI, CredentialTypesAPI } from '@api'; + +jest.mock('@api'); + +describe('', () => { + let wrapper; + let lookup; + let credLookup; + let onChange; + + const credentials = [ + { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' }, + { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' }, + { name: 'Gatsby', id: 21, kind: 'vault' }, + { name: 'Gatsby', id: 8, kind: 'Machine' }, + ]; + beforeEach(() => { + CredentialTypesAPI.read.mockResolvedValue({ + data: { + results: [ + { + id: 400, + kind: 'ssh', + namespace: 'biz', + name: 'Amazon Web Services', + }, + { id: 500, kind: 'vault', namespace: 'buzz', name: 'Vault' }, + { id: 600, kind: 'machine', namespace: 'fuzz', name: 'Machine' }, + ], + count: 2, + }, + }); + CredentialsAPI.read.mockResolvedValueOnce({ + data: { + results: [ + { id: 1, kind: 'cloud', name: 'Cred 1', url: 'www.google.com' }, + { id: 2, kind: 'ssh', name: 'Cred 2', url: 'www.google.com' }, + { id: 3, kind: 'Ansible', name: 'Cred 3', url: 'www.google.com' }, + { id: 4, kind: 'Machine', name: 'Cred 4', url: 'www.google.com' }, + { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' }, + ], + count: 3, + }, + }); + onChange = jest.fn(); + wrapper = mountWithContexts( + {}} + credentials={credentials} + onChange={onChange} + tooltip="This is credentials look up" + /> + ); + lookup = wrapper.find('Lookup'); + credLookup = wrapper.find('MultiCredentialsLookup'); + }); + + afterEach(() => { + jest.clearAllMocks(); + wrapper.unmount(); + }); + + test('MultiCredentialsLookup renders properly', () => { + expect(wrapper.find('MultiCredentialsLookup')).toHaveLength(1); + expect(CredentialTypesAPI.read).toHaveBeenCalled(); + }); + + test('onChange is called when you click to remove a credential from input', async () => { + const chip = wrapper.find('PFChip'); + const button = chip.at(1).find('Button'); + expect(chip).toHaveLength(4); + button.prop('onClick')(); + expect(onChange).toBeCalledWith([ + { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' }, + { id: 21, kind: 'vault', name: 'Gatsby' }, + { id: 8, kind: 'Machine', name: 'Gatsby' }, + ]); + }); + + test('can change credential types', () => { + lookup.prop('selectCategory')({}, 'Vault'); + expect(credLookup.state('selectedCredentialType')).toEqual({ + id: 500, + key: 500, + kind: 'vault', + type: 'buzz', + value: 'Vault', + label: 'Vault', + isDisabled: false, + }); + expect(CredentialsAPI.read).toHaveBeenCalled(); + }); + test('Toggle credentials only adds 1 credential per credential type except vault(see below)', () => { + lookup.prop('onToggleItem')({ name: 'Party', id: 9, kind: 'Machine' }); + expect(onChange).toBeCalledWith([ + { id: 1, kind: 'cloud', name: 'Foo', url: 'www.google.com' }, + { id: 2, kind: 'ssh', name: 'Alex', url: 'www.google.com' }, + { id: 21, kind: 'vault', name: 'Gatsby' }, + { id: 9, kind: 'Machine', name: 'Party' }, + ]); + }); + test('Toggle credentials only adds 1 credential per credential type', () => { + lookup.prop('onToggleItem')({ name: 'Party', id: 22, kind: 'vault' }); + expect(onChange).toBeCalledWith([ + ...credentials, + { name: 'Party', id: 22, kind: 'vault' }, + ]); + }); +}); diff --git a/awx/ui_next/src/components/Lookup/index.js b/awx/ui_next/src/components/Lookup/index.js index 99e10ac27f..cde48e2bcd 100644 --- a/awx/ui_next/src/components/Lookup/index.js +++ b/awx/ui_next/src/components/Lookup/index.js @@ -2,3 +2,4 @@ export { default } from './Lookup'; export { default as InstanceGroupsLookup } from './InstanceGroupsLookup'; export { default as InventoryLookup } from './InventoryLookup'; export { default as ProjectLookup } from './ProjectLookup'; +export { default as MultiCredentialsLookup } from './MultiCredentialsLookup'; diff --git a/awx/ui_next/src/components/SelectedList/SelectedList.jsx b/awx/ui_next/src/components/SelectedList/SelectedList.jsx index 6fcaf05939..661eeec382 100644 --- a/awx/ui_next/src/components/SelectedList/SelectedList.jsx +++ b/awx/ui_next/src/components/SelectedList/SelectedList.jsx @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import { Split as PFSplit, SplitItem } from '@patternfly/react-core'; import styled from 'styled-components'; -import { ChipGroup, Chip } from '../Chip'; +import { ChipGroup, Chip, CredentialChip } from '../Chip'; import VerticalSeparator from '../VerticalSeparator'; const Split = styled(PFSplit)` @@ -27,23 +27,34 @@ class SelectedList extends Component { onRemove, displayKey, isReadOnly, + isCredentialList, } = this.props; + const chips = isCredentialList + ? selected.map(item => ( + onRemove(item)} + credential={item} + > + {item[displayKey]} + + )) + : selected.map(item => ( + onRemove(item)} + > + {item[displayKey]} + + )); return ( {label} - - {selected.map(item => ( - onRemove(item)} - > - {item[displayKey]} - - ))} - + {chips} ); diff --git a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx index 0623ad7ab8..979c2f9728 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateAdd/JobTemplateAdd.jsx @@ -22,6 +22,7 @@ function JobTemplateAdd({ history, i18n }) { organizationId, instanceGroups, initialInstanceGroups, + credentials, ...remainingValues } = values; @@ -33,6 +34,7 @@ function JobTemplateAdd({ history, i18n }) { await Promise.all([ submitLabels(id, labels, organizationId), submitInstanceGroups(id, instanceGroups), + submitCredentials(id, credentials), ]); history.push(`/templates/${type}/${id}/details`); } catch (error) { @@ -60,6 +62,13 @@ function JobTemplateAdd({ history, i18n }) { return Promise.all(associatePromises); } + function submitCredentials(templateId, credentials = []) { + const associateCredentials = credentials.map(cred => + JobTemplatesAPI.associateCredentials(templateId, cred.id) + ); + return Promise.all(associateCredentials); + } + function handleCancel() { history.push(`/templates`); } diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx index 53c2b55f30..1db7b084a6 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx @@ -109,6 +109,7 @@ class JobTemplateEdit extends Component { organizationId, instanceGroups, initialInstanceGroups, + credentials, ...remainingValues } = values; @@ -118,6 +119,7 @@ class JobTemplateEdit extends Component { await Promise.all([ this.submitLabels(labels, organizationId), this.submitInstanceGroups(instanceGroups, initialInstanceGroups), + this.submitCredentials(credentials), ]); history.push(this.detailsUrl); } catch (formSubmitError) { @@ -154,13 +156,30 @@ class JobTemplateEdit extends Component { async submitInstanceGroups(groups, initialGroups) { const { template } = this.props; const { added, removed } = getAddedAndRemoved(initialGroups, groups); - const associatePromises = added.map(group => - JobTemplatesAPI.associateInstanceGroup(template.id, group.id) - ); - const disassociatePromises = removed.map(group => + const disassociatePromises = await removed.map(group => JobTemplatesAPI.disassociateInstanceGroup(template.id, group.id) ); - return Promise.all([...associatePromises, ...disassociatePromises]); + const associatePromises = await added.map(group => + JobTemplatesAPI.associateInstanceGroup(template.id, group.id) + ); + return Promise.all([...disassociatePromises, ...associatePromises]); + } + + async submitCredentials(newCredentials) { + const { template } = this.props; + const { added, removed } = getAddedAndRemoved( + template.summary_fields.credentials, + newCredentials + ); + const disassociateCredentials = removed.map(cred => + JobTemplatesAPI.disassociateCredentials(template.id, cred.id) + ); + const disassociatePromise = await Promise.all(disassociateCredentials); + const associateCredentials = added.map(cred => + JobTemplatesAPI.associateCredentials(template.id, cred.id) + ); + const associatePromise = Promise.all(associateCredentials); + return Promise.all([disassociatePromise, associatePromise]); } handleCancel() { diff --git a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx index 6d6c1e4083..dc5c22f4ee 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx @@ -40,6 +40,10 @@ const mockJobTemplate = { id: 2, organization_id: 1, }, + credentials: [ + { id: 1, kind: 'cloud', name: 'Foo' }, + { id: 2, kind: 'ssh', name: 'Bar' }, + ], }, }; diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index 88be879390..6eff4dcbe1 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -26,6 +26,7 @@ import { InventoryLookup, InstanceGroupsLookup, ProjectLookup, + MultiCredentialsLookup, } from '@components/Lookup'; import { JobTemplatesAPI } from '@api'; import LabelSelect from './LabelSelect'; @@ -61,6 +62,7 @@ class JobTemplateForm extends Component { inventory: null, labels: { results: [] }, project: null, + credentials: [], }, isNew: true, }, @@ -148,7 +150,6 @@ class JobTemplateForm extends Component { isDisabled: false, }, ]; - const verbosityOptions = [ { value: '0', key: '0', label: i18n._(t`0 (Normal)`) }, { value: '1', key: '1', label: i18n._(t`1 (Verbose)`) }, @@ -310,6 +311,24 @@ class JobTemplateForm extends Component { )} /> + + ( + + setFieldValue('credentials', newCredentials) + } + onError={err => this.setState({ contentError: err })} + tooltip={i18n._( + t`Select credentials that allow Tower to access the nodes this job will be ran against. You can only select one credential of each type. For machine credentials (SSH), checking "Prompt on launch" without selecting credentials will require you to select a machine credential at run time. If you select credentials and check "Prompt on launch", the selected credential(s) become the defaults that can be updated at run time.` + )} + /> + )} + /> + props.handleSubmit(values), diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx index 071edaecf8..7ed98ad893 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx @@ -3,7 +3,7 @@ import { act } from 'react-dom/test-utils'; import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers'; import { sleep } from '@testUtils/testUtils'; import JobTemplateForm from './JobTemplateForm'; -import { LabelsAPI, JobTemplatesAPI, ProjectsAPI } from '@api'; +import { LabelsAPI, JobTemplatesAPI, ProjectsAPI, CredentialsAPI } from '@api'; jest.mock('@api'); @@ -28,6 +28,10 @@ describe('', () => { name: 'qux', }, labels: { results: [{ name: 'Sushi', id: 1 }, { name: 'Major', id: 2 }] }, + credentials: [ + { id: 1, kind: 'cloud', name: 'Foo' }, + { id: 2, kind: 'ssh', name: 'Bar' }, + ], }, }; const mockInstanceGroups = [ @@ -55,10 +59,21 @@ describe('', () => { policy_instance_list: [], }, ]; + const mockCredentials = [ + { id: 1, kind: 'cloud', name: 'Cred 1', url: 'www.google.com' }, + { id: 2, kind: 'ssh', name: 'Cred 2', url: 'www.google.com' }, + { id: 3, kind: 'Ansible', name: 'Cred 3', url: 'www.google.com' }, + { id: 4, kind: 'Machine', name: 'Cred 4', url: 'www.google.com' }, + { id: 5, kind: 'Machine', name: 'Cred 5', url: 'www.google.com' }, + ]; + beforeEach(() => { LabelsAPI.read.mockReturnValue({ data: mockData.summary_fields.labels, }); + CredentialsAPI.read.mockReturnValue({ + data: { results: mockCredentials }, + }); JobTemplatesAPI.readInstanceGroups.mockReturnValue({ data: { results: mockInstanceGroups }, }); @@ -134,6 +149,13 @@ describe('', () => { target: { value: 'new baz type', name: 'playbook' }, }); expect(form.state('values').playbook).toEqual('new baz type'); + wrapper + .find('CredentialChip') + .at(0) + .prop('onClick')(); + expect(form.state('values').credentials).toEqual([ + { id: 2, kind: 'ssh', name: 'Bar' }, + ]); }); test('should call handleSubmit when Submit button is clicked', async () => {