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/components | |
| 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/components')
6 files changed, 6 insertions, 91 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/topologies/map/controls/Toolbar.js b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js index 469fd515..e7dc57c3 100644 --- a/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/controls/Toolbar.js @@ -2,9 +2,7 @@ import PropTypes from 'prop-types' import React from 'react' import { control, toolBar } from './Toolbar.module.scss' import { Button } from '@patternfly/react-core' -import { SearchPlusIcon, SearchMinusIcon } from '@patternfly/react-icons' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faCamera } from '@fortawesome/free-solid-svg-icons' +import { SearchPlusIcon, SearchMinusIcon, CameraIcon } from '@patternfly/react-icons' function Toolbar({ onZoom, onExport }) { return ( @@ -21,7 +19,7 @@ function Toolbar({ onZoom, onExport }) { onClick={() => onExport()} className={control} > - <FontAwesomeIcon icon={faCamera} /> + <CameraIcon /> </Button> </div> ) 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 |
