Remove ActionButtonCell component

This commit is contained in:
Marliana Lara 2020-02-11 15:44:10 -05:00
parent 446021cf22
commit 3b9dd3ba8c
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
16 changed files with 52 additions and 132 deletions

View File

@ -1,10 +0,0 @@
import DataListCell from '@components/DataListCell';
import styled from 'styled-components';
const ActionButtonCell = styled(DataListCell)`
& > :not(:first-child) {
margin-left: 20px;
}
`;
ActionButtonCell.displayName = 'ActionButtonCell';
export default ActionButtonCell;

View File

@ -1,10 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import ActionButtonCell from './ActionButtonCell';
describe('ActionButtonCell', () => {
test('renders the expected content', () => {
const wrapper = mount(<ActionButtonCell />);
expect(wrapper).toHaveLength(1);
});
});

View File

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

View File

@ -5,10 +5,9 @@ import {
DataListItemRow,
DataListItemCells,
DataListCell,
DataListCheck,
} from '@patternfly/react-core';
import DataListCheck from '@components/DataListCheck';
import DataListRadio from '@components/DataListRadio';
import VerticalSeparator from '../VerticalSeparator';
const CheckboxListItem = ({
itemId,
@ -37,12 +36,6 @@ const CheckboxListItem = ({
/>
<DataListItemCells
dataListCells={[
<DataListCell
key="divider"
className="pf-c-data-list__cell--divider"
>
<VerticalSeparator />
</DataListCell>,
<DataListCell key="name">
<label
id={`check-action-item-${itemId}`}

View File

@ -11,7 +11,6 @@ import {
} from '@patternfly/react-core';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -59,7 +58,7 @@ function CredentialListItem({
<DataListCell key="type">
{credential.summary_fields.credential_type.name}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
{canEdit && (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<ListActionButton
@ -71,7 +70,7 @@ function CredentialListItem({
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -12,7 +12,6 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -83,7 +82,7 @@ class HostListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included in running jobs. For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
@ -91,6 +90,7 @@ class HostListItem extends React.Component {
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
@ -103,6 +103,8 @@ class HostListItem extends React.Component {
aria-label={i18n._(t`Toggle host`)}
/>
</Tooltip>
</DataListCell>,
<DataListCell alignRight isFilled={false}>
{host.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<ListActionButton
@ -114,7 +116,7 @@ class HostListItem extends React.Component {
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -13,7 +13,6 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -47,7 +46,7 @@ function InventoryGroupItem({
<b>{group.name}</b>
</Link>
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
{group.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Group`)} position="top">
<ListActionButton
@ -59,7 +58,7 @@ function InventoryGroupItem({
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -12,7 +12,6 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -59,7 +58,7 @@ function InventoryHostItem(props) {
<DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} />
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included
@ -69,6 +68,7 @@ function InventoryHostItem(props) {
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
@ -81,6 +81,8 @@ function InventoryHostItem(props) {
aria-label={i18n._(t`Toggle host`)}
/>
</Tooltip>
</DataListCell>,
<DataListCell alignRight isFilled={false}>
{host.summary_fields.user_capabilities?.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<ListActionButton
@ -92,7 +94,7 @@ function InventoryHostItem(props) {
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -11,7 +11,6 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -55,7 +54,7 @@ class InventoryListItem extends React.Component {
? i18n._(t`Smart Inventory`)
: i18n._(t`Inventory`)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
{inventory.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<ListActionButton
@ -71,7 +70,7 @@ class InventoryListItem extends React.Component {
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -4,17 +4,16 @@ import styled from 'styled-components';
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
Tooltip,
} from '@patternfly/react-core';
import { RocketIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { StatusIcon } from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
import { formatDateString } from '@util/dates';
@ -29,11 +28,7 @@ class JobListItem extends Component {
const { i18n, job, isSelected, onSelect } = this.props;
return (
<DataListItem
aria-labelledby={`check-action-${job.id}`}
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
id={`${job.id}`}
>
<DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
<DataListItemRow>
<DataListCheck
id={`select-job-${job.id}`}
@ -44,7 +39,6 @@ class JobListItem extends Component {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
{job.status && <PaddedIcon status={job.status} />}
<span>
<Link
@ -60,7 +54,7 @@ class JobListItem extends Component {
<DataListCell key="finished">
{formatDateString(job.finished)}
</DataListCell>,
<DataListCell lastcolumn="true" key="relaunch">
<DataListCell isFilled={false} alignRight key="relaunch">
{job.type !== 'system_job' &&
job.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Relaunch Job`)} position="top">

View File

@ -13,7 +13,6 @@ import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -85,7 +84,7 @@ function OrganizationListItem({
</Badge>
</ListGroup>
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
{organization.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Organization`)} position="top">
<ListActionButton
@ -97,7 +96,7 @@ function OrganizationListItem({
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -11,7 +11,6 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import ClipboardCopyButton from '@components/ClipboardCopyButton';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
@ -116,7 +115,7 @@ class ProjectListItem extends React.Component {
/>
) : null}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell lastcolumn="true" key="action">
{project.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Sync Project`)} position="top">
<ProjectSyncButton projectId={project.id}>
@ -128,6 +127,8 @@ class ProjectListItem extends React.Component {
</ProjectSyncButton>
</Tooltip>
)}
</DataListCell>,
<DataListCell alignRight isFilled={false}>
{project.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Project`)} position="top">
<ListActionButton
@ -139,7 +140,7 @@ class ProjectListItem extends React.Component {
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -37,22 +37,22 @@ const ManualSubForm = ({
return (
<>
{options.length === 1 && (
<Alert
title={i18n._(t`WARNING: `)}
css="grid-column: 1/-1"
variant="warning"
isInline
>
{i18n._(t`
{/* {options.length === 1 && ( */}
<Alert
title={i18n._(t`WARNING: `)}
css="grid-column: 1/-1"
variant="warning"
isInline
>
{i18n._(t`
There are no available playbook directories in ${project_base_dir}.
Either that directory is empty, or all of the contents are already
assigned to other projects. Create a new directory there and make
sure the playbook files can be read by the "awx" system user,
or have ${brandName} directly retrieve your playbooks from
source control using the SCM Type option above.`)}
</Alert>
)}
</Alert>
{/* )} */}
<FormField
id="project-base-dir"
label={i18n._(t`Project Base Path`)}

View File

@ -11,7 +11,6 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -60,7 +59,7 @@ class TeamListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
{team.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Team`)} position="top">
<ListActionButton
@ -72,7 +71,7 @@ class TeamListItem extends React.Component {
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
import {
DataListItem,
DataListItemRow,
DataListItemCells as PFDataListItemCells,
DataListItemCells,
Tooltip,
} from '@patternfly/react-core';
import { t } from '@lingui/macro';
@ -14,7 +14,6 @@ import {
RocketIcon,
} from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton';
@ -22,42 +21,6 @@ import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { Sparkline } from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
import styled from 'styled-components';
const rightStyle = `
@media screen and (max-width: 768px) {
&& {
padding-top: 0px;
flex: 0 0 33%;
padding-right: 20px;
}
}
`;
const DataListItemCells = styled(PFDataListItemCells)`
display: flex;
@media screen and (max-width: 768px) {
flex-wrap: wrap;
justify-content: space-between;
}
`;
const LeftDataListCell = styled(DataListCell)`
@media screen and (max-width: 768px) {
&& {
padding-bottom: 16px;
flex: 1 1 100%;
}
}
`;
const RightDataListCell = styled(DataListCell)`
${rightStyle}
`;
const RightActionButtonCell = styled(ActionButtonCell)`
${rightStyle}
`;
function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
const canLaunch = template.summary_fields.user_capabilities.start;
@ -71,7 +34,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
return (
<DataListItem
aria-labelledby={`check-action-${template.id}`}
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
id={`${template.id}`}
>
<DataListItemRow>
@ -83,7 +45,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
/>
<DataListItemCells
dataListCells={[
<LeftDataListCell key="divider">
<DataListCell key="divider">
<VerticalSeparator />
<span>
<Link to={`${detailUrl}`}>
@ -102,23 +64,14 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
</Tooltip>
</span>
)}
</LeftDataListCell>,
<RightDataListCell
css="padding-left: 40px;"
righthalf="true"
key="type"
>
</DataListCell>,
<DataListCell key="type">
{toTitleCase(template.type)}
</RightDataListCell>,
<RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
</DataListCell>,
<DataListCell key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} />
</RightDataListCell>,
<RightActionButtonCell
css="max-width: 80px;"
righthalf="true"
lastcolumn="true"
key="launch"
>
</DataListCell>,
<DataListCell alignRight isFilled={false} key="launch">
{canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch Template`)} position="top">
<LaunchButton resource={template}>
@ -130,6 +83,8 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
</LaunchButton>
</Tooltip>
)}
</DataListCell>,
<DataListCell alignRight isFilled={false}>
{template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<ListActionButton
@ -141,7 +96,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
</ListActionButton>
</Tooltip>
)}
</RightActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

View File

@ -11,7 +11,6 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
@ -62,7 +61,7 @@ class UserListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell alignRight isFilled={false}>
{user.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit User`)} position="top">
<ListActionButton
@ -74,7 +73,7 @@ class UserListItem extends React.Component {
</ListActionButton>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>