diff --git a/__tests__/components/Tooltip.test.jsx b/__tests__/components/Tooltip.test.jsx deleted file mode 100644 index 9a78ae5fa0..0000000000 --- a/__tests__/components/Tooltip.test.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import Tooltip from '../../src/components/Tooltip'; - -describe('', () => { - let elem; - let content; - let mouseOverHandler; - let mouseOutHandler; - const child = (foo); - const message = 'hi'; - - test('initially renders without crashing', () => { - elem = mount( - - {child} - - ); - expect(elem.length).toBe(1); - }); - - test('shows/hides with mouse over and leave', () => { - elem = mount( - - {child} - - ); - mouseOverHandler = elem.find('.mouseOverHandler'); - mouseOutHandler = elem.find('.mouseOutHandler'); - expect(elem.state().isDisplayed).toBe(false); - elem.update(); - content = elem.find('.pf-c-tooltip__content'); - expect(content.length).toBe(0); - mouseOverHandler.props().onMouseOver(); - expect(elem.state().isDisplayed).toBe(true); - elem.update(); - content = elem.find('.pf-c-tooltip__content'); - expect(content.length).toBe(1); - mouseOutHandler.props().onMouseLeave(); - expect(elem.state().isDisplayed).toBe(false); - elem.update(); - content = elem.find('.pf-c-tooltip__content'); - expect(content.length).toBe(0); - }); - - test('shows/hides with focus and blur', () => { - elem = mount( - - {child} - - ); - mouseOverHandler = elem.find('.mouseOverHandler'); - mouseOutHandler = elem.find('.mouseOutHandler'); - expect(elem.state().isDisplayed).toBe(false); - elem.update(); - content = elem.find('.pf-c-tooltip__content'); - expect(content.length).toBe(0); - mouseOverHandler.props().onFocus(); - expect(elem.state().isDisplayed).toBe(true); - elem.update(); - content = elem.find('.pf-c-tooltip__content'); - expect(content.length).toBe(1); - mouseOutHandler.props().onBlur(); - expect(elem.state().isDisplayed).toBe(false); - elem.update(); - content = elem.find('.pf-c-tooltip__content'); - expect(content.length).toBe(0); - }); -}); diff --git a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx index 9d5079ce70..6a1c919ce3 100644 --- a/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx +++ b/__tests__/pages/Organizations/screens/OrganizationAdd.test.jsx @@ -1,6 +1,6 @@ import React from 'react'; import { mount } from 'enzyme'; -import { MemoryRouter } from 'react-router-dom'; +import { MemoryRouter, Router } from 'react-router-dom'; import { I18nProvider } from '@lingui/react'; import { ConfigContext } from '../../../../src/context'; import OrganizationAdd from '../../../../src/pages/Organizations/screens/OrganizationAdd'; @@ -18,6 +18,7 @@ describe('', () => { ); }); + test('calls "onFieldChange" when input values change', () => { const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onFieldChange'); const wrapper = mount( @@ -35,6 +36,7 @@ describe('', () => { wrapper.find('input#add-org-form-description').simulate('change', { target: { value: 'bar' } }); expect(spy).toHaveBeenCalledTimes(2); }); + test('calls "onSubmit" when Save button is clicked', () => { const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSubmit'); const wrapper = mount( @@ -51,6 +53,7 @@ describe('', () => { wrapper.find('button[aria-label="Save"]').prop('onClick')(); expect(spy).toBeCalled(); }); + test('calls "onCancel" when Cancel button is clicked', () => { const spy = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onCancel'); const wrapper = mount( @@ -68,6 +71,25 @@ describe('', () => { expect(spy).toBeCalled(); }); + test('calls "onCancel" when close button (x) is clicked', () => { + const wrapper = mount( + + + + + + ); + const history = wrapper.find(Router).prop('history'); + expect(history.length).toBe(1); + expect(history.location.pathname).toEqual('/organizations/add'); + wrapper.find('button[aria-label="Close"]').prop('onClick')(); + expect(history.length).toBe(2); + expect(history.location.pathname).toEqual('/organizations'); + }); + test('Successful form submission triggers redirect', (done) => { const onSuccess = jest.spyOn(OrganizationAdd.WrappedComponent.prototype, 'onSuccess'); const mockedResp = { data: { id: 1, related: { instance_groups: '/bar' } } }; diff --git a/src/app.scss b/src/app.scss index 934240376c..1f0d7ee0c2 100644 --- a/src/app.scss +++ b/src/app.scss @@ -206,6 +206,21 @@ --pf-c-card__body--PaddingTop: 24px; } +// +// pf tooltip overrides +// + +.pf-c-tooltip__content { + --pf-c-tooltip__content--PaddingTop: 0.71rem; + --pf-c-tooltip__content--PaddingRight: 0.71rem; + --pf-c-tooltip__content--PaddingBottom: 0.71rem; + --pf-c-tooltip__content--PaddingLeft: 0.71rem; +} +// higher specificity needed to override PF styles added dynamically to page +.pf-c-tooltip .pf-c-tooltip__content { + text-align: left; +} + // // pf empty state overrides // @@ -238,3 +253,7 @@ --pf-c-card__body--PaddingX: 0; --pf-c-card__body--PaddingY: 0; } + +.at-u-textRight { + text-align: right; +} diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index 2810a52435..efa66c1a70 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -15,6 +15,7 @@ import { Toolbar, ToolbarGroup, ToolbarItem, + Tooltip, } from '@patternfly/react-core'; import { BarsIcon, @@ -30,7 +31,6 @@ import { Link } from 'react-router-dom'; -import Tooltip from '../Tooltip'; import VerticalSeparator from '../VerticalSeparator'; const flexGrowStyling = { @@ -291,7 +291,7 @@ class DataListToolbar extends React.Component { { showDelete && ( + + + + - + + {i18n._(t`Instance Groups`)} + {' '} + + + + + )} + fieldId="add-org-form-instance-groups" + > {({ custom_virtualenvs }) => ( custom_virtualenvs && custom_virtualenvs.length > 1 && ( - + + {i18n._(t`Ansible Environment`)} + {' '} + + + + + )} + fieldId="add-org-custom-virtualenv" + > - )} - - - {error ?
error
: ''} - -
- + + {error ?
error
: ''} + + + + )} + ); }