Allow deletion of environments via UI

Author: rocketeerbkw

services/ui/package.json

@@ -32,6 +32,7 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dom": "^16.4.2",
     "react-highlight-words": "^0.14.0",
+    "react-modal": "^3.8.1",
     "react-select": "^2.1.1",
     "react-typekit": "^1.1.3",
     "recompose": "^0.30.0",

services/ui/src/components/DeleteConfirm/index.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import Modal from '../Modal';
+import { color, fontSize, bp } from '../../variables';
+import withLogic from './logic';
+
+const DeleteConfirm = ({
+  deleteType,
+  deleteName,
+  onDelete,
+  inputValue,
+  setInputValue,
+  open,
+  openModal,
+  closeModal
+}) => {
+  return (
+    <React.Fragment>
+      <button className="button--page" onClick={openModal}>
+        Delete
+      </button>
+      <Modal
+        isOpen={open}
+        onRequestClose={closeModal}
+        contentLabel={`Confirm delete ${deleteType}`}
+      >
+        <React.Fragment>
+          <p>
+            This will delete all resources associated with the {deleteType}{' '}
+            <span className="delete-name">{deleteName}</span> and cannot be
+            undone. Make sure this is something you really want to do!
+          </p>
+          <p>Type the name of the {deleteType} to confirm.</p>
+          <div className="form-input">
+            <input type="text" value={inputValue} onChange={setInputValue} />
+            <a href="#" className="hover-state" onClick={closeModal}>
+              cancel
+            </a>
+            <button
+              className="button--modal"
+              disabled={inputValue !== deleteName}
+              onClick={() => onDelete()}
+            >
+              Delete
+            </button>
+          </div>
+        </React.Fragment>
+      </Modal>
+      <style jsx>{`
+        input {
+          margin-right: 10px;
+          width: 100%;
+        }
+        button {
+          margin-right: 10px;
+          cursor: pointer;
+        }
+        a.hover-state {
+          margin-right: 10px;
+          color: ${color.blue};
+        }
+        .delete-name {
+          font-weight: bold;
+          color: ${color.lightBlue};
+        }
+        .form-input {
+          display: flex;
+        }
+        .button--page {
+          align-self: flex-end;
+          background-color: ${color.midGrey};
+          border: none;
+          border-radius: 20px;
+          color: ${color.darkGrey};
+          font-family: 'source-code-pro', sans-serif;
+          ${fontSize(13)};
+          padding: 3px 20px 2px;
+          text-transform: uppercase;
+          @media ${bp.tinyUp} {
+            align-self: auto;
+          }
+        }
+        .button--modal {
+          align-self: flex-end;
+          background-color: ${color.lightestGrey};
+          border: none;
+          border-radius: 20px;
+          color: ${color.darkGrey};
+          font-family: 'source-code-pro', sans-serif;
+          ${fontSize(13)};
+          padding: 3px 20px 2px;
+          text-transform: uppercase;
+          @media ${bp.tinyUp} {
+            align-self: auto;
+          }
+
+          &:disabled {
+            color: ${color.grey};
+            cursor: default;
+          }
+        }
+      `}</style>
+    </React.Fragment>
+  );
+};
+
+export default withLogic(DeleteConfirm);

services/ui/src/components/DeleteConfirm/logic.js

@@ -0,0 +1,22 @@
+import compose from 'recompose/compose';
+import withState from 'recompose/withState';
+import withHandlers from 'recompose/withHandlers';
+
+const withInputValue = withState('inputValue', 'setInputValue', '');
+const withInputHandlers = withHandlers({
+  setInputValue: ({ setInputValue }) => event =>
+    setInputValue(event.target.value)
+});
+
+const withModalState = withState('open', 'setOpen', false);
+const withModalHandlers = withHandlers({
+  openModal: ({ setOpen }) => () => setOpen(true),
+  closeModal: ({ setOpen }) => () => setOpen(false)
+});
+
+export default compose(
+  withInputValue,
+  withInputHandlers,
+  withModalState,
+  withModalHandlers
+);