From 873ddacf5abafe43fbc2b6c1033e473c3366dc62 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Tue, 11 May 2021 15:40:11 +0200
Subject: ui: Move component styling into CSS modules

This change updates the frontend codebase by moving the component
styling into CSS module files as opposed to the global styles which we
used before. In addition, I have changed the syntax to the newer SCSS
syntax, which is more similar to CSS.

These changes reduces the styling conflicts that can occur between
components and allows us to migrate to systems that do not support
importing global styles in components. Moreover, we can benefit from
treeshaking using CSS modules.
---
 opendc-web/opendc-web-ui/src/pages/Home.js          | 21 ++++++++++++++-------
 opendc-web/opendc-web-ui/src/pages/Home.module.scss | 16 ++++++++++++++++
 opendc-web/opendc-web-ui/src/pages/Home.sass        |  9 ---------
 opendc-web/opendc-web-ui/src/pages/NotFound.js      |  4 ++--
 .../opendc-web-ui/src/pages/NotFound.module.scss    |  8 ++++++++
 opendc-web/opendc-web-ui/src/pages/NotFound.sass    | 11 -----------
 6 files changed, 40 insertions(+), 29 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/pages/Home.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/Home.sass
 create mode 100644 opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/NotFound.sass

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/Home.js b/opendc-web/opendc-web-ui/src/pages/Home.js
index fb383426..ee930fbe 100644
--- a/opendc-web/opendc-web-ui/src/pages/Home.js
+++ b/opendc-web/opendc-web-ui/src/pages/Home.js
@@ -8,7 +8,14 @@ import StakeholderSection from '../components/home/StakeholderSection'
 import TeamSection from '../components/home/TeamSection'
 import TechnologiesSection from '../components/home/TechnologiesSection'
 import HomeNavbar from '../components/navigation/HomeNavbar'
