mirror of
https://github.com/ansible/awx.git
synced 2026-01-11 10:00:01 -03:30
convert NotificationList to tables
This commit is contained in:
Keith Grant
Keith J. Grant
parent
eb66a03a30
commit
2419a592b4
@ -6,7 +6,7 @@ import { t } from '@lingui/macro';
|
||||
import AlertModal from '../AlertModal';
|
||||
import ErrorDetail from '../ErrorDetail';
|
||||
import NotificationListItem from './NotificationListItem';
|
||||
import PaginatedDataList from '../PaginatedDataList';
|
||||
import PaginatedTable, { HeaderRow, HeaderCell } from '../PaginatedTable';
|
||||
import { getQSConfig, parseQueryString } from '../../util/qs';
|
||||
import useRequest from '../../util/useRequest';
|
||||
import { NotificationTemplatesAPI } from '../../api';
|
||||
@ -169,7 +169,7 @@ function NotificationList({
|
||||
|
||||
return (
|
||||
<>
|
||||
<PaginatedDataList
|
||||
<PaginatedTable
|
||||
contentError={contentError}
|
||||
hasContentLoading={isLoading}
|
||||
items={notifications}
|
||||
@ -211,19 +211,18 @@ function NotificationList({
|
||||
key: 'modified_by__username__icontains',
|
||||
},
|
||||
]}
|
||||
toolbarSortColumns={[
|
||||
{
|
||||
name: i18n._(t`Name`),
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
name: i18n._(t`Type`),
|
||||
key: 'notification_type',
|
||||
},
|
||||
]}
|
||||
toolbarSearchableKeys={searchableKeys}
|
||||
toolbarRelatedSearchableKeys={relatedSearchableKeys}
|
||||
renderItem={notification => (
|
||||
headerRow={
|
||||
<HeaderRow qsConfig={QS_CONFIG} isSelectable={false}>
|
||||
<HeaderCell sortKey="name">{i18n._(t`Name`)}</HeaderCell>
|
||||
<HeaderCell sortKey="notification_type">
|
||||
{i18n._(t`Type`)}
|
||||
</HeaderCell>
|
||||
<HeaderCell>{i18n._(t`Options`)}</HeaderCell>
|
||||
</HeaderRow>
|
||||
}
|
||||
renderRow={(notification, index) => (
|
||||
<NotificationListItem
|
||||
key={notification.id}
|
||||
notification={notification}
|
||||
@ -239,6 +238,7 @@ function NotificationList({
|
||||
successTurnedOn={successTemplateIds.includes(notification.id)}
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle={showApprovalsToggle}
|
||||
rowIndex={index}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
@ -87,10 +87,6 @@ describe('<NotificationList />', () => {
|
||||
wrapper.unmount();
|
||||
});
|
||||
|
||||
test('initially renders succesfully', () => {
|
||||
expect(wrapper.find('PaginatedDataList')).toHaveLength(1);
|
||||
});
|
||||
|
||||
test('should render list fetched of items', () => {
|
||||
expect(NotificationTemplatesAPI.read).toHaveBeenCalled();
|
||||
expect(NotificationTemplatesAPI.readOptions).toHaveBeenCalled();
|
||||
|
||||
@ -3,25 +3,9 @@ import { shape, number, string, bool, func } from 'prop-types';
|
||||
import { withI18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
DataListAction as _DataListAction,
|
||||
DataListItem,
|
||||
DataListItemCells,
|
||||
DataListItemRow,
|
||||
Switch,
|
||||
} from '@patternfly/react-core';
|
||||
import styled from 'styled-components';
|
||||
import DataListCell from '../DataListCell';
|
||||
|
||||
const DataListAction = styled(_DataListAction)`
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: ${props => `repeat(${props.columns}, max-content)`};
|
||||
`;
|
||||
const Label = styled.b`
|
||||
margin-right: 20px;
|
||||
`;
|
||||
import { Switch } from '@patternfly/react-core';
|
||||
import { Tr, Td } from '@patternfly/react-table';
|
||||
import { ActionsTd, ActionItem } from '../PaginatedTable';
|
||||
|
||||
function NotificationListItem({
|
||||
canToggleNotifications,
|
||||
@ -37,54 +21,37 @@ function NotificationListItem({
|
||||
showApprovalsToggle,
|
||||
}) {
|
||||
return (
|
||||
<DataListItem
|
||||
aria-labelledby={`items-list-item-${notification.id}`}
|
||||
key={notification.id}
|
||||
id={`${notification.id}`}
|
||||
>
|
||||
<DataListItemRow>
|
||||
<DataListItemCells
|
||||
dataListCells={[
|
||||
<DataListCell key="name">
|
||||
<Link
|
||||
to={{
|
||||
pathname: detailUrl,
|
||||
}}
|
||||
>
|
||||
<b id={`items-list-item-${notification.id}`}>
|
||||
{notification.name}
|
||||
</b>
|
||||
</Link>
|
||||
</DataListCell>,
|
||||
<DataListCell key="type">
|
||||
<Label>{i18n._(t`Type `)}</Label>
|
||||
{typeLabels[notification.notification_type]}
|
||||
</DataListCell>,
|
||||
]}
|
||||
/>
|
||||
<DataListAction
|
||||
aria-label={i18n._(t`actions`)}
|
||||
aria-labelledby={`items-list-item-${notification.id}`}
|
||||
id={`items-list-item-${notification.id}`}
|
||||
columns={showApprovalsToggle ? 4 : 3}
|
||||
>
|
||||
{showApprovalsToggle && (
|
||||
<Switch
|
||||
id={`notification-${notification.id}-approvals-toggle`}
|
||||
label={i18n._(t`Approval`)}
|
||||
labelOff={i18n._(t`Approval`)}
|
||||
isChecked={approvalsTurnedOn}
|
||||
isDisabled={!canToggleNotifications}
|
||||
onChange={() =>
|
||||
toggleNotification(
|
||||
notification.id,
|
||||
approvalsTurnedOn,
|
||||
'approvals'
|
||||
)
|
||||
}
|
||||
aria-label={i18n._(t`Toggle notification approvals`)}
|
||||
/>
|
||||
)}
|
||||
<Tr id={`notification-row-${notification.id}`}>
|
||||
<Td id={`notification-${notification.id}`} dataLabel={i18n._(t`Name`)}>
|
||||
<Link to={`${detailUrl}`}>
|
||||
<b>{notification.name}</b>
|
||||
</Link>
|
||||
</Td>
|
||||
<Td dataLabel={i18n._(t`Type`)}>
|
||||
{typeLabels[notification.notification_type]}
|
||||
</Td>
|
||||
<ActionsTd
|
||||
dataLabel={i18n._(t`Options`)}
|
||||
gridColumns="120px 120px 120px 120px"
|
||||
>
|
||||
<ActionItem visible={showApprovalsToggle}>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-approvals-toggle`}
|
||||
label={i18n._(t`Approval`)}
|
||||
labelOff={i18n._(t`Approval`)}
|
||||
isChecked={approvalsTurnedOn}
|
||||
isDisabled={!canToggleNotifications}
|
||||
onChange={() =>
|
||||
toggleNotification(
|
||||
notification.id,
|
||||
approvalsTurnedOn,
|
||||
'approvals'
|
||||
)
|
||||
}
|
||||
aria-label={i18n._(t`Toggle notification approvals`)}
|
||||
/>
|
||||
</ActionItem>
|
||||
<ActionItem visible>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-started-toggle`}
|
||||
label={i18n._(t`Start`)}
|
||||
@ -96,6 +63,8 @@ function NotificationListItem({
|
||||
}
|
||||
aria-label={i18n._(t`Toggle notification start`)}
|
||||
/>
|
||||
</ActionItem>
|
||||
<ActionItem visible>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-success-toggle`}
|
||||
label={i18n._(t`Success`)}
|
||||
@ -107,6 +76,8 @@ function NotificationListItem({
|
||||
}
|
||||
aria-label={i18n._(t`Toggle notification success`)}
|
||||
/>
|
||||
</ActionItem>
|
||||
<ActionItem visible>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-error-toggle`}
|
||||
label={i18n._(t`Failure`)}
|
||||
@ -118,9 +89,9 @@ function NotificationListItem({
|
||||
}
|
||||
aria-label={i18n._(t`Toggle notification failure`)}
|
||||
/>
|
||||
</DataListAction>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
</ActionItem>
|
||||
</ActionsTd>
|
||||
</Tr>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -30,13 +30,17 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('initially renders succesfully and displays correct label', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('NotificationListItem')).toMatchSnapshot();
|
||||
expect(wrapper.find('Switch').length).toBe(3);
|
||||
@ -44,46 +48,55 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('shows approvals toggle when configured', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
expect(wrapper.find('Switch').length).toBe(4);
|
||||
});
|
||||
|
||||
test('displays correct label in correct column', () => {
|
||||
test('displays correct type', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
const typeCell = wrapper
|
||||
.find('DataListCell')
|
||||
.at(1)
|
||||
.find('div');
|
||||
const typeCell = wrapper.find('Td').at(1);
|
||||
expect(typeCell.text()).toContain('Slack');
|
||||
});
|
||||
|
||||
test('handles approvals click when toggle is on', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
approvalsTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
approvalsTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification approvals"]')
|
||||
@ -95,15 +108,19 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles approvals click when toggle is off', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
approvalsTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
approvalsTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
showApprovalsToggle
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification approvals"]')
|
||||
@ -114,14 +131,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles started click when toggle is on', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
startedTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
startedTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification start"]')
|
||||
@ -132,14 +153,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles started click when toggle is off', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
startedTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
startedTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification start"]')
|
||||
@ -150,14 +175,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles success click when toggle is on', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
successTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
successTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification success"]')
|
||||
@ -168,14 +197,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles success click when toggle is off', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
successTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
successTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification success"]')
|
||||
@ -186,14 +219,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles error click when toggle is on', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
errorTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
errorTurnedOn
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification failure"]')
|
||||
@ -204,14 +241,18 @@ describe('<NotificationListItem canToggleNotifications />', () => {
|
||||
|
||||
test('handles error click when toggle is off', () => {
|
||||
wrapper = mountWithContexts(
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
errorTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
<table>
|
||||
<tbody>
|
||||
<NotificationListItem
|
||||
notification={mockNotif}
|
||||
errorTurnedOn={false}
|
||||
toggleNotification={toggleNotification}
|
||||
detailUrl="/foo"
|
||||
canToggleNotifications
|
||||
typeLabels={typeLabels}
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
wrapper
|
||||
.find('Switch[aria-label="Toggle notification failure"]')
|
||||
|
||||
@ -24,398 +24,442 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
}
|
||||
}
|
||||
>
|
||||
<DataListItem
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className=""
|
||||
id="9000"
|
||||
isExpanded={false}
|
||||
key="9000"
|
||||
<Tr
|
||||
id="notification-row-9000"
|
||||
>
|
||||
<li
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className="pf-c-data-list__item"
|
||||
id="9000"
|
||||
<TrBase
|
||||
id="notification-row-9000"
|
||||
innerRef={null}
|
||||
>
|
||||
<DataListItemRow
|
||||
key=".0"
|
||||
rowid="items-list-item-9000"
|
||||
<tr
|
||||
className=""
|
||||
data-ouia-component-id="OUIA-Generated-TableRow-1"
|
||||
data-ouia-component-type="PF4/TableRow"
|
||||
data-ouia-safe={true}
|
||||
hidden={false}
|
||||
id="notification-row-9000"
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__item-row"
|
||||
<Td
|
||||
dataLabel="Name"
|
||||
id="notification-9000"
|
||||
>
|
||||
<DataListItemCells
|
||||
dataListCells={
|
||||
Array [
|
||||
<ForwardRef(Styled(PFDataListCell))>
|
||||
<ForwardRef
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
<TdBase
|
||||
dataLabel="Name"
|
||||
id="notification-9000"
|
||||
innerRef={null}
|
||||
>
|
||||
<td
|
||||
className=""
|
||||
data-label="Name"
|
||||
id="notification-9000"
|
||||
>
|
||||
<Link
|
||||
to="/foo"
|
||||
>
|
||||
<LinkAnchor
|
||||
href="/foo"
|
||||
navigate={[Function]}
|
||||
>
|
||||
<a
|
||||
href="/foo"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<b
|
||||
id="items-list-item-9000"
|
||||
>
|
||||
<b>
|
||||
Foo
|
||||
</b>
|
||||
</ForwardRef>
|
||||
</ForwardRef(Styled(PFDataListCell))>,
|
||||
<ForwardRef(Styled(PFDataListCell))>
|
||||
<ForwardRef(styled.b)>
|
||||
Type
|
||||
</ForwardRef(styled.b)>
|
||||
Slack
|
||||
</ForwardRef(Styled(PFDataListCell))>,
|
||||
]
|
||||
}
|
||||
key=".0"
|
||||
rowid="items-list-item-9000"
|
||||
</a>
|
||||
</LinkAnchor>
|
||||
</Link>
|
||||
</td>
|
||||
</TdBase>
|
||||
</Td>
|
||||
<Td
|
||||
dataLabel="Type"
|
||||
>
|
||||
<TdBase
|
||||
dataLabel="Type"
|
||||
innerRef={null}
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__item-content"
|
||||
<td
|
||||
className=""
|
||||
data-label="Type"
|
||||
>
|
||||
<DataListCell
|
||||
key="name"
|
||||
>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-bdVaJa",
|
||||
"isStatic": false,
|
||||
"lastClassName": "kruorc",
|
||||
"rules": Array [
|
||||
"
|
||||
word-break: break-word;
|
||||
",
|
||||
],
|
||||
},
|
||||
"displayName": "DataListCell",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-bdVaJa",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<PFDataListCell
|
||||
className="sc-bdVaJa kruorc"
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell sc-bdVaJa kruorc"
|
||||
>
|
||||
<Link
|
||||
to={
|
||||
Object {
|
||||
"pathname": "/foo",
|
||||
}
|
||||
}
|
||||
>
|
||||
<LinkAnchor
|
||||
href="/foo"
|
||||
navigate={[Function]}
|
||||
>
|
||||
<a
|
||||
href="/foo"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<b
|
||||
id="items-list-item-9000"
|
||||
>
|
||||
Foo
|
||||
</b>
|
||||
</a>
|
||||
</LinkAnchor>
|
||||
</Link>
|
||||
</div>
|
||||
</PFDataListCell>
|
||||
</StyledComponent>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
key="type"
|
||||
>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-bdVaJa",
|
||||
"isStatic": false,
|
||||
"lastClassName": "kruorc",
|
||||
"rules": Array [
|
||||
"
|
||||
word-break: break-word;
|
||||
",
|
||||
],
|
||||
},
|
||||
"displayName": "DataListCell",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-bdVaJa",
|
||||
"target": [Function],
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<PFDataListCell
|
||||
className="sc-bdVaJa kruorc"
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__cell sc-bdVaJa kruorc"
|
||||
>
|
||||
<styled.b>
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-htpNat",
|
||||
"isStatic": false,
|
||||
"lastClassName": "jyYvCB",
|
||||
"rules": Array [
|
||||
"
|
||||
margin-right: 20px;
|
||||
",
|
||||
],
|
||||
},
|
||||
"displayName": "styled.b",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-htpNat",
|
||||
"target": "b",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<b
|
||||
className="sc-htpNat jyYvCB"
|
||||
>
|
||||
Type
|
||||
</b>
|
||||
</StyledComponent>
|
||||
</styled.b>
|
||||
Slack
|
||||
</div>
|
||||
</PFDataListCell>
|
||||
</StyledComponent>
|
||||
</DataListCell>
|
||||
</div>
|
||||
</DataListItemCells>
|
||||
<Styled(DataListAction)
|
||||
aria-label="actions"
|
||||
aria-labelledby="items-list-item-9000"
|
||||
columns={3}
|
||||
id="items-list-item-9000"
|
||||
key=".1"
|
||||
rowid="items-list-item-9000"
|
||||
Slack
|
||||
</td>
|
||||
</TdBase>
|
||||
</Td>
|
||||
<ActionsTd
|
||||
dataLabel="Options"
|
||||
gridColumns="120px 120px 120px 120px"
|
||||
>
|
||||
<ActionsTd___StyledTd
|
||||
_css={160}
|
||||
dataLabel="Options"
|
||||
>
|
||||
<StyledComponent
|
||||
aria-label="actions"
|
||||
aria-labelledby="items-list-item-9000"
|
||||
columns={3}
|
||||
_css={160}
|
||||
dataLabel="Options"
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "sc-bwzfXH",
|
||||
"componentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
|
||||
"isStatic": false,
|
||||
"lastClassName": "llKtln",
|
||||
"lastClassName": "dIDjZI",
|
||||
"rules": Array [
|
||||
"
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-gap: 16px;
|
||||
grid-template-columns: ",
|
||||
"text-align:right;--pf-c-table--cell--Width:",
|
||||
[Function],
|
||||
";
|
||||
",
|
||||
"px;",
|
||||
],
|
||||
},
|
||||
"displayName": "Styled(DataListAction)",
|
||||
"displayName": "ActionsTd___StyledTd",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-bwzfXH",
|
||||
"target": [Function],
|
||||
"styledComponentId": "ActionsTd___StyledTd-sc-1ys3lw-1",
|
||||
"target": Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"displayName": "Td",
|
||||
"render": [Function],
|
||||
},
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
id="items-list-item-9000"
|
||||
rowid="items-list-item-9000"
|
||||
>
|
||||
<DataListAction
|
||||
aria-label="actions"
|
||||
aria-labelledby="items-list-item-9000"
|
||||
className="sc-bwzfXH llKtln"
|
||||
columns={3}
|
||||
id="items-list-item-9000"
|
||||
rowid="items-list-item-9000"
|
||||
<Td
|
||||
_css={160}
|
||||
className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
|
||||
dataLabel="Options"
|
||||
>
|
||||
<div
|
||||
className="pf-c-data-list__item-action sc-bwzfXH llKtln"
|
||||
columns={3}
|
||||
rowid="items-list-item-9000"
|
||||
<TdBase
|
||||
_css={160}
|
||||
className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
|
||||
dataLabel="Options"
|
||||
innerRef={null}
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification start"
|
||||
id="notification-9000-started-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Start"
|
||||
labelOff="Start"
|
||||
onChange={[Function]}
|
||||
<td
|
||||
_css={160}
|
||||
className="ActionsTd___StyledTd-sc-1ys3lw-1 dIDjZI"
|
||||
data-label="Options"
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-1"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe={true}
|
||||
htmlFor="notification-9000-started-toggle"
|
||||
<ActionsGrid
|
||||
gridColumns="120px 120px 120px 120px"
|
||||
numActions={4}
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification start"
|
||||
aria-labelledby={null}
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-started-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
id={null}
|
||||
<StyledComponent
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "ActionsTd__ActionsGrid-sc-1ys3lw-0",
|
||||
"isStatic": false,
|
||||
"lastClassName": "dkSSIN",
|
||||
"rules": Array [
|
||||
"display:grid;grid-gap:16px;align-items:center;",
|
||||
[Function],
|
||||
],
|
||||
},
|
||||
"displayName": "ActionsGrid",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "ActionsTd__ActionsGrid-sc-1ys3lw-0",
|
||||
"target": "div",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
gridColumns="120px 120px 120px 120px"
|
||||
numActions={4}
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
id={null}
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
<Switch
|
||||
aria-label="Toggle notification success"
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Success"
|
||||
labelOff="Success"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-2"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe={true}
|
||||
htmlFor="notification-9000-success-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification success"
|
||||
aria-labelledby={null}
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-success-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
id={null}
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
id={null}
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
<Switch
|
||||
aria-label="Toggle notification failure"
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
labelOff="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-3"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe={true}
|
||||
htmlFor="notification-9000-error-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification failure"
|
||||
aria-labelledby={null}
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-error-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
id={null}
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
id={null}
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</DataListAction>
|
||||
<div
|
||||
className="ActionsTd__ActionsGrid-sc-1ys3lw-0 dkSSIN"
|
||||
>
|
||||
<ActionItem
|
||||
column={1}
|
||||
key=".0"
|
||||
visible={false}
|
||||
/>
|
||||
<ActionItem
|
||||
column={2}
|
||||
key=".1"
|
||||
visible={true}
|
||||
>
|
||||
<ActionItem___StyledDiv
|
||||
_css={2}
|
||||
>
|
||||
<StyledComponent
|
||||
_css={2}
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
|
||||
"isStatic": false,
|
||||
"lastClassName": "gydHvj",
|
||||
"rules": Array [
|
||||
"grid-column:",
|
||||
[Function],
|
||||
";",
|
||||
],
|
||||
},
|
||||
"displayName": "ActionItem___StyledDiv",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
|
||||
"target": "div",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<div
|
||||
className="ActionItem___StyledDiv-sc-1x1z9nz-0 cSmxUZ"
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification start"
|
||||
id="notification-9000-started-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Start"
|
||||
labelOff="Start"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-1"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe={true}
|
||||
htmlFor="notification-9000-started-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification start"
|
||||
aria-labelledby={null}
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-started-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
id={null}
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
id={null}
|
||||
>
|
||||
Start
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</StyledComponent>
|
||||
</ActionItem___StyledDiv>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
column={3}
|
||||
key=".2"
|
||||
visible={true}
|
||||
>
|
||||
<ActionItem___StyledDiv
|
||||
_css={3}
|
||||
>
|
||||
<StyledComponent
|
||||
_css={3}
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
|
||||
"isStatic": false,
|
||||
"lastClassName": "gydHvj",
|
||||
"rules": Array [
|
||||
"grid-column:",
|
||||
[Function],
|
||||
";",
|
||||
],
|
||||
},
|
||||
"displayName": "ActionItem___StyledDiv",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
|
||||
"target": "div",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<div
|
||||
className="ActionItem___StyledDiv-sc-1x1z9nz-0 fZyHIW"
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification success"
|
||||
id="notification-9000-success-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Success"
|
||||
labelOff="Success"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-2"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe={true}
|
||||
htmlFor="notification-9000-success-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification success"
|
||||
aria-labelledby={null}
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-success-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
id={null}
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
id={null}
|
||||
>
|
||||
Success
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</StyledComponent>
|
||||
</ActionItem___StyledDiv>
|
||||
</ActionItem>
|
||||
<ActionItem
|
||||
column={4}
|
||||
key=".3"
|
||||
visible={true}
|
||||
>
|
||||
<ActionItem___StyledDiv
|
||||
_css={4}
|
||||
>
|
||||
<StyledComponent
|
||||
_css={4}
|
||||
forwardedComponent={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"componentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
|
||||
"isStatic": false,
|
||||
"lastClassName": "gydHvj",
|
||||
"rules": Array [
|
||||
"grid-column:",
|
||||
[Function],
|
||||
";",
|
||||
],
|
||||
},
|
||||
"displayName": "ActionItem___StyledDiv",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "ActionItem___StyledDiv-sc-1x1z9nz-0",
|
||||
"target": "div",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
forwardedRef={null}
|
||||
>
|
||||
<div
|
||||
className="ActionItem___StyledDiv-sc-1x1z9nz-0 gydHvj"
|
||||
>
|
||||
<Switch
|
||||
aria-label="Toggle notification failure"
|
||||
id="notification-9000-error-toggle"
|
||||
isChecked={false}
|
||||
isDisabled={false}
|
||||
label="Failure"
|
||||
labelOff="Failure"
|
||||
onChange={[Function]}
|
||||
>
|
||||
<label
|
||||
className="pf-c-switch"
|
||||
data-ouia-component-id="OUIA-Generated-Switch-3"
|
||||
data-ouia-component-type="PF4/Switch"
|
||||
data-ouia-safe={true}
|
||||
htmlFor="notification-9000-error-toggle"
|
||||
>
|
||||
<input
|
||||
aria-label="Toggle notification failure"
|
||||
aria-labelledby={null}
|
||||
checked={false}
|
||||
className="pf-c-switch__input"
|
||||
disabled={false}
|
||||
id="notification-9000-error-toggle"
|
||||
onChange={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span
|
||||
className="pf-c-switch__toggle"
|
||||
/>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-on"
|
||||
id={null}
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pf-c-switch__label pf-m-off"
|
||||
id={null}
|
||||
>
|
||||
Failure
|
||||
</span>
|
||||
</label>
|
||||
</Switch>
|
||||
</div>
|
||||
</StyledComponent>
|
||||
</ActionItem___StyledDiv>
|
||||
</ActionItem>
|
||||
</div>
|
||||
</StyledComponent>
|
||||
</ActionsGrid>
|
||||
</td>
|
||||
</TdBase>
|
||||
</Td>
|
||||
</StyledComponent>
|
||||
</Styled(DataListAction)>
|
||||
</div>
|
||||
</DataListItemRow>
|
||||
</li>
|
||||
</DataListItem>
|
||||
</ActionsTd___StyledTd>
|
||||
</ActionsTd>
|
||||
</tr>
|
||||
</TrBase>
|
||||
</Tr>
|
||||
</NotificationListItem>
|
||||
`;
|
||||
|
||||
@ -13,9 +13,13 @@ export default function ActionItem({ column, tooltip, visible, children }) {
|
||||
grid-column: ${column};
|
||||
`}
|
||||
>
|
||||
<Tooltip content={tooltip} position="top">
|
||||
<div>{children}</div>
|
||||
</Tooltip>
|
||||
{tooltip ? (
|
||||
<Tooltip content={tooltip} position="top">
|
||||
<div>{children}</div>
|
||||
</Tooltip>
|
||||
) : (
|
||||
children
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -13,7 +13,12 @@ const Th = styled(PFTh)`
|
||||
--pf-c-table--cell--Overflow: initial;
|
||||
`;
|
||||
|
||||
export default function HeaderRow({ qsConfig, isExpandable, children }) {
|
||||
export default function HeaderRow({
|
||||
qsConfig,
|
||||
isExpandable,
|
||||
isSelectable,
|
||||
children,
|
||||
}) {
|
||||
const location = useLocation();
|
||||
const history = useHistory();
|
||||
|
||||
@ -49,7 +54,7 @@ export default function HeaderRow({ qsConfig, isExpandable, children }) {
|
||||
<Thead>
|
||||
<Tr>
|
||||
{isExpandable && <Th />}
|
||||
<Th />
|
||||
{isSelectable && <Th />}
|
||||
{React.Children.map(
|
||||
children,
|
||||
child =>
|
||||
@ -66,6 +71,10 @@ export default function HeaderRow({ qsConfig, isExpandable, children }) {
|
||||
);
|
||||
}
|
||||
|
||||
HeaderRow.defaultProps = {
|
||||
isSelectable: true,
|
||||
};
|
||||
|
||||
export function HeaderCell({
|
||||
sortKey,
|
||||
onSort,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user