shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-10-31 06:51:10 +03:00
Code Releases Activity

Remove style overrides from Lookup component

Browse Source 
Remove style overrides from Lookup component. Also, update related
tests.

closes: https://github.com/ansible/awx/issues/6810
This commit is contained in:
nixocio 2020-06-04 10:37:05 -04:00
parent 69589821ce
commit 14b2bd3445
2 changed files with 24 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
awx/ui_next/src/components/Lookup/Lookup.jsx
View File

@ -14,7 +14,7 @@ import {
Button, Button,
ButtonVariant, ButtonVariant,
Chip, Chip,
InputGroup as PFInputGroup, InputGroup,
Modal, Modal,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
@ -25,31 +25,9 @@ import ChipGroup from '../ChipGroup';
import reducer, { initReducer } from './shared/reducer'; import reducer, { initReducer } from './shared/reducer';
import { QSConfig } from '../../types'; import { QSConfig } from '../../types';
const SearchButton = styled(Button)`
::after {
border: var(--pf-c-button--BorderWidth) solid
var(--pf-global--BorderColor--200);
}
`;
SearchButton.displayName = 'SearchButton';
const InputGroup = styled(PFInputGroup)`
${props =>
props.multiple &&
`
--pf-c-form-control--Height: 90px;
overflow-y: auto;
`}
`;
const ChipHolder = styled.div` const ChipHolder = styled.div`
--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--200);
--pf-c-form-control--Height: auto; --pf-c-form-control--Height: auto;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
`; `;
function Lookup(props) { function Lookup(props) {
const { const {
id, id,
@ -120,15 +98,15 @@ function Lookup(props) {
return ( return (
<Fragment> <Fragment>
<InputGroup onBlur={onBlur}> <InputGroup onBlur={onBlur}>
<SearchButton <Button
aria-label="Search" aria-label="Search"
id={id} id={id}
onClick={() => dispatch({ type: 'TOGGLE_MODAL' })} onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
variant={ButtonVariant.tertiary} variant={ButtonVariant.control}
isDisabled={isLoading} isDisabled={isLoading}
> >
<SearchIcon /> <SearchIcon />
</SearchButton> </Button>
<ChipHolder className="pf-c-form-control"> <ChipHolder className="pf-c-form-control">
<ChipGroup numChips={5} totalChips={items.length}> <ChipGroup numChips={5} totalChips={items.length}>
{items.map(item => {items.map(item =>

25
awx/ui_next/src/components/Lookup/MultiCredentialsLookup.test.jsx
View File

@ -104,7 +104,10 @@ describe('<MultiCredentialsLookup />', () => {
/> />
); );
}); });
const searchButton = await waitForElement(wrapper, 'SearchButton'); const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => { await act(async () => {
searchButton.invoke('onClick')(); searchButton.invoke('onClick')();
}); });
@ -140,7 +143,10 @@ describe('<MultiCredentialsLookup />', () => {
/> />
); );
}); });
const searchButton = await waitForElement(wrapper, 'SearchButton'); const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => { await act(async () => {
searchButton.invoke('onClick')(); searchButton.invoke('onClick')();
}); });
@ -180,7 +186,10 @@ describe('<MultiCredentialsLookup />', () => {
/> />
); );
}); });
const searchButton = await waitForElement(wrapper, 'SearchButton'); const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => { await act(async () => {
searchButton.invoke('onClick')(); searchButton.invoke('onClick')();
}); });
@ -226,7 +235,10 @@ describe('<MultiCredentialsLookup />', () => {
/> />
); );
}); });
const searchButton = await waitForElement(wrapper, 'SearchButton'); const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => { await act(async () => {
searchButton.invoke('onClick')(); searchButton.invoke('onClick')();
}); });
@ -279,7 +291,10 @@ describe('<MultiCredentialsLookup />', () => {
/> />
); );
}); });
const searchButton = await waitForElement(wrapper, 'SearchButton'); const searchButton = await waitForElement(
wrapper,
'Button[aria-label="Search"]'
);
await act(async () => { await act(async () => {
searchButton.invoke('onClick')(); searchButton.invoke('onClick')();
}); });