External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-17 20:51:21 -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
Show Stats 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 {
Button,
DataListAction,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
@ -18,6 +18,14 @@ import StatusIcon from '@components/StatusIcon';
import { toTitleCase } from '@util/strings';
import { formatDateString } from '@util/dates';
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({
i18n,
@ -63,24 +71,26 @@ function JobListItem({
</DataListCell>,
]}
/>
{job.type !== 'system_job' &&
job.summary_fields?.user_capabilities?.start && (
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
<Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}>
<RocketIcon />
</Button>
)}
</LaunchButton>
</Tooltip>
</DataListAction>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{job.type !== 'system_job' &&
job.summary_fields?.user_capabilities?.start ? (
<Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}>
<RocketIcon />
</Button>
)}
</LaunchButton>
</Tooltip>
) : (
''
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

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

@ -24,7 +24,7 @@ const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: auto 40px;
grid-template-columns: 92px 40px;
`;
function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
@ -104,7 +104,7 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
key="actions"
>
<ScheduleToggle schedule={schedule} />
{schedule.summary_fields.user_capabilities.edit && (
{schedule.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Schedule`)} position="top">
<Button
css="grid-column: 2"
@ -115,6 +115,8 @@ function ScheduleListItem({ i18n, isSelected, onSelect, schedule }) {
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</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 {
Button,
DataListAction,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
@ -14,8 +14,15 @@ import {
Tooltip,
} from '@patternfly/react-core';
import { PencilAltIcon } from '@patternfly/react-icons';
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({
credential,
@ -57,7 +64,7 @@ function CredentialListItem({
aria-labelledby={labelId}
id={labelId}
>
{canEdit && (
{canEdit ? (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<Button
variant="plain"
@ -67,6 +74,8 @@ function CredentialListItem({
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</DataListItemRow>

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

@ -24,7 +24,7 @@ const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 24px;
grid-template-columns: min-content 40px;
grid-template-columns: 92px 40px;
`;
function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
@ -77,7 +77,7 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
id={labelId}
>
<HostToggle host={host} />
{host.summary_fields.user_capabilities.edit && (
{host.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button
variant="plain"
@ -87,6 +87,8 @@ function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</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 {
Button,
DataListAction,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
@ -13,10 +13,18 @@ import {
} from '@patternfly/react-core';
import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons';
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 {
static propTypes = {
inventory: Inventory.isRequired,
@ -60,7 +68,7 @@ class InventoryListItem extends React.Component {
aria-labelledby={labelId}
id={labelId}
>
{inventory.summary_fields.user_capabilities.edit && (
{inventory.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<Button
variant="plain"
@ -72,6 +80,8 @@ class InventoryListItem extends React.Component {
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</DataListItemRow>

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

@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
import {
Badge as PFBadge,
Button,
DataListAction,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
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({
organization,
isSelected,
@ -82,7 +89,7 @@ function OrganizationListItem({
aria-labelledby={labelId}
id={labelId}
>
{organization.summary_fields.user_capabilities.edit && (
{organization.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Organization`)} position="top">
<Button
variant="plain"
@ -92,6 +99,8 @@ function OrganizationListItem({
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</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}
id={labelId}
>
{project.summary_fields.user_capabilities.start && (
{project.summary_fields.user_capabilities.start ? (
<Tooltip content={i18n._(t`Sync Project`)} position="top">
<ProjectSyncButton projectId={project.id}>
{handleSync => (
@ -140,8 +140,10 @@ class ProjectListItem extends React.Component {
)}
</ProjectSyncButton>
</Tooltip>
) : (
''
)}
{project.summary_fields.user_capabilities.edit && (
{project.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Project`)} position="top">
<Button
css="grid-column: 2"
@ -152,6 +154,8 @@ class ProjectListItem extends React.Component {
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</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 {
Button,
DataListAction,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
@ -12,11 +12,19 @@ import {
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
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 {
static propTypes = {
team: Team.isRequired,
@ -64,7 +72,7 @@ class TeamListItem extends React.Component {
aria-labelledby={labelId}
id={labelId}
>
{team.summary_fields.user_capabilities.edit && (
{team.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Team`)} position="top">
<Button
variant="plain"
@ -74,6 +82,8 @@ class TeamListItem extends React.Component {
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</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>
</Tooltip>
)}
{template.summary_fields.user_capabilities.edit && (
{template.summary_fields.user_capabilities.edit ? (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button
css="grid-column: 2"
@ -109,6 +109,8 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
<PencilAltIcon />
</Button>
</Tooltip>
) : (
''
)}
</DataListAction>
</DataListItemRow>