mirror of
https://github.com/Unleash/unleash.git
synced 2025-02-04 00:18:01 +01:00
fix: modal for variants
This commit is contained in:
Ivar Conradi Østhus
parent
784b6e0846
commit
7c0bb12799
12
frontend/src/__mocks__/react-modal.js
vendored
Normal file
12
frontend/src/__mocks__/react-modal.js
vendored
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
// __mocks__/react-modal.js
|
||||||
|
const Modal = require('react-modal');
|
||||||
|
|
||||||
|
const oldFn = Modal.setAppElement;
|
||||||
|
Modal.setAppElement = element => {
|
||||||
|
if (element === '#app') {
|
||||||
|
// otherwise it will throw aria warnings.
|
||||||
|
return oldFn(document.createElement('div'));
|
||||||
|
}
|
||||||
|
oldFn(element);
|
||||||
|
};
|
||||||
|
module.exports = Modal;
|
||||||
@ -151,168 +151,6 @@ exports[`renders correctly with with variants 1`] = `
|
|||||||
Add variant
|
Add variant
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<form
|
|
||||||
onSubmit={[Function]}
|
|
||||||
>
|
|
||||||
<react-mdl-Dialog
|
|
||||||
className="modal"
|
|
||||||
open={false}
|
|
||||||
>
|
|
||||||
<react-mdl-DialogTitle
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"padding": "10px",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<react-mdl-DialogContent
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"minHeight": "350px",
|
|
||||||
"padding": "10px",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"color": "red",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<react-mdl-Textfield
|
|
||||||
floatingLabel={true}
|
|
||||||
label="Variant name"
|
|
||||||
name="name"
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder=""
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
type="name"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<react-mdl-Tooltip
|
|
||||||
className="tooltip"
|
|
||||||
label={
|
|
||||||
<span>
|
|
||||||
Passed to the variant object.
|
|
||||||
<br />
|
|
||||||
Can be anything (json, value, csv)
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"marginBottom": "0",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<strong>
|
|
||||||
Payload
|
|
||||||
</strong>
|
|
||||||
<react-mdl-Icon
|
|
||||||
name="info"
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</react-mdl-Tooltip>
|
|
||||||
<react-mdl-Grid
|
|
||||||
noSpacing={true}
|
|
||||||
>
|
|
||||||
<react-mdl-Cell
|
|
||||||
col={3}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty is-upgraded"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className="mdl-textfield__input"
|
|
||||||
name="type"
|
|
||||||
onChange={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "auto",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value="string"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="string"
|
|
||||||
>
|
|
||||||
string
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="json"
|
|
||||||
>
|
|
||||||
json
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="csv"
|
|
||||||
>
|
|
||||||
csv
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<label
|
|
||||||
className="mdl-textfield__label"
|
|
||||||
htmlFor="textfield-conextName"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</react-mdl-Cell>
|
|
||||||
<react-mdl-Cell
|
|
||||||
col={9}
|
|
||||||
>
|
|
||||||
<react-mdl-Textfield
|
|
||||||
floatingLabel={true}
|
|
||||||
label="Value"
|
|
||||||
name="value"
|
|
||||||
onChange={[Function]}
|
|
||||||
rows={1}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</react-mdl-Cell>
|
|
||||||
</react-mdl-Grid>
|
|
||||||
<a
|
|
||||||
href="#add-override"
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
<small>
|
|
||||||
Add override
|
|
||||||
</small>
|
|
||||||
</a>
|
|
||||||
</react-mdl-DialogContent>
|
|
||||||
<react-mdl-DialogActions>
|
|
||||||
<react-mdl-Button
|
|
||||||
colored={true}
|
|
||||||
raised={true}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</react-mdl-Button>
|
|
||||||
<react-mdl-Button
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</react-mdl-Button>
|
|
||||||
</react-mdl-DialogActions>
|
|
||||||
</react-mdl-Dialog>
|
|
||||||
</form>
|
|
||||||
</section>
|
</section>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -370,168 +208,6 @@ exports[`renders correctly with without variants 1`] = `
|
|||||||
Add variant
|
Add variant
|
||||||
</a>
|
</a>
|
||||||
</p>
|
</p>
|
||||||
<form
|
|
||||||
onSubmit={[Function]}
|
|
||||||
>
|
|
||||||
<react-mdl-Dialog
|
|
||||||
className="modal"
|
|
||||||
open={false}
|
|
||||||
>
|
|
||||||
<react-mdl-DialogTitle
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"padding": "10px",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<react-mdl-DialogContent
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"minHeight": "350px",
|
|
||||||
"padding": "10px",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"color": "red",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<react-mdl-Textfield
|
|
||||||
floatingLabel={true}
|
|
||||||
label="Variant name"
|
|
||||||
name="name"
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder=""
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
type="name"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<react-mdl-Tooltip
|
|
||||||
className="tooltip"
|
|
||||||
label={
|
|
||||||
<span>
|
|
||||||
Passed to the variant object.
|
|
||||||
<br />
|
|
||||||
Can be anything (json, value, csv)
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"marginBottom": "0",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<strong>
|
|
||||||
Payload
|
|
||||||
</strong>
|
|
||||||
<react-mdl-Icon
|
|
||||||
name="info"
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</react-mdl-Tooltip>
|
|
||||||
<react-mdl-Grid
|
|
||||||
noSpacing={true}
|
|
||||||
>
|
|
||||||
<react-mdl-Cell
|
|
||||||
col={3}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty is-upgraded"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className="mdl-textfield__input"
|
|
||||||
name="type"
|
|
||||||
onChange={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "auto",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value="string"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="string"
|
|
||||||
>
|
|
||||||
string
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="json"
|
|
||||||
>
|
|
||||||
json
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="csv"
|
|
||||||
>
|
|
||||||
csv
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<label
|
|
||||||
className="mdl-textfield__label"
|
|
||||||
htmlFor="textfield-conextName"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</react-mdl-Cell>
|
|
||||||
<react-mdl-Cell
|
|
||||||
col={9}
|
|
||||||
>
|
|
||||||
<react-mdl-Textfield
|
|
||||||
floatingLabel={true}
|
|
||||||
label="Value"
|
|
||||||
name="value"
|
|
||||||
onChange={[Function]}
|
|
||||||
rows={1}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</react-mdl-Cell>
|
|
||||||
</react-mdl-Grid>
|
|
||||||
<a
|
|
||||||
href="#add-override"
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
<small>
|
|
||||||
Add override
|
|
||||||
</small>
|
|
||||||
</a>
|
|
||||||
</react-mdl-DialogContent>
|
|
||||||
<react-mdl-DialogActions>
|
|
||||||
<react-mdl-Button
|
|
||||||
colored={true}
|
|
||||||
raised={true}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</react-mdl-Button>
|
|
||||||
<react-mdl-Button
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</react-mdl-Button>
|
|
||||||
</react-mdl-DialogActions>
|
|
||||||
</react-mdl-Dialog>
|
|
||||||
</form>
|
|
||||||
</section>
|
</section>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -580,167 +256,5 @@ exports[`renders correctly with without variants and no permissions 1`] = `
|
|||||||
<tbody />
|
<tbody />
|
||||||
</table>
|
</table>
|
||||||
<br />
|
<br />
|
||||||
<form
|
|
||||||
onSubmit={[Function]}
|
|
||||||
>
|
|
||||||
<react-mdl-Dialog
|
|
||||||
className="modal"
|
|
||||||
open={false}
|
|
||||||
>
|
|
||||||
<react-mdl-DialogTitle
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"padding": "10px",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<react-mdl-DialogContent
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"minHeight": "350px",
|
|
||||||
"padding": "10px",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"color": "red",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<react-mdl-Textfield
|
|
||||||
floatingLabel={true}
|
|
||||||
label="Variant name"
|
|
||||||
name="name"
|
|
||||||
onChange={[Function]}
|
|
||||||
placeholder=""
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
type="name"
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
<br />
|
|
||||||
<react-mdl-Tooltip
|
|
||||||
className="tooltip"
|
|
||||||
label={
|
|
||||||
<span>
|
|
||||||
Passed to the variant object.
|
|
||||||
<br />
|
|
||||||
Can be anything (json, value, csv)
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"marginBottom": "0",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<strong>
|
|
||||||
Payload
|
|
||||||
</strong>
|
|
||||||
<react-mdl-Icon
|
|
||||||
name="info"
|
|
||||||
/>
|
|
||||||
</p>
|
|
||||||
</react-mdl-Tooltip>
|
|
||||||
<react-mdl-Grid
|
|
||||||
noSpacing={true}
|
|
||||||
>
|
|
||||||
<react-mdl-Cell
|
|
||||||
col={3}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-dirty is-upgraded"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<select
|
|
||||||
className="mdl-textfield__input"
|
|
||||||
name="type"
|
|
||||||
onChange={[Function]}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "auto",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value="string"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
value="string"
|
|
||||||
>
|
|
||||||
string
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="json"
|
|
||||||
>
|
|
||||||
json
|
|
||||||
</option>
|
|
||||||
<option
|
|
||||||
value="csv"
|
|
||||||
>
|
|
||||||
csv
|
|
||||||
</option>
|
|
||||||
</select>
|
|
||||||
<label
|
|
||||||
className="mdl-textfield__label"
|
|
||||||
htmlFor="textfield-conextName"
|
|
||||||
>
|
|
||||||
Type
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</react-mdl-Cell>
|
|
||||||
<react-mdl-Cell
|
|
||||||
col={9}
|
|
||||||
>
|
|
||||||
<react-mdl-Textfield
|
|
||||||
floatingLabel={true}
|
|
||||||
label="Value"
|
|
||||||
name="value"
|
|
||||||
onChange={[Function]}
|
|
||||||
rows={1}
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"width": "100%",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
value=""
|
|
||||||
/>
|
|
||||||
</react-mdl-Cell>
|
|
||||||
</react-mdl-Grid>
|
|
||||||
<a
|
|
||||||
href="#add-override"
|
|
||||||
onClick={[Function]}
|
|
||||||
>
|
|
||||||
<small>
|
|
||||||
Add override
|
|
||||||
</small>
|
|
||||||
</a>
|
|
||||||
</react-mdl-DialogContent>
|
|
||||||
<react-mdl-DialogActions>
|
|
||||||
<react-mdl-Button
|
|
||||||
colored={true}
|
|
||||||
raised={true}
|
|
||||||
type="submit"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</react-mdl-Button>
|
|
||||||
<react-mdl-Button
|
|
||||||
onClick={[Function]}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</react-mdl-Button>
|
|
||||||
</react-mdl-DialogActions>
|
|
||||||
</react-mdl-Dialog>
|
|
||||||
</form>
|
|
||||||
</section>
|
</section>
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -1,22 +1,35 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {
|
import Modal from 'react-modal';
|
||||||
Button,
|
import { Button, Textfield, DialogActions, Grid, Cell, Icon } from 'react-mdl';
|
||||||
Textfield,
|
|
||||||
Dialog,
|
|
||||||
DialogTitle,
|
|
||||||
DialogContent,
|
|
||||||
DialogActions,
|
|
||||||
Grid,
|
|
||||||
Cell,
|
|
||||||
Tooltip,
|
|
||||||
Icon,
|
|
||||||
} from 'react-mdl';
|
|
||||||
import MySelect from '../../common/select';
|
import MySelect from '../../common/select';
|
||||||
import { trim } from '../form/util';
|
import { trim } from '../form/util';
|
||||||
import styles from './variant.scss';
|
|
||||||
import OverrideConfig from './override-config';
|
import OverrideConfig from './override-config';
|
||||||
|
|
||||||
|
Modal.setAppElement('#app');
|
||||||
|
|
||||||
|
const customStyles = {
|
||||||
|
overlay: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
bottom: 0,
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.25)',
|
||||||
|
zIndex: 5,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
width: '500px',
|
||||||
|
maxWidth: '90%',
|
||||||
|
margin: '0',
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
right: 'auto',
|
||||||
|
bottom: 'auto',
|
||||||
|
transform: 'translate(-50%, -50%)',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const payloadOptions = [
|
const payloadOptions = [
|
||||||
{ key: 'string', label: 'string' },
|
{ key: 'string', label: 'string' },
|
||||||
{ key: 'json', label: 'json' },
|
{ key: 'json', label: 'json' },
|
||||||
@ -55,6 +68,7 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
|
|||||||
}, [editVariant]);
|
}, [editVariant]);
|
||||||
|
|
||||||
const setName = e => {
|
const setName = e => {
|
||||||
|
e.preventDefault();
|
||||||
setData({
|
setData({
|
||||||
...data,
|
...data,
|
||||||
[e.target.name]: trim(e.target.value),
|
[e.target.name]: trim(e.target.value),
|
||||||
@ -139,92 +153,70 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={submit}>
|
<Modal isOpen={showDialog} contentLabel="Example Modal" style={customStyles} onRequestClose={onCancel}>
|
||||||
<Dialog open={showDialog} className={styles.modal}>
|
<h3>{title}</h3>
|
||||||
<DialogTitle style={{ padding: '10px' }}>{title}</DialogTitle>
|
|
||||||
|
|
||||||
<DialogContent style={{ minHeight: '350px', padding: '10px' }}>
|
<form onSubmit={submit}>
|
||||||
<p style={{ color: 'red' }}>{error.general}</p>
|
<p style={{ color: 'red' }}>{error.general}</p>
|
||||||
<Textfield
|
<Textfield
|
||||||
floatingLabel
|
floatingLabel
|
||||||
label="Variant name"
|
label="Variant name"
|
||||||
name="name"
|
name="name"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
style={{ width: '100%' }}
|
style={{ width: '100%' }}
|
||||||
value={data.name}
|
value={data.name}
|
||||||
error={error.name}
|
error={error.name}
|
||||||
type="name"
|
type="name"
|
||||||
onChange={setName}
|
onChange={setName}
|
||||||
/>
|
/>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<Tooltip
|
<p style={{ marginBottom: '0' }}>
|
||||||
className={styles.tooltip}
|
<strong>Payload </strong>
|
||||||
label={
|
<Icon name="info" title="Passed to the variant object. Can be anything (json, value, csv)" />
|
||||||
<span>
|
</p>
|
||||||
Passed to the variant object. <br />
|
<Grid noSpacing>
|
||||||
Can be anything (json, value, csv)
|
<Cell col={3}>
|
||||||
</span>
|
<MySelect
|
||||||
}
|
name="type"
|
||||||
>
|
label="Type"
|
||||||
<p style={{ marginBottom: '0' }}>
|
style={{ width: '100%' }}
|
||||||
<strong>Payload </strong>
|
value={payload.type}
|
||||||
<Icon name="info" />
|
options={payloadOptions}
|
||||||
</p>
|
onChange={onPayload}
|
||||||
</Tooltip>
|
/>
|
||||||
<Grid noSpacing>
|
</Cell>
|
||||||
<Cell col={3}>
|
<Cell col={9}>
|
||||||
<MySelect
|
<Textfield
|
||||||
name="type"
|
floatingLabel
|
||||||
label="Type"
|
rows={1}
|
||||||
style={{ width: '100%' }}
|
label="Value"
|
||||||
value={payload.type}
|
name="value"
|
||||||
options={payloadOptions}
|
style={{ width: '100%' }}
|
||||||
onChange={onPayload}
|
value={payload.value}
|
||||||
/>
|
onChange={onPayload}
|
||||||
</Cell>
|
/>
|
||||||
<Cell col={9}>
|
</Cell>
|
||||||
<Textfield
|
</Grid>
|
||||||
floatingLabel
|
{overrides.length > 0 ? (
|
||||||
rows={1}
|
<p style={{ marginBottom: '0' }}>
|
||||||
label="Value"
|
<strong>Overrides </strong>
|
||||||
name="value"
|
<Icon name="info" title="Here you can specify which users that should get this variant." />
|
||||||
style={{ width: '100%' }}
|
</p>
|
||||||
value={payload.value}
|
) : (
|
||||||
onChange={onPayload}
|
undefined
|
||||||
/>
|
)}
|
||||||
</Cell>
|
|
||||||
</Grid>
|
|
||||||
{overrides.length > 0 ? (
|
|
||||||
<Tooltip
|
|
||||||
className={styles.tooltip}
|
|
||||||
label={
|
|
||||||
<div>
|
|
||||||
Here you can specify which users that <br />
|
|
||||||
should get this variant.
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<p style={{ marginBottom: '0' }}>
|
|
||||||
<strong>Overrides </strong>
|
|
||||||
<Icon name="info" />
|
|
||||||
</p>
|
|
||||||
</Tooltip>
|
|
||||||
) : (
|
|
||||||
undefined
|
|
||||||
)}
|
|
||||||
|
|
||||||
<OverrideConfig
|
<OverrideConfig
|
||||||
overrides={overrides}
|
overrides={overrides}
|
||||||
removeOverride={removeOverride}
|
removeOverride={removeOverride}
|
||||||
updateOverrideType={updateOverrideType}
|
updateOverrideType={updateOverrideType}
|
||||||
updateOverrideValues={updateOverrideValues}
|
updateOverrideValues={updateOverrideValues}
|
||||||
updateValues={updateOverrideValues}
|
updateValues={updateOverrideValues}
|
||||||
/>
|
/>
|
||||||
<a href="#add-override" onClick={onAddOverride}>
|
<a href="#add-override" onClick={onAddOverride}>
|
||||||
<small>Add override</small>
|
<small>Add override</small>
|
||||||
</a>
|
</a>
|
||||||
</DialogContent>
|
|
||||||
<DialogActions>
|
<DialogActions>
|
||||||
<Button type="button" raised colored type="submit">
|
<Button type="button" raised colored type="submit">
|
||||||
Save
|
Save
|
||||||
@ -233,8 +225,8 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
|
|||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
</DialogActions>
|
</DialogActions>
|
||||||
</Dialog>
|
</form>
|
||||||
</form>
|
</Modal>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -35,8 +35,8 @@ function OverrideConfig({ overrides, updateOverrideType, updateOverrideValues, r
|
|||||||
updateValues={updateValues(i)}
|
updateValues={updateValues(i)}
|
||||||
/>
|
/>
|
||||||
</Cell>
|
</Cell>
|
||||||
<Cell col={1} style={{ textAlign: 'right' }}>
|
<Cell col={1}>
|
||||||
<IconButton name="delete" onClick={removeOverride(i)} />
|
<IconButton name="delete" onClick={removeOverride(i)} type="button" />
|
||||||
</Cell>
|
</Cell>
|
||||||
</Grid>
|
</Grid>
|
||||||
));
|
));
|
||||||
|
|||||||
@ -122,5 +122,6 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
port: process.env.PORT || 3000,
|
port: process.env.PORT || 3000,
|
||||||
|
host: '0.0.0.0',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user