mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 18:09:57 -03:30
Merge pull request #7369 from nixocio/ui_issue_7324
Add Credential Type List and Delete Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
GitHub
commit
e4eef82a39
@ -21,7 +21,7 @@ const applications = {
|
||||
user_capabilities: { edit: true, delete: true },
|
||||
},
|
||||
url: '',
|
||||
organiation: 10,
|
||||
organization: 10,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
|
||||
@ -1,14 +1,163 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect, useCallback } from 'react';
|
||||
import { useLocation, useRouteMatch } from 'react-router-dom';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Card, PageSection } from '@patternfly/react-core';
|
||||
|
||||
function CredentialTypeList() {
|
||||
import { CredentialTypesAPI } from '../../../api';
|
||||
import { getQSConfig, parseQueryString } from '../../../util/qs';
|
||||
import useRequest, { useDeleteItems } from '../../../util/useRequest';
|
||||
import useSelected from '../../../util/useSelected';
|
||||
import PaginatedDataList, {
|
||||
ToolbarDeleteButton,
|
||||
ToolbarAddButton,
|
||||
} from '../../../components/PaginatedDataList';
|
||||
import ErrorDetail from '../../../components/ErrorDetail';
|
||||
import AlertModal from '../../../components/AlertModal';
|
||||
import DatalistToolbar from '../../../components/DataListToolbar';
|
||||
import CredentialTypeListItem from './CredentialTypeListItem';
|
||||
|
||||
const QS_CONFIG = getQSConfig('credential_type', {
|
||||
page: 1,
|
||||
page_size: 20,
|
||||
order_by: 'name',
|
||||
managed_by_tower: false,
|
||||
});
|
||||
|
||||
function CredentialTypeList({ i18n }) {
|
||||
const location = useLocation();
|
||||
const match = useRouteMatch();
|
||||
|
||||
const {
|
||||
error: contentError,
|
||||
isLoading,
|
||||
request: fetchCredentialTypes,
|
||||
result: { credentialTypes, credentialTypesCount, actions },
|
||||
} = useRequest(
|
||||
useCallback(async () => {
|
||||
const params = parseQueryString(QS_CONFIG, location.search);
|
||||
|
||||
const [response, responseActions] = await Promise.all([
|
||||
CredentialTypesAPI.read(params),
|
||||
CredentialTypesAPI.readOptions(),
|
||||
]);
|
||||
|
||||
return {
|
||||
credentialTypes: response.data.results,
|
||||
credentialTypesCount: response.data.count,
|
||||
actions: responseActions.data.actions,
|
||||
};
|
||||
}, [location]),
|
||||
{
|
||||
credentialTypes: [],
|
||||
credentialTypesCount: 0,
|
||||
actions: {},
|
||||
}
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCredentialTypes();
|
||||
}, [fetchCredentialTypes]);
|
||||
|
||||
const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
|
||||
credentialTypes
|
||||
);
|
||||
|
||||
const {
|
||||
isLoading: deleteLoading,
|
||||
deletionError,
|
||||
deleteItems: handleDeleteCredentialTypes,
|
||||
clearDeletionError,
|
||||
} = useDeleteItems(
|
||||
useCallback(async () => {
|
||||
await Promise.all(
|
||||
selected.map(({ id }) => CredentialTypesAPI.destroy(id))
|
||||
);
|
||||
}, [selected]),
|
||||
{
|
||||
qsConfig: QS_CONFIG,
|
||||
allItemsSelected: isAllSelected,
|
||||
fetchItems: fetchCredentialTypes,
|
||||
}
|
||||
);
|
||||
|
||||
const handleDelete = async () => {
|
||||
await handleDeleteCredentialTypes();
|
||||
setSelected([]);
|
||||
};
|
||||
|
||||
const canAdd = actions && actions.POST;
|
||||
|
||||
return (
|
||||
<PageSection>
|
||||
<Card>
|
||||
<div>Credential Type List</div>
|
||||
</Card>
|
||||
</PageSection>
|
||||
<>
|
||||
<PageSection>
|
||||
<Card>
|
||||
<PaginatedDataList
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading || deleteLoading}
|
||||
items={credentialTypes}
|
||||
itemCount={credentialTypesCount}
|
||||
pluralizedItemName={i18n._(t`Credential Types`)}
|
||||
qsConfig={QS_CONFIG}
|
||||
onRowClick={handleSelect}
|
||||
renderToolbar={props => (
|
||||
<DatalistToolbar
|
||||
{...props}
|
||||
showSelectAll
|
||||
showExpandCollapse
|
||||
isAllSelected={isAllSelected}
|
||||
onSelectAll={isSelected =>
|
||||
setSelected(isSelected ? [...credentialTypes] : [])
|
||||
}
|
||||
qsConfig={QS_CONFIG}
|
||||
additionalControls={[
|
||||
...(canAdd
|
||||
? [
|
||||
<ToolbarAddButton
|
||||
key="add"
|
||||
linkTo={`${match.url}/add`}
|
||||
/>,
|
||||
]
|
||||
: []),
|
||||
<ToolbarDeleteButton
|
||||
key="delete"
|
||||
onDelete={handleDelete}
|
||||
itemsToDelete={selected}
|
||||
pluralizedItemName={i18n._(t`Credential Types`)}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
)}
|
||||
renderItem={credentialType => (
|
||||
<CredentialTypeListItem
|
||||
key={credentialTypes.id}
|
||||
value={credentialType.name}
|
||||
credentialType={credentialType}
|
||||
detailUrl={`${match.url}/${credentialType.id}/details`}
|
||||
onSelect={() => handleSelect(credentialType)}
|
||||
isSelected={selected.some(row => row.id === credentialType.id)}
|
||||
/>
|
||||
)}
|
||||
emptyStateControls={
|
||||
canAdd && (
|
||||
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
|
||||
)
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</PageSection>
|
||||
<AlertModal
|
||||
aria-label={i18n._(t`Deletion error`)}
|
||||
isOpen={deletionError}
|
||||
onClose={clearDeletionError}
|
||||
title={i18n._(t`Error`)}
|
||||
variant="error"
|
||||
>
|
||||
{i18n._(t`Failed to delete one or more credential types.`)}
|
||||
<ErrorDetail error={deletionError} />
|
||||
</AlertModal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default CredentialTypeList;
|
||||
export default withI18n()(CredentialTypeList);
|
||||
|
||||
@ -0,0 +1,165 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import {
|
||||
mountWithContexts,
|
||||
waitForElement,
|
||||
} from '../../../../testUtils/enzymeHelpers';
|
||||
|
||||
import { CredentialTypesAPI } from '../../../api';
|
||||
import CredentialTypeList from './CredentialTypeList';
|
||||
|
||||
jest.mock('../../../api/models/CredentialTypes');
|
||||
|
||||
const credentialTypes = {
|
||||
data: {
|
||||
results: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Foo',
|
||||
kind: 'cloud',
|
||||
summary_fields: {
|
||||
user_capabilities: { edit: true, delete: true },
|
||||
},
|
||||
url: '',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Bar',
|
||||
kind: 'cloud',
|
||||
summary_fields: {
|
||||
user_capabilities: { edit: false, delete: true },
|
||||
},
|
||||
url: '',
|
||||
},
|
||||
],
|
||||
count: 2,
|
||||
},
|
||||
};
|
||||
|
||||
const options = { data: { actions: { POST: true } } };
|
||||
|
||||
describe('<CredentialTypeList', () => {
|
||||
let wrapper;
|
||||
|
||||
test('should mount successfully', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<CredentialTypeList />);
|
||||
});
|
||||
await waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
|
||||
});
|
||||
|
||||
test('should have data fetched and render 2 rows', async () => {
|
||||
CredentialTypesAPI.read.mockResolvedValue(credentialTypes);
|
||||
CredentialTypesAPI.readOptions.mockResolvedValue(options);
|
||||
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<CredentialTypeList />);
|
||||
});
|
||||
await waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
|
||||
expect(wrapper.find('CredentialTypeListItem').length).toBe(2);
|
||||
expect(CredentialTypesAPI.read).toBeCalled();
|
||||
expect(CredentialTypesAPI.readOptions).toBeCalled();
|
||||
});
|
||||
|
||||
test('should delete item successfully', async () => {
|
||||
CredentialTypesAPI.read.mockResolvedValue(credentialTypes);
|
||||
CredentialTypesAPI.readOptions.mockResolvedValue(options);
|
||||
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<CredentialTypeList />);
|
||||
});
|
||||
await waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
|
||||
|
||||
wrapper
|
||||
.find('input#select-credential-types-1')
|
||||
.simulate('change', credentialTypes.data.results[0]);
|
||||
wrapper.update();
|
||||
|
||||
expect(
|
||||
wrapper.find('input#select-credential-types-1').prop('checked')
|
||||
).toBe(true);
|
||||
|
||||
await act(async () => {
|
||||
wrapper.find('Button[aria-label="Delete"]').prop('onClick')();
|
||||
});
|
||||
wrapper.update();
|
||||
|
||||
await act(async () =>
|
||||
wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
|
||||
);
|
||||
|
||||
expect(CredentialTypesAPI.destroy).toBeCalledWith(
|
||||
credentialTypes.data.results[0].id
|
||||
);
|
||||
});
|
||||
|
||||
test('should thrown content error', async () => {
|
||||
CredentialTypesAPI.read.mockRejectedValue(
|
||||
new Error({
|
||||
response: {
|
||||
config: {
|
||||
method: 'GET',
|
||||
url: '/api/v2/credential_types',
|
||||
},
|
||||
data: 'An error occurred',
|
||||
},
|
||||
})
|
||||
);
|
||||
CredentialTypesAPI.readOptions.mockResolvedValue(options);
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<CredentialTypeList />);
|
||||
});
|
||||
await waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
|
||||
expect(wrapper.find('ContentError').length).toBe(1);
|
||||
});
|
||||
|
||||
test('should render deletion error modal', async () => {
|
||||
CredentialTypesAPI.destroy.mockRejectedValue(
|
||||
new Error({
|
||||
response: {
|
||||
config: {
|
||||
method: 'DELETE',
|
||||
url: '/api/v2/credential_types',
|
||||
},
|
||||
data: 'An error occurred',
|
||||
},
|
||||
})
|
||||
);
|
||||
CredentialTypesAPI.read.mockResolvedValue(credentialTypes);
|
||||
CredentialTypesAPI.readOptions.mockResolvedValue(options);
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<CredentialTypeList />);
|
||||
});
|
||||
waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
|
||||
|
||||
wrapper.find('input#select-credential-types-1').simulate('change', 'a');
|
||||
wrapper.update();
|
||||
expect(
|
||||
wrapper.find('input#select-credential-types-1').prop('checked')
|
||||
).toBe(true);
|
||||
|
||||
await act(async () =>
|
||||
wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
|
||||
);
|
||||
wrapper.update();
|
||||
|
||||
await act(async () =>
|
||||
wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
|
||||
);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('ErrorDetail').length).toBe(1);
|
||||
});
|
||||
|
||||
test('should not render add button', async () => {
|
||||
CredentialTypesAPI.read.mockResolvedValue(credentialTypes);
|
||||
CredentialTypesAPI.readOptions.mockResolvedValue({
|
||||
data: { actions: { POST: false } },
|
||||
});
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(<CredentialTypeList />);
|
||||
});
|
||||
waitForElement(wrapper, 'CredentialTypeList', el => el.length > 0);
|
||||
expect(wrapper.find('ToolbarAddButton').length).toBe(0);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,92 @@
|
||||
import React from 'react';
|
||||
import { string, bool, func } from 'prop-types';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Button,
|
||||
DataListAction as _DataListAction,
|
||||
DataListCheck,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
Tooltip,
|
||||
} from '@patternfly/react-core';
|
||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import DataListCell from '../../../components/DataListCell';
|
||||
import { CredentialType } from '../../../types';
|
||||
|
||||
const DataListAction = styled(_DataListAction)`
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: 40px;
|
||||
`;
|
||||
|
||||
function CredentialTypeListItem({
|
||||
credentialType,
|
||||
detailUrl,
|
||||
isSelected,
|
||||
onSelect,
|
||||
i18n,
|
||||
}) {
|
||||
const labelId = `check-action-${credentialType.id}`;
|
||||
|
||||
return (
|
||||
<DataListItem
|
||||
key={credentialType.id}
|
||||
aria-labelledby={labelId}
|
||||
id={`${credentialType.id} `}
|
||||
>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`select-credential-types-${credentialType.id}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={labelId}
|
||||
/>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell
|
||||
key="name"
|
||||
aria-label={i18n._(t`credential type name`)}
|
||||
>
|
||||
<Link to={`${detailUrl} `}>
|
||||
<b>{credentialType.name}</b>
|
||||
</Link>
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
aria-label="actions"
|
||||
aria-labelledby={labelId}
|
||||
id={labelId}
|
||||
>
|
||||
{credentialType.summary_fields.user_capabilities.edit && (
|
||||
<Tooltip content={i18n._(t`Edit credential type`)} position="top">
|
||||
<Button
|
||||
aria-label={i18n._(t`Edit credential type`)}
|
||||
variant="plain"
|
||||
component={Link}
|
||||
to={`/credential_types/${credentialType.id}/edit`}
|
||||
>
|
||||
<PencilAltIcon />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
);
|
||||
}
|
||||
|
||||
CredentialTypeListItem.prototype = {
|
||||
credentialType: CredentialType.isRequired,
|
||||
detailUrl: string.isRequired,
|
||||
isSelected: bool.isRequired,
|
||||
onSelect: func.isRequired,
|
||||
};
|
||||
|
||||
export default withI18n()(CredentialTypeListItem);
|
||||
@ -0,0 +1,99 @@
|
||||
import React from 'react';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
|
||||
|
||||
import CredentialTypeListItem from './CredentialTypeListItem';
|
||||
|
||||
describe('<CredentialTypeListItem/>', () => {
|
||||
let wrapper;
|
||||
const credential_type = {
|
||||
id: 1,
|
||||
name: 'Foo',
|
||||
summary_fields: { user_capabilities: { edit: true, delete: true } },
|
||||
kind: 'cloud',
|
||||
};
|
||||
|
||||
test('should mount successfully', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<CredentialTypeListItem
|
||||
credentialType={credential_type}
|
||||
detailUrl="credential_types/1/details"
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
expect(wrapper.find('CredentialTypeListItem').length).toBe(1);
|
||||
});
|
||||
|
||||
test('should render the proper data', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<CredentialTypeListItem
|
||||
credentialType={credential_type}
|
||||
detailsUrl="credential_types/1/details"
|
||||
isSelected={false}
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
expect(
|
||||
wrapper.find('DataListCell[aria-label="credential type name"]').text()
|
||||
).toBe('Foo');
|
||||
expect(wrapper.find('PencilAltIcon').length).toBe(1);
|
||||
expect(
|
||||
wrapper.find('input#select-credential-types-1').prop('checked')
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
test('should be checked', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<CredentialTypeListItem
|
||||
credentialType={credential_type}
|
||||
detailsUrl="credential_types/1/details"
|
||||
isSelected
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
expect(
|
||||
wrapper.find('input#select-credential-types-1').prop('checked')
|
||||
).toBe(true);
|
||||
});
|
||||
|
||||
test('edit button shown to users with edit capabilities', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<CredentialTypeListItem
|
||||
credentialType={credential_type}
|
||||
detailsUrl="credential_types/1/details"
|
||||
isSelected
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('edit button hidden from users without edit capabilities', async () => {
|
||||
await act(async () => {
|
||||
wrapper = mountWithContexts(
|
||||
<CredentialTypeListItem
|
||||
credentialType={{
|
||||
...credential_type,
|
||||
summary_fields: { user_capabilities: { edit: false } },
|
||||
}}
|
||||
detailsUrl="credential_types/1/details"
|
||||
isSelected
|
||||
onSelect={() => {}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
|
||||
});
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user