From e68349b6b5c3b7b24ae15ab0ec7904f821b7d474 Mon Sep 17 00:00:00 2001 From: John Mitchell Date: Wed, 18 Sep 2019 13:57:06 -0400 Subject: [PATCH 1/3] assorted style cleanup in UI next - round all corners of combo fields - make sure required asterisk is always before help popover ? - bug: fix ? popover from opening lookups - fix spacing of detail toggle for http error --- .../components/ContentError/ContentError.jsx | 1 + .../components/ErrorDetail/ErrorDetail.jsx | 7 ++++++ .../Lookup/InstanceGroupsLookup.jsx | 25 ++++++++++--------- .../src/components/Lookup/InventoryLookup.jsx | 25 ++++++++++--------- awx/ui_next/src/components/Lookup/Lookup.jsx | 2 ++ awx/ui_next/src/components/Search/Search.jsx | 4 +++ 6 files changed, 40 insertions(+), 24 deletions(-) diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx index a94adc4ac9..53610b52d4 100644 --- a/awx/ui_next/src/components/ContentError/ContentError.jsx +++ b/awx/ui_next/src/components/ContentError/ContentError.jsx @@ -16,6 +16,7 @@ import ErrorDetail from '@components/ErrorDetail'; const EmptyState = styled(PFEmptyState)` width: var(--pf-c-empty-state--m-lg--MaxWidth); + max-width: 100%; `; async function logout() { diff --git a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx index ed3d468315..25d2c9d035 100644 --- a/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx +++ b/awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx @@ -22,6 +22,13 @@ const CardBody = styled(PFCardBody)` const Expandable = styled(PFExpandable)` text-align: left; + + & .pf-c-expandable__toggle { + padding-left: 10px; + margin-left: 5px; + margin-top: 10px; + margin-bottom: 10px; + } `; class ErrorDetail extends Component { diff --git a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx index f44c9e5144..966cb62b95 100644 --- a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx @@ -1,13 +1,18 @@ -import React, { Fragment } from 'react'; +import React from 'react'; import PropTypes from 'prop-types'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { FormGroup, Tooltip } from '@patternfly/react-core'; -import { QuestionCircleIcon } from '@patternfly/react-icons'; +import { QuestionCircleIcon as PFQuestionCircleIcon} from '@patternfly/react-icons'; +import styled from 'styled-components'; import { InstanceGroupsAPI } from '@api'; import Lookup from '@components/Lookup'; +const QuestionCircleIcon = styled(PFQuestionCircleIcon)` + margin-left: 10px; +`; + const getInstanceGroups = async params => InstanceGroupsAPI.read(params); class InstanceGroupsLookup extends React.Component { @@ -21,18 +26,14 @@ class InstanceGroupsLookup extends React.Component { return (
- {i18n._(t`Instance Groups`)}{' '} - {tooltip && ( - - - - )} - - } + label={i18n._(t`Instance Groups`)} fieldId="org-instance-groups" > + {tooltip && ( + + + + )} InventoriesAPI.read(params); class InventoryLookup extends React.Component { @@ -17,19 +22,15 @@ class InventoryLookup extends React.Component { return ( - {i18n._(t`Inventory`)}{' '} - {tooltip && ( - - - - )} - - } + label={i18n._(t`Inventory`)} isRequired={required} fieldId="inventory-lookup" > + {tooltip && ( + + + + )} span { @@ -64,6 +66,8 @@ const Dropdown = styled(PFDropdown)` const NoOptionDropdown = styled.div` align-self: stretch; border: 1px solid var(--pf-global--BorderColor--200); + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; padding: 3px 7px; white-space: nowrap; `; From 83e413b0bfae9d6272cccdcd4d32b828792c630f Mon Sep 17 00:00:00 2001 From: mabashian Date: Thu, 19 Sep 2019 13:28:52 -0400 Subject: [PATCH 2/3] Fix prettier failures --- awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx | 2 +- awx/ui_next/src/components/Lookup/InventoryLookup.jsx | 2 +- awx/ui_next/src/components/Lookup/Lookup.jsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx index 966cb62b95..1e58f3eafa 100644 --- a/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InstanceGroupsLookup.jsx @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { FormGroup, Tooltip } from '@patternfly/react-core'; -import { QuestionCircleIcon as PFQuestionCircleIcon} from '@patternfly/react-icons'; +import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; import { InstanceGroupsAPI } from '@api'; diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx index 35125b6ff6..0f29ed2ff3 100644 --- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx @@ -3,7 +3,7 @@ import { string, func, bool } from 'prop-types'; import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { FormGroup, Tooltip } from '@patternfly/react-core'; -import { QuestionCircleIcon as PFQuestionCircleIcon} from '@patternfly/react-icons'; +import { QuestionCircleIcon as PFQuestionCircleIcon } from '@patternfly/react-icons'; import styled from 'styled-components'; import { InventoriesAPI } from '@api'; diff --git a/awx/ui_next/src/components/Lookup/Lookup.jsx b/awx/ui_next/src/components/Lookup/Lookup.jsx index d70284b3fa..b398c007ce 100644 --- a/awx/ui_next/src/components/Lookup/Lookup.jsx +++ b/awx/ui_next/src/components/Lookup/Lookup.jsx @@ -47,7 +47,7 @@ const ChipHolder = styled.div` --pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200); --pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200); border-top-right-radius: 3px; - border-bottom-right-radius: 3px + border-bottom-right-radius: 3px; `; class Lookup extends React.Component { From f49d566f178b42216aad86a78706ade4c97b65df Mon Sep 17 00:00:00 2001 From: mabashian Date: Thu, 19 Sep 2019 13:59:21 -0400 Subject: [PATCH 3/3] Update failed snapshot --- .../__snapshots__/OrganizationNotifications.test.jsx.snap | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap b/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap index 6383534902..e7d090a2ba 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap +++ b/awx/ui_next/src/screens/Organization/OrganizationNotifications/__snapshots__/OrganizationNotifications.test.jsx.snap @@ -643,9 +643,9 @@ exports[` initially renders succesfully 1`] = ` "componentStyle": ComponentStyle { "componentId": "Search__NoOptionDropdown-sc-1dwuww3-3", "isStatic": true, - "lastClassName": "iMdtNX", + "lastClassName": "cbKaoS", "rules": Array [ - "align-self:stretch;border:1px solid var(--pf-global--BorderColor--200);padding:3px 7px;white-space:nowrap;", + "align-self:stretch;border:1px solid var(--pf-global--BorderColor--200);border-top-left-radius:3px;border-bottom-left-radius:3px;padding:3px 7px;white-space:nowrap;", ], }, "displayName": "Search__NoOptionDropdown", @@ -661,7 +661,7 @@ exports[` initially renders succesfully 1`] = ` forwardedRef={null} >
Name