diff --git a/__tests__/components/Pagination.test.jsx b/__tests__/components/Pagination.test.jsx index b2ca6727e8..552642665c 100644 --- a/__tests__/components/Pagination.test.jsx +++ b/__tests__/components/Pagination.test.jsx @@ -119,6 +119,63 @@ describe('', () => { pageSizeDropdownItems.at(1).simulate('click'); }); + test('itemCount displays correctly', () => { + const onSetPage = jest.fn(); + + pagination = mount( + + + + ); + const itemCount = pagination.find('.awx-pagination__item-count'); + expect(itemCount.text()).toEqual('Items 1 – 5 of 7'); + }); + + test('itemCount matching pageSize displays correctly', () => { + const onSetPage = jest.fn(); + + pagination = mount( + + + + ); + const itemCount = pagination.find('.awx-pagination__item-count'); + expect(itemCount.text()).toEqual('Items 1 – 5 of 5'); + }); + + test('itemCount less than pageSize displays correctly', () => { + const onSetPage = jest.fn(); + + pagination = mount( + + + + ); + const itemCount = pagination.find('.awx-pagination__item-count'); + expect(itemCount.text()).toEqual('Items 1 – 3 of 3'); + }); + test('submit a new page by typing in input works', () => { const textInputSelector = '.awx-pagination__page-input.pf-c-form-control'; const submitFormSelector = '.awx-pagination__page-input-form'; 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 b768b036e4..9655d532b8 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 // @@ -219,6 +234,13 @@ // note that these should be given a consistent prefix // and bem style, as well as moved into component-based scss files // +.awx-lookup { + min-height: 36px; + + .pf-c-form-control { + --pf-c-form-control--Height: auto; + } +} .awx-c-list { border-bottom: 1px solid #d7d7d7; @@ -236,22 +258,20 @@ position: relative; } -.awx-c-alert { - position: absolute; - top: 0; - left: 0; - width: 100%; -} - .pf-c-alert { position: absolute; width: 100%; + z-index: 20; - & button { + button { margin-right: 20px; } } -.pf-c-alert__icon > svg { - fill: white; -} \ No newline at end of file +.pf-c-alert__icon { + --pf-c-alert__icon--Color: white; +} + +.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
: ''} + + + + )} + ); }