mirror of
https://github.com/Unleash/unleash.git
synced 2024-12-22 19:07:54 +01:00
Fix/variants (#278)
* fix: use autocomplete for legal values * fix: use flag to toggle overrides * fix: use legalvalues directly * fix: tests * Update src/component/feature/variant/__tests__/update-variant-component-test.jsx Co-authored-by: Christopher Kolstad <chriswk@getunleash.ai> * Update src/component/feature/variant/AddVariant/AddVariant.jsx Co-authored-by: Christopher Kolstad <chriswk@getunleash.ai> * fix: tests * fix: remove flag for overrides Co-authored-by: Christopher Kolstad <chriswk@getunleash.ai>
This commit is contained in:
Fredrik Strand Oseberg
GitHub
parent
f8e34d53ff
commit
8d003da400
@ -16,6 +16,7 @@ import { modalStyles, trim } from '../../../common/util';
|
||||
import { weightTypes } from '../enums';
|
||||
import OverrideConfig from './OverrideConfig/OverrideConfig';
|
||||
import { useCommonStyles } from '../../../../common.styles';
|
||||
import ConditionallyRender from '../../../common/ConditionallyRender';
|
||||
|
||||
const payloadOptions = [
|
||||
{ key: 'string', label: 'string' },
|
||||
@ -137,6 +138,7 @@ const AddVariant = ({
|
||||
if (i === index) {
|
||||
o[e.target.name] = e.target.value;
|
||||
}
|
||||
|
||||
return o;
|
||||
})
|
||||
);
|
||||
@ -264,16 +266,18 @@ const AddVariant = ({
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{overrides.length > 0 && (
|
||||
<p style={{ marginBottom: '.5rem' }}>
|
||||
<strong>Overrides </strong>
|
||||
<Icon
|
||||
name="info"
|
||||
title="Here you can specify which users that should get this variant."
|
||||
/>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<ConditionallyRender
|
||||
condition={overrides.length > 0}
|
||||
show={
|
||||
<p style={{ marginBottom: '.5rem' }}>
|
||||
<strong>Overrides </strong>
|
||||
<Icon
|
||||
name="info"
|
||||
title="Here you can specify which users should get this variant."
|
||||
/>
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
<OverrideConfig
|
||||
overrides={overrides}
|
||||
removeOverride={removeOverride}
|
||||
@ -281,7 +285,7 @@ const AddVariant = ({
|
||||
updateOverrideValues={updateOverrideValues}
|
||||
updateValues={updateOverrideValues}
|
||||
/>
|
||||
<Button onClick={onAddOverride}>Add override</Button>
|
||||
<Button onClick={onAddOverride}>Add override</Button>{' '}
|
||||
</form>
|
||||
</Dialog>
|
||||
);
|
||||
@ -294,6 +298,7 @@ AddVariant.propTypes = {
|
||||
validateName: PropTypes.func.isRequired,
|
||||
editVariant: PropTypes.object,
|
||||
title: PropTypes.string,
|
||||
uiConfig: PropTypes.object,
|
||||
};
|
||||
|
||||
export default AddVariant;
|
||||
|
||||
@ -2,13 +2,13 @@ import { connect } from 'react-redux';
|
||||
import classnames from 'classnames';
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import { Grid, IconButton, Icon } from '@material-ui/core';
|
||||
import { Grid, IconButton, Icon, TextField } from '@material-ui/core';
|
||||
import MySelect from '../../../../common/select';
|
||||
import InputListField from '../../../../common/input-list-field';
|
||||
import { selectStyles } from '../../../../common';
|
||||
import ConditionallyRender from '../../../../common/ConditionallyRender/ConditionallyRender';
|
||||
import { useCommonStyles } from '../../../../../common.styles';
|
||||
import { useStyles } from './OverrideConfig.styles.js';
|
||||
import { Autocomplete } from '@material-ui/lab';
|
||||
|
||||
const OverrideConfig = ({
|
||||
overrides,
|
||||
@ -28,18 +28,14 @@ const OverrideConfig = ({
|
||||
updateOverrideValues(i, values);
|
||||
};
|
||||
|
||||
const updateSelectValues = i => values => {
|
||||
updateOverrideValues(i, values ? values.map(v => v.value) : undefined);
|
||||
const updateSelectValues = i => (e, options) => {
|
||||
updateOverrideValues(i, options ? options : []);
|
||||
};
|
||||
|
||||
const mapSelectValues = (values = []) =>
|
||||
values.map(v => ({ label: v, value: v }));
|
||||
|
||||
return overrides.map((o, i) => {
|
||||
const legalValues =
|
||||
contextDefinitions.find(c => c.name === o.contextName)
|
||||
.legalValues || [];
|
||||
const options = legalValues.map(v => ({ value: v, label: v, key: v }));
|
||||
|
||||
return (
|
||||
<Grid container key={`override=${i}`} alignItems="center">
|
||||
@ -59,16 +55,27 @@ const OverrideConfig = ({
|
||||
<ConditionallyRender
|
||||
condition={legalValues && legalValues.length > 0}
|
||||
show={
|
||||
<div style={{ paddingTop: '12px' }}>
|
||||
<MySelect
|
||||
key={`override-select=${i}`}
|
||||
className={selectStyles}
|
||||
classes={{ root: commonStyles.fullWidth }}
|
||||
value={mapSelectValues(o.values)}
|
||||
options={options}
|
||||
onChange={updateSelectValues(i)}
|
||||
/>
|
||||
</div>
|
||||
<Autocomplete
|
||||
multiple
|
||||
id={`override-select-${i}`}
|
||||
getOptionSelected={(option, value) => {
|
||||
return option === value;
|
||||
}}
|
||||
options={legalValues}
|
||||
onChange={updateSelectValues(i)}
|
||||
getOptionLabel={option => option}
|
||||
defaultValue={o.values}
|
||||
value={o.values}
|
||||
filterSelectedOptions
|
||||
size="small"
|
||||
renderInput={params => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="outlined"
|
||||
label="Legal values"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
elseShow={
|
||||
<InputListField
|
||||
|
||||
@ -568,7 +568,7 @@ exports[`renders correctly with without variants 1`] = `
|
||||
</section>
|
||||
`;
|
||||
|
||||
exports[`renders correctly with without variants and no permissions 1`] = `
|
||||
exports[`renders correctly without variants and no permissions 1`] = `
|
||||
<section
|
||||
style={
|
||||
Object {
|
||||
|
||||
@ -5,49 +5,67 @@ import UpdateVariant from './../update-variant-component';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { weightTypes } from '../enums';
|
||||
import theme from '../../../../themes/main-theme';
|
||||
import { Provider } from 'react-redux';
|
||||
import { createStore } from 'redux';
|
||||
|
||||
jest.mock(
|
||||
'../AddVariant/OverrideConfig/OverrideConfig.jsx',
|
||||
() => 'OverrideConfig'
|
||||
);
|
||||
|
||||
const mockStore = {
|
||||
uiConfig: {
|
||||
toJS: () => ({
|
||||
flags: {
|
||||
P: true,
|
||||
},
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const mockReducer = state => state;
|
||||
|
||||
test('renders correctly with without variants', () => {
|
||||
const tree = renderer.create(
|
||||
<ThemeProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<UpdateVariant
|
||||
key={0}
|
||||
variants={[]}
|
||||
addVariant={jest.fn()}
|
||||
removeVariant={jest.fn()}
|
||||
updateVariant={jest.fn()}
|
||||
stickinessOptions={['default']}
|
||||
updateStickiness={jest.fn()}
|
||||
editable
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</ThemeProvider>
|
||||
<Provider store={createStore(mockReducer, mockStore)}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<UpdateVariant
|
||||
key={0}
|
||||
variants={[]}
|
||||
addVariant={jest.fn()}
|
||||
removeVariant={jest.fn()}
|
||||
updateVariant={jest.fn()}
|
||||
stickinessOptions={['default']}
|
||||
updateStickiness={jest.fn()}
|
||||
editable
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</ThemeProvider>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('renders correctly with without variants and no permissions', () => {
|
||||
test('renders correctly without variants and no permissions', () => {
|
||||
const tree = renderer.create(
|
||||
<ThemeProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<UpdateVariant
|
||||
key={0}
|
||||
variants={[]}
|
||||
addVariant={jest.fn()}
|
||||
removeVariant={jest.fn()}
|
||||
updateVariant={jest.fn()}
|
||||
stickinessOptions={['default']}
|
||||
updateStickiness={jest.fn()}
|
||||
editable
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</ThemeProvider>
|
||||
<Provider store={createStore(mockReducer, mockStore)}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<UpdateVariant
|
||||
key={0}
|
||||
variants={[]}
|
||||
addVariant={jest.fn()}
|
||||
removeVariant={jest.fn()}
|
||||
updateVariant={jest.fn()}
|
||||
stickinessOptions={['default']}
|
||||
updateStickiness={jest.fn()}
|
||||
editable
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</ThemeProvider>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
@ -94,20 +112,22 @@ test('renders correctly with with variants', () => {
|
||||
createdAt: '2018-02-04T20:27:52.127Z',
|
||||
};
|
||||
const tree = renderer.create(
|
||||
<ThemeProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<UpdateVariant
|
||||
key={0}
|
||||
variants={featureToggle.variants}
|
||||
addVariant={jest.fn()}
|
||||
removeVariant={jest.fn()}
|
||||
updateVariant={jest.fn()}
|
||||
stickinessOptions={['default']}
|
||||
updateStickiness={jest.fn()}
|
||||
editable
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</ThemeProvider>
|
||||
<Provider store={createStore(mockReducer, mockStore)}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<MemoryRouter>
|
||||
<UpdateVariant
|
||||
key={0}
|
||||
variants={featureToggle.variants}
|
||||
addVariant={jest.fn()}
|
||||
removeVariant={jest.fn()}
|
||||
updateVariant={jest.fn()}
|
||||
stickinessOptions={['default']}
|
||||
updateStickiness={jest.fn()}
|
||||
editable
|
||||
/>
|
||||
</MemoryRouter>
|
||||
</ThemeProvider>
|
||||
</Provider>
|
||||
);
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user