From f1120d39dba6d6b934428e7c9cedb0eb7f138653 Mon Sep 17 00:00:00 2001 From: Keith Grant Date: Tue, 3 Mar 2020 10:37:16 -0800 Subject: [PATCH] fix column widths when action buttons hidden due to permissions --- .../src/components/JobList/JobListItem.jsx | 46 +++++++++++-------- .../ScheduleList/ScheduleListItem.jsx | 6 ++- .../CredentialList/CredentialListItem.jsx | 15 ++++-- .../screens/Host/HostList/HostListItem.jsx | 6 ++- .../InventoryList/InventoryListItem.jsx | 14 +++++- .../OrganizationList/OrganizationListItem.jsx | 13 +++++- .../Project/ProjectList/ProjectListItem.jsx | 8 +++- .../screens/Team/TeamList/TeamListItem.jsx | 14 +++++- .../TemplateList/TemplateListItem.jsx | 4 +- 9 files changed, 92 insertions(+), 34 deletions(-) diff --git a/awx/ui_next/src/components/JobList/JobListItem.jsx b/awx/ui_next/src/components/JobList/JobListItem.jsx index a577c605b8..fc280498cf 100644 --- a/awx/ui_next/src/components/JobList/JobListItem.jsx +++ b/awx/ui_next/src/components/JobList/JobListItem.jsx @@ -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({ , ]} /> - {job.type !== 'system_job' && - job.summary_fields?.user_capabilities?.start && ( - - - - {({ handleRelaunch }) => ( - - )} - - - + + {job.type !== 'system_job' && + job.summary_fields?.user_capabilities?.start ? ( + + + {({ handleRelaunch }) => ( + + )} + + + ) : ( + '' )} + ); diff --git a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx b/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx index 980cecfac5..79ff96f6e1 100644 --- a/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx +++ b/awx/ui_next/src/components/ScheduleList/ScheduleListItem.jsx @@ -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" > - {schedule.summary_fields.user_capabilities.edit && ( + {schedule.summary_fields.user_capabilities.edit ? ( + ) : ( + '' )} , ]} diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx index 9b519bfcb1..a2d9feaae5 100644 --- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx +++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx @@ -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 ? ( + ) : ( + '' )} diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx index fec58640a6..3bc9c9f949 100644 --- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx +++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx @@ -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} > - {host.summary_fields.user_capabilities.edit && ( + {host.summary_fields.user_capabilities.edit ? ( + ) : ( + '' )} diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index ea5e445994..3edd54e169 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -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 ? ( + ) : ( + '' )} diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx index f2b1a4f8ee..35145e3998 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx @@ -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 ? ( + ) : ( + '' )} diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx index b540be821a..92e337e892 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx @@ -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 ? ( {handleSync => ( @@ -140,8 +140,10 @@ class ProjectListItem extends React.Component { )} + ) : ( + '' )} - {project.summary_fields.user_capabilities.edit && ( + {project.summary_fields.user_capabilities.edit ? ( + ) : ( + '' )} diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx index 0b1e66e9d3..b915117d2e 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx @@ -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 ? ( + ) : ( + '' )} diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx index b13eb92298..d412e25baf 100644 --- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx +++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx @@ -98,7 +98,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) { )} - {template.summary_fields.user_capabilities.edit && ( + {template.summary_fields.user_capabilities.edit ? ( + ) : ( + '' )}