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

Adds Copy Button component

Browse Source
This commit is contained in:
Alex Corey
2020-04-30 12:25:48 -04:00
parent 8d31d09d4a
commit 008cd9985a
14 changed files with 304 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui_next/src/api/Base.js
View File

@@ -45,6 +45,10 @@ class Base {
update(id, data) {
return this.http.patch(`${this.baseUrl}${id}/`, data);
}
copy(id, data) {
return this.http.post(`${this.baseUrl}${id}/copy/`, data);
}
}
export default Base;

4
awx/ui_next/src/api/models/JobTemplates.js
View File

@@ -19,10 +19,6 @@ class JobTemplates extends SchedulesMixin(
this.readWebhookKey = this.readWebhookKey.bind(this);
}
copyTemplate(id, data) {
return this.http.post(`${this.baseUrl}${id}/copy/`, data);
}
launch(id, data) {
return this.http.post(`${this.baseUrl}${id}/launch/`, data);
}

60
awx/ui_next/src/components/CopyButton/CopyButton.jsx Normal file
View File

@@ -0,0 +1,60 @@
import React, { useEffect } from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import PropTypes from 'prop-types';
import { Button, Tooltip } from '@patternfly/react-core';
import { CopyIcon } from '@patternfly/react-icons';
import useRequest, { useDismissableError } from '@util/useRequest';
import AlertModal from '@components/AlertModal';
import ErrorDetail from '@components/ErrorDetail';
function CopyButton({ i18n, copyItem, onLoading, onDoneLoading, helperText }) {
const { isLoading, error: copyError, request: copyItemToAPI } = useRequest(
copyItem
);
useEffect(() => {
if (isLoading) {
return onLoading();
}
return onDoneLoading();
}, [isLoading, onLoading, onDoneLoading]);
const { error, dismissError } = useDismissableError(copyError);
return (
<>
<Tooltip content={helperText.tooltip} position="top">
<Button
aria-label={i18n._(t`Copy`)}
variant="plain"
onClick={copyItemToAPI}
>
<CopyIcon />
</Button>
</Tooltip>
<AlertModal
aria-label={i18n._(t`Copy Error`)}
isOpen={error}
variant="error"
title={i18n._(t`Error!`)}
onClose={dismissError}
>
{helperText.errorMessage}
<ErrorDetail error={error} />
</AlertModal>
</>
);
}
CopyButton.propTypes = {
copyItem: PropTypes.func.isRequired,
onLoading: PropTypes.func.isRequired,
onDoneLoading: PropTypes.func.isRequired,
helperText: PropTypes.shape({
tooltip: PropTypes.string.isRequired,
errorMessage: PropTypes.string.isRequired,
}).isRequired,
};
export default withI18n()(CopyButton);

36
awx/ui_next/src/components/CopyButton/CopyButton.test.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import CopyButton from './CopyButton';
jest.mock('@api');
describe('<CopyButton/>', () => {
test('shold mount properly', () => {
const wrapper = mountWithContexts(
<CopyButton
onLoading={() => {}}
onDoneLoading={() => {}}
copyItem={() => {}}
helperText={{
tooltip: `Copy Template`,
errorMessage: `Failed to copy template.`,
}}
/>
);
expect(wrapper.find('CopyButton').length).toBe(1);
});
test('should render proper tooltip', () => {
const wrapper = mountWithContexts(
<CopyButton
onLoading={() => {}}
onDoneLoading={() => {}}
copyItem={() => {}}
helperText={{
tooltip: `Copy Template`,
errorMessage: `Failed to copy template.`,
}}
/>
);
expect(wrapper.find('Tooltip').prop('content')).toBe('Copy Template');
});
});

1
awx/ui_next/src/components/CopyButton/index.js Normal file
View File

@@ -0,0 +1 @@
export { default } from './CopyButton';

2
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
View File

