mirror of
https://github.com/ansible/awx.git
synced 2026-05-10 02:47:36 -02:30
158 paginated data list (#180)
* working: rename OrganizationTeamsList to PaginatedDataList * convert org notifications list fully to PaginatedDataList * update NotificationList tests * refactor org access to use PaginatedDataList * update tests for org access refactor; fix pagination & sorting * restore Add Role functionality to Org roles * fix displayed text when list of items is empty * preserve query params when navigating through pagination * fix bugs after RBAC rebase * fix lint errors, fix add org access button
This commit is contained in:
Keith Grant
GitHub
@@ -0,0 +1,27 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../../../enzymeHelpers';
|
||||
import DeleteRoleConfirmationModal from '../../../../src/pages/Organizations/components/DeleteRoleConfirmationModal';
|
||||
|
||||
const role = {
|
||||
id: 3,
|
||||
name: 'Member',
|
||||
resource_name: 'Org',
|
||||
resource_type: 'organization',
|
||||
team_id: 5,
|
||||
team_name: 'The Team',
|
||||
};
|
||||
|
||||
describe('<DeleteRoleConfirmationModal />', () => {
|
||||
test('should render initially', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<DeleteRoleConfirmationModal
|
||||
role={role}
|
||||
username="jane"
|
||||
onCancel={() => {}}
|
||||
onConfirm={() => {}}
|
||||
/>
|
||||
);
|
||||
wrapper.update();
|
||||
expect(wrapper.find('DeleteRoleConfirmationModal')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { mountWithContexts } from '../../../enzymeHelpers';
|
||||
import OrganizationAccessItem from '../../../../src/pages/Organizations/components/OrganizationAccessItem';
|
||||
|
||||
const accessRecord = {
|
||||
id: 2,
|
||||
username: 'jane',
|
||||
url: '/bar',
|
||||
first_name: 'jane',
|
||||
last_name: 'brown',
|
||||
summary_fields: {
|
||||
direct_access: [{
|
||||
role: {
|
||||
id: 3,
|
||||
name: 'Member',
|
||||
resource_name: 'Org',
|
||||
resource_type: 'organization',
|
||||
team_id: 5,
|
||||
team_name: 'The Team',
|
||||
user_capabilities: { unattach: true },
|
||||
}
|
||||
}],
|
||||
indirect_access: [],
|
||||
}
|
||||
};
|
||||
|
||||
describe('<OrganizationAccessItem />', () => {
|
||||
test('initially renders succesfully', () => {
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationAccessItem
|
||||
accessRecord={accessRecord}
|
||||
onRoleDelete={() => {}}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('OrganizationAccessItem')).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -1,90 +0,0 @@
|
||||
import React from 'react';
|
||||
import { createMemoryHistory } from 'history';
|
||||
import { mountWithContexts } from '../../../enzymeHelpers';
|
||||
import { sleep } from '../../../testUtils';
|
||||
import OrganizationTeamsList from '../../../../src/pages/Organizations/components/OrganizationTeamsList';
|
||||
|
||||
const mockData = [
|
||||
{ id: 1, name: 'one', url: '/org/team/1' },
|
||||
{ id: 2, name: 'two', url: '/org/team/2' },
|
||||
{ id: 3, name: 'three', url: '/org/team/3' },
|
||||
{ id: 4, name: 'four', url: '/org/team/4' },
|
||||
{ id: 5, name: 'five', url: '/org/team/5' },
|
||||
];
|
||||
|
||||
describe('<OrganizationTeamsList />', () => {
|
||||
afterEach(() => {
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
test('initially renders succesfully', () => {
|
||||
mountWithContexts(
|
||||
<OrganizationTeamsList
|
||||
teams={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
order_by: 'name',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
// should navigate when datalisttoolbar changes sorting
|
||||
test('should navigate when DataListToolbar calls onSort prop', async () => {
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/organizations/1/teams'],
|
||||
});
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationTeamsList
|
||||
teams={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
order_by: 'name',
|
||||
}}
|
||||
/>, { context: { router: { history } } }
|
||||
);
|
||||
|
||||
const toolbar = wrapper.find('DataListToolbar');
|
||||
expect(toolbar.prop('sortedColumnKey')).toEqual('name');
|
||||
expect(toolbar.prop('sortOrder')).toEqual('ascending');
|
||||
toolbar.prop('onSort')('name', 'descending');
|
||||
expect(history.location.search).toEqual('?order_by=-name');
|
||||
await sleep(0);
|
||||
wrapper.update();
|
||||
|
||||
expect(toolbar.prop('sortedColumnKey')).toEqual('name');
|
||||
// TODO: this assertion required updating queryParams prop. Consider
|
||||
// fixing after #147 is done:
|
||||
// expect(toolbar.prop('sortOrder')).toEqual('descending');
|
||||
toolbar.prop('onSort')('name', 'ascending');
|
||||
expect(history.location.search).toEqual('?order_by=name');
|
||||
});
|
||||
|
||||
test('should navigate to page when Pagination calls onSetPage prop', () => {
|
||||
const history = createMemoryHistory({
|
||||
initialEntries: ['/organizations/1/teams'],
|
||||
});
|
||||
const wrapper = mountWithContexts(
|
||||
<OrganizationTeamsList
|
||||
teams={mockData}
|
||||
itemCount={7}
|
||||
queryParams={{
|
||||
page: 1,
|
||||
page_size: 5,
|
||||
order_by: 'name',
|
||||
}}
|
||||
/>, { context: { router: { history } } }
|
||||
);
|
||||
|
||||
const pagination = wrapper.find('Pagination');
|
||||
pagination.prop('onSetPage')(2, 5);
|
||||
expect(history.location.search).toEqual('?page=2&page_size=5');
|
||||
wrapper.update();
|
||||
pagination.prop('onSetPage')(1, 25);
|
||||
expect(history.location.search).toEqual('?page=1&page_size=25');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,531 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
|
||||
<DeleteRoleConfirmationModal
|
||||
onCancel={[Function]}
|
||||
onConfirm={[Function]}
|
||||
role={
|
||||
Object {
|
||||
"id": 3,
|
||||
"name": "Member",
|
||||
"resource_name": "Org",
|
||||
"resource_type": "organization",
|
||||
"team_id": 5,
|
||||
"team_name": "The Team",
|
||||
}
|
||||
}
|
||||
username="jane"
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<_default
|
||||
actions={
|
||||
Array [
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>,
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
isOpen={true}
|
||||
title="Remove Team Access"
|
||||
variant="danger"
|
||||
>
|
||||
<Modal
|
||||
actions={
|
||||
Array [
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>,
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
ariaDescribedById=""
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
hideTitle={false}
|
||||
isLarge={false}
|
||||
isOpen={true}
|
||||
isSmall={false}
|
||||
onClose={[Function]}
|
||||
title="Remove Team Access"
|
||||
width={null}
|
||||
>
|
||||
<Portal
|
||||
containerInfo={
|
||||
<div>
|
||||
<div
|
||||
class="pf-c-backdrop"
|
||||
>
|
||||
<div
|
||||
class="pf-l-bullseye"
|
||||
>
|
||||
<div
|
||||
class="pf-l-bullseye"
|
||||
>
|
||||
<div
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove Team Access"
|
||||
aria-modal="true"
|
||||
class="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="pf-c-button pf-m-plain"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<h3
|
||||
class="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove Team Access
|
||||
|
||||
</h3>
|
||||
<div
|
||||
class="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style="vertical-align: -0.125em;"
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
class="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<button
|
||||
aria-label="Confirm delete"
|
||||
class="pf-c-button pf-m-danger"
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
class="pf-c-button pf-m-secondary"
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<ModalContent
|
||||
actions={
|
||||
Array [
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
Delete
|
||||
</Button>,
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>,
|
||||
]
|
||||
}
|
||||
ariaDescribedById=""
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
hideTitle={false}
|
||||
id="pf-modal-0"
|
||||
isLarge={false}
|
||||
isOpen={true}
|
||||
isSmall={false}
|
||||
onClose={[Function]}
|
||||
title="Remove Team Access"
|
||||
width={null}
|
||||
>
|
||||
<Backdrop
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-backdrop"
|
||||
>
|
||||
<Bullseye
|
||||
className=""
|
||||
component="div"
|
||||
>
|
||||
<div
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<FocusTrap
|
||||
_createFocusTrap={[Function]}
|
||||
active={true}
|
||||
className="pf-l-bullseye"
|
||||
focusTrapOptions={
|
||||
Object {
|
||||
"clickOutsideDeactivates": true,
|
||||
}
|
||||
}
|
||||
paused={false}
|
||||
tag="div"
|
||||
>
|
||||
<div
|
||||
className="pf-l-bullseye"
|
||||
>
|
||||
<ModalBox
|
||||
className="awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
id="pf-modal-0"
|
||||
isLarge={false}
|
||||
isSmall={false}
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
}
|
||||
title="Remove Team Access"
|
||||
>
|
||||
<div
|
||||
aria-describedby="pf-modal-0"
|
||||
aria-label="Remove Team Access"
|
||||
aria-modal="true"
|
||||
className="pf-c-modal-box awx-c-modal at-c-alertModal at-c-alertModal--danger"
|
||||
role="dialog"
|
||||
style={
|
||||
Object {
|
||||
"width": null,
|
||||
}
|
||||
}
|
||||
>
|
||||
<ModalBoxCloseButton
|
||||
className=""
|
||||
onClose={[Function]}
|
||||
>
|
||||
<Button
|
||||
aria-label="Close"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Close"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesIcon
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 352 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TimesIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</ModalBoxCloseButton>
|
||||
<ModalBoxHeader
|
||||
className=""
|
||||
hideTitle={false}
|
||||
>
|
||||
<Title
|
||||
className=""
|
||||
headingLevel="h3"
|
||||
size="2xl"
|
||||
>
|
||||
<h3
|
||||
className="pf-c-title pf-m-2xl"
|
||||
>
|
||||
|
||||
Remove Team Access
|
||||
|
||||
</h3>
|
||||
</Title>
|
||||
</ModalBoxHeader>
|
||||
<ModalBoxBody
|
||||
className=""
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__body"
|
||||
id="pf-modal-0"
|
||||
>
|
||||
<WithI18n
|
||||
components={
|
||||
Array [
|
||||
<b />,
|
||||
<b />,
|
||||
<br />,
|
||||
<br />,
|
||||
<b />,
|
||||
<i />,
|
||||
]
|
||||
}
|
||||
id="Are you sure you want to remove<0> {0} </0>access from<1> {1}</1>? Doing so affects all members of the team.<2/><3/>If you<4><5> only </5></4>want to remove access for this particular user, please remove them from the team."
|
||||
values={
|
||||
Object {
|
||||
"0": "Member",
|
||||
"1": "The Team",
|
||||
}
|
||||
}
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<Trans
|
||||
components={
|
||||
Array [
|
||||
<b />,
|
||||
<b />,
|
||||
<br />,
|
||||
<br />,
|
||||
<b />,
|
||||
<i />,
|
||||
]
|
||||
}
|
||||
i18n={"/i18n/"}
|
||||
id="Are you sure you want to remove<0> {0} </0>access from<1> {1}</1>? Doing so affects all members of the team.<2/><3/>If you<4><5> only </5></4>want to remove access for this particular user, please remove them from the team."
|
||||
values={
|
||||
Object {
|
||||
"0": "Member",
|
||||
"1": "The Team",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Render
|
||||
value={null}
|
||||
/>
|
||||
</Trans>
|
||||
</I18n>
|
||||
</WithI18n>
|
||||
<ExclamationCircleIcon
|
||||
className="at-c-alertModal__icon"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden={true}
|
||||
aria-labelledby={null}
|
||||
className="at-c-alertModal__icon"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</ExclamationCircleIcon>
|
||||
</div>
|
||||
</ModalBoxBody>
|
||||
<ModalBoxFooter
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="pf-c-modal-box__footer"
|
||||
>
|
||||
|
||||
<Button
|
||||
aria-label="Confirm delete"
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
key="delete"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="danger"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="Confirm delete"
|
||||
className="pf-c-button pf-m-danger"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</Button>
|
||||
<Button
|
||||
aria-label={null}
|
||||
className=""
|
||||
component="button"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
key="cancel"
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="secondary"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label={null}
|
||||
className="pf-c-button pf-m-secondary"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
</ModalBoxFooter>
|
||||
</div>
|
||||
</ModalBox>
|
||||
</div>
|
||||
</FocusTrap>
|
||||
</div>
|
||||
</Bullseye>
|
||||
</div>
|
||||
</Backdrop>
|
||||
</ModalContent>
|
||||
</Portal>
|
||||
</Modal>
|
||||
</_default>
|
||||
</I18n>
|
||||
</DeleteRoleConfirmationModal>
|
||||
`;
|
||||
@@ -0,0 +1,326 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<OrganizationAccessItem /> initially renders succesfully 1`] = `
|
||||
<OrganizationAccessItem
|
||||
accessRecord={
|
||||
Object {
|
||||
"first_name": "jane",
|
||||
"id": 2,
|
||||
"last_name": "brown",
|
||||
"summary_fields": Object {
|
||||
"direct_access": Array [
|
||||
Object {
|
||||
"role": Object {
|
||||
"id": 3,
|
||||
"name": "Member",
|
||||
"resource_name": "Org",
|
||||
"resource_type": "organization",
|
||||
"team_id": 5,
|
||||
"team_name": "The Team",
|
||||
"user_capabilities": Object {
|
||||
"unattach": true,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
"indirect_access": Array [],
|
||||
},
|
||||
"url": "/bar",
|
||||
"username": "jane",
|
||||
}
|
||||
}
|
||||
onRoleDelete={[Function]}
|
||||
>
|
||||
<I18n
|
||||
update={true}
|
||||
withHash={true}
|
||||
>
|
||||
<DataListItem
|
||||
aria-labelledby="access-list-item"
|
||||
className=""
|
||||
isExpanded={false}
|
||||
key="2"
|
||||
>
|
||||
<li
|
||||
aria-labelledby="access-list-item"
|
||||
className="pf-c-data-list__item"
|
||||
>
|
||||
<DataListCell
|
||||
className=""
|
||||
key=".0"
|
||||
rowid="access-list-item"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<TextContent
|
||||
className=""
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="pf-c-content"
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Link
|
||||
replace={false}
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/bar",
|
||||
}
|
||||
}
|
||||
>
|
||||
<a
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
jane
|
||||
</h6>
|
||||
</Text>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</TextContent>
|
||||
<Detail
|
||||
customStyles={null}
|
||||
label="Name"
|
||||
url={null}
|
||||
value="jane brown"
|
||||
>
|
||||
<TextContent
|
||||
className=""
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="pf-c-content"
|
||||
style={
|
||||
Object {
|
||||
"display": "grid",
|
||||
"gridTemplateColumns": "minmax(70px, max-content) minmax(60px, max-content)",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Name
|
||||
</h6>
|
||||
</Text>
|
||||
<Text
|
||||
className=""
|
||||
component="p"
|
||||
style={
|
||||
Object {
|
||||
"lineHeight": "28px",
|
||||
"overflow": "visible",
|
||||
}
|
||||
}
|
||||
>
|
||||
<p
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"lineHeight": "28px",
|
||||
"overflow": "visible",
|
||||
}
|
||||
}
|
||||
>
|
||||
jane brown
|
||||
</p>
|
||||
</Text>
|
||||
</div>
|
||||
</TextContent>
|
||||
</Detail>
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
className=""
|
||||
key=".1"
|
||||
rowid="access-list-item"
|
||||
width={1}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell"
|
||||
>
|
||||
<ul
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"flexWrap": "wrap",
|
||||
}
|
||||
}
|
||||
>
|
||||
<Text
|
||||
className=""
|
||||
component="h6"
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<h6
|
||||
className=""
|
||||
data-pf-content={true}
|
||||
style={
|
||||
Object {
|
||||
"fontWeight": "700",
|
||||
"lineHeight": "24px",
|
||||
"marginRight": "20px",
|
||||
}
|
||||
}
|
||||
>
|
||||
Team Roles
|
||||
</h6>
|
||||
</Text>
|
||||
<Chip
|
||||
className="awx-c-chip"
|
||||
closeBtnAriaLabel="close"
|
||||
isOverflowChip={false}
|
||||
key="3"
|
||||
onClick={[Function]}
|
||||
tooltipPosition="top"
|
||||
>
|
||||
<GenerateId
|
||||
prefix="pf-random-id-"
|
||||
>
|
||||
<li
|
||||
className="pf-c-chip awx-c-chip"
|
||||
>
|
||||
<span
|
||||
className="pf-c-chip__text"
|
||||
id="pf-random-id-0"
|
||||
>
|
||||
Member
|
||||
</span>
|
||||
<ChipButton
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
ariaLabel="close"
|
||||
className=""
|
||||
id="remove_pf-random-id-0"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<Button
|
||||
aria-label="close"
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
className=""
|
||||
component="button"
|
||||
id="remove_pf-random-id-0"
|
||||
isActive={false}
|
||||
isBlock={false}
|
||||
isDisabled={false}
|
||||
isFocus={false}
|
||||
isHover={false}
|
||||
onClick={[Function]}
|
||||
type="button"
|
||||
variant="plain"
|
||||
>
|
||||
<button
|
||||
aria-disabled={null}
|
||||
aria-label="close"
|
||||
aria-labelledby="remove_pf-random-id-0 pf-random-id-0"
|
||||
className="pf-c-button pf-m-plain"
|
||||
disabled={false}
|
||||
id="remove_pf-random-id-0"
|
||||
onClick={[Function]}
|
||||
tabIndex={null}
|
||||
type="button"
|
||||
>
|
||||
<TimesCircleIcon
|
||||
aria-hidden="true"
|
||||
color="currentColor"
|
||||
size="sm"
|
||||
title={null}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
aria-labelledby={null}
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
role="img"
|
||||
style={
|
||||
Object {
|
||||
"verticalAlign": "-0.125em",
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
|
||||
transform=""
|
||||
/>
|
||||
</svg>
|
||||
</TimesCircleIcon>
|
||||
</button>
|
||||
</Button>
|
||||
</ChipButton>
|
||||
</li>
|
||||
</GenerateId>
|
||||
</Chip>
|
||||
</ul>
|
||||
</div>
|
||||
</DataListCell>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</I18n>
|
||||
</OrganizationAccessItem>
|
||||
`;
|
||||
Reference in New Issue
Block a user