From 7c0bb127999794a197f8423dc53e089c0813263c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Thu, 4 Jun 2020 15:00:16 +0200
Subject: [PATCH] fix: modal for variants

---
 frontend/src/__mocks__/react-modal.js         |  12 +
 .../update-variant-component-test.jsx.snap    | 486 ------------------
 .../component/feature/variant/add-variant.jsx | 190 ++++---
 .../feature/variant/override-config.jsx       |   4 +-
 frontend/webpack.config.js                    |   1 +
 5 files changed, 106 insertions(+), 587 deletions(-)
 create mode 100644 frontend/src/__mocks__/react-modal.js

diff --git a/frontend/src/__mocks__/react-modal.js b/frontend/src/__mocks__/react-modal.js
new file mode 100644
index 0000000000..cabed1fb38
--- /dev/null
+++ b/frontend/src/__mocks__/react-modal.js
@@ -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;
diff --git a/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap b/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
index bc610fa8d0..e5f09f8c06 100644
--- a/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
+++ b/frontend/src/component/feature/variant/__tests__/__snapshots__/update-variant-component-test.jsx.snap
@@ -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>
 `;
diff --git a/frontend/src/component/feature/variant/add-variant.jsx b/frontend/src/component/feature/variant/add-variant.jsx
index 61653e2d7a..bf63b306c8 100644
--- a/frontend/src/component/feature/variant/add-variant.jsx
+++ b/frontend/src/component/feature/variant/add-variant.jsx
@@ -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>
     );
 }
 
diff --git a/frontend/src/component/feature/variant/override-config.jsx b/frontend/src/component/feature/variant/override-config.jsx
index a775f10cf3..40c05b31ed 100644
--- a/frontend/src/component/feature/variant/override-config.jsx
+++ b/frontend/src/component/feature/variant/override-config.jsx
@@ -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>
     ));
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 274c8dc0a4..791db14ef1 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -122,5 +122,6 @@ module.exports = {
             },
         },
         port: process.env.PORT || 3000,
+        host: '0.0.0.0',
     },
 };