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>

frontend/src/component/feature/variant/AddVariant/AddVariant.jsx

@@ -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 && (
+                <ConditionallyRender
+                    condition={overrides.length > 0}
+                    show={
                         <p style={{ marginBottom: '.5rem' }}>
                             <strong>Overrides </strong>
                             <Icon
                                 name="info"
-                            title="Here you can specify which users that should get this variant."
+                                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;

frontend/src/component/feature/variant/AddVariant/OverrideConfig/OverrideConfig.jsx

@@ -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}
+                            <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"
+                                    />
+                                )}
                             />
-                            </div>
                         }
                         elseShow={
                             <InputListField

frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap

@@ -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 {

frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx

@@ -5,14 +5,29 @@ 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(
+        <Provider store={createStore(mockReducer, mockStore)}>
             <ThemeProvider theme={theme}>
                 <MemoryRouter>
                     <UpdateVariant
@@ -27,13 +42,15 @@ test('renders correctly with without variants', () => {
                     />
                 </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(
+        <Provider store={createStore(mockReducer, mockStore)}>
             <ThemeProvider theme={theme}>
                 <MemoryRouter>
                     <UpdateVariant
@@ -48,6 +65,7 @@ test('renders correctly with without variants and no permissions', () => {
                     />
                 </MemoryRouter>
             </ThemeProvider>
+        </Provider>
     );
 
     expect(tree).toMatchSnapshot();
@@ -94,6 +112,7 @@ test('renders correctly with with variants', () => {
         createdAt: '2018-02-04T20:27:52.127Z',
     };
     const tree = renderer.create(
+        <Provider store={createStore(mockReducer, mockStore)}>
             <ThemeProvider theme={theme}>
                 <MemoryRouter>
                     <UpdateVariant
@@ -108,6 +127,7 @@ test('renders correctly with with variants', () => {
                     />
                 </MemoryRouter>
             </ThemeProvider>
+        </Provider>
     );
 
     expect(tree).toMatchSnapshot();