From 829be3c973f5ca837431c3ca10909412b675e668 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 15 Jul 2021 15:10:04 +0200
Subject: refactor(ui): Extract OpenDC landing page from web interface

This change extracts the landing page from the web interface in order to
separate the development of the two. This allows the landing page to be
developed independently of the actual OpenDC web application.
---
 .../src/components/navigation/HomeNavbar.js              | 16 ----------------
 1 file changed, 16 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/HomeNavbar.js

(limited to 'opendc-web/opendc-web-ui/src/components/navigation')

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
-- 
cgit v1.2.3


From 803e13b32cf0ff8b496649fb0a4d6e32400e98a4 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 14 Jul 2021 22:23:40 +0200
Subject: 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.
---
 .../components/navigation/AppNavbarComponent.js    |  37 -------
 .../src/components/navigation/LogoutButton.js      |  17 ---
 .../src/components/navigation/Navbar.js            | 120 ---------------------
 .../src/components/navigation/Navbar.module.scss   |  36 -------
 4 files changed, 210 deletions(-)
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/AppNavbarComponent.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/LogoutButton.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.js
 delete mode 100644 opendc-web/opendc-web-ui/src/components/navigation/Navbar.module.scss

(limited to 'opendc-web/opendc-web-ui/src/components/navigation')

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;
-    }
-}
-- 
cgit v1.2.3