Remove vertical separator

This commit is contained in:
Marliana Lara
2020-02-12 14:41:14 -05:00
parent 0d31b05f98
commit 34b717d00c
21 changed files with 51 additions and 112 deletions

View File

@@ -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">

View File

@@ -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"

View File

@@ -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 =>

View File

@@ -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;

View File

@@ -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);
});
});

View File

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

View File

@@ -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();

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 () => {

View File

@@ -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>

View File

@@ -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 () => {

View File

@@ -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>

View File

@@ -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

View File

@@ -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"

View File

@@ -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>

View File

@@ -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"

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>