diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2022-10-27 17:15:55 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-10-27 17:15:55 +0200 |
| commit | c4cfb6f6e0507f335fd88935857f20e88c34abd0 (patch) | |
| tree | 8dad74b6a213bb294dbcea33ebab34a3be193e77 /opendc-web/opendc-web-ui/src/pages | |
| parent | fa7fdbb0126ea465130961dc37c4ef2d6feb36e9 (diff) | |
| parent | 5a3d5148a9d52487f102e52bd079006c916075c9 (diff) | |
merge: Update to Next.js 13 and React 18
This pull request updates the web interface to make use of Next.js 13 and React 18.
## Implementation Notes :hammer_and_pick:
* Drop dependency on FontAwesome
* Update to Next 13 and React 18
* Drop dependency on Roboto font
* Make root redirect non-permanent
* Do not optimize images for export
* Update to Node 18 for the build process
* Ensure consistency of build tasks
* Update README.md of web UI
* Default to anonymous auth domain
* Disable configuration of basePath
## External Dependencies :four_leaf_clover:
* Next.js 13
* React 18
* PatternFly 4
* Node 18
## Breaking API Changes :warning:
* The base path of the web UI cannot be configured anymore via the Quarkus extension.
The previous implementation relied on Next.js internals and this functionality cannot be
provided without resorting to hacks. Since this functionality was not actually used, we have
removed it for now.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/pages')
4 files changed, 14 insertions, 29 deletions
diff --git a/opendc-web/opendc-web-ui/src/pages/_document.js b/opendc-web/opendc-web-ui/src/pages/_document.js index 011bf4da..9f84b2ab 100644 --- a/opendc-web/opendc-web-ui/src/pages/_document.js +++ b/opendc-web/opendc-web-ui/src/pages/_document.js @@ -63,12 +63,6 @@ class OpenDCDocument extends Document { 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" - /> </Head> <body> <Main /> 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 index e4e2156b..52938bcd 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/index.js @@ -25,6 +25,7 @@ import ProjectOverview from '../../../components/projects/ProjectOverview' import { useProject } from '../../../data/project' import { AppPage } from '../../../components/AppPage' import Head from 'next/head' +import Link from 'next/link' import { Breadcrumb, BreadcrumbItem, @@ -34,7 +35,6 @@ import { Text, TextContent, } from '@patternfly/react-core' -import BreadcrumbLink from '../../../components/util/BreadcrumbLink' function Project() { const router = useRouter() @@ -44,10 +44,10 @@ function Project() { const breadcrumb = ( <Breadcrumb> - <BreadcrumbItem to="/projects" component={BreadcrumbLink}> + <BreadcrumbItem to="/projects" component={Link}> Projects </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink} isActive> + <BreadcrumbItem to={`/projects/${projectId}`} component={Link} isActive> Project details </BreadcrumbItem> </Breadcrumb> @@ -56,7 +56,7 @@ function Project() { return ( <AppPage breadcrumb={breadcrumb}> <Head> - <title>{project?.name ?? 'Project'} - OpenDC</title> + <title>{`${project?.name ?? 'Project'} - OpenDC`}</title> </Head> <PageSection variant={PageSectionVariants.light}> <TextContent> 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 index 615529e7..5d1e041b 100644 --- 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 @@ -23,6 +23,7 @@ import dynamic from 'next/dynamic' import { useRouter } from 'next/router' import Head from 'next/head' +import Link from 'next/link' import React, { useRef } from 'react' import { Breadcrumb, @@ -40,7 +41,6 @@ import { import { AppPage } from '../../../../components/AppPage' import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' import PortfolioSelector from '../../../../components/context/PortfolioSelector' -import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import PortfolioOverview from '../../../../components/portfolios/PortfolioOverview' import { usePortfolio } from '../../../../data/project' @@ -61,17 +61,13 @@ function Portfolio() { const breadcrumb = ( <Breadcrumb> - <BreadcrumbItem to="/projects" component={BreadcrumbLink}> + <BreadcrumbItem to="/projects" component={Link}> Projects </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}> + <BreadcrumbItem to={`/projects/${projectId}`} component={Link}> Project details </BreadcrumbItem> - <BreadcrumbItem - to={`/projects/${projectId}/portfolios/${portfolioNumber}`} - component={BreadcrumbLink} - isActive - > + <BreadcrumbItem to={`/projects/${projectId}/portfolios/${portfolioNumber}`} component={Link} isActive> Portfolio </BreadcrumbItem> </Breadcrumb> diff --git a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js index d3892710..48359365 100644 --- a/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js +++ b/opendc-web/opendc-web-ui/src/pages/projects/[project]/topologies/[topology].js @@ -22,12 +22,13 @@ import dynamic from 'next/dynamic' import { useRouter } from 'next/router' +import Head from 'next/head' +import Link from 'next/link' import ContextSelectionSection from '../../../../components/context/ContextSelectionSection' import TopologySelector from '../../../../components/context/TopologySelector' import TopologyOverview from '../../../../components/topologies/TopologyOverview' import { useDispatch } from 'react-redux' import React, { useEffect, useState } from 'react' -import Head from 'next/head' import { AppPage } from '../../../../components/AppPage' import { Breadcrumb, @@ -42,7 +43,6 @@ import { Text, TextContent, } from '@patternfly/react-core' -import BreadcrumbLink from '../../../../components/util/BreadcrumbLink' import { useTopology } from '../../../../data/topology' import { goToRoom } from '../../../../redux/actions/interaction-level' import { openTopology } from '../../../../redux/actions/topology' @@ -58,7 +58,6 @@ function Topology() { const topologyNumber = +router.query['topology'] const { data: topology } = useTopology(projectId, topologyNumber) - const project = topology?.project const dispatch = useDispatch() useEffect(() => { @@ -71,17 +70,13 @@ function Topology() { const breadcrumb = ( <Breadcrumb> - <BreadcrumbItem to="/projects" component={BreadcrumbLink}> + <BreadcrumbItem to="/projects" component={Link}> Projects </BreadcrumbItem> - <BreadcrumbItem to={`/projects/${projectId}`} component={BreadcrumbLink}> + <BreadcrumbItem to={`/projects/${projectId}`} component={Link}> Project details </BreadcrumbItem> - <BreadcrumbItem - to={`/projects/${projectId}/topologies/${topologyNumber}`} - component={BreadcrumbLink} - isActive - > + <BreadcrumbItem to={`/projects/${projectId}/topologies/${topologyNumber}`} component={Link} isActive> Topology </BreadcrumbItem> </Breadcrumb> @@ -96,7 +91,7 @@ function Topology() { return ( <AppPage breadcrumb={breadcrumb} contextSelectors={contextSelectors}> <Head> - <title>{project?.name ?? 'Topologies'} - OpenDC</title> + <title>{`${topology?.name ?? 'Topologies'} - OpenDC`}</title> </Head> <PageSection variant={PageSectionVariants.light}> <TextContent> |