-import './Home.sass'
+import {
+    introSection,
+    stakeholderSection,
+    modelingSection,
+    simulationSection,
+    technologiesSection,
+    teamSection,
+} from './Home.module.scss'
 import { useDocumentTitle } from '../util/hooks'
 
 function Home() {
@@ -18,12 +25,12 @@ function Home() {
             <HomeNavbar />
             <div className="body-wrapper page-container">
                 <JumbotronHeader />
-                <IntroSection />
-                <StakeholderSection />
-                <ModelingSection />
-                <SimulationSection />
-                <TechnologiesSection />
-                <TeamSection />
+                <IntroSection className={introSection} />
+                <StakeholderSection className={stakeholderSection} />
+                <ModelingSection className={modelingSection} />
+                <SimulationSection className={simulationSection} />
+                <TechnologiesSection className={technologiesSection} />
+                <TeamSection className={teamSection} />
                 <ContactSection />
             </div>
         </div>
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.module.scss b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
new file mode 100644
index 00000000..aed1d88f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
@@ -0,0 +1,16 @@
+.bodyWrapper {
+    position: relative;
+    overflow-y: hidden;
+}
+
+.introSection,
+.modelingSection,
+.technologiesSection {
+    background-color: #fff;
+}
+
+.stakeholderSection,
+.simulationSection,
+.teamSection {
+    background-color: #f2f2f2;
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.sass b/opendc-web/opendc-web-ui/src/pages/Home.sass
deleted file mode 100644
index 79cb9698..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Home.sass
+++ /dev/null
@@ -1,9 +0,0 @@
-.body-wrapper
-    position: relative
-    overflow-y: hidden
-
-.intro-section, .modeling-section, .technologies-section
-    background-color: #fff
-
-.stakeholder-section, .simulation-section, .team-section
-    background-color: #f2f2f2
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.js b/opendc-web/opendc-web-ui/src/pages/NotFound.js
index b933ffa5..409ffa0e 100644
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.js
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.js
@@ -1,12 +1,12 @@
 import React from 'react'
 import TerminalWindow from '../components/not-found/TerminalWindow'
-import './NotFound.sass'
+import style from './NotFound.module.scss'
 import { useDocumentTitle } from '../util/hooks'
 
 const NotFound = () => {
     useDocumentTitle('Page Not Found - OpenDC')
     return (
-        <div className="not-found-backdrop">
+        <div className={style['not-found-backdrop']}>
             <TerminalWindow />
         </div>
     )
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
new file mode 100644
index 00000000..e91c2780
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
@@ -0,0 +1,8 @@
+.not-found-backdrop {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    background-image: linear-gradient(135deg, #00678a, #008fbf, #00a6d6);
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.sass b/opendc-web/opendc-web-ui/src/pages/NotFound.sass
deleted file mode 100644
index 59231f7a..00000000
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.sass
+++ /dev/null
@@ -1,11 +0,0 @@
-.not-found-backdrop
-    position: absolute
-    left: 0
-    top: 0
-
-    margin: 0
-    padding: 0
-    width: 100%
-    height: 100%
-
-    background-image: linear-gradient(135deg, #00678a, #008fbf, #00A6D6)
-- 
cgit v1.2.3


From 4397a959e806bf476be4c81bc804616adf58b969 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Wed, 12 May 2021 22:42:12 +0200
Subject: ui: Migrate from CRA to Next.js

This change updates the web frontend to use Next.js instead of Create
React App (CRA). Next.js enables the possibility of rendering pages on
the server side (which reduces the time to first frame) and overall
provides a better development experience.

Future commits will try to futher optimize the implementation for
Next.js.
---
 opendc-web/opendc-web-ui/src/pages/404.js          |  19 ++++
 opendc-web/opendc-web-ui/src/pages/404.module.scss |   8 ++
 opendc-web/opendc-web-ui/src/pages/App.js          | 103 ---------------------
 opendc-web/opendc-web-ui/src/pages/Home.js         |  40 --------
 .../opendc-web-ui/src/pages/Home.module.scss       |  16 ----
 opendc-web/opendc-web-ui/src/pages/NotFound.js     |  15 ---
 .../opendc-web-ui/src/pages/NotFound.module.scss   |   8 --
 opendc-web/opendc-web-ui/src/pages/Profile.js      |  31 -------
 opendc-web/opendc-web-ui/src/pages/Projects.js     |  30 ------
 opendc-web/opendc-web-ui/src/pages/_app.js         |  42 +++++++++
 opendc-web/opendc-web-ui/src/pages/_document.js    |  96 +++++++++++++++++++
 opendc-web/opendc-web-ui/src/pages/index.js        |  42 +++++++++
 .../opendc-web-ui/src/pages/index.module.scss      |  16 ++++
 opendc-web/opendc-web-ui/src/pages/profile.js      |  54 +++++++++++
 .../src/pages/projects/[project]/index.js          |  37 ++++++++
 .../projects/[project]/portfolios/[portfolio].js   |  37 ++++++++
 .../opendc-web-ui/src/pages/projects/index.js      |  36 +++++++
 17 files changed, 387 insertions(+), 243 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/pages/404.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/404.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/App.js
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/Home.js
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/Home.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/NotFound.js
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/Profile.js
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/Projects.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/_app.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/_document.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/index.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/index.module.scss
 create mode 100644 opendc-web/opendc-web-ui/src/pages/profile.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
 create mode 100644 opendc-web/opendc-web-ui/src/pages/projects/index.js

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/404.js b/opendc-web/opendc-web-ui/src/pages/404.js
new file mode 100644
index 00000000..cc9281fc
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/404.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Head from 'next/head'
+import TerminalWindow from '../components/not-found/TerminalWindow'
+import style from './404.module.scss'
+
+const NotFound = () => {
+    return (
+        <>
+            <Head>
+                <title>Page Not Found - OpenDC</title>
+            </Head>
+            <div className={style['not-found-backdrop']}>
+                <TerminalWindow />
+            </div>
+        </>
+    )
+}
+
+export default NotFound
diff --git a/opendc-web/opendc-web-ui/src/pages/404.module.scss b/opendc-web/opendc-web-ui/src/pages/404.module.scss
new file mode 100644
index 00000000..e91c2780
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/404.module.scss
@@ -0,0 +1,8 @@
+.not-found-backdrop {
+    display: flex;
+
+    width: 100%;
+    height: 100%;
+
+    background-image: linear-gradient(135deg, #00678a, #008fbf, #00a6d6);
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/App.js b/opendc-web/opendc-web-ui/src/pages/App.js
deleted file mode 100644
index ea62e8dc..00000000
--- a/opendc-web/opendc-web-ui/src/pages/App.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
-import { HotKeys } from 'react-hotkeys'
-import { useDispatch, useSelector } from 'react-redux'
-import { openPortfolioSucceeded } from '../actions/portfolios'
-import { openProjectSucceeded } from '../actions/projects'
-import ToolPanelComponent from '../components/app/map/controls/ToolPanelComponent'
-import LoadingScreen from '../components/app/map/LoadingScreen'
-import ScaleIndicatorContainer from '../containers/app/map/controls/ScaleIndicatorContainer'
-import MapStage from '../containers/app/map/MapStage'
-import TopologySidebarContainer from '../containers/app/sidebars/topology/TopologySidebarContainer'
-import DeleteMachineModal from '../containers/modals/DeleteMachineModal'
-import DeleteRackModal from '../containers/modals/DeleteRackModal'
-import DeleteRoomModal from '../containers/modals/DeleteRoomModal'
-import EditRackNameModal from '../containers/modals/EditRackNameModal'
-import EditRoomNameModal from '../containers/modals/EditRoomNameModal'
-import NewTopologyModal from '../containers/modals/NewTopologyModal'
-import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
-import ProjectSidebarContainer from '../containers/app/sidebars/project/ProjectSidebarContainer'
-import { openScenarioSucceeded } from '../actions/scenarios'
-import NewPortfolioModal from '../containers/modals/NewPortfolioModal'
-import NewScenarioModal from '../containers/modals/NewScenarioModal'
-import PortfolioResultsContainer from '../containers/app/results/PortfolioResultsContainer'
-import KeymapConfiguration from '../shortcuts/keymap'
-import { useDocumentTitle } from '../util/hooks'
-
-const App = ({ projectId, portfolioId, scenarioId }) => {
-    const projectName = useSelector(
-        (state) =>
-            state.currentProjectId !== '-1' &&
-            state.objects.project[state.currentProjectId] &&
-            state.objects.project[state.currentProjectId].name
-    )
-    const topologyIsLoading = useSelector((state) => state.currentTopologyId === '-1')
-
-    const dispatch = useDispatch()
-    useEffect(() => {
-        if (scenarioId) {
-            dispatch(openScenarioSucceeded(projectId, portfolioId, scenarioId))
-        } else if (portfolioId) {
-            dispatch(openPortfolioSucceeded(projectId, portfolioId))
-        } else {
-            dispatch(openProjectSucceeded(projectId))
-        }
-    }, [projectId, portfolioId, scenarioId, dispatch])
-
-    const constructionElements = topologyIsLoading ? (
-        <div className="full-height d-flex align-items-center justify-content-center">
-            <LoadingScreen />
-        </div>
-    ) : (
-        <div className="full-height">
-            <MapStage />
-            <ScaleIndicatorContainer />
-            <ToolPanelComponent />
-            <ProjectSidebarContainer />
-            <TopologySidebarContainer />
-        </div>
-    )
-
-    const portfolioElements = (
-        <div className="full-height app-page-container">
-            <ProjectSidebarContainer />
-            <div className="container-fluid full-height">
-                <PortfolioResultsContainer />
-            </div>
-        </div>
-    )
-
-    const scenarioElements = (
-        <div className="full-height app-page-container">
-            <ProjectSidebarContainer />
-            <div className="container-fluid full-height">
-                <h2>Scenario loading</h2>
-            </div>
-        </div>
-    )
-
-    useDocumentTitle(projectName ? projectName + ' - OpenDC' : 'Simulation - OpenDC')
-
-    return (
-        <HotKeys keyMap={KeymapConfiguration} className="page-container full-height">
-            <AppNavbarContainer fullWidth={true} />
-            {scenarioId ? scenarioElements : portfolioId ? portfolioElements : constructionElements}
-            <NewTopologyModal />
-            <NewPortfolioModal />
-            <NewScenarioModal />
-            <EditRoomNameModal />
-            <DeleteRoomModal />
-            <EditRackNameModal />
-            <DeleteRackModal />
-            <DeleteMachineModal />
-        </HotKeys>
-    )
-}
-
-App.propTypes = {
-    projectId: PropTypes.string.isRequired,
-    portfolioId: PropTypes.string,
-    scenarioId: PropTypes.string,
-}
-
-export default App
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.js b/opendc-web/opendc-web-ui/src/pages/Home.js
deleted file mode 100644
index ee930fbe..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Home.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import ContactSection from '../components/home/ContactSection'
-import IntroSection from '../components/home/IntroSection'
-import JumbotronHeader from '../components/home/JumbotronHeader'
-import ModelingSection from '../components/home/ModelingSection'
-import SimulationSection from '../components/home/SimulationSection'
-import StakeholderSection from '../components/home/StakeholderSection'
-import TeamSection from '../components/home/TeamSection'
-import TechnologiesSection from '../components/home/TechnologiesSection'
-import HomeNavbar from '../components/navigation/HomeNavbar'
-import {
-    introSection,
-    stakeholderSection,
-    modelingSection,
-    simulationSection,
-    technologiesSection,
-    teamSection,
-} from './Home.module.scss'
-import { useDocumentTitle } from '../util/hooks'
-
-function Home() {
-    useDocumentTitle('OpenDC')
-    return (
-        <div>
-            <HomeNavbar />
-            <div className="body-wrapper page-container">
-                <JumbotronHeader />
-                <IntroSection className={introSection} />
-                <StakeholderSection className={stakeholderSection} />
-                <ModelingSection className={modelingSection} />
-                <SimulationSection className={simulationSection} />
-                <TechnologiesSection className={technologiesSection} />
-                <TeamSection className={teamSection} />
-                <ContactSection />
-            </div>
-        </div>
-    )
-}
-
-export default Home
diff --git a/opendc-web/opendc-web-ui/src/pages/Home.module.scss b/opendc-web/opendc-web-ui/src/pages/Home.module.scss
deleted file mode 100644
index aed1d88f..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Home.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.bodyWrapper {
-    position: relative;
-    overflow-y: hidden;
-}
-
-.introSection,
-.modelingSection,
-.technologiesSection {
-    background-color: #fff;
-}
-
-.stakeholderSection,
-.simulationSection,
-.teamSection {
-    background-color: #f2f2f2;
-}
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.js b/opendc-web/opendc-web-ui/src/pages/NotFound.js
deleted file mode 100644
index 409ffa0e..00000000
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import TerminalWindow from '../components/not-found/TerminalWindow'
-import style from './NotFound.module.scss'
-import { useDocumentTitle } from '../util/hooks'
-
-const NotFound = () => {
-    useDocumentTitle('Page Not Found - OpenDC')
-    return (
-        <div className={style['not-found-backdrop']}>
-            <TerminalWindow />
-        </div>
-    )
-}
-
-export default NotFound
diff --git a/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss b/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
deleted file mode 100644
index e91c2780..00000000
--- a/opendc-web/opendc-web-ui/src/pages/NotFound.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.not-found-backdrop {
-    display: flex;
-
-    width: 100%;
-    height: 100%;
-
-    background-image: linear-gradient(135deg, #00678a, #008fbf, #00a6d6);
-}
diff --git a/opendc-web/opendc-web-ui/src/pages/Profile.js b/opendc-web/opendc-web-ui/src/pages/Profile.js
deleted file mode 100644
index ea781686..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Profile.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { useDispatch } from 'react-redux'
-import { openDeleteProfileModal } from '../actions/modals/profile'
-import DeleteProfileModal from '../containers/modals/DeleteProfileModal'
-import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
-import { useDocumentTitle } from '../util/hooks'
-
-const Profile = () => {
-    const dispatch = useDispatch()
-    const onDelete = () => dispatch(openDeleteProfileModal())
-
-    useDocumentTitle('My Profile - OpenDC')
-    return (
-        <div className="full-height">
-            <AppNavbarContainer fullWidth={false} />
-            <div className="container text-page-container full-height">
-                <button className="btn btn-danger mb-2 ml-auto mr-auto" style={{ maxWidth: 300 }} onClick={onDelete}>
-                    Delete my account on OpenDC
-                </button>
-                <p className="text-muted text-center">
-                    This does not delete your Google account, but simply disconnects it from the OpenDC platform and
-                    deletes any project info that is associated with you (projects you own and any authorizations you
-                    may have on other projects).
-                </p>
-            </div>
-            <DeleteProfileModal />
-        </div>
-    )
-}
-
-export default Profile
diff --git a/opendc-web/opendc-web-ui/src/pages/Projects.js b/opendc-web/opendc-web-ui/src/pages/Projects.js
deleted file mode 100644
index 5e642a03..00000000
--- a/opendc-web/opendc-web-ui/src/pages/Projects.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import React, { useEffect } from 'react'
-import { useDispatch } from 'react-redux'
-import { fetchAuthorizationsOfCurrentUser } from '../actions/users'
-import ProjectFilterPanel from '../components/projects/FilterPanel'
-import NewProjectModal from '../containers/modals/NewProjectModal'
-import NewProjectButtonContainer from '../containers/projects/NewProjectButtonContainer'
-import VisibleProjectList from '../containers/projects/VisibleProjectAuthList'
-import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
-import { useDocumentTitle } from '../util/hooks'
-
-function Projects() {
-    const dispatch = useDispatch()
-
-    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
-    useDocumentTitle('My Projects - OpenDC')
-
-    return (
-        <div className="full-height">
-            <AppNavbarContainer fullWidth={false} />
-            <div className="container text-page-container full-height">
-                <ProjectFilterPanel />
-                <VisibleProjectList />
-                <NewProjectButtonContainer />
-            </div>
-            <NewProjectModal />
-        </div>
-    )
-}
-
-export default Projects
diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
new file mode 100644
index 00000000..77ffa698
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import Head from 'next/head'
+import { Provider } from 'react-redux'
+import { useStore } from '../store/configure-store'
+import '../index.scss'
+
+export default function App({ Component, pageProps }) {
+    const store = useStore(pageProps.initialReduxState)
+
+    return (
+        <>
+            <Head>
+                <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+                <meta name="theme-color" content="#00A6D6" />
+            </Head>
+            <Provider store={store}>
+                <Component {...pageProps} />
+            </Provider>
+        </>
+    )
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/_document.js b/opendc-web/opendc-web-ui/src/pages/_document.js
new file mode 100644
index 00000000..943ae395
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/_document.js
@@ -0,0 +1,96 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class OpenDCDocument extends Document {
+    render() {
+        return (
+            <Html>
+                <Head>
+                    <meta charSet="utf-8" />
+                    <meta name="theme-color" content="#00A6D6" />
+                    <meta
+                        name="description"
+                        content="Collaborative Datacenter Simulation and Exploration for Everybody"
+                    />
+                    <meta name="author" content="@Large Research" />
+                    <meta
+                        name="keywords"
+                        content="OpenDC, Datacenter, Simulation, Simulator, Collaborative, Distributed, Cluster"
+                    />
+                    <link rel="manifest" href="/manifest.json" />
+                    <link rel="shortcut icon" href="/favicon.ico" />
+
+                    {/* Twitter Card data */}
+                    <meta name="twitter:card" content="summary" />
+                    <meta name="twitter:site" content="@LargeResearch" />
+                    <meta name="twitter:title" content="OpenDC" />
+                    <meta
+                        name="twitter:description"
+                        content="Collaborative Datacenter Simulation and Exploration for Everybody"
+                    />
+                    <meta name="twitter:creator" content="@LargeResearch" />
+                    <meta name="twitter:image" content="http://opendc.org/img/logo.png" />
+
+                    {/* OpenGraph meta tags */}
+                    <meta property="og:title" content="OpenDC" />
+                    <meta property="og:site_name" content="OpenDC" />
+                    <meta property="og:type" content="website" />
+                    <meta property="og:image" content="http://opendc.org/img/logo.png" />
+                    <meta property="og:url" content="http://opendc.org/" />
+                    <meta
+                        property="og:description"
+                        content="OpenDC provides collaborative online datacenter modeling, diverse and effective datacenter simulation, and exploratory datacenter performance feedback."
+                    />
+                    <meta property="og:locale" content="en_US" />
+
+                    {/* CDN Dependencies */}
+                    <link
+                        href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
+                        rel="stylesheet"
+                    />
+                    <script async src="https://use.fontawesome.com/ece66a2e7c.js" />
+
+                    {/* Google Analytics */}
+                    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-84285092-3" />
+                    <script
+                        dangerouslySetInnerHTML={{
+                            __html: `
+                            window.dataLayer = window.dataLayer || [];
+                            function gtag(){dataLayer.push(arguments);}
+                            gtag('js', new Date());
+                            gtag('config', 'UA-84285092-3');
+                        `,
+                        }}
+                    />
+                </Head>
+                <body>
+                    <Main />
+                    <NextScript />
+                </body>
+            </Html>
+        )
+    }
+}
+
+export default OpenDCDocument
diff --git a/opendc-web/opendc-web-ui/src/pages/index.js b/opendc-web/opendc-web-ui/src/pages/index.js
new file mode 100644
index 00000000..bb904eb6
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/index.js
@@ -0,0 +1,42 @@
+import React from 'react'
+import Head from 'next/head'
+import ContactSection from '../components/home/ContactSection'
+import IntroSection from '../components/home/IntroSection'
+import JumbotronHeader from '../components/home/JumbotronHeader'
+import ModelingSection from '../components/home/ModelingSection'
+import SimulationSection from '../components/home/SimulationSection'
+import StakeholderSection from '../components/home/StakeholderSection'
+import TeamSection from '../components/home/TeamSection'
+import TechnologiesSection from '../components/home/TechnologiesSection'
+import HomeNavbar from '../components/navigation/HomeNavbar'
+import {
+    introSection,
+    stakeholderSection,
+    modelingSection,
+    simulationSection,
+    technologiesSection,
+    teamSection,
+} from './index.module.scss'
+
+function Home() {
+    return (
+        <>
+            <Head>
+                <title>OpenDC</title>
+            </Head>
+            <HomeNavbar />
+            <div className="body-wrapper page-container">
+                <JumbotronHeader />
+                <IntroSection className={introSection} />
+                <StakeholderSection className={stakeholderSection} />
+                <ModelingSection className={modelingSection} />
+                <SimulationSection className={simulationSection} />
+                <TechnologiesSection className={technologiesSection} />
+                <TeamSection className={teamSection} />
+                <ContactSection />
+            </div>
+        </>
+    )
+}
+
+export default Home
diff --git a/opendc-web/opendc-web-ui/src/pages/index.module.scss b/opendc-web/opendc-web-ui/src/pages/index.module.scss
new file mode 100644
index 00000000..aed1d88f
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/index.module.scss
@@ -0,0 +1,16 @@
+.bodyWrapper {
+    position: relative;
+    overflow-y: hidden;
+}
+
+.introSection,
+.modelingSection,
+.technologiesSection {
+    background-color: #fff;
+}
+
+.stakeholderSection,
+.simulationSection,
+.teamSection {
+    background-color: #f2f2f2;
+}
diff --git a/opendc-web/opendc-web-ui/src/pages/profile.js b/opendc-web/opendc-web-ui/src/pages/profile.js
new file mode 100644
index 00000000..de60037b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/profile.js
@@ -0,0 +1,54 @@
+import React, { useState } from 'react'
+import Head from 'next/head'
+import { useDispatch } from 'react-redux'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+import ConfirmationModal from '../components/modals/ConfirmationModal'
+import { deleteCurrentUser } from '../actions/users'
+import { useRequireAuth } from '../auth/hook'
+
+const Profile = () => {
+    useRequireAuth()
+
+    const dispatch = useDispatch()
+
+    const [isDeleteModalOpen, setDeleteModalOpen] = useState(false)
+    const onDelete = (isConfirmed) => {
+        if (isConfirmed) {
+            dispatch(deleteCurrentUser())
+        }
+        setDeleteModalOpen(false)
+    }
+
+    return (
+        <>
+            <Head>
+                <title>My Profile - OpenDC</title>
+            </Head>
+            <div className="full-height">
+                <AppNavbarContainer fullWidth={false} />
+                <div className="container text-page-container full-height">
+                    <button
+                        className="btn btn-danger mb-2 ml-auto mr-auto"
+                        style={{ maxWidth: 300 }}
+                        onClick={() => setDeleteModalOpen(true)}
+                    >
+                        Delete my account on OpenDC
+                    </button>
+                    <p className="text-muted text-center">
+                        This does not delete your Google account, but simply disconnects it from the OpenDC platform and
+                        deletes any project info that is associated with you (projects you own and any authorizations
+                        you may have on other projects).
+                    </p>
+                </div>
+                <ConfirmationModal
+                    title="Delete my account"
+                    message="Are you sure you want to delete your OpenDC account?"
+                    show={isDeleteModalOpen}
+                    callback={onDelete}
+                />
+            </div>
+        </>
+    )
+}
+
+export default Profile
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
new file mode 100644
index 00000000..72316bc9
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useRouter } from 'next/router'
+import App from '../../../containers/app/App'
+
+function Project() {
+    const router = useRouter()
+    const { project } = router.query
+
+    if (project) {
+        return <App projectId={project} />
+    }
+
+    return <div />
+}
+
+export default Project
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
new file mode 100644
index 00000000..76a8d23b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/portfolios/[portfolio].js
@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { useRouter } from 'next/router'
+import App from '../../../../containers/app/App'
+
+function Project() {
+    const router = useRouter()
+    const { project, portfolio } = router.query
+
+    if (project && portfolio) {
+        return <App projectId={project} portfolioId={portfolio} />
+    }
+
+    return <div />
+}
+
+export default Project
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
new file mode 100644
index 00000000..bea9ad93
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react'
+import Head from 'next/head'
+import { useDispatch } from 'react-redux'
+import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
+import ProjectFilterPanel from '../../components/projects/FilterPanel'
+import NewProjectModal from '../../containers/modals/NewProjectModal'
+import NewProjectButtonContainer from '../../containers/projects/NewProjectButtonContainer'
+import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
+import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
+import { useRequireAuth } from '../../auth/hook'
+
+function Projects() {
+    const dispatch = useDispatch()
+
+    useRequireAuth()
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
+
+    return (
+        <>
+            <Head>
+                <title>My Projects - OpenDC</title>
+            </Head>
+            <div className="full-height">
+                <AppNavbarContainer fullWidth={false} />
+                <div className="container text-page-container full-height">
+                    <ProjectFilterPanel />
+                    <VisibleProjectList />
+                    <NewProjectButtonContainer />
+                </div>
+                <NewProjectModal />
+            </div>
+        </>
+    )
+}
+
+export default Projects
-- 
cgit v1.2.3


From 1891a6f3963d3ddeae0ea093f9a7e3608a97b4d7 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 16:35:01 +0200
Subject: ui: Simplify projects page

This change simplifies the logic and components of the projects page and
reduces its dependency on Redux for simple operations.
---
 .../opendc-web-ui/src/pages/projects/index.js      | 23 +++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index bea9ad93..dd61751f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,19 +1,21 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
 import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
-import NewProjectModal from '../../containers/modals/NewProjectModal'
-import NewProjectButtonContainer from '../../containers/projects/NewProjectButtonContainer'
+import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth/hook'
+import { Container } from 'reactstrap'
 
 function Projects() {
+    useRequireAuth()
+
     const dispatch = useDispatch()
+    const [filter, setFilter] = useState('SHOW_ALL')
 
-    useRequireAuth()
-    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()))
+    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()), [])
 
     return (
         <>
@@ -22,12 +24,11 @@ function Projects() {
             </Head>
             <div className="full-height">
                 <AppNavbarContainer fullWidth={false} />
-                <div className="container text-page-container full-height">
-                    <ProjectFilterPanel />
-                    <VisibleProjectList />
-                    <NewProjectButtonContainer />
-                </div>
-                <NewProjectModal />
+                <Container className="text-page-container">
+                    <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
+                    <VisibleProjectList filter={filter} />
+                    <NewProjectContainer />
+                </Container>
             </div>
         </>
     )
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/pages/_app.js         |  2 +-
 opendc-web/opendc-web-ui/src/pages/profile.js      | 26 ++++++++++++++++++++--
 .../opendc-web-ui/src/pages/projects/index.js      |  4 ++--
 3 files changed, 27 insertions(+), 5 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index 77ffa698..761ae0cd 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -22,7 +22,7 @@
 
 import Head from 'next/head'
 import { Provider } from 'react-redux'
-import { useStore } from '../store/configure-store'
+import { useStore } from '../redux'
 import '../index.scss'
 
 export default function App({ Component, pageProps }) {
diff --git a/opendc-web/opendc-web-ui/src/pages/profile.js b/opendc-web/opendc-web-ui/src/pages/profile.js
index de60037b..97afc4d9 100644
--- a/opendc-web/opendc-web-ui/src/pages/profile.js
+++ b/opendc-web/opendc-web-ui/src/pages/profile.js
@@ -1,10 +1,32 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
 import React, { useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
 import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
 import ConfirmationModal from '../components/modals/ConfirmationModal'
-import { deleteCurrentUser } from '../actions/users'
-import { useRequireAuth } from '../auth/hook'
+import { deleteCurrentUser } from '../redux/actions/users'
+import { useRequireAuth } from '../auth'
 
 const Profile = () => {
     useRequireAuth()
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index dd61751f..05e9514f 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
-import { fetchAuthorizationsOfCurrentUser } from '../../actions/users'
+import { fetchAuthorizationsOfCurrentUser } from '../../redux/actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import NewProjectContainer from '../../containers/projects/NewProjectContainer'
 import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
-import { useRequireAuth } from '../../auth/hook'
+import { useRequireAuth } from '../../auth'
 import { Container } from 'reactstrap'
 
 function Projects() {
-- 
cgit v1.2.3


From a6865b86cc8d710374fc0b6cfcbd2b863f1942a9 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 23:18:02 +0200
Subject: ui: Migrate to Auth0 as Identity Provider

This change updates the frontend codebase to move away from the Google
login and instead use Auth0 as generic Identity Provider. This allows
users to login with other accounts as well.

Since Auth0 has a free tier, users can experiment themselves with OpenDC
locally without having to pay for the login functionality. The code has
been written so that we should be able to migrate away from Auth0 once
it is not a suitable Identity Provider for OpenDC anymore.
---
 opendc-web/opendc-web-ui/src/pages/_app.js         | 20 ++++--
 opendc-web/opendc-web-ui/src/pages/logout.js       | 39 +++++++++++
 opendc-web/opendc-web-ui/src/pages/profile.js      | 76 ----------------------
 .../opendc-web-ui/src/pages/projects/index.js      |  8 +--
 4 files changed, 58 insertions(+), 85 deletions(-)
 create mode 100644 opendc-web/opendc-web-ui/src/pages/logout.js
 delete mode 100644 opendc-web/opendc-web-ui/src/pages/profile.js

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index 761ae0cd..f9727a7a 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -24,19 +24,29 @@ import Head from 'next/head'
 import { Provider } from 'react-redux'
 import { useStore } from '../redux'
 import '../index.scss'
+import { AuthProvider, useAuth } from '../auth'
 
-export default function App({ Component, pageProps }) {
-    const store = useStore(pageProps.initialReduxState)
+// This setup is necessary to forward the Auth0 context to the Redux context
+const Inner = ({ Component, pageProps }) => {
+    const auth = useAuth()
+    const store = useStore(pageProps.initialReduxState, { auth })
+    return (
+        <Provider store={store}>
+            <Component {...pageProps} />
+        </Provider>
+    )
+}
 
+export default function App(props) {
     return (
         <>
             <Head>
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
                 <meta name="theme-color" content="#00A6D6" />
             </Head>
-            <Provider store={store}>
-                <Component {...pageProps} />
-            </Provider>
+            <AuthProvider>
+                <Inner {...props} />
+            </AuthProvider>
         </>
     )
 }
diff --git a/opendc-web/opendc-web-ui/src/pages/logout.js b/opendc-web/opendc-web-ui/src/pages/logout.js
new file mode 100644
index 00000000..e96e0605
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/pages/logout.js
@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2021 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import Head from 'next/head'
+import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
+
+function Logout() {
+    return (
+        <>
+            <Head>
+                <title>Logged Out - OpenDC</title>
+            </Head>
+            <AppNavbarContainer fullWidth={false} />
+            <span>Logged out successfully</span>
+        </>
+    )
+}
+
+export default Logout
diff --git a/opendc-web/opendc-web-ui/src/pages/profile.js b/opendc-web/opendc-web-ui/src/pages/profile.js
deleted file mode 100644
index 97afc4d9..00000000
--- a/opendc-web/opendc-web-ui/src/pages/profile.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
- * Copyright (c) 2021 AtLarge Research
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import React, { useState } from 'react'
-import Head from 'next/head'
-import { useDispatch } from 'react-redux'
-import AppNavbarContainer from '../containers/navigation/AppNavbarContainer'
-import ConfirmationModal from '../components/modals/ConfirmationModal'
-import { deleteCurrentUser } from '../redux/actions/users'
-import { useRequireAuth } from '../auth'
-
-const Profile = () => {
-    useRequireAuth()
-
-    const dispatch = useDispatch()
-
-    const [isDeleteModalOpen, setDeleteModalOpen] = useState(false)
-    const onDelete = (isConfirmed) => {
-        if (isConfirmed) {
-            dispatch(deleteCurrentUser())
-        }
-        setDeleteModalOpen(false)
-    }
-
-    return (
-        <>
-            <Head>
-                <title>My Profile - OpenDC</title>
-            </Head>
-            <div className="full-height">
-                <AppNavbarContainer fullWidth={false} />
-                <div className="container text-page-container full-height">
-                    <button
-                        className="btn btn-danger mb-2 ml-auto mr-auto"
-                        style={{ maxWidth: 300 }}
-                        onClick={() => setDeleteModalOpen(true)}
-                    >
-                        Delete my account on OpenDC
-                    </button>
-                    <p className="text-muted text-center">
-                        This does not delete your Google account, but simply disconnects it from the OpenDC platform and
-                        deletes any project info that is associated with you (projects you own and any authorizations
-                        you may have on other projects).
-                    </p>
-                </div>
-                <ConfirmationModal
-                    title="Delete my account"
-                    message="Are you sure you want to delete your OpenDC account?"
-                    show={isDeleteModalOpen}
-                    callback={onDelete}
-                />
-            </div>
-        </>
-    )
-}
-
-export default Profile
diff --git a/opendc-web/opendc-web-ui/src/pages/projects/index.js b/opendc-web/opendc-web-ui/src/pages/projects/index.js
index 05e9514f..8603c228 100644
--- a/opendc-web/opendc-web-ui/src/pages/projects/index.js
+++ b/opendc-web/opendc-web-ui/src/pages/projects/index.js
@@ -1,13 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
 import { useDispatch } from 'react-redux'
-import { fetchAuthorizationsOfCurrentUser } from '../../redux/actions/users'
 import ProjectFilterPanel from '../../components/projects/FilterPanel'
 import NewProjectContainer from '../../containers/projects/NewProjectContainer'
-import VisibleProjectList from '../../containers/projects/VisibleProjectAuthList'
+import ProjectListContainer from '../../containers/projects/ProjectListContainer'
 import AppNavbarContainer from '../../containers/navigation/AppNavbarContainer'
 import { useRequireAuth } from '../../auth'
 import { Container } from 'reactstrap'
+import { fetchProjects } from '../../redux/actions/projects'
 
 function Projects() {
     useRequireAuth()
@@ -15,7 +15,7 @@ function Projects() {
     const dispatch = useDispatch()
     const [filter, setFilter] = useState('SHOW_ALL')
 
-    useEffect(() => dispatch(fetchAuthorizationsOfCurrentUser()), [])
+    useEffect(() => dispatch(fetchProjects()), [])
 
     return (
         <>
@@ -26,7 +26,7 @@ function Projects() {
                 <AppNavbarContainer fullWidth={false} />
                 <Container className="text-page-container">
                     <ProjectFilterPanel onSelect={setFilter} activeFilter={filter} />
-                    <VisibleProjectList filter={filter} />
+                    <ProjectListContainer filter={filter} />
                     <NewProjectContainer />
                 </Container>
             </div>
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 opendc-web/opendc-web-ui/src/pages/_document.js | 1 -
 1 file changed, 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/_document.js b/opendc-web/opendc-web-ui/src/pages/_document.js
index 943ae395..8e4680c0 100644
--- a/opendc-web/opendc-web-ui/src/pages/_document.js
+++ b/opendc-web/opendc-web-ui/src/pages/_document.js
@@ -69,7 +69,6 @@ class OpenDCDocument extends Document {
                         href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
                         rel="stylesheet"
                     />
-                    <script async src="https://use.fontawesome.com/ece66a2e7c.js" />
 
                     {/* Google Analytics */}
                     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-84285092-3" />
-- 
cgit v1.2.3


From 5c582427366a30a21df64db393ecb9e4d1379439 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 17:32:00 +0200
Subject: ui: Re-add support for Sentry

This change re-adds the support for Sentry. This was lost during the
migration from CRA to Next.js.
---
 opendc-web/opendc-web-ui/src/pages/_app.js | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

(limited to 'opendc-web/opendc-web-ui/src/pages')

diff --git a/opendc-web/opendc-web-ui/src/pages/_app.js b/opendc-web/opendc-web-ui/src/pages/_app.js
index f9727a7a..4ef4445c 100644
--- a/opendc-web/opendc-web-ui/src/pages/_app.js
+++ b/opendc-web/opendc-web-ui/src/pages/_app.js
@@ -25,6 +25,8 @@ import { Provider } from 'react-redux'
 import { useStore } from '../redux'
 import '../index.scss'
 import { AuthProvider, useAuth } from '../auth'
+import * as Sentry from '@sentry/react'
+import { Integrations } from '@sentry/tracing'
 
 // This setup is necessary to forward the Auth0 context to the Redux context
 const Inner = ({ Component, pageProps }) => {
@@ -37,6 +39,19 @@ const Inner = ({ Component, pageProps }) => {
     )
 }
 
+const dsn = process.env.NEXT_PUBLIC_SENTRY_DSN
+// Initialize Sentry if the user has configured a DSN
+if (process.browser && dsn) {
+    if (dsn) {
+        Sentry.init({
+            environment: process.env.NODE_ENV,
+            dsn: dsn,
+            integrations: [new Integrations.BrowserTracing()],
+            tracesSampleRate: 0.1,
+        })
+    }
+}
+
 export default function App(props) {
     return (
         <>
@@ -44,9 +59,11 @@ export default function App(props) {
                 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
                 <meta name="theme-color" content="#00A6D6" />
             </Head>
-            <AuthProvider>
-                <Inner {...props} />
-            </AuthProvider>
+            <Sentry.ErrorBoundary fallback={"An error has occurred"}>
+                <AuthProvider>
+                    <Inner {...props} />
+                </AuthProvider>
+            </Sentry.ErrorBoundary>
         </>
     )
 }
-- 
cgit v1.2.3