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
|
||||
</a>
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -370,168 +208,6 @@ exports[`renders correctly with without variants 1`] = `
|
||||
Add variant
|
||||
</a>
|
||||
</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>
|
||||
`;
|
||||
|
||||
@ -580,167 +256,5 @@ exports[`renders correctly with without variants and no permissions 1`] = `
|
||||
<tbody />
|
||||
</table>
|
||||
<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>
|
||||
`;
|
||||
|
||||
@ -1,22 +1,35 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Button,
|
||||
Textfield,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Grid,
|
||||
Cell,
|
||||
Tooltip,
|
||||
Icon,
|
||||
} from 'react-mdl';
|
||||
import Modal from 'react-modal';
|
||||
import { Button, Textfield, DialogActions, Grid, Cell, Icon } from 'react-mdl';
|
||||
import MySelect from '../../common/select';
|
||||
import { trim } from '../form/util';
|
||||
import styles from './variant.scss';
|
||||
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 = [
|
||||
{ key: 'string', label: 'string' },
|
||||
{ key: 'json', label: 'json' },
|
||||
@ -55,6 +68,7 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
|
||||
}, [editVariant]);
|
||||
|
||||
const setName = e => {
|
||||
e.preventDefault();
|
||||
setData({
|
||||
...data,
|
||||
[e.target.name]: trim(e.target.value),
|
||||
@ -139,92 +153,70 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={submit}>
|
||||
<Dialog open={showDialog} className={styles.modal}>
|
||||
<DialogTitle style={{ padding: '10px' }}>{title}</DialogTitle>
|
||||
<Modal isOpen={showDialog} contentLabel="Example Modal" style={customStyles} onRequestClose={onCancel}>
|
||||
<h3>{title}</h3>
|
||||
|
||||
<DialogContent style={{ minHeight: '350px', padding: '10px' }}>
|
||||
<p style={{ color: 'red' }}>{error.general}</p>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
label="Variant name"
|
||||
name="name"
|
||||
placeholder=""
|
||||
style={{ width: '100%' }}
|
||||
value={data.name}
|
||||
error={error.name}
|
||||
type="name"
|
||||
onChange={setName}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<Tooltip
|
||||
className={styles.tooltip}
|
||||
label={
|
||||
<span>
|
||||
Passed to the variant object. <br />
|
||||
Can be anything (json, value, csv)
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<p style={{ marginBottom: '0' }}>
|
||||
<strong>Payload </strong>
|
||||
<Icon name="info" />
|
||||
</p>
|
||||
</Tooltip>
|
||||
<Grid noSpacing>
|
||||
<Cell col={3}>
|
||||
<MySelect
|
||||
name="type"
|
||||
label="Type"
|
||||
style={{ width: '100%' }}
|
||||
value={payload.type}
|
||||
options={payloadOptions}
|
||||
onChange={onPayload}
|
||||
/>
|
||||
</Cell>
|
||||
<Cell col={9}>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
rows={1}
|
||||
label="Value"
|
||||
name="value"
|
||||
style={{ width: '100%' }}
|
||||
value={payload.value}
|
||||
onChange={onPayload}
|
||||
/>
|
||||
</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
|
||||
)}
|
||||
<form onSubmit={submit}>
|
||||
<p style={{ color: 'red' }}>{error.general}</p>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
label="Variant name"
|
||||
name="name"
|
||||
placeholder=""
|
||||
style={{ width: '100%' }}
|
||||
value={data.name}
|
||||
error={error.name}
|
||||
type="name"
|
||||
onChange={setName}
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<p style={{ marginBottom: '0' }}>
|
||||
<strong>Payload </strong>
|
||||
<Icon name="info" title="Passed to the variant object. Can be anything (json, value, csv)" />
|
||||
</p>
|
||||
<Grid noSpacing>
|
||||
<Cell col={3}>
|
||||
<MySelect
|
||||
name="type"
|
||||
label="Type"
|
||||
style={{ width: '100%' }}
|
||||
value={payload.type}
|
||||
options={payloadOptions}
|
||||
onChange={onPayload}
|
||||
/>
|
||||
</Cell>
|
||||
<Cell col={9}>
|
||||
<Textfield
|
||||
floatingLabel
|
||||
rows={1}
|
||||
label="Value"
|
||||
name="value"
|
||||
style={{ width: '100%' }}
|
||||
value={payload.value}
|
||||
onChange={onPayload}
|
||||
/>
|
||||
</Cell>
|
||||
</Grid>
|
||||
{overrides.length > 0 ? (
|
||||
<p style={{ marginBottom: '0' }}>
|
||||
<strong>Overrides </strong>
|
||||
<Icon name="info" title="Here you can specify which users that should get this variant." />
|
||||
</p>
|
||||
) : (
|
||||
undefined
|
||||
)}
|
||||
|
||||
<OverrideConfig
|
||||
overrides={overrides}
|
||||
removeOverride={removeOverride}
|
||||
updateOverrideType={updateOverrideType}
|
||||
updateOverrideValues={updateOverrideValues}
|
||||
updateValues={updateOverrideValues}
|
||||
/>
|
||||
<a href="#add-override" onClick={onAddOverride}>
|
||||
<small>Add override</small>
|
||||
</a>
|
||||
</DialogContent>
|
||||
<OverrideConfig
|
||||
overrides={overrides}
|
||||
removeOverride={removeOverride}
|
||||
updateOverrideType={updateOverrideType}
|
||||
updateOverrideValues={updateOverrideValues}
|
||||
updateValues={updateOverrideValues}
|
||||
/>
|
||||
<a href="#add-override" onClick={onAddOverride}>
|
||||
<small>Add override</small>
|
||||
</a>
|
||||
<DialogActions>
|
||||
<Button type="button" raised colored type="submit">
|
||||
Save
|
||||
@ -233,8 +225,8 @@ function AddVariant({ showDialog, closeDialog, save, validateName, editVariant,
|
||||
Cancel
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</form>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -35,8 +35,8 @@ function OverrideConfig({ overrides, updateOverrideType, updateOverrideValues, r
|
||||
updateValues={updateValues(i)}
|
||||
/>
|
||||
</Cell>
|
||||
<Cell col={1} style={{ textAlign: 'right' }}>
|
||||
<IconButton name="delete" onClick={removeOverride(i)} />
|
||||
<Cell col={1}>
|
||||
<IconButton name="delete" onClick={removeOverride(i)} type="button" />
|
||||
</Cell>
|
||||
</Grid>
|
||||
));
|
||||
|
||||
@ -122,5 +122,6 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
port: process.env.PORT || 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user