External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-13 02:50:02 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #7975 from AlexSCorey/7973-DisableTemplateFormFields

Browse Source 
Disables template and workflow template fields.

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-09-06 21:26:23 +00:00 committed by GitHub
commit 127ca4bc54
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 204 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/components/FieldWithPrompt/FieldWithPrompt.jsx
View File

@ -23,6 +23,7 @@ function FieldWithPrompt({
promptId,
promptName,
tooltip,
isDisabled,
}) {
return (
<div className="pf-c-form__group">
@ -39,6 +40,7 @@ function FieldWithPrompt({
{tooltip && <FieldTooltip content={tooltip} />}
</div>
<StyledCheckboxField
isDisabled={isDisabled}
id={promptId}
label={i18n._(t`Prompt on launch`)}
name={promptName}

11
awx/ui_next/src/components/FormField/CheckboxField.jsx
View File

@ -9,10 +9,19 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
margin-left: 10px;
`;
function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
function CheckboxField({
id,
name,
label,
tooltip,
validate,
isDisabled,
...rest
}) {
const [field] = useField({ name, validate });
return (
<Checkbox
isDisabled={isDisabled}
aria-label={label}
label={
<span>

2
awx/ui_next/src/components/Lookup/CredentialLookup.jsx
View File

@ -33,6 +33,7 @@ function CredentialLookup({
history,
i18n,
tooltip,
isDisabled,
}) {
const {
result: { count, credentials, relatedSearchableKeys, searchableKeys },
@ -108,6 +109,7 @@ function CredentialLookup({
onChange={onChange}
required={required}
qsConfig={QS_CONFIG}
isDisabled={isDisabled}
renderOptionsList={({ state, dispatch, canDelete }) => (
<OptionsList
value={state.selectedItems}

97
awx/ui_next/src/components/Lookup/InventoryLookup.jsx
View File

@ -10,6 +10,7 @@ import OptionsList from '../OptionsList';
import useRequest from '../../util/useRequest';
import { getQSConfig, parseQueryString } from '../../util/qs';
import LookupErrorMessage from './shared/LookupErrorMessage';
import FieldWithPrompt from '../FieldWithPrompt';
const QS_CONFIG = getQSConfig('inventory', {
page: 1,
@ -17,9 +18,26 @@ const QS_CONFIG = getQSConfig('inventory', {
order_by: 'name',
});
function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
function InventoryLookup({
value,
onChange,
onBlur,
i18n,
history,
required,
isPromptableField,
fieldId,
promptId,
promptName,
}) {
const {
result: { inventories, count, relatedSearchableKeys, searchableKeys },
result: {
inventories,
count,
relatedSearchableKeys,
searchableKeys,
canEdit,
},
request: fetchInventories,
error,
isLoading,
@ -39,16 +57,86 @@ function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
searchableKeys: Object.keys(
actionsResponse.data.actions?.GET || {}
).filter(key => actionsResponse.data.actions?.GET[key].filterable),
canEdit: Boolean(actionsResponse.data.actions.POST),
};
}, [history.location]),
{ inventories: [], count: 0, relatedSearchableKeys: [], searchableKeys: [] }
{
inventories: [],
count: 0,
relatedSearchableKeys: [],
searchableKeys: [],
canEdit: false,
}
);
useEffect(() => {
fetchInventories();
}, [fetchInventories]);
return (
return isPromptableField ? (
<>
<FieldWithPrompt
fieldId={fieldId}
isRequired={required}
label={i18n._(t`Inventory`)}
promptId={promptId}
promptName={promptName}
isDisabled={!canEdit}
tooltip={i18n._(t`Select the inventory containing the hosts
you want this job to manage.`)}
>
<Lookup
id="inventory-lookup"
header={i18n._(t`Inventory`)}
value={value}
onChange={onChange}
onBlur={onBlur}
required={required}
isLoading={isLoading}
isDisabled={!canEdit}
qsConfig={QS_CONFIG}
renderOptionsList={({ state, dispatch, canDelete }) => (
<OptionsList
value={state.selectedItems}
options={inventories}
optionCount={count}
searchColumns={[
{
name: i18n._(t`Name`),
key: 'name__icontains',
isDefault: true,
},
{
name: i18n._(t`Created By (Username)`),
key: 'created_by__username__icontains',
},
{
name: i18n._(t`Modified By (Username)`),
key: 'modified_by__username__icontains',
},
]}
sortColumns={[
{
name: i18n._(t`Name`),
key: 'name',
},
]}
searchableKeys={searchableKeys}
relatedSearchableKeys={relatedSearchableKeys}
multiple={state.multiple}
header={i18n._(t`Inventory`)}
name="inventory"
qsConfig={QS_CONFIG}
readOnly={!canDelete}
selectItem={item => dispatch({ type: 'SELECT_ITEM', item })}
deselectItem={item => dispatch({ type: 'DESELECT_ITEM', item })}
/>
)}
/>
<LookupErrorMessage error={error} />
</FieldWithPrompt>
</>
) : (
<>
<Lookup
id="inventory-lookup"
@ -58,6 +146,7 @@ function InventoryLookup({ value, onChange, onBlur, required, i18n, history }) {
onBlur={onBlur}
required={required}
isLoading={isLoading}
isDisabled={!canEdit}
qsConfig={QS_CONFIG}
renderOptionsList={({ state, dispatch, canDelete }) => (
<OptionsList

10
awx/ui_next/src/components/Lookup/Lookup.jsx
View File

@ -27,6 +27,8 @@ import { QSConfig } from '../../types';
const ChipHolder = styled.div`
--pf-c-form-control--Height: auto;
background-color: ${props =>
props.isDisabled ? 'var(--pf-global--disabled-color--300)' : null};
`;
function Lookup(props) {
const {
@ -43,6 +45,7 @@ function Lookup(props) {
renderOptionsList,
history,
i18n,
isDisabled,
} = props;
const [state, dispatch] = useReducer(
@ -88,7 +91,8 @@ function Lookup(props) {
};
const { isModalOpen, selectedItems } = state;
const canDelete = !required || (multiple && value.length > 1);
const canDelete =
(!required || (multiple && value.length > 1)) && !isDisabled;
let items = [];
if (multiple) {
items = value;
@ -103,11 +107,11 @@ function Lookup(props) {
id={id}
onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
variant={ButtonVariant.control}
isDisabled={isLoading}
isDisabled={isLoading || isDisabled}
>
<SearchIcon />
</Button>
<ChipHolder className="pf-c-form-control">
<ChipHolder isDisabled={isDisabled} className="pf-c-form-control">
<ChipGroup numChips={5} totalChips={items.length}>
{items.map(item =>
renderItemChip({

5
awx/ui_next/src/components/Lookup/ProjectLookup.jsx
View File

@ -32,7 +32,7 @@ function ProjectLookup({
history,
}) {
const {
result: { projects, count, relatedSearchableKeys, searchableKeys },
result: { projects, count, relatedSearchableKeys, searchableKeys, canEdit },
request: fetchProjects,
error,
isLoading,
@ -55,6 +55,7 @@ function ProjectLookup({
searchableKeys: Object.keys(
actionsResponse.data.actions?.GET || {}
).filter(key => actionsResponse.data.actions?.GET[key].filterable),
canEdit: Boolean(actionsResponse.data.actions.POST),
};
}, [history.location.search, autocomplete]),
{
@ -62,6 +63,7 @@ function ProjectLookup({
projects: [],
relatedSearchableKeys: [],
searchableKeys: [],
canEdit: false,
}
);
@ -87,6 +89,7 @@ function ProjectLookup({
onChange={onChange}
required={required}
isLoading={isLoading}
isDisabled={!canEdit}
qsConfig={QS_CONFIG}
renderOptionsList={({ state, dispatch, canDelete }) => (
<OptionsList

17
awx/ui_next/src/components/MultiSelect/useSyncedSelectValue.js
View File

@ -11,12 +11,22 @@ export default function useSyncedSelectValue(value, onChange) {
const [selections, setSelections] = useState([]);
useEffect(() => {
const newOptions = [];
if (value !== selections && options.length) {
const syncedValue = value.map(item =>
options.find(i => i.id === item.id)
);
const syncedValue = value.map(item => {
const match = options.find(i => {
return i.id === item.id;
});
if (!match) {
newOptions.push(item);
}
return match || item;
});
setSelections(syncedValue);
}
if (newOptions.length > 0) {
setOptions(options.concat(newOptions));
}
/* eslint-disable-next-line react-hooks/exhaustive-deps */
}, [value, options]);
@ -27,7 +37,6 @@ export default function useSyncedSelectValue(value, onChange) {
onChange(selections.concat(item));
}
};
return {
selections: options.length ? addToStringToObjects(selections) : [],
onSelect,

13
awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.jsx
View File

@ -4,13 +4,11 @@ import { withRouter, Redirect } from 'react-router-dom';
import { CardBody } from '../../../components/Card';
import ContentError from '../../../components/ContentError';
import ContentLoading from '../../../components/ContentLoading';
import { JobTemplatesAPI, ProjectsAPI } from '../../../api';
import { JobTemplatesAPI } from '../../../api';
import { JobTemplate } from '../../../types';
import { getAddedAndRemoved } from '../../../util/lists';
import JobTemplateForm from '../shared/JobTemplateForm';
const loadRelatedProjectPlaybooks = async project =>
ProjectsAPI.readPlaybooks(project);
class JobTemplateEdit extends Component {
static propTypes = {
template: JobTemplate.isRequired,
@ -43,17 +41,8 @@ class JobTemplateEdit extends Component {
}
async loadRelated() {
const {
template: { project },
} = this.props;
this.setState({ contentError: null, hasContentLoading: true });
try {
if (project) {
const { data: playbook = [] } = await loadRelatedProjectPlaybooks(
project
);
this.setState({ relatedProjectPlaybooks: playbook });
}
const [relatedCredentials] = await this.loadRelatedCredentials();
this.setState({
relatedCredentials,

7
awx/ui_next/src/screens/Template/JobTemplateEdit/JobTemplateEdit.test.jsx
View File

@ -12,6 +12,7 @@ import {
JobTemplatesAPI,
LabelsAPI,
ProjectsAPI,
InventoriesAPI,
} from '../../../api';
import JobTemplateEdit from './JobTemplateEdit';
@ -181,6 +182,12 @@ JobTemplatesAPI.readCredentials.mockResolvedValue({
ProjectsAPI.readPlaybooks.mockResolvedValue({
data: mockRelatedProjectPlaybooks,
});
InventoriesAPI.readOptions.mockResolvedValue({
data: { actions: { GET: {}, POST: {} } },
});
ProjectsAPI.readOptions.mockResolvedValue({
data: { actions: { GET: {}, POST: {} } },
});
LabelsAPI.read.mockResolvedValue({ data: { results: [] } });
CredentialsAPI.read.mockResolvedValue({
data: {

46
awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
View File

@ -39,7 +39,7 @@ import {
ProjectLookup,
MultiCredentialsLookup,
} from '../../../components/Lookup';
import { JobTemplatesAPI, ProjectsAPI } from '../../../api';
import { JobTemplatesAPI } from '../../../api';
import LabelSelect from './LabelSelect';
import PlaybookSelect from './PlaybookSelect';
import WebhookSubForm from './WebhookSubForm';
@ -100,18 +100,6 @@ function JobTemplateForm({
'webhook_credential'
);
const {
request: fetchProject,
error: projectContentError,
contentLoading: hasProjectLoading,
} = useRequest(
useCallback(async () => {
if (template?.project) {
await ProjectsAPI.readDetail(template?.project);
}
}, [template])
);
const {
request: loadRelatedInstanceGroups,
error: instanceGroupError,
@ -127,10 +115,6 @@ function JobTemplateForm({
}, [setFieldValue, template])
);
useEffect(() => {
fetchProject();
}, [fetchProject]);
useEffect(() => {
loadRelatedInstanceGroups();
}, [loadRelatedInstanceGroups]);
@ -204,16 +188,12 @@ function JobTemplateForm({
callbackUrl = `${origin}${path}`;
}
if (instanceGroupLoading || hasProjectLoading) {
if (instanceGroupLoading) {
return <ContentLoading />;
}
if (contentError || instanceGroupError || projectContentError) {
return (
<ContentError
error={contentError || instanceGroupError || projectContentError}
/>
);
if (contentError || instanceGroupError) {
return <ContentError error={contentError || instanceGroupError} />;
}
return (
@ -254,17 +234,15 @@ function JobTemplateForm({
}}
/>
</FieldWithPrompt>
<FieldWithPrompt
fieldId="template-inventory"
isRequired={!askInventoryOnLaunchField.value}
label={i18n._(t`Inventory`)}
promptId="template-ask-inventory-on-launch"
promptName="ask_inventory_on_launch"
tooltip={i18n._(t`Select the inventory containing the hosts
you want this job to manage.`)}
>
<>
<InventoryLookup
value={inventory}
fieldId="template-inventory"
promptId="template-ask-inventory-on-launch"
promptName="ask_inventory_on_launch"
isPromptableField
tooltip={i18n._(t`Select the inventory containing the hosts
you want this job to manage.`)}
onBlur={() => inventoryHelpers.setTouched()}
onChange={value => {
inventoryHelpers.setValue(value ? value.id : null);
@ -283,7 +261,7 @@ function JobTemplateForm({
{inventoryMeta.error}
</div>
)}
</FieldWithPrompt>
</>
<ProjectLookup
value={projectField.value}
onBlur={() => projectHelpers.setTouched()}

14
awx/ui_next/src/screens/Template/shared/JobTemplateForm.test.jsx
View File

@ -14,6 +14,7 @@ import {
ProjectsAPI,
CredentialsAPI,
CredentialTypesAPI,
InventoriesAPI,
} from '../../../api';
jest.mock('../../../api');
@ -111,14 +112,23 @@ describe('<JobTemplateForm />', () => {
JobTemplatesAPI.updateWebhookKey.mockReturnValue({
data: { webhook_key: 'webhook key' },
});
ProjectsAPI.readPlaybooks.mockReturnValue({
data: ['debug.yml'],
JobTemplatesAPI.updateWebhookKey.mockReturnValue({
data: { webhook_key: 'webhook key' },
});
ProjectsAPI.readDetail.mockReturnValue({
name: 'foo',
id: 1,
allow_override: true,
});
ProjectsAPI.readPlaybooks.mockReturnValue({
data: ['debug.yml'],
});
InventoriesAPI.readOptions.mockResolvedValue({
data: { actions: { GET: {}, POST: {} } },
});
ProjectsAPI.readOptions.mockResolvedValue({
data: { actions: { GET: {}, POST: {} } },
});
});
afterEach(() => {

22
awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx
View File

@ -1,4 +1,4 @@
import React, { useCallback, useEffect } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { number, string, oneOfType } from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@ -7,6 +7,7 @@ import { ProjectsAPI } from '../../../api';
import useRequest from '../../../util/useRequest';
function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
const [isDisabled, setIsDisabled] = useState(false);
const {
result: options,
request: fetchOptions,
@ -18,6 +19,7 @@ function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
return [];
}
const { data } = await ProjectsAPI.readPlaybooks(projectId);
const opts = (data || []).map(playbook => ({
value: playbook,
key: playbook,
@ -42,18 +44,30 @@ function PlaybookSelect({ projectId, isValid, field, onBlur, onError, i18n }) {
useEffect(() => {
if (error) {
onError(error);
if (error.response.status === 403) {
setIsDisabled(true);
} else {
onError(error);
}
}
}, [error, onError]);
const isDisabledData = [
{
value: field.value || '',
label: field.value || '',
key: 1,
isDisabled: true,
},
];
return (
<AnsibleSelect
id="template-playbook"
data={options}
data={isDisabled ? isDisabledData : options}
isValid={isValid}
{...field}
onBlur={onBlur}
isDisabled={isLoading}
isDisabled={isLoading || isDisabled}
/>
);
}

23
awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx
View File

@ -110,23 +110,21 @@ function WorkflowJobTemplateForm({
value={organizationField.value}
isValid={!organizationMeta.error}
/>
<FieldWithPrompt
fieldId="wfjt-inventory"
label={i18n._(t`Inventory`)}
promptId="wfjt-ask-inventory-on-launch"
promptName="ask_inventory_on_launch"
tooltip={i18n._(
t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
)}
>
<>
<InventoryLookup
promptId="wfjt-ask-inventory-on-launch"
promptName="ask_inventory_on_launch"
tooltip={i18n._(
t`Select an inventory for the workflow. This inventory is applied to all job template nodes that prompt for an inventory.`
)}
fieldId="wfjt-inventory"
isPromptableField
value={inventoryField.value}
onBlur={() => inventoryHelpers.setTouched()}
onChange={value => {
inventoryHelpers.setValue(value);
}}
required={askInventoryOnLaunchField.value}
required={!askInventoryOnLaunchField.value}
touched={inventoryMeta.touched}
error={inventoryMeta.error}
/>
@ -139,8 +137,7 @@ function WorkflowJobTemplateForm({
{inventoryMeta.error}
</div>
)}
</FieldWithPrompt>
</>
<FieldWithPrompt
fieldId="wjft-limit"
label={i18n._(t`Limit`)}

13
awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.test.jsx
View File

@ -11,6 +11,8 @@ import {
LabelsAPI,
OrganizationsAPI,
InventoriesAPI,
ProjectsAPI,
CredentialTypesAPI,
} from '../../../api';
jest.mock('../../../api/models/CredentialTypes');
@ -18,6 +20,8 @@ jest.mock('../../../api/models/WorkflowJobTemplates');
jest.mock('../../../api/models/Labels');
jest.mock('../../../api/models/Organizations');
jest.mock('../../../api/models/Inventories');
jest.mock('../../../api/models/Projects');
jest.mock('../../../api/models/Credentials');
describe('<WorkflowJobTemplateForm/>', () => {
let wrapper;
@ -71,6 +75,15 @@ describe('<WorkflowJobTemplateForm/>', () => {
{ id: 2, name: 'Bar' },
],
});
CredentialTypesAPI.read.mockResolvedValue({
data: { results: [{ id: 1 }] },
});
InventoriesAPI.readOptions.mockResolvedValue({
data: { actions: { GET: {}, POST: {} } },
});
ProjectsAPI.readOptions.mockResolvedValue({
data: { actions: { GET: {}, POST: {} } },
});
history = createMemoryHistory({
initialEntries: ['/templates/workflow_job_template/6/edit'],