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

Remove style overrides from Lookup component

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

View File

@ -14,7 +14,7 @@ import {
Button,
ButtonVariant,
Chip,
InputGroup as PFInputGroup,
InputGroup,
Modal,
} from '@patternfly/react-core';
import { withI18n } from '@lingui/react';
@ -25,31 +25,9 @@ import ChipGroup from '../ChipGroup';
import reducer, { initReducer } from './shared/reducer';
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`
--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;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
`;
function Lookup(props) {
const {
id,
@ -120,15 +98,15 @@ function Lookup(props) {
return (
<Fragment>
<InputGroup onBlur={onBlur}>
<SearchButton
<Button
aria-label="Search"
id={id}
onClick={() => dispatch({ type: 'TOGGLE_MODAL' })}
variant={ButtonVariant.tertiary}
variant={ButtonVariant.control}
isDisabled={isLoading}
>
<SearchIcon />
</SearchButton>
</Button>
<ChipHolder className="pf-c-form-control">
<ChipGroup numChips={5} totalChips={items.length}>
{items.map(item =>

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 () => {
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 () => {
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 () => {
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 () => {
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 () => {
searchButton.invoke('onClick')();
});