TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(routes): display 404 feedback page for unmatched URLs (#5627)

Browse Source 
* Added 404 feedback and design

* restore message and showGoBackButton props
This commit is contained in:
Dan Rukas 2025-12-10 16:39:17 -05:00 committed by GitHub
parent c0f39aeb51
commit eef755ef05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 130 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
platform/app/src/routes/NotFound/NotFound.tsx
View File

@ -1,22 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { Button, Icons } from '@ohif/ui-next';
import { useAppConfig } from '@state';
const NotFound = ({ message = 'Sorry, this page does not exist.', showGoBackButton = true }) => {
const NotFound = ({
message = "We can't find the page you're looking for.",
showGoBackButton = true,
}) => {
const [appConfig] = useAppConfig();
const { showStudyList } = appConfig;
const navigate = useNavigate();
return (
<div className="flex h-full w-full items-center justify-center text-white">
<div>
<h4>{message}</h4>
{showGoBackButton && showStudyList && (
<h5>
<Link to={'/'}>Go back to the Study List</Link>
</h5>
)}
<div className="absolute flex h-full w-full items-center justify-center bg-black">
<div className="flex flex-col">
<div className="bg-background flex items-center justify-center rounded-t-2xl p-6">
<Icons.IllustrationNotFound />
</div>
<div className="bg-input h-px" />
<div className="bg-muted flex flex-col items-center justify-center rounded-b-2xl p-8 text-center">
<h1 className="text-foreground text-[22px] font-light">Error (404)</h1>
<p className="text-muted-foreground mt-1 text-[16px] font-light">{message}</p>
{showGoBackButton && showStudyList && (
<Button
className="mt-8 px-3 text-lg"
onClick={() => navigate('/')}
>
Return to Study List
</Button>
)}
</div>
</div>
</div>
);

2
platform/app/src/routes/index.tsx
View File

@ -80,7 +80,7 @@ const bakedInRoutes = [
];
// NOT FOUND (404)
const notFoundRoute = { component: NotFound };
const notFoundRoute = { path: '*', children: NotFound };
const createRoutes = ({
modes,

2
platform/ui-next/src/components/Icons/Icons.tsx
View File

@ -231,6 +231,7 @@ import ChevronLeft from './Sources/ChevronLeft';
import StatusAlert from './Sources/StatusAlert';
import Undo from './Sources/Undo';
import TabContours from './Sources/TabContours';
import IllustrationNotFound from './Sources/IllustrationNotFound';
//
//
type IconProps = React.HTMLAttributes<SVGElement>;
@ -798,6 +799,7 @@ export const Icons = {
Undo,
Redo,
JumpToSlice,
IllustrationNotFound,
/** Adds an icon to the set of icons */
addIcon: (name: string, icon) => {

102
platform/ui-next/src/components/Icons/Sources/IllustrationNotFound.tsx Normal file
View File

@ -0,0 +1,102 @@
import React from 'react';
import type { IconProps } from '../types';
export const IllustrationNotFound = (props: IconProps) => (
<svg
width="150"
height="150"
viewBox="0 0 150 150"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
opacity="0.4"
d="M17 32.4628V22.0467C17 20.7096 17.5312 19.4272 18.4767 18.4817C19.4222 17.5362 20.7045 17.005 22.0417 17.005H32.4628"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M32.4628 132.963H22.0417C20.7045 132.963 19.4222 132.432 18.4767 131.487C17.5312 130.541 17 129.259 17 127.922V117.501"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M17 51.7875V67.2503"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M17 82.7131V98.1708"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M132.958 51.7875V67.2503"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M51.7875 17H67.2503"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M82.7081 17H98.1708"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M117.496 17.005H127.917C129.254 17.005 130.536 17.5362 131.482 18.4817C132.427 19.4272 132.958 20.7096 132.958 22.0467V32.4628"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
opacity="0.4"
d="M67.2503 132.958H51.7875"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M86.575 117.496C103.652 117.496 117.496 103.652 117.496 86.575C117.496 69.4981 103.652 55.6545 86.575 55.6545C69.4981 55.6545 55.6545 69.4981 55.6545 86.575C55.6545 103.652 69.4981 117.496 86.575 117.496Z"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M108.441 108.441L132.958 132.958"
stroke="#358CFD"
strokeWidth="6"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
export default IllustrationNotFound;