mirror of
https://github.com/ansible/awx.git
synced 2026-05-08 09:57:35 -02:30
Remove vertical separator
This commit is contained in:
@@ -34,13 +34,6 @@ const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
|
|||||||
margin-right: 0 !important;
|
margin-right: 0 !important;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const DataToolbarSeparator = styled(DataToolbarItem)`
|
|
||||||
width: 1px !important;
|
|
||||||
height: 30px !important;
|
|
||||||
margin-left: 3px !important;
|
|
||||||
margin-right: 10px !important;
|
|
||||||
`;
|
|
||||||
|
|
||||||
class DataListToolbar extends React.Component {
|
class DataListToolbar extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
@@ -80,7 +73,6 @@ class DataListToolbar extends React.Component {
|
|||||||
id="select-all"
|
id="select-all"
|
||||||
/>
|
/>
|
||||||
</DataToolbarItem>
|
</DataToolbarItem>
|
||||||
<DataToolbarSeparator variant="separator" />
|
|
||||||
</DataToolbarGroup>
|
</DataToolbarGroup>
|
||||||
)}
|
)}
|
||||||
<DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
|
<DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
|
||||||
|
|||||||
@@ -8,7 +8,6 @@ import { CredentialsAPI, CredentialTypesAPI } from '@api';
|
|||||||
import AnsibleSelect from '@components/AnsibleSelect';
|
import AnsibleSelect from '@components/AnsibleSelect';
|
||||||
import { FieldTooltip } from '@components/FormField';
|
import { FieldTooltip } from '@components/FormField';
|
||||||
import CredentialChip from '@components/CredentialChip';
|
import CredentialChip from '@components/CredentialChip';
|
||||||
import VerticalSeperator from '@components/VerticalSeparator';
|
|
||||||
import { getQSConfig, parseQueryString } from '@util/qs';
|
import { getQSConfig, parseQueryString } from '@util/qs';
|
||||||
import Lookup from './Lookup';
|
import Lookup from './Lookup';
|
||||||
import OptionsList from './shared/OptionsList';
|
import OptionsList from './shared/OptionsList';
|
||||||
@@ -97,8 +96,9 @@ function MultiCredentialsLookup(props) {
|
|||||||
<Fragment>
|
<Fragment>
|
||||||
{credentialTypes && credentialTypes.length > 0 && (
|
{credentialTypes && credentialTypes.length > 0 && (
|
||||||
<ToolbarItem css=" display: flex; align-items: center;">
|
<ToolbarItem css=" display: flex; align-items: center;">
|
||||||
<div css="flex: 0 0 25%;">{i18n._(t`Selected Category`)}</div>
|
<div css="flex: 0 0 25%; margin-right: 32px">
|
||||||
<VerticalSeperator />
|
{i18n._(t`Selected Category`)}
|
||||||
|
</div>
|
||||||
<AnsibleSelect
|
<AnsibleSelect
|
||||||
css="flex: 1 1 75%;"
|
css="flex: 1 1 75%;"
|
||||||
id="multiCredentialsLookUp-select"
|
id="multiCredentialsLookUp-select"
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import {
|
|||||||
SplitItem,
|
SplitItem,
|
||||||
} from '@patternfly/react-core';
|
} from '@patternfly/react-core';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import VerticalSeparator from '../VerticalSeparator';
|
|
||||||
|
|
||||||
const Split = styled(PFSplit)`
|
const Split = styled(PFSplit)`
|
||||||
margin: 20px 0px;
|
margin: 20px 0px;
|
||||||
@@ -40,8 +39,7 @@ class SelectedList extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Split>
|
<Split>
|
||||||
<SplitLabelItem>{label}</SplitLabelItem>
|
<SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
|
||||||
<VerticalSeparator />
|
|
||||||
<SplitItem>
|
<SplitItem>
|
||||||
<ChipGroup numChips={5}>
|
<ChipGroup numChips={5}>
|
||||||
{selected.map(item =>
|
{selected.map(item =>
|
||||||
|
|||||||
@@ -1,20 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
const Separator = styled.span`
|
|
||||||
display: inline-block;
|
|
||||||
width: 1px;
|
|
||||||
height: 30px;
|
|
||||||
margin-right: 20px;
|
|
||||||
margin-left: 20px;
|
|
||||||
background-color: #d7d7d7;
|
|
||||||
vertical-align: middle;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const VerticalSeparator = () => (
|
|
||||||
<div>
|
|
||||||
<Separator />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default VerticalSeparator;
|
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { mount } from 'enzyme';
|
|
||||||
|
|
||||||
import VerticalSeparator from './VerticalSeparator';
|
|
||||||
|
|
||||||
describe('VerticalSeparator', () => {
|
|
||||||
test('renders the expected content', () => {
|
|
||||||
const wrapper = mount(<VerticalSeparator />);
|
|
||||||
expect(wrapper).toHaveLength(1);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
export { default } from './VerticalSeparator';
|
|
||||||
@@ -54,44 +54,44 @@ describe('<CredentialList />', () => {
|
|||||||
|
|
||||||
test('should check and uncheck the row item', async () => {
|
test('should check and uncheck the row item', async () => {
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
|
||||||
).toBe(false);
|
).toBe(false);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper
|
wrapper
|
||||||
.find('PFDataListCheck[id="select-credential-1"]')
|
.find('DataListCheck[id="select-credential-1"]')
|
||||||
.invoke('onChange')(true);
|
.invoke('onChange')(true);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
|
||||||
).toBe(true);
|
).toBe(true);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper
|
wrapper
|
||||||
.find('PFDataListCheck[id="select-credential-1"]')
|
.find('DataListCheck[id="select-credential-1"]')
|
||||||
.invoke('onChange')(false);
|
.invoke('onChange')(false);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
|
||||||
).toBe(false);
|
).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should check all row items when select all is checked', async () => {
|
test('should check all row items when select all is checked', async () => {
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(false);
|
expect(el.props().checked).toBe(false);
|
||||||
});
|
});
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(true);
|
expect(el.props().checked).toBe(true);
|
||||||
});
|
});
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(false);
|
expect(el.props().checked).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -102,7 +102,7 @@ describe('<CredentialList />', () => {
|
|||||||
|
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper
|
wrapper
|
||||||
.find('PFDataListCheck[id="select-credential-3"]')
|
.find('DataListCheck[id="select-credential-3"]')
|
||||||
.invoke('onChange')();
|
.invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
@@ -119,7 +119,7 @@ describe('<CredentialList />', () => {
|
|||||||
);
|
);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper
|
wrapper
|
||||||
.find('PFDataListCheck[id="select-credential-2"]')
|
.find('DataListCheck[id="select-credential-2"]')
|
||||||
.invoke('onChange')();
|
.invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells as _DataListItemCells,
|
DataListItemCells as _DataListItemCells,
|
||||||
@@ -13,8 +14,6 @@ import {
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Credential } from '@types';
|
import { Credential } from '@types';
|
||||||
|
|
||||||
@@ -50,7 +49,6 @@ function CredentialListItem({
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="name">
|
<DataListCell key="name">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link to={`${detailUrl}`}>
|
<Link to={`${detailUrl}`}>
|
||||||
<b>{credential.name}</b>
|
<b>{credential.name}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
|
|||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import { Sparkline } from '@components/Sparkline';
|
import { Sparkline } from '@components/Sparkline';
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { Host } from '@types';
|
import { Host } from '@types';
|
||||||
|
|
||||||
class HostListItem extends React.Component {
|
class HostListItem extends React.Component {
|
||||||
@@ -56,7 +55,6 @@ class HostListItem extends React.Component {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="name">
|
<DataListCell key="name">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link to={`${detailUrl}`}>
|
<Link to={`${detailUrl}`}>
|
||||||
<b>{host.name}</b>
|
<b>{host.name}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -6,6 +6,7 @@ import { Group } from '@types';
|
|||||||
|
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -15,8 +16,6 @@ import { Link } from 'react-router-dom';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
|
|
||||||
function InventoryGroupItem({
|
function InventoryGroupItem({
|
||||||
i18n,
|
i18n,
|
||||||
@@ -41,7 +40,6 @@ function InventoryGroupItem({
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link to={`${detailUrl}`} id={labelId}>
|
<Link to={`${detailUrl}`} id={labelId}>
|
||||||
<b>{group.name}</b>
|
<b>{group.name}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -98,46 +98,46 @@ describe('<InventoryGroupsList />', () => {
|
|||||||
|
|
||||||
test('should check and uncheck the row item', async () => {
|
test('should check and uncheck the row item', async () => {
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||||
).toBe(false);
|
).toBe(false);
|
||||||
|
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
|
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||||
).toBe(true);
|
).toBe(true);
|
||||||
|
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
|
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
|
||||||
).toBe(false);
|
).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should check all row items when select all is checked', async () => {
|
test('should check all row items when select all is checked', async () => {
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(false);
|
expect(el.props().checked).toBe(false);
|
||||||
});
|
});
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(true);
|
expect(el.props().checked).toBe(true);
|
||||||
});
|
});
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(false);
|
expect(el.props().checked).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -157,7 +157,7 @@ describe('<InventoryGroupsList />', () => {
|
|||||||
Promise.reject(new Error())
|
Promise.reject(new Error())
|
||||||
);
|
);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
|
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
@@ -191,7 +191,7 @@ describe('<InventoryGroupsList />', () => {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
|
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
|
|||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import { Sparkline } from '@components/Sparkline';
|
import { Sparkline } from '@components/Sparkline';
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { Host } from '@types';
|
import { Host } from '@types';
|
||||||
|
|
||||||
function InventoryHostItem(props) {
|
function InventoryHostItem(props) {
|
||||||
@@ -50,7 +49,6 @@ function InventoryHostItem(props) {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link to={`${detailUrl}`}>
|
<Link to={`${detailUrl}`}>
|
||||||
<b>{host.name}</b>
|
<b>{host.name}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -104,48 +104,48 @@ describe('<InventoryHostList />', () => {
|
|||||||
|
|
||||||
test('should check and uncheck the row item', async () => {
|
test('should check and uncheck the row item', async () => {
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
|
||||||
).toBe(false);
|
).toBe(false);
|
||||||
|
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
|
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
|
||||||
true
|
true
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
|
||||||
).toBe(true);
|
).toBe(true);
|
||||||
|
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
|
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
|
||||||
false
|
false
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(
|
expect(
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
|
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
|
||||||
).toBe(false);
|
).toBe(false);
|
||||||
});
|
});
|
||||||
|
|
||||||
test('should check all row items when select all is checked', async () => {
|
test('should check all row items when select all is checked', async () => {
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(false);
|
expect(el.props().checked).toBe(false);
|
||||||
});
|
});
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(true);
|
expect(el.props().checked).toBe(true);
|
||||||
});
|
});
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
wrapper.find('PFDataListCheck').forEach(el => {
|
wrapper.find('DataListCheck').forEach(el => {
|
||||||
expect(el.props().checked).toBe(false);
|
expect(el.props().checked).toBe(false);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
@@ -186,7 +186,7 @@ describe('<InventoryHostList />', () => {
|
|||||||
|
|
||||||
test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
|
test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-host-3"]').invoke('onChange')();
|
wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
|
expect(wrapper.find('ToolbarDeleteButton button').props().disabled).toBe(
|
||||||
@@ -197,7 +197,7 @@ describe('<InventoryHostList />', () => {
|
|||||||
test('should call api delete hosts for each selected host', async () => {
|
test('should call api delete hosts for each selected host', async () => {
|
||||||
HostsAPI.destroy = jest.fn();
|
HostsAPI.destroy = jest.fn();
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
|
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
@@ -220,7 +220,7 @@ describe('<InventoryHostList />', () => {
|
|||||||
})
|
})
|
||||||
);
|
);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
|
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
@@ -242,7 +242,7 @@ describe('<InventoryHostList />', () => {
|
|||||||
Promise.reject(new Error())
|
Promise.reject(new Error())
|
||||||
);
|
);
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
|
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
|
||||||
});
|
});
|
||||||
wrapper.update();
|
wrapper.update();
|
||||||
await act(async () => {
|
await act(async () => {
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
|
|||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { Inventory } from '@types';
|
import { Inventory } from '@types';
|
||||||
|
|
||||||
class InventoryListItem extends React.Component {
|
class InventoryListItem extends React.Component {
|
||||||
@@ -44,7 +43,6 @@ class InventoryListItem extends React.Component {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link to={`${detailUrl}`}>
|
<Link to={`${detailUrl}`}>
|
||||||
<b>{inventory.name}</b>
|
<b>{inventory.name}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -38,7 +38,10 @@ class JobListItem extends Component {
|
|||||||
/>
|
/>
|
||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell
|
||||||
|
key="name"
|
||||||
|
css="display: inline-flex; align-items: center;"
|
||||||
|
>
|
||||||
{job.status && <PaddedIcon status={job.status} />}
|
{job.status && <PaddedIcon status={job.status} />}
|
||||||
<span>
|
<span>
|
||||||
<Link
|
<Link
|
||||||
|
|||||||
@@ -9,11 +9,10 @@ import { shape } from 'prop-types';
|
|||||||
import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
|
import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
|
||||||
import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
|
import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
|
||||||
import { StatusIcon } from '@components/Sparkline';
|
import { StatusIcon } from '@components/Sparkline';
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Toolbar = styled.div`
|
const Toolbar = styled.div`
|
||||||
align-items: center
|
align-items: center;
|
||||||
border-bottom: 1px solid grey;
|
border-bottom: 1px solid grey;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
@@ -73,7 +72,6 @@ function WorkflowOutputToolbar({ i18n, job }) {
|
|||||||
<ToolbarActions>
|
<ToolbarActions>
|
||||||
<div>{i18n._(t`Total Nodes`)}</div>
|
<div>{i18n._(t`Total Nodes`)}</div>
|
||||||
<Badge isRead>{totalNodes}</Badge>
|
<Badge isRead>{totalNodes}</Badge>
|
||||||
<VerticalSeparator />
|
|
||||||
<Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
|
<Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
|
||||||
<ActionButton
|
<ActionButton
|
||||||
id="workflow-output-toggle-legend"
|
id="workflow-output-toggle-legend"
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
|
|||||||
import {
|
import {
|
||||||
Badge as PFBadge,
|
Badge as PFBadge,
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -15,8 +16,6 @@ import styled from 'styled-components';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { Organization } from '@types';
|
import { Organization } from '@types';
|
||||||
|
|
||||||
const Badge = styled(PFBadge)`
|
const Badge = styled(PFBadge)`
|
||||||
@@ -63,7 +62,6 @@ function OrganizationListItem({
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<span id={labelId}>
|
<span id={labelId}>
|
||||||
<Link to={`${detailUrl}`}>
|
<Link to={`${detailUrl}`}>
|
||||||
<b>{organization.name}</b>
|
<b>{organization.name}</b>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
|
|||||||
import { withI18n } from '@lingui/react';
|
import { withI18n } from '@lingui/react';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -14,10 +15,8 @@ import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
|
|||||||
|
|
||||||
import ClipboardCopyButton from '@components/ClipboardCopyButton';
|
import ClipboardCopyButton from '@components/ClipboardCopyButton';
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import ProjectSyncButton from '../shared/ProjectSyncButton';
|
import ProjectSyncButton from '../shared/ProjectSyncButton';
|
||||||
import { StatusIcon } from '@components/Sparkline';
|
import { StatusIcon } from '@components/Sparkline';
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { toTitleCase } from '@util/strings';
|
import { toTitleCase } from '@util/strings';
|
||||||
import { Project } from '@types';
|
import { Project } from '@types';
|
||||||
|
|
||||||
@@ -74,7 +73,6 @@ class ProjectListItem extends React.Component {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
{project.summary_fields.last_job && (
|
{project.summary_fields.last_job && (
|
||||||
<Tooltip
|
<Tooltip
|
||||||
position="top"
|
position="top"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
|
|||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { Team } from '@types';
|
import { Team } from '@types';
|
||||||
|
|
||||||
class TeamListItem extends React.Component {
|
class TeamListItem extends React.Component {
|
||||||
@@ -40,7 +39,6 @@ class TeamListItem extends React.Component {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link id={labelId} to={`${detailUrl}`}>
|
<Link id={labelId} to={`${detailUrl}`}>
|
||||||
<b>{team.name}</b>
|
<b>{team.name}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -16,9 +17,7 @@ import {
|
|||||||
} from '@patternfly/react-icons';
|
} from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import LaunchButton from '@components/LaunchButton';
|
import LaunchButton from '@components/LaunchButton';
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { Sparkline } from '@components/Sparkline';
|
import { Sparkline } from '@components/Sparkline';
|
||||||
import { toTitleCase } from '@util/strings';
|
import { toTitleCase } from '@util/strings';
|
||||||
|
|
||||||
@@ -46,7 +45,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<span>
|
<span>
|
||||||
<Link to={`${detailUrl}`}>
|
<Link to={`${detailUrl}`}>
|
||||||
<b>{template.name}</b>
|
<b>{template.name}</b>
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
|
|||||||
import { t } from '@lingui/macro';
|
import { t } from '@lingui/macro';
|
||||||
import {
|
import {
|
||||||
Button,
|
Button,
|
||||||
|
DataListCheck,
|
||||||
DataListItem,
|
DataListItem,
|
||||||
DataListItemRow,
|
DataListItemRow,
|
||||||
DataListItemCells,
|
DataListItemCells,
|
||||||
@@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
|
|||||||
import { PencilAltIcon } from '@patternfly/react-icons';
|
import { PencilAltIcon } from '@patternfly/react-icons';
|
||||||
|
|
||||||
import DataListCell from '@components/DataListCell';
|
import DataListCell from '@components/DataListCell';
|
||||||
import DataListCheck from '@components/DataListCheck';
|
|
||||||
import VerticalSeparator from '@components/VerticalSeparator';
|
|
||||||
import { User } from '@types';
|
import { User } from '@types';
|
||||||
|
|
||||||
class UserListItem extends React.Component {
|
class UserListItem extends React.Component {
|
||||||
@@ -40,7 +39,6 @@ class UserListItem extends React.Component {
|
|||||||
<DataListItemCells
|
<DataListItemCells
|
||||||
dataListCells={[
|
dataListCells={[
|
||||||
<DataListCell key="divider">
|
<DataListCell key="divider">
|
||||||
<VerticalSeparator />
|
|
||||||
<Link to={`${detailUrl}`} id={labelId}>
|
<Link to={`${detailUrl}`} id={labelId}>
|
||||||
<b>{user.username}</b>
|
<b>{user.username}</b>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
Reference in New Issue
Block a user