feat(ui): Migrate to PatternFly 4 design framework

This change is a rewrite of the existing OpenDC frontend in order to
migrate to the PatternFly 4 design framework.

PatternFly is used by Red Hat for various computing related services such
as OpenShift, Red Hat Virtualization and Cockpit. Since their design
requirements are very similar to those of OpenDC (modeling computing
services), migrating to PatternFly 4 allows us to re-use design choices
from these services.

See https://www.patternfly.org/v4/ for more information about
PatternFly.

4 files changed, 0 insertions, 210 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/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;
-    }
-}