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:
parent
69589821ce
commit
14b2bd3445
@ -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 =>
|
||||||
|
@ -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')();
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user