build(web/ui): Update to Next 13 and React 18

This change updates the web interface to use Next 13 and React 18. This
release has a couple breaking changes (related to links) which we have fixed
accordingly.

8 files changed, 18 insertions, 110 deletions

diff --git a/opendc-web/opendc-web-ui/src/components/AppHeader.js b/opendc-web/opendc-web-ui/src/components/AppHeader.js
index f9ef00aa..c046f9c7 100644
--- a/opendc-web/opendc-web-ui/src/components/AppHeader.js
+++ b/opendc-web/opendc-web-ui/src/components/AppHeader.js
@@ -43,14 +43,7 @@ export default function AppHeader({ nav }) {
     return (
         <Masthead id="app-header" className={styles.header}>
             <MastheadMain>
-                <MastheadBrand
-                    className={styles.logo}
-                    component={(props) => (
-                        <Link href="/projects">
-                            <a {...props} />
-                        </Link>
-                    )}
-                >
+                <MastheadBrand className={styles.logo} component={(props) => <Link href="/projects" {...props} />}>
                     <Image src="/img/logo.svg" alt="OpenDC logo" width={25} height={25} />
                     <span>OpenDC</span>
                 </MastheadBrand>
diff --git a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
index 64218a0a..5fd2a1da 100644
--- a/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
+++ b/opendc-web/opendc-web-ui/src/components/portfolios/ScenarioTable.js
@@ -59,7 +59,7 @@ function ScenarioTable({ portfolio, status }) {
                         <Td dataLabel="Topology">
                             {scenario.topology ? (
                                 <Link href={`/projects/${projectId}/topologies/${scenario.topology.number}`}>
-                                    <a>{scenario.topology.name}</a>
+                                    scenario.topology.name
                                 </Link>
                             ) : (
                                 'Unknown Topology'
diff --git a/opendc-web/opendc-web-ui/src/components/projects/ProjectCollection.js b/opendc-web/opendc-web-ui/src/components/projects/ProjectCollection.js
index 70f02812..a26fed46 100644
--- a/opendc-web/opendc-web-ui/src/components/projects/ProjectCollection.js
+++ b/opendc-web/opendc-web-ui/src/components/projects/ProjectCollection.js
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import {
     Gallery,
     Bullseye,
@@ -25,7 +26,6 @@ import React, { useReducer, useMemo } from 'react'
 import { Project, Status } from '../../shapes'
 import { parseAndFormatDateTime } from '../../util/date-time'
 import { AUTH_DESCRIPTION_MAP, AUTH_ICON_MAP, AUTH_NAME_MAP } from '../../util/authorizations'
-import NavItemLink from '../util/NavItemLink'
 import TableEmptyState from '../util/TableEmptyState'
 
 function ProjectCard({ project, onDelete }) {
@@ -70,7 +70,7 @@ function ProjectCard({ project, onDelete }) {
                     />
                 </CardActions>
             </CardHeader>
-            <CardTitle component={NavItemLink} className="pf-u-pb-0" href={`/projects/${id}`}>
+            <CardTitle component={Link} className="pf-u-pb-0" href={`/projects/${id}`}>
                 {name}
             </CardTitle>
             <CardBody isFilled={false}>
diff --git a/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js b/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js
deleted file mode 100644
index c6ab214a..00000000
--- a/opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js
+++ /dev/null
@@ -1,37 +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 PropTypes from 'prop-types'
-import Link from 'next/link'
-
-const BreadcrumbLink = ({ children, href, ...props }) => (
-    <Link href={href}>
-        <a {...props}>{children}</a>
-    </Link>
-)
-
-BreadcrumbLink.propTypes = {
-    children: PropTypes.node,
-    href: PropTypes.string.isRequired,
-}
-
-export default BreadcrumbLink
diff --git a/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js b/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js
deleted file mode 100644
index 83301361..00000000
--- a/opendc-web/opendc-web-ui/src/components/util/NavItemLink.js
+++ /dev/null
@@ -1,39 +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 Link from 'next/link'
-import PropTypes from 'prop-types'
-
-function NavItemLink({ children, href, ...props }) {
-    return (
-        <Link href={href}>
-            <a {...props}>{children}</a>
-        </Link>
-    )
-}
-
-NavItemLink.propTypes = {
-    children: PropTypes.node,
-    href: PropTypes.string.isRequired,
-}
-
-export default NavItemLink
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>