@@ -106,6 +106,7 @@ function CredentialList({ i18n }) {
<CredentialListItem
key={item.id}
credential={item}
fetchCredentials={fetchCredentials}
detailUrl={`/credentials/${item.id}/details`}
isSelected={selected.some(row => row.id === item.id)}
onSelect={() => handleSelect(item)}
@@ -134,6 +135,7 @@ function CredentialList({ i18n }) {
/>
</Card>
<AlertModal
aria-label={i18n._(t`Deletion Error`)}
isOpen={deletionError}
variant="error"
title={i18n._(t`Error!`)}

2
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
View File

@@ -128,7 +128,7 @@ describe('<CredentialList />', () => {
});
await waitForElement(
wrapper,
'Modal',
'Modal[aria-label="Deletion Error"]',
el => el.props().isOpen === true && el.props().title === 'Error!'
);
await act(async () => {

35
awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
View File

@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useCallback } from 'react';
import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
@@ -13,16 +13,19 @@ import {
Tooltip,
} from '@patternfly/react-core';
import DataListCell from '@components/DataListCell';
import { timeOfDay } from '@util/dates';
import { PencilAltIcon } from '@patternfly/react-icons';
import { Credential } from '@types';
import { CredentialsAPI } from '@api';
import styled from 'styled-components';
import CopyButton from '@components/CopyButton';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: 40px;
grid-template-columns: repeat(2, 40px);
`;
function CredentialListItem({
@@ -31,10 +34,20 @@ function CredentialListItem({
isSelected,
onSelect,
i18n,
fetchCredentials,
}) {
const [isDisabled, setIsDisabled] = useState(false);
const labelId = `check-action-${credential.id}`;
const canEdit = credential.summary_fields.user_capabilities.edit;
const copyCredential = useCallback(async () => {
await CredentialsAPI.copy(credential.id, {
name: `${credential.name} @ ${timeOfDay()}`,
});
await fetchCredentials();
}, [credential.id, credential.name, fetchCredentials]);
return (
<DataListItem
key={credential.id}
@@ -43,6 +56,7 @@ function CredentialListItem({
>
<DataListItemRow>
<DataListCheck
isDisabled={isDisabled}
id={`select-credential-${credential.id}`}
checked={isSelected}
onChange={onSelect}
@@ -65,9 +79,10 @@ function CredentialListItem({
aria-labelledby={labelId}
id={labelId}
>
{canEdit ? (
{canEdit && (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<Button
isDisabled={isDisabled}
aria-label={i18n._(t`Edit Credential`)}
variant="plain"
component={Link}
@@ -76,8 +91,18 @@ function CredentialListItem({
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
{credential.summary_fields.user_capabilities.copy && (
<CopyButton
isDisabled={isDisabled}
onLoading={() => setIsDisabled(true)}
onDoneLoading={() => setIsDisabled(false)}
copyItem={copyCredential}
helperText={{
tooltip: i18n._(t`Copy Credential`),
errorMessage: i18n._(t`Failed to copy credential.`),
}}
/>
)}
</DataListAction>
</DataListItemRow>

53
awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.test.jsx
View File

@@ -1,7 +1,11 @@
import React from 'react';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import { CredentialListItem } from '.';
import { act } from 'react-dom/test-utils';
import { mockCredentials } from '../shared';
import { CredentialsAPI } from '@api';
jest.mock('@api');
describe('<CredentialListItem />', () => {
let wrapper;
@@ -33,4 +37,53 @@ describe('<CredentialListItem />', () => {
);
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
});
test('should call api to copy template', async () => {
CredentialsAPI.copy.mockResolvedValue();
wrapper = mountWithContexts(
<CredentialListItem
isSelected={false}
detailUrl="/foo/bar"
credential={mockCredentials.results[0]}
onSelect={() => {}}
/>
);
await act(async () =>
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
);
expect(CredentialsAPI.copy).toHaveBeenCalled();
jest.clearAllMocks();
});
test('should render proper alert modal on copy error', async () => {
CredentialsAPI.copy.mockRejectedValue(new Error());
wrapper = mountWithContexts(
<CredentialListItem
isSelected={false}
detailUrl="/foo/bar"
onSelect={() => {}}
credential={mockCredentials.results[0]}
/>
);
await act(async () =>
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
);
wrapper.update();
expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
jest.clearAllMocks();
});
test('should not render copy button', async () => {
wrapper = mountWithContexts(
<CredentialListItem
isSelected={false}
detailUrl="/foo/bar"
onSelect={() => {}}
credential={mockCredentials.results[1]}
/>
);
expect(wrapper.find('CopyButton').length).toBe(0);
});
});

54
awx/ui_next/src/screens/Template/TemplateList/CopyButton.jsx
View File

@@ -1,54 +0,0 @@
import React, { useCallback, useEffect } from 'react';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Button, Tooltip } from '@patternfly/react-core';
import { CopyIcon } from '@patternfly/react-icons';
import useRequest, { useDismissableError } from '@util/useRequest';
import AlertModal from '@components/AlertModal';
import ErrorDetail from '@components/ErrorDetail';
function CopyButton({ i18n, itemName, copyItem, disableButtons }) {
const { isLoading, error, request: copyTemplateToAPI } = useRequest(
useCallback(async () => {
await copyItem();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []),
{}
);
useEffect(() => {
if (isLoading) {
return disableButtons(true);
}
return disableButtons(false);
}, [isLoading, disableButtons]);
const { dismissError } = useDismissableError(error);
return (
<>
<Tooltip content={i18n._(t`Copy Template`)} position="top">
<Button
aria-label={i18n._(t`Copy Template`)}
css="grid-column: 3"
variant="plain"
onClick={() => copyTemplateToAPI()}
>
<CopyIcon />
</Button>
</Tooltip>
<AlertModal
isOpen={error}
variant="error"
title={i18n._(t`Error!`)}
onClose={() => dismissError}
>
{i18n._(t`Failed to copy ${itemName}.`)}
<ErrorDetail error={error} />
</AlertModal>
</>
);
}
export default withI18n()(CopyButton);

1
awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
View File

@@ -234,6 +234,7 @@ function TemplateList({ i18n }) {
/>
</Card>
<AlertModal
aria-label={i18n._(t`Deletion Error`)}
isOpen={deletionError}
variant="error"
title={i18n._(t`Error!`)}

18
awx/ui_next/src/screens/Template/TemplateList/TemplateList.test.jsx
View File

@@ -20,6 +20,8 @@ const mockTemplates = [
summary_fields: {
user_capabilities: {
delete: true,
edit: true,
copy: true,
},
},
},
@@ -300,10 +302,24 @@ describe('<TemplateList />', () => {
.find('button[aria-label="confirm delete"]')
.prop('onClick')();
});
await waitForElement(
wrapper,
'Modal',
'Modal[aria-label="Deletion Error"]',
el => el.props().isOpen === true && el.props().title === 'Error!'
);
});
test('should properly copy template', async () => {
JobTemplatesAPI.copy.mockResolvedValue({});
const wrapper = mountWithContexts(<TemplateList />);
await act(async () => {
await waitForElement(wrapper, 'ContentLoading', el => el.length === 0);
});
await act(async () =>
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
);
expect(JobTemplatesAPI.copy).toHaveBeenCalled();
expect(UnifiedJobTemplatesAPI.read).toHaveBeenCalled();
wrapper.update();
});
});

84
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, useCallback } from 'react';
import { Link } from 'react-router-dom';
import {
Button,
@@ -20,18 +20,18 @@ import {
} from '@patternfly/react-icons';
import { timeOfDay } from '@util/dates';
import { JobTemplatesAPI } from '@api';
import { JobTemplatesAPI, WorkflowJobTemplatesAPI } from '@api';
import LaunchButton from '@components/LaunchButton';
import Sparkline from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
import styled from 'styled-components';
import CopyButton from './CopyButton';
import CopyButton from '@components/CopyButton';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 40px);
grid-template-columns: repeat(3, 40px);
`;
function TemplateListItem({
@@ -42,10 +42,24 @@ function TemplateListItem({
detailUrl,
fetchTemplates,
}) {
const [disableButtons, setDisableButtons] = useState(false);
const [isDisabled, setIsDisabled] = useState(false);
const labelId = `check-action-${template.id}`;
const canLaunch = template.summary_fields.user_capabilities.start;
const copyTemplate = useCallback(async () => {
if (template.type === 'job_template') {
await JobTemplatesAPI.copy(template.id, {
name: `${template.name} @ ${timeOfDay()}`,
});
} else {
await WorkflowJobTemplatesAPI.copy(template.id, {
name: `${template.name} @ ${timeOfDay()}`,
});
}
await fetchTemplates();
}, [fetchTemplates, template.id, template.name, template.type]);
const missingResourceIcon =
template.type === 'job_template' &&
(!template.summary_fields.project ||
@@ -55,7 +69,7 @@ function TemplateListItem({
<DataListItem aria-labelledby={labelId} id={`${template.id}`}>
<DataListItemRow>
<DataListCheck
isDisabled={disableButtons}
isDisabled={isDisabled}
id={`select-jobTemplate-${template.id}`}
checked={isSelected}
onChange={onSelect}
@@ -100,7 +114,7 @@ function TemplateListItem({
<LaunchButton resource={template}>
{({ handleLaunch }) => (
<Button
isDisabled={disableButtons}
isDisabled={isDisabled}
aria-label={i18n._(t`Launch template`)}
css="grid-column: 1"
variant="plain"
@@ -112,37 +126,31 @@ function TemplateListItem({
</LaunchButton>
</Tooltip>
)}
{template.summary_fields.user_capabilities.edit ? (
<>
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button
isDisabled={disableButtons}
aria-label={i18n._(t`Edit Template`)}
css="grid-column: 2"
variant="plain"
component={Link}
to={`/templates/${template.type}/${template.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
{template.summary_fields.user_capabilities.copy && (
<CopyButton
isDisabled={disableButtons}
css="grid-column: 3"
itemName={template.name}
disableButtons={setDisableButtons}
copyItem={async () => {
await JobTemplatesAPI.copyTemplate(template.id, {
name: `${template.name}@${timeOfDay()}`,
});
await fetchTemplates();
}}
/>
)}
</>
) : (
''
{template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button
isDisabled={isDisabled}
aria-label={i18n._(t`Edit Template`)}
css="grid-column: 2"
variant="plain"
component={Link}
to={`/templates/${template.type}/${template.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
{template.summary_fields.user_capabilities.copy && (
<CopyButton
helperText={{
tooltip: i18n._(t`Copy Template`),
errorMessage: i18n._(t`Failed to copy template.`),
}}
isDisabled={isDisabled}
onLoading={() => setIsDisabled(true)}
onDoneLoading={() => setIsDisabled(false)}
copyItem={copyTemplate}
/>
)}
</DataListAction>
</DataListItemRow>

53
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.test.jsx
View File

@@ -2,8 +2,13 @@ import React from 'react';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import { createMemoryHistory } from 'history';
import { JobTemplatesAPI } from '@api';
import { act } from 'react-dom/test-utils';
import mockJobTemplateData from '../shared/data.job_template.json';
import TemplateListItem from './TemplateListItem';
jest.mock('@api');
describe('<TemplateListItem />', () => {
test('launch button shown to users with start capabilities', () => {
const wrapper = mountWithContexts(
@@ -186,4 +191,52 @@ describe('<TemplateListItem />', () => {
'/templates/job_template/1/details'
);
});
test('should call api to copy template', async () => {
JobTemplatesAPI.copy.mockResolvedValue();
const wrapper = mountWithContexts(
<TemplateListItem
isSelected={false}
detailUrl="/templates/job_template/1/details"
template={mockJobTemplateData}
/>
);
await act(async () =>
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
);
expect(JobTemplatesAPI.copy).toHaveBeenCalled();
jest.clearAllMocks();
});
test('should render proper alert modal on copy error', async () => {
JobTemplatesAPI.copy.mockRejectedValue(new Error());
const wrapper = mountWithContexts(
<TemplateListItem
isSelected={false}
detailUrl="/templates/job_template/1/details"
template={mockJobTemplateData}
/>
);
await act(async () =>
wrapper.find('Button[aria-label="Copy"]').prop('onClick')()
);
wrapper.update();
expect(wrapper.find('Modal').prop('isOpen')).toBe(true);
jest.clearAllMocks();
});
test('should not render copy button', async () => {
const wrapper = mountWithContexts(
<TemplateListItem
isSelected={false}
detailUrl="/templates/job_template/1/details"
template={{
...mockJobTemplateData,
summary_fields: { user_capabilities: { copy: false } },
}}
/>
);
expect(wrapper.find('CopyButton').length).toBe(0);
});
});