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

5 files changed, 0 insertions, 226 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js b/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
deleted file mode 100644
index 8aaaf847..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import Link from 'next/link'
-import { NavLink, NavItem as RNavItem } from 'reactstrap'
-import Navbar, { NavItem } from './Navbar'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faList } from '@fortawesome/free-solid-svg-icons'
-import { Project } from '../../shapes'
-
-const AppNavbarComponent = ({ project, fullWidth }) => (
-    <Navbar fullWidth={fullWidth}>
-        <NavItem route="/projects">
-            <Link href="/projects" passHref>
-                <NavLink title="My Projects">
-                    <FontAwesomeIcon icon={faList} className="mr-2" />
-                    My Projects
-                </NavLink>
-            </Link>
-        </NavItem>
-        {project ? (
-            <RNavItem>
-                <Link href={`/projects/${project._id}`} passHref>
-                    <NavLink title="Current Project">
-                        <span>{project.name}</span>
-                    </NavLink>
-                </Link>
-            </RNavItem>
-        ) : undefined}
-    </Navbar>
-)
-
-AppNavbarComponent.propTypes = {
-    project: Project,
-    fullWidth: PropTypes.bool,
-}
-
-export default AppNavbarComponent
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js b/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
deleted file mode 100644
index 57cb7a53..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import { NavItem, NavLink } from 'reactstrap'
-import Navbar from './Navbar'
-
-const HomeNavbar = () => (
-    <Navbar fullWidth={false}>
-        <NavLink href="#stakeholders">Stakeholders</NavLink>
-        <NavLink href="#modeling">Modeling</NavLink>
-        <NavLink href="#project">Project</NavLink>
-        <NavLink href="#technologies">Technologies</NavLink>
-        <NavLink href="#team">Team</NavLink>
-        <NavLink href="#contact">Contact</NavLink>
-    </Navbar>
-)
-
-export default HomeNavbar
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js b/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
deleted file mode 100644
index 4ab577e0..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-import { NavLink } from 'reactstrap'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSignOutAlt } from '@fortawesome/free-solid-svg-icons'
-
-const LogoutButton = ({ onLogout }) => (
-    <NavLink className="logout" title="Sign out" onClick={onLogout}>
-        <FontAwesomeIcon icon={faSignOutAlt} size="lg" />
-    </NavLink>
-)
-
-LogoutButton.propTypes = {
-    onLogout: PropTypes.func.isRequired,
-}
-
-export default LogoutButton
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
deleted file mode 100644
index dc74bb8f..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useState } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import Image from 'next/image'
-import {
-    Navbar as RNavbar,
-    NavItem as RNavItem,
-    NavLink,
-    NavbarBrand,
-    NavbarToggler,
-    Collapse,
-    Nav,
-    Container,
-} from 'reactstrap'
-import Login from '../../containers/auth/Login'
-import Logout from '../../containers/auth/Logout'
-import ProfileName from '../../containers/auth/ProfileName'
-import { login, navbar, opendcBrand } from './Navbar.module.scss'
-import { useAuth } from '../../auth'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-
-export const NAVBAR_HEIGHT = 60
-
-const GitHubLink = () => (
-    <a
-        href="https://github.com/atlarge-research/opendc"
-        className="ml-2 mr-3 text-dark"
-        style={{ position: 'relative', top: 7 }}
-    >
-        <FontAwesomeIcon icon={faGithub} size="2x" />
-    </a>
-)
-
-export const NavItem = ({ route, children }) => {
-    const router = useRouter()
-    const handleClick = (e) => {
-        e.preventDefault()
-        router.push(route)
-    }
-    return (
-        <RNavItem onClick={handleClick} active={router.asPath === route}>
-            {children}
-        </RNavItem>
-    )
-}
-
-NavItem.propTypes = {
-    route: PropTypes.string.isRequired,
-    children: PropTypes.node,
-}
-
-export const LoggedInSection = () => {
-    const router = useRouter()
-    const { isAuthenticated } = useAuth()
-    return (
-        <Nav navbar className="auth-links">
-            {isAuthenticated ? (
-                [
-                    router.asPath === '/' ? (
-                        <NavItem route="/projects" key="projects">
-                            <Link href="/projects" passHref>
-                                <NavLink title="My Projects" to="/projects">
-                                    My Projects
-                                </NavLink>
-                            </Link>
-                        </NavItem>
-                    ) : (
-                        <RNavItem key="profile">
-                            <NavLink title="My Profile">
-                                <ProfileName />
-                            </NavLink>
-                        </RNavItem>
-                    ),
-                    <NavItem route="logout" key="logout">
-                        <Logout />
-                    </NavItem>,
-                ]
-            ) : (
-                <RNavItem>
-                    <GitHubLink />
-                    <Login visible={true} className={login} />
-                </RNavItem>
-            )}
-        </Nav>
-    )
-}
-
-const Navbar = ({ fullWidth, children }) => {
-    const [isOpen, setIsOpen] = useState(false)
-    const toggle = () => setIsOpen(!isOpen)
-
-    return (
-        <RNavbar fixed="top" color="light" light expand="lg" id="navbar" className={navbar}>
-            <Container fluid={fullWidth}>
-                <NavbarToggler onClick={toggle} />
-                <NavbarBrand href="/" title="OpenDC" className={opendcBrand}>
-                    <div className="mb-n1">
-                        <Image src="/img/logo.png" layout="fixed" width={30} height={30} alt="OpenDC" />
-                    </div>
-                </NavbarBrand>
-
-                <Collapse isOpen={isOpen} navbar>
-                    <Nav className="mr-auto" navbar>
-                        {children}
-                    </Nav>
-                    <LoggedInSection />
-                </Collapse>
-            </Container>
-        </RNavbar>
-    )
-}
-
-Navbar.propTypes = {
-    fullWidth: PropTypes.bool,
-    children: PropTypes.node,
-}
-
-export default Navbar
diff --git a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss b/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
deleted file mode 100644
index 8b9e4c97..00000000
--- a/opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-@import 'src/style/_mixins.scss';
-@import 'src/style/_variables.scss';
-
-.navbar {
-    border-top: $blue 3px solid;
-    border-bottom: $gray-semi-dark 1px solid;
-    color: $gray-very-dark;
-    background: #fafafb;
-}
-
-.opendcBrand {
-    display: inline-block;
-    color: $gray-very-dark;
-
-    transition: background $transition-length;
-
-    img {
-        position: relative;
-        bottom: 3px;
-        display: inline-block;
-        width: 30px;
-    }
-}
-
-.login {
-    height: 40px;
-    background: $blue;
-    border: none;
-    padding-top: 10px;
-
-    @include clickable;
-
-    &:hover {
-        background: $blue-dark;
-    }
-}