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

fix column widths when action buttons hidden due to permissions

Browse Source
This commit is contained in:
Keith Grant
2020-03-03 10:37:16 -08:00
parent c1bfcd73fb
commit f1120d39db
9 changed files with 92 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
awx/ui_next/src/components/JobList/JobListItem.jsx
View File

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button, Button,
DataListAction, DataListAction as _DataListAction,
DataListCell, DataListCell,
DataListCheck, DataListCheck,
DataListItem, DataListItem,
@@ -18,6 +18,14 @@ import StatusIcon from '@components/StatusIcon';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';
import { formatDateString } from '@util/dates'; import { formatDateString } from '@util/dates';
import { JOB_TYPE_URL_SEGMENTS } from '@constants'; import { JOB_TYPE_URL_SEGMENTS } from '@constants';
import styled from 'styled-components';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: 40px;
`;
function JobListItem({ function JobListItem({
i18n, i18n,
@@ -63,24 +71,26 @@ function JobListItem({
</DataListCell>, </DataListCell>,
]} ]}
/> />
{job.type !== 'system_job' && <DataListAction
job.summary_fields?.user_capabilities?.start && ( aria-label="actions"
<DataListAction aria-labelledby={labelId}
aria-label="actions" id={labelId}
aria-labelledby={labelId} >
id={labelId} {job.type !== 'system_job' &&
> job.summary_fields?.user_capabilities?.start ? (
<Tooltip content={i18n._(t`Relaunch Job`)} position="top"> <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}> <Button variant="plain" onClick={handleRelaunch}>
<RocketIcon /> <RocketIcon />
</Button> </Button>
)} )}
</LaunchButton> </LaunchButton>
</Tooltip> </Tooltip>
</DataListAction> ) : (
''
)} )}
</DataListAction>
</DataListItemRow> </DataListItemRow>
</DataListItem> </DataListItem>
); );

6
awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx
View File

@@ -24,7 +24,7 @@ const DataListAction = styled(_DataListAction)`
align-items: center; align-items: center;
display: grid; display: grid;
grid-gap: 16px; grid-gap: 16px;
grid-template-columns: auto 40px; grid-template-columns: 92px 40px;
`; `;
function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) { function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
@@ -104,7 +104,7 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
key="actions" key="actions"
> >
<ScheduleToggle schedule={schedule} /> <ScheduleToggle schedule={schedule} />
{schedule.summary_fields.user_capabilities.edit && ( {schedule.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Schedule`)} position="top"> <Tooltip content={i18n._(t`Edit Schedule`)} position="top">
<Button <Button
css="grid-column: 2" css="grid-column: 2"
@@ -115,6 +115,8 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction>, </DataListAction>,
]} ]}

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

@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
Button, Button,
DataListAction, DataListAction as _DataListAction,
DataListCell, DataListCell,
DataListCheck, DataListCheck,
DataListItem, DataListItem,
@@ -14,8 +14,15 @@ import {
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { Credential } from '@types'; import { Credential } from '@types';
import styled from 'styled-components';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: 40px;
`;
function CredentialListItem({ function CredentialListItem({
credential, credential,
@@ -57,7 +64,7 @@ function CredentialListItem({
aria-labelledby={labelId} aria-labelledby={labelId}
id={labelId} id={labelId}
> >
{canEdit && ( {canEdit ? (
<Tooltip content={i18n._(t`Edit Credential`)} position="top"> <Tooltip content={i18n._(t`Edit Credential`)} position="top">
<Button <Button
variant="plain" variant="plain"
@@ -67,6 +74,8 @@ function CredentialListItem({
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>

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

@@ -24,7 +24,7 @@ const DataListAction = styled(_DataListAction)`
align-items: center; align-items: center;
display: grid; display: grid;
grid-gap: 24px; grid-gap: 24px;
grid-template-columns: min-content 40px; grid-template-columns: 92px 40px;
`; `;
function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) { function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
@@ -77,7 +77,7 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
id={labelId} id={labelId}
> >
<HostToggle host={host} /> <HostToggle host={host} />
{host.summary_fields.user_capabilities.edit && ( {host.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Host`)} position="top"> <Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button <Button
variant="plain" variant="plain"
@@ -87,6 +87,8 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>

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

@@ -3,7 +3,7 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
Button, Button,
DataListAction, DataListAction as _DataListAction,
DataListCell, DataListCell,
DataListCheck, DataListCheck,
DataListItem, DataListItem,
@@ -13,10 +13,18 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { Inventory } from '@types'; import { Inventory } from '@types';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: 40px;
`;
class InventoryListItem extends React.Component { class InventoryListItem extends React.Component {
static propTypes = { static propTypes = {
inventory: Inventory.isRequired, inventory: Inventory.isRequired,
@@ -60,7 +68,7 @@ class InventoryListItem extends React.Component {
aria-labelledby={labelId} aria-labelledby={labelId}
id={labelId} id={labelId}
> >
{inventory.summary_fields.user_capabilities.edit && ( {inventory.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top"> <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<Button <Button
variant="plain" variant="plain"
@@ -72,6 +80,8 @@ class InventoryListItem extends React.Component {
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>

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

@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
import { import {
Badge as PFBadge, Badge as PFBadge,
Button, Button,
DataListAction, DataListAction as _DataListAction,
DataListCell, DataListCell,
DataListCheck, DataListCheck,
DataListItem, DataListItem,
@@ -31,6 +31,13 @@ const ListGroup = styled.span`
} }
`; `;
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: 40px;
`;
function OrganizationListItem({ function OrganizationListItem({
organization, organization,
isSelected, isSelected,
@@ -82,7 +89,7 @@ function OrganizationListItem({
aria-labelledby={labelId} aria-labelledby={labelId}
id={labelId} id={labelId}
> >
{organization.summary_fields.user_capabilities.edit && ( {organization.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Organization`)} position="top"> <Tooltip content={i18n._(t`Edit Organization`)} position="top">
<Button <Button
variant="plain" variant="plain"
@@ -92,6 +99,8 @@ function OrganizationListItem({
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>

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

@@ -126,7 +126,7 @@ class ProjectListItem extends React.Component {
aria-labelledby={labelId} aria-labelledby={labelId}
id={labelId} id={labelId}
> >
{project.summary_fields.user_capabilities.start && ( {project.summary_fields.user_capabilities.start ? (
<Tooltip content={i18n._(t`Sync Project`)} position="top"> <Tooltip content={i18n._(t`Sync Project`)} position="top">
<ProjectSyncButton projectId={project.id}> <ProjectSyncButton projectId={project.id}>
{handleSync => ( {handleSync => (
@@ -140,8 +140,10 @@ class ProjectListItem extends React.Component {
)} )}
</ProjectSyncButton> </ProjectSyncButton>
</Tooltip> </Tooltip>
) : (
''
)} )}
{project.summary_fields.user_capabilities.edit && ( {project.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Project`)} position="top"> <Tooltip content={i18n._(t`Edit Project`)} position="top">
<Button <Button
css="grid-column: 2" css="grid-column: 2"
@@ -152,6 +154,8 @@ class ProjectListItem extends React.Component {
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>

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

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button, Button,
DataListAction, DataListAction as _DataListAction,
DataListCell, DataListCell,
DataListCheck, DataListCheck,
DataListItem, DataListItem,
@@ -12,11 +12,19 @@ import {
DataListItemRow, DataListItemRow,
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import styled from 'styled-components';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import { Team } from '@types'; import { Team } from '@types';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: 40px;
`;
class TeamListItem extends React.Component { class TeamListItem extends React.Component {
static propTypes = { static propTypes = {
team: Team.isRequired, team: Team.isRequired,
@@ -64,7 +72,7 @@ class TeamListItem extends React.Component {
aria-labelledby={labelId} aria-labelledby={labelId}
id={labelId} id={labelId}
> >
{team.summary_fields.user_capabilities.edit && ( {team.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Team`)} position="top"> <Tooltip content={i18n._(t`Edit Team`)} position="top">
<Button <Button
variant="plain" variant="plain"
@@ -74,6 +82,8 @@ class TeamListItem extends React.Component {
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>

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

@@ -98,7 +98,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
</LaunchButton> </LaunchButton>
</Tooltip> </Tooltip>
)} )}
{template.summary_fields.user_capabilities.edit && ( {template.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Template`)} position="top"> <Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button <Button
css="grid-column: 2" css="grid-column: 2"
@@ -109,6 +109,8 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
<PencilAltIcon /> <PencilAltIcon />
</Button> </Button>
</Tooltip> </Tooltip>
) : (
''
)} )}
</DataListAction> </DataListAction>
</DataListItemRow> </DataListItemRow>