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/components/AppHeader.js | 9 +---- .../src/components/portfolios/ScenarioTable.js | 2 +- .../src/components/projects/ProjectCollection.js | 4 +-- .../src/components/util/BreadcrumbLink.js | 37 -------------------- .../src/components/util/NavItemLink.js | 39 ---------------------- .../src/pages/projects/[project]/index.js | 8 ++--- .../projects/[project]/portfolios/[portfolio].js | 12 +++---- .../projects/[project]/topologies/[topology].js | 17 ++++------ 8 files changed, 18 insertions(+), 110 deletions(-) delete mode 100644 opendc-web/opendc-web-ui/src/components/util/BreadcrumbLink.js delete mode 100644 opendc-web/opendc-web-ui/src/components/util/NavItemLink.js (limited to 'opendc-web/opendc-web-ui/src') 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 ( - ( - - - - )} - > + }> OpenDC logo OpenDC 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 }) { {scenario.topology ? ( - {scenario.topology.name} + scenario.topology.name ) : ( '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 }) { /> - + {name} 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 }) => ( - - {children} - -) - -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 ( - - {children} - - ) -} - -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 = ( - + 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