From 6ec96a8f4fbf20c4bd970bb6ddddcc7cbdc171ca Mon Sep 17 00:00:00 2001 From: Marliana Lara Date: Thu, 9 Jan 2020 00:17:54 -0500 Subject: [PATCH] Update detail components to use ActionButtonWrapper --- awx/ui_next/src/screens/Host/Host.jsx | 2 +- .../screens/Host/HostDetail/HostDetail.jsx | 20 +-- .../InventoryGroup/InventoryGroup.test.jsx | 6 +- .../InventoryGroupDetail.jsx | 37 +++--- .../InventoryGroupDetail.test.jsx | 6 +- .../src/screens/Job/JobDetail/JobDetail.jsx | 66 ++-------- .../OrganizationDetail/OrganizationDetail.jsx | 10 +- awx/ui_next/src/screens/Project/Project.jsx | 2 +- .../Project/ProjectDetail/ProjectDetail.jsx | 20 +-- awx/ui_next/src/screens/Team/Team.jsx | 2 +- .../screens/Team/TeamDetail/TeamDetail.jsx | 82 ++++++------ .../JobTemplateDetail/JobTemplateDetail.jsx | 16 +-- .../JobTemplateDetail.test.jsx | 12 +- awx/ui_next/src/screens/User/User.jsx | 2 +- .../screens/User/UserDetail/UserDetail.jsx | 124 ++++++++---------- 15 files changed, 162 insertions(+), 245 deletions(-) diff --git a/awx/ui_next/src/screens/Host/Host.jsx b/awx/ui_next/src/screens/Host/Host.jsx index 0601e661a8..7fc96f9ea5 100644 --- a/awx/ui_next/src/screens/Host/Host.jsx +++ b/awx/ui_next/src/screens/Host/Host.jsx @@ -133,7 +133,7 @@ class Host extends Component { {host && ( } + render={() => } /> )} {host && ( diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx index fc43bb27a9..db62e11f60 100644 --- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx +++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx @@ -1,23 +1,13 @@ import React from 'react'; -import { Link, withRouter } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import styled from 'styled-components'; import { Host } from '@types'; import { Button } from '@patternfly/react-core'; -import { CardBody } from '@components/Card'; +import { CardBody, CardActionsRow } from '@components/Card'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { VariablesDetail } from '@components/CodeMirrorInput'; -const ActionButtonWrapper = styled.div` - display: flex; - justify-content: flex-end; - margin-top: 20px; - & > :not(:first-child) { - margin-left: 20px; - } -`; - function HostDetail({ host, i18n }) { const { created, description, id, modified, name, summary_fields } = host; @@ -58,7 +48,7 @@ function HostDetail({ host, i18n }) { rows={6} /> - + {summary_fields.user_capabilities && summary_fields.user_capabilities.edit && ( - + {isDeleteModalOpen && ( ); } -export default withI18n()(withRouter(InventoryGroupDetail)); +export default withI18n()(InventoryGroupDetail); diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.jsx index 56ebbedc21..cf1d2cca45 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.test.jsx @@ -2,13 +2,12 @@ import React from 'react'; import { GroupsAPI } from '@api'; import { Route } from 'react-router-dom'; import { createMemoryHistory } from 'history'; - import { act } from 'react-dom/test-utils'; import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers'; - import InventoryGroupDetail from './InventoryGroupDetail'; jest.mock('@api'); + const inventoryGroup = { name: 'Foo', description: 'Bar', @@ -27,6 +26,7 @@ const inventoryGroup = { }, }, }; + describe('', () => { let wrapper; let history; @@ -86,7 +86,7 @@ describe('', () => { '/inventories/inventory/1/groups/1/edit' ); }); - test('details shoudld render with the proper values', () => { + test('details should render with the proper values', () => { expect(wrapper.find('Detail[label="Name"]').prop('value')).toBe('Foo'); expect(wrapper.find('Detail[label="Description"]').prop('value')).toBe( 'Bar' diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index aacb94cfef..8e906e7319 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Link, withRouter } from 'react-router-dom'; +import { Link, useHistory } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Button } from '@patternfly/react-core'; @@ -7,9 +7,10 @@ import styled from 'styled-components'; import AlertModal from '@components/AlertModal'; import { DetailList, Detail } from '@components/DetailList'; -import { CardBody } from '@components/Card'; +import { CardBody, CardActionsRow } from '@components/Card'; import { ChipGroup, Chip, CredentialChip } from '@components/Chip'; import { VariablesInput as _VariablesInput } from '@components/CodeMirrorInput'; +import DeleteButton from '@components/DeleteButton'; import ErrorDetail from '@components/ErrorDetail'; import LaunchButton from '@components/LaunchButton'; import { StatusIcon } from '@components/Sparkline'; @@ -24,16 +25,6 @@ import { InventoriesAPI, AdHocCommandsAPI, } from '@api'; -import { JOB_TYPE_URL_SEGMENTS } from '../../../constants'; - -const ActionButtonWrapper = styled.div` - display: flex; - justify-content: flex-end; - margin-top: 20px; - & > :not(:first-child) { - margin-left: 20px; - } -`; const VariablesInput = styled(_VariablesInput)` .pf-c-form__label { @@ -86,7 +77,7 @@ const getLaunchedByDetails = ({ summary_fields = {}, related = {} }) => { return { link, value }; }; -function JobDetail({ job, i18n, history }) { +function JobDetail({ job, i18n }) { const { credentials, instance_group: instanceGroup, @@ -95,8 +86,8 @@ function JobDetail({ job, i18n, history }) { labels, project, } = job.summary_fields; - const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [errorMsg, setErrorMsg] = useState(); + const history = useHistory(); const { value: launchedByValue, link: launchedByLink } = getLaunchedByDetails(job) || {}; @@ -125,7 +116,6 @@ function JobDetail({ job, i18n, history }) { history.push('/jobs'); } catch (err) { setErrorMsg(err); - setIsDeleteModalOpen(false); } }; @@ -262,7 +252,7 @@ function JobDetail({ job, i18n, history }) { label={i18n._(t`Artifacts`)} /> )} - + {job.type !== 'system_job' && job.summary_fields.user_capabilities.start && ( @@ -274,45 +264,15 @@ function JobDetail({ job, i18n, history }) { )} {job.summary_fields.user_capabilities.delete && ( - + )} - - {isDeleteModalOpen && ( - setIsDeleteModalOpen(false)} - > - {i18n._(t`Are you sure you want to delete:`)} -
- {job.name} - - - - - - - )} + {errorMsg && ( )} - {summary_fields.user_capabilities.edit && ( -
+ + {summary_fields.user_capabilities.edit && ( -
- )} + )} + ); } diff --git a/awx/ui_next/src/screens/Project/Project.jsx b/awx/ui_next/src/screens/Project/Project.jsx index 1215586ea2..39a2112555 100644 --- a/awx/ui_next/src/screens/Project/Project.jsx +++ b/awx/ui_next/src/screens/Project/Project.jsx @@ -205,7 +205,7 @@ class Project extends Component { {project && ( } + render={() => } /> )} {project && ( diff --git a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx index b8502ba38e..19030a798e 100644 --- a/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx +++ b/awx/ui_next/src/screens/Project/ProjectDetail/ProjectDetail.jsx @@ -1,25 +1,15 @@ import React from 'react'; -import { Link, withRouter } from 'react-router-dom'; +import { Link } from 'react-router-dom'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; -import styled from 'styled-components'; import { Project } from '@types'; import { Config } from '@contexts/Config'; import { Button, List, ListItem } from '@patternfly/react-core'; -import { CardBody } from '@components/Card'; +import { CardBody, CardActionsRow } from '@components/Card'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { CredentialChip } from '@components/Chip'; import { toTitleCase } from '@util/strings'; -const ActionButtonWrapper = styled.div` - display: flex; - justify-content: flex-end; - margin-top: 20px; - & > :not(:first-child) { - margin-left: 20px; - } -`; - function ProjectDetail({ project, i18n }) { const { allow_override, @@ -137,7 +127,7 @@ function ProjectDetail({ project, i18n }) { user={summary_fields.modified_by} /> - + {summary_fields.user_capabilities && summary_fields.user_capabilities.edit && ( - + )} - - ); - } + + + ); } -export default withI18n()(withRouter(TeamDetail)); +export default withI18n()(TeamDetail); diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx index 473b8105b0..8783e93297 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx @@ -11,7 +11,7 @@ import { import styled from 'styled-components'; import { t } from '@lingui/macro'; -import { CardBody } from '@components/Card'; +import { CardBody, CardActionsRow } from '@components/Card'; import ContentError from '@components/ContentError'; import LaunchButton from '@components/LaunchButton'; import ContentLoading from '@components/ContentLoading'; @@ -19,20 +19,12 @@ import { ChipGroup, Chip, CredentialChip } from '@components/Chip'; import { DetailList, Detail, UserDateDetail } from '@components/DetailList'; import { JobTemplatesAPI } from '@api'; -const ButtonGroup = styled.div` - display: flex; - justify-content: flex-end; - margin-top: 20px; - & > :not(:first-child) { - margin-left: 20px; - } -`; - const MissingDetail = styled(Detail)` dd& { color: red; } `; + class JobTemplateDetail extends Component { constructor(props) { super(props); @@ -317,7 +309,7 @@ class JobTemplateDetail extends Component { /> )} - + {summary_fields.user_capabilities.edit && ( - - )} - - ); + let user_type; + if (is_superuser) { + user_type = i18n._(t`System Administrator`); + } else if (is_system_auditor) { + user_type = i18n._(t`System Auditor`); + } else { + user_type = i18n._(t`Normal User`); } + + return ( + + + + + + + + {last_login && ( + + )} + + + + {summary_fields.user_capabilities.edit && ( + + )} + + + ); } -export default withI18n()(withRouter(UserDetail)); +export default withI18n()(UserDetail);