From d40772d2b54040a851223575e8c99eda4567f3a3 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 27 Oct 2022 11:36:19 +0200 Subject: 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. --- .../opendc-web-ui/src/pages/projects/[project]/index.js | 8 ++++---- .../pages/projects/[project]/portfolios/[portfolio].js | 12 ++++-------- .../pages/projects/[project]/topologies/[topology].js | 17 ++++++----------- 3 files changed, 14 insertions(+), 23 deletions(-) (limited to 'opendc-web/opendc-web-ui/src/pages/projects') 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 = ( - + Projects - + Project details @@ -56,7 +56,7 @@ function Project() { return ( - {project?.name ?? 'Project'} - OpenDC + {`${project?.name ?? 'Project'} - OpenDC`} 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 = ( - + Projects - + Project details - + Portfolio 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 = ( - + Projects - + Project details - + Topology @@ -96,7 +91,7 @@ function Topology() { return ( - {project?.name ?? 'Topologies'} - OpenDC + {`${topology?.name ?? 'Topologies'} - OpenDC`} -- cgit v1.2.3