External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-16 04:10:44 -03:30
Code Issues Packages Projects Releases Wiki Activity

Remove vertical separator

Browse Source
This commit is contained in:
Marliana Lara 2020-02-12 14:41:14 -05:00
parent 0d31b05f98
commit 34b717d00c
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
21 changed files with 51 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -34,13 +34,6 @@ const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
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 {
render() {
const {
@ -80,7 +73,6 @@ class DataListToolbar extends React.Component {
id="select-all"
/>
</DataToolbarItem>
<DataToolbarSeparator variant="separator" />
</DataToolbarGroup>
)}
<DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">

6
awx/ui_next/src/components/Lookup/MultiCredentialsLookup.jsx
View File

@ -8,7 +8,6 @@ import { CredentialsAPI, CredentialTypesAPI } from '@api';
import AnsibleSelect from '@components/AnsibleSelect';
import { FieldTooltip } from '@components/FormField';
import CredentialChip from '@components/CredentialChip';
import VerticalSeperator from '@components/VerticalSeparator';
import { getQSConfig, parseQueryString } from '@util/qs';
import Lookup from './Lookup';
import OptionsList from './shared/OptionsList';
@ -97,8 +96,9 @@ function MultiCredentialsLookup(props) {
<Fragment>
{credentialTypes && credentialTypes.length > 0 && (
<ToolbarItem css=" display: flex; align-items: center;">
<div css="flex: 0 0 25%;">{i18n._(t`Selected Category`)}</div>
<VerticalSeperator />
<div css="flex: 0 0 25%; margin-right: 32px">
{i18n._(t`Selected Category`)}
</div>
<AnsibleSelect
css="flex: 1 1 75%;"
id="multiCredentialsLookUp-select"

4
awx/ui_next/src/components/SelectedList/SelectedList.jsx
View File

@ -7,7 +7,6 @@ import {
SplitItem,
} from '@patternfly/react-core';
import styled from 'styled-components';
import VerticalSeparator from '../VerticalSeparator';
const Split = styled(PFSplit)`
margin: 20px 0px;
@ -40,8 +39,7 @@ class SelectedList extends Component {
return (
<Split>
<SplitLabelItem>{label}</SplitLabelItem>
<VerticalSeparator />
<SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
<SplitItem>
<ChipGroup numChips={5}>
{selected.map(item =>

20
awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.jsx
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;

11
awx/ui_next/src/components/VerticalSeparator/VerticalSeparator.test.jsx
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);
});
});

1
awx/ui_next/src/components/VerticalSeparator/index.js
View File

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

20
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.test.jsx
View File

@ -54,44 +54,44 @@ describe('<CredentialList />', () => {
test('should check and uncheck the row item', async () => {
expect(
wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
).toBe(false);
await act(async () => {
wrapper
.find('PFDataListCheck[id="select-credential-1"]')
.find('DataListCheck[id="select-credential-1"]')
.invoke('onChange')(true);
});
wrapper.update();
expect(
wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
).toBe(true);
await act(async () => {
wrapper
.find('PFDataListCheck[id="select-credential-1"]')
.find('DataListCheck[id="select-credential-1"]')
.invoke('onChange')(false);
});
wrapper.update();
expect(
wrapper.find('PFDataListCheck[id="select-credential-1"]').props().checked
wrapper.find('DataListCheck[id="select-credential-1"]').props().checked
).toBe(false);
});
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);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
});
wrapper.update();
wrapper.find('PFDataListCheck').forEach(el => {
wrapper.find('DataListCheck').forEach(el => {
expect(el.props().checked).toBe(true);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
});
wrapper.update();
wrapper.find('PFDataListCheck').forEach(el => {
wrapper.find('DataListCheck').forEach(el => {
expect(el.props().checked).toBe(false);
});
});
@ -102,7 +102,7 @@ describe('<CredentialList />', () => {
await act(async () => {
wrapper
.find('PFDataListCheck[id="select-credential-3"]')
.find('DataListCheck[id="select-credential-3"]')
.invoke('onChange')();
});
wrapper.update();
@ -119,7 +119,7 @@ describe('<CredentialList />', () => {
);
await act(async () => {
wrapper
.find('PFDataListCheck[id="select-credential-2"]')
.find('DataListCheck[id="select-credential-2"]')
.invoke('onChange')();
});
wrapper.update();

4
awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
View File

@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells as _DataListItemCells,
@ -13,8 +14,6 @@ import {
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import VerticalSeparator from '@components/VerticalSeparator';
import styled from 'styled-components';
import { Credential } from '@types';
@ -50,7 +49,6 @@ function CredentialListItem({
<DataListItemCells
dataListCells={[
<DataListCell key="name">
<VerticalSeparator />
<Link to={`${detailUrl}`}>
<b>{credential.name}</b>
</Link>

4
awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
View File

@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import { Sparkline } from '@components/Sparkline';
import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types';
class HostListItem extends React.Component {
@ -56,7 +55,6 @@ class HostListItem extends React.Component {
<DataListItemCells
dataListCells={[
<DataListCell key="name">
<VerticalSeparator />
<Link to={`${detailUrl}`}>
<b>{host.name}</b>
</Link>

4
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
View File

@ -6,6 +6,7 @@ import { Group } from '@types';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -15,8 +16,6 @@ import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import VerticalSeparator from '@components/VerticalSeparator';
function InventoryGroupItem({
i18n,
@ -41,7 +40,6 @@ function InventoryGroupItem({
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<Link to={`${detailUrl}`} id={labelId}>
<b>{group.name}</b>
</Link>

20
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
View File

@ -98,46 +98,46 @@ describe('<InventoryGroupsList />', () => {
test('should check and uncheck the row item', async () => {
expect(
wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
).toBe(false);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
true
);
});
wrapper.update();
expect(
wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
).toBe(true);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')(
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')(
false
);
});
wrapper.update();
expect(
wrapper.find('PFDataListCheck[id="select-group-1"]').props().checked
wrapper.find('DataListCheck[id="select-group-1"]').props().checked
).toBe(false);
});
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);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
});
wrapper.update();
wrapper.find('PFDataListCheck').forEach(el => {
wrapper.find('DataListCheck').forEach(el => {
expect(el.props().checked).toBe(true);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
});
wrapper.update();
wrapper.find('PFDataListCheck').forEach(el => {
wrapper.find('DataListCheck').forEach(el => {
expect(el.props().checked).toBe(false);
});
});
@ -157,7 +157,7 @@ describe('<InventoryGroupsList />', () => {
Promise.reject(new Error())
);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
});
wrapper.update();
await act(async () => {
@ -191,7 +191,7 @@ describe('<InventoryGroupsList />', () => {
})
);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-group-1"]').invoke('onChange')();
wrapper.find('DataListCheck[id="select-group-1"]').invoke('onChange')();
});
wrapper.update();
await act(async () => {

4
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
View File

@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -14,9 +15,7 @@ import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import { Sparkline } from '@components/Sparkline';
import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types';
function InventoryHostItem(props) {
@ -50,7 +49,6 @@ function InventoryHostItem(props) {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<Link to={`${detailUrl}`}>
<b>{host.name}</b>
</Link>

24
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx
View File

@ -104,48 +104,48 @@ describe('<InventoryHostList />', () => {
test('should check and uncheck the row item', async () => {
expect(
wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
).toBe(false);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
true
);
});
wrapper.update();
expect(
wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
).toBe(true);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')(
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')(
false
);
});
wrapper.update();
expect(
wrapper.find('PFDataListCheck[id="select-host-1"]').props().checked
wrapper.find('DataListCheck[id="select-host-1"]').props().checked
).toBe(false);
});
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);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(true);
});
wrapper.update();
wrapper.find('PFDataListCheck').forEach(el => {
wrapper.find('DataListCheck').forEach(el => {
expect(el.props().checked).toBe(true);
});
await act(async () => {
wrapper.find('Checkbox#select-all').invoke('onChange')(false);
});
wrapper.update();
wrapper.find('PFDataListCheck').forEach(el => {
wrapper.find('DataListCheck').forEach(el => {
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 () => {
await act(async () => {
wrapper.find('PFDataListCheck[id="select-host-3"]').invoke('onChange')();
wrapper.find('DataListCheck[id="select-host-3"]').invoke('onChange')();
});
wrapper.update();
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 () => {
HostsAPI.destroy = jest.fn();
await act(async () => {
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
});
wrapper.update();
await act(async () => {
@ -220,7 +220,7 @@ describe('<InventoryHostList />', () => {
})
);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
});
wrapper.update();
await act(async () => {
@ -242,7 +242,7 @@ describe('<InventoryHostList />', () => {
Promise.reject(new Error())
);
await act(async () => {
wrapper.find('PFDataListCheck[id="select-host-1"]').invoke('onChange')();
wrapper.find('DataListCheck[id="select-host-1"]').invoke('onChange')();
});
wrapper.update();
await act(async () => {

4
awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
View File

@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import VerticalSeparator from '@components/VerticalSeparator';
import { Inventory } from '@types';
class InventoryListItem extends React.Component {
@ -44,7 +43,6 @@ class InventoryListItem extends React.Component {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<Link to={`${detailUrl}`}>
<b>{inventory.name}</b>
</Link>

5
awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
View File

@ -38,7 +38,10 @@ class JobListItem extends Component {
/>
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<DataListCell
key="name"
css="display: inline-flex; align-items: center;"
>
{job.status && <PaddedIcon status={job.status} />}
<span>
<Link

4
awx/ui_next/src/screens/Job/WorkflowOutput/WorkflowOutputToolbar.jsx
View File

@ -9,11 +9,10 @@ import { shape } from 'prop-types';
import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
import { CompassIcon, WrenchIcon } from '@patternfly/react-icons';
import { StatusIcon } from '@components/Sparkline';
import VerticalSeparator from '@components/VerticalSeparator';
import styled from 'styled-components';
const Toolbar = styled.div`
align-items: center
align-items: center;
border-bottom: 1px solid grey;
display: flex;
height: 56px;
@ -73,7 +72,6 @@ function WorkflowOutputToolbar({ i18n, job }) {
<ToolbarActions>
<div>{i18n._(t`Total Nodes`)}</div>
<Badge isRead>{totalNodes}</Badge>
<VerticalSeparator />
<Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
<ActionButton
id="workflow-output-toggle-legend"

4
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
View File

@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
import {
Badge as PFBadge,
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -15,8 +16,6 @@ import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import VerticalSeparator from '@components/VerticalSeparator';
import { Organization } from '@types';
const Badge = styled(PFBadge)`
@ -63,7 +62,6 @@ function OrganizationListItem({
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<span id={labelId}>
<Link to={`${detailUrl}`}>
<b>{organization.name}</b>

4
awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
View File

@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -14,10 +15,8 @@ import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
import ClipboardCopyButton from '@components/ClipboardCopyButton';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ProjectSyncButton from '../shared/ProjectSyncButton';
import { StatusIcon } from '@components/Sparkline';
import VerticalSeparator from '@components/VerticalSeparator';
import { toTitleCase } from '@util/strings';
import { Project } from '@types';
@ -74,7 +73,6 @@ class ProjectListItem extends React.Component {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
{project.summary_fields.last_job && (
<Tooltip
position="top"

4
awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
View File

@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import VerticalSeparator from '@components/VerticalSeparator';
import { Team } from '@types';
class TeamListItem extends React.Component {
@ -40,7 +39,6 @@ class TeamListItem extends React.Component {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<Link id={labelId} to={`${detailUrl}`}>
<b>{team.name}</b>
</Link>

4
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@ -2,6 +2,7 @@ import React from 'react';
import { Link } from 'react-router-dom';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -16,9 +17,7 @@ import {
} from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { Sparkline } from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
@ -46,7 +45,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<span>
<Link to={`${detailUrl}`}>
<b>{template.name}</b>

4
awx/ui_next/src/screens/User/UserList/UserListItem.jsx
View File

@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -13,8 +14,6 @@ import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import VerticalSeparator from '@components/VerticalSeparator';
import { User } from '@types';
class UserListItem extends React.Component {
@ -40,7 +39,6 @@ class UserListItem extends React.Component {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
<Link to={`${detailUrl}`} id={labelId}>
<b>{user.username}</b>
</Link>