Stickiness
@@ -519,7 +519,7 @@ exports[`renders correctly with without variants 1`] = `
}
>
Variants allows you to return a variant object if the feature toggle is considered enabled for the current request. When using variants you should use the
@@ -577,7 +577,7 @@ exports[`renders correctly with without variants and no permissions 1`] = `
}
>
Variants allows you to return a variant object if the feature toggle is considered enabled for the current request. When using variants you should use the
diff --git a/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx b/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx
index aaed724194..f2219efd55 100644
--- a/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx
+++ b/frontend/src/component/feature/variant/__tests__/update-variant-component-test.jsx
@@ -1,27 +1,33 @@
-import React from 'react';
import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from '@material-ui/core';
import UpdateVariant from './../update-variant-component';
import renderer from 'react-test-renderer';
import { UPDATE_FEATURE } from '../../../../permissions';
import { weightTypes } from '../enums';
+import theme from '../../../../themes/main-theme';
-jest.mock('../e-override-config', () => 'OverrideConfig');
+jest.mock(
+ '../AddVariant/OverrideConfig/OverrideConfig.jsx',
+ () => 'OverrideConfig'
+);
test('renders correctly with without variants', () => {
const tree = renderer.create(
-
- permission === UPDATE_FEATURE}
- />
-
+
+
+ permission === UPDATE_FEATURE}
+ />
+
+
);
expect(tree).toMatchSnapshot();
@@ -29,18 +35,20 @@ test('renders correctly with without variants', () => {
test('renders correctly with without variants and no permissions', () => {
const tree = renderer.create(
-
- false}
- />
-
+
+
+ false}
+ />
+
+
);
expect(tree).toMatchSnapshot();
@@ -87,18 +95,20 @@ test('renders correctly with with variants', () => {
createdAt: '2018-02-04T20:27:52.127Z',
};
const tree = renderer.create(
-
- permission === UPDATE_FEATURE}
- />
-
+
+
+ permission === UPDATE_FEATURE}
+ />
+
+
);
expect(tree).toMatchSnapshot();
diff --git a/frontend/src/component/feature/variant/add-variant.jsx b/frontend/src/component/feature/variant/add-variant.jsx
deleted file mode 100644
index ff6f011efd..0000000000
--- a/frontend/src/component/feature/variant/add-variant.jsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import { FormControl, FormControlLabel, Grid, Icon, Switch, TextField } from '@material-ui/core';
-import Dialog from '../../common/Dialogue';
-import MySelect from '../../common/select';
-import { modalStyles, trim } from '../../common/util';
-import { weightTypes } from './enums';
-import OverrideConfig from './e-override-config';
-
-const payloadOptions = [
- { key: 'string', label: 'string' },
- { key: 'json', label: 'json' },
- { key: 'csv', label: 'csv' },
-];
-
-const EMPTY_PAYLOAD = { type: 'string', value: '' };
-
-function AddVariant({ showDialog, closeDialog, save, validateName, editVariant, title }) {
- const [data, setData] = useState({});
- const [payload, setPayload] = useState(EMPTY_PAYLOAD);
- const [overrides, setOverrides] = useState([]);
- const [error, setError] = useState({});
-
- const clear = () => {
- if (editVariant) {
- setData({
- name: editVariant.name,
- weight: editVariant.weight / 10,
- weightType: editVariant.weightType || weightTypes.VARIABLE,
- });
- if (editVariant.payload) {
- setPayload(editVariant.payload);
- }
- if (editVariant.overrides) {
- setOverrides(editVariant.overrides);
- } else {
- setOverrides([]);
- }
- } else {
- setData({});
- setPayload(EMPTY_PAYLOAD);
- setOverrides([]);
- }
- setError({});
- };
-
- useEffect(() => {
- clear();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [editVariant]);
-
- const setVariantValue = e => {
- const { name, value } = e.target;
- setData({
- ...data,
- [name]: trim(value),
- });
- };
-
- const setVariantWeightType = e => {
- const { checked, name } = e.target;
- const weightType = checked ? weightTypes.FIX : weightTypes.VARIABLE;
- setData({
- ...data,
- [name]: weightType,
- });
- };
-
- const submit = async e => {
- e.preventDefault();
-
- const validationError = validateName(data.name);
-
- if (validationError) {
- setError(validationError);
- return;
- }
-
- try {
- const variant = {
- name: data.name,
- weight: data.weight * 10,
- weightType: data.weightType,
- payload: payload.value ? payload : undefined,
- overrides: overrides
- .map(o => ({
- contextName: o.contextName,
- values: o.values,
- }))
- .filter(o => o.values && o.values.length > 0),
- };
- await save(variant);
- clear();
- closeDialog();
- } catch (error) {
- const msg = error.message || 'Could not add variant';
- setError({ general: msg });
- }
- };
-
- const onPayload = e => {
- e.preventDefault();
- setPayload({
- ...payload,
- [e.target.name]: e.target.value,
- });
- };
-
- const onCancel = e => {
- e.preventDefault();
- clear();
- closeDialog();
- };
-
- const updateOverrideType = index => e => {
- e.preventDefault();
- setOverrides(
- overrides.map((o, i) => {
- if (i === index) {
- o[e.target.name] = e.target.value;
- }
- return o;
- })
- );
- };
-
- const updateOverrideValues = (index, values) => {
- setOverrides(
- overrides.map((o, i) => {
- if (i === index) {
- o.values = values;
- }
- return o;
- })
- );
- };
-
- const removeOverride = index => e => {
- e.preventDefault();
- setOverrides(overrides.filter((o, i) => i !== index));
- };
-
- const onAddOverride = e => {
- e.preventDefault();
- setOverrides([...overrides, ...[{ contextName: 'userId', values: [] }]]);
- };
-
- const isFixWeight = data.weightType === weightTypes.FIX;
-
- return (
-
- );
-}
-
-AddVariant.propTypes = {
- showDialog: PropTypes.bool.isRequired,
- closeDialog: PropTypes.func.isRequired,
- save: PropTypes.func.isRequired,
- validateName: PropTypes.func.isRequired,
- editVariant: PropTypes.object,
- title: PropTypes.string,
-};
-
-export default AddVariant;
diff --git a/frontend/src/component/feature/variant/override-config.jsx b/frontend/src/component/feature/variant/override-config.jsx
deleted file mode 100644
index 45c0f51a63..0000000000
--- a/frontend/src/component/feature/variant/override-config.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Grid, IconButton, Icon } from '@material-ui/core';
-import MySelect from '../../common/select';
-import InputListField from '../../common/input-list-field';
-
-const overrideOptions = [
- { key: 'userId', label: 'userId' },
- { key: 'appName', label: 'appName' },
-];
-
-function OverrideConfig({ overrides, updateOverrideType, updateOverrideValues, removeOverride }) {
- const updateValues = i => values => {
- updateOverrideValues(i, values);
- };
-
- return overrides.map((o, i) => (
-
-
-
-
-
-
-
-
-
- delete
-
-
-
- ));
-}
-
-OverrideConfig.propTypes = {
- overrides: PropTypes.array.isRequired,
- updateOverrideType: PropTypes.func.isRequired,
- updateOverrideValues: PropTypes.func.isRequired,
- removeOverride: PropTypes.func.isRequired,
-};
-
-export default OverrideConfig;
diff --git a/frontend/src/component/feature/variant/update-variant-component.jsx b/frontend/src/component/feature/variant/update-variant-component.jsx
index b503c08b81..1fb2c79d13 100644
--- a/frontend/src/component/feature/variant/update-variant-component.jsx
+++ b/frontend/src/component/feature/variant/update-variant-component.jsx
@@ -5,8 +5,16 @@ import classnames from 'classnames';
import VariantViewComponent from './variant-view-component';
import styles from './variant.module.scss';
import { UPDATE_FEATURE } from '../../../permissions';
-import { Table, TableHead, TableRow, TableCell, TableBody, Button } from '@material-ui/core';
-import AddVariant from './add-variant';
+import {
+ Table,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableBody,
+ Button,
+ Typography,
+} from '@material-ui/core';
+import AddVariant from './AddVariant/AddVariant';
import MySelect from '../../common/select';
import ConditionallyRender from '../../common/ConditionallyRender/ConditionallyRender';
@@ -103,15 +111,25 @@ class UpdateVariantComponent extends Component {
return (
-
+
- By overriding the stickiness you can control which parameter you want to be used in order to ensure
- consistent traffic allocation across variants.{' '}
-
+ By overriding the stickiness you can control which parameter
+ you want to be used in order to ensure consistent traffic
+ allocation across variants.{' '}
+
Read more
@@ -122,15 +140,19 @@ class UpdateVariantComponent extends Component {
render() {
const { showDialog, editVariant, editIndex, title } = this.state;
const { variants, addVariant, updateVariant } = this.props;
- const saveVariant = editVariant ? updateVariant.bind(null, editIndex) : addVariant;
+ const saveVariant = editVariant
+ ? updateVariant.bind(null, editIndex)
+ : addVariant;
return (
-
- Variants allows you to return a variant object if the feature toggle is considered enabled for the
- current request. When using variants you should use the{' '}
- getVariant() method in the Client SDK.
-
+
+ Variants allows you to return a variant object if the
+ feature toggle is considered enabled for the current
+ request. When using variants you should use the{' '}
+ getVariant() method
+ in the Client SDK.
+
0}
diff --git a/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap b/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
index 44a911cf23..82e78b2622 100644
--- a/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
+++ b/frontend/src/component/feature/view/__tests__/__snapshots__/view-component-test.jsx.snap
@@ -139,10 +139,10 @@ exports[`renders correctly with one feature 1`] = `