merge: Add PatternFly 4 web interface (#161)

This pull requests adds the new web interface based on the PatternFly 4 design framework.
This framework enables us to develop more quickly the interfaces necessary in OpenDC. 

* Remove the OpenDC landing page from the web interface module
* Add support for the PatternFly 4 framework in Next.js
* Relax topology schema requirements
* Migrate UI components to PatternFly 4

1 files changed, 16 insertions, 32 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/modals/Modal.js b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
index 8ab3924c..d4577062 100644
--- a/opendc-web/opendc-web-ui/src/components/modals/Modal.js
+++ b/opendc-web/opendc-web-ui/src/components/modals/Modal.js
@@ -1,43 +1,27 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
-import { Modal as RModal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap'
+import { Button, Modal as PModal, ModalVariant } from '@patternfly/react-core'
 
-function Modal({ children, title, show, onSubmit, onCancel, submitButtonType, submitButtonText }) {
-    const [modal, setModal] = useState(show)
-
-    useEffect(() => setModal(show), [show])
-
-    const toggle = () => setModal(!modal)
-    const cancel = () => {
-        if (onCancel() !== false) {
-            toggle()
-        }
-    }
-    const submit = () => {
-        if (onSubmit() !== false) {
-            toggle()
-        }
-    }
+function Modal({ children, title, isOpen, onSubmit, onCancel, submitButtonType, submitButtonText }) {
+    const actions = [
+        <Button variant={submitButtonType} onClick={onSubmit} key="confirm">
+            {submitButtonText}
+        </Button>,
+        <Button variant="link" onClick={onCancel} key="cancel">
+            Cancel
+        </Button>,
+    ]
 
     return (
-        <RModal isOpen={modal} toggle={cancel}>
-            <ModalHeader toggle={cancel}>{title}</ModalHeader>
-            <ModalBody>{children}</ModalBody>
-            <ModalFooter>
-                <Button color="secondary" onClick={cancel}>
-                    Close
-                </Button>
-                <Button color={submitButtonType} onClick={submit}>
-                    {submitButtonText}
-                </Button>
-            </ModalFooter>
-        </RModal>
+        <PModal variant={ModalVariant.small} isOpen={isOpen} onClose={onCancel} title={title} actions={actions}>
+            {children}
+        </PModal>
     )
 }
 
 Modal.propTypes = {
     title: PropTypes.string.isRequired,
-    show: PropTypes.bool.isRequired,
+    isOpen: PropTypes.bool,
     onSubmit: PropTypes.func.isRequired,
     onCancel: PropTypes.func.isRequired,
     submitButtonType: PropTypes.string,
@@ -48,7 +32,7 @@ Modal.propTypes = {
 Modal.defaultProps = {
     submitButtonType: 'primary',
     submitButtonText: 'Save',
-    show: false,
+    isOpen: false,
 }
 
 export default Modal