moving the component

frontend/app-development/layout/AppShell.test.tsx

@@ -61,7 +61,7 @@ describe('App', () => {
     expect(screen.getByTitle(textMock('general.loading'))).toBeInTheDocument();
   });
 
-  it('renders "NotFoundPage" when repoStatus has error', async () => {
+  it('renders "StudioNotFoundPage" when repoStatus has error', async () => {
     render({
       getRepoStatus: () => Promise.reject({ message: 'Not found', response: { status: 404 } }),
     });

frontend/app-development/layout/AppShell.tsx

@@ -3,8 +3,7 @@ import { Outlet, matchPath, useLocation } from 'react-router-dom';
 import { PageHeader } from './PageHeader';
 import { useRepoStatusQuery, useUserQuery } from 'app-shared/hooks/queries';
 import { ServerCodes } from 'app-shared/enums/ServerCodes';
-import { NotFoundPage } from 'app-shared/components/notFound';
-import { StudioCenter, StudioPageSpinner } from '@studio/components';
+import { StudioCenter, StudioPageSpinner, StudioNotFoundPage } from '@studio/components';
 import { MergeConflictWarning } from '../features/simpleMerge/MergeConflictWarning';
 
 /**
@@ -33,7 +32,7 @@ export const AppShell = (): React.ReactNode => {
 
   const renderPages = () => {
     if (repoStatusError?.response?.status === ServerCodes.NotFound) {
-      return <NotFoundPage />;
+      return <StudioNotFoundPage />;
     }
     if (repoStatus?.hasMergeConflict) {
       return <MergeConflictWarning org={org} app={app} />;

frontend/app-development/router/PageRoutes.tsx

@@ -4,7 +4,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { AppShell } from 'app-development/layout/AppShell';
 import { RoutePaths } from 'app-development/enums/RoutePaths';
 import { routerRoutes } from 'app-development/router/routes';
-import { NotFoundPage } from 'app-shared/components/notFound';
+import { StudioNotFoundPage } from '@studio/components';
 
 const BASE_PATH = '/:org/:app';
 
@@ -21,9 +21,9 @@ export const PageRoutes = () => {
           {routerRoutes.map((route) => (
             <Route key={route.path} path={route.path} element={<route.subapp {...route.props} />} />
           ))}
-          <Route path='*' element={<NotFoundPage />} />
+          <Route path='*' element={<StudioNotFoundPage />} />
         </Route>
-        <Route path='*' element={<NotFoundPage />} />
+        <Route path='*' element={<StudioNotFoundPage />} />
       </Routes>
     </div>
   );

frontend/packages/shared/src/components/notFound/NotFoundPage.test.tsx → frontend/libs/studio-components/src/components/StudioNotFoundPage/StudioNotFoundPage.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { NotFoundPage } from './NotFoundPage';
+import { StudioNotFoundPage } from './StudioNotFoundPage';
 import { textMock } from '../../../../../testing/mocks/i18nMock';
 
-describe('NotFoundPage', () => {
+describe('StudioNotFoundPage', () => {
   it('renders correctly', () => {
-    render(<NotFoundPage />);
+    render(<StudioNotFoundPage />);
 
     const heading = screen.getByRole('heading', {
       name: textMock('not_found_page.heading'),

frontend/libs/studio-components/src/components/StudioNotFoundPage/StudioNotFoundPage.tsx

@@ -0,0 +1,40 @@
+import React, { HTMLAttributes, forwardRef } from 'react';
+import classes from './StudioNotFoundPage.module.css';
+import cn from 'classnames';
+import { Heading, Paragraph, Link } from '@digdir/design-system-react';
+import { Trans, useTranslation } from 'react-i18next';
+
+type StudioNotFoundPageProps = HTMLAttributes<HTMLDivElement>;
+
+/**
+ * @component
+ *    Displays the 404 - Not found page in studio
+ */
+export const StudioNotFoundPage = forwardRef<HTMLDivElement, StudioNotFoundPageProps>(
+  ({ className, ...rest }, ref) => {
+    const { t } = useTranslation();
+
+    return (
+      <div ref={ref} className={cn(className, classes.wrapper)} {...rest}>
+        <div className={classes.contentWrapper}>
+          <img src={require('./images/PCImage404.png')} alt='' />
+          <div className={classes.textWrapper}>
+            <Heading level={1} size='large'>
+              {t('not_found_page.heading')}
+            </Heading>
+            <Paragraph size='small' className={classes.paragraph}>
+              <Trans i18nKey='not_found_page.text'>
+                <Link href='mailto:[email protected]'>[email protected]</Link>
+              </Trans>
+            </Paragraph>
+            <Link href='/' size='small' className={classes.link}>
+              {t('not_found_page.redirect_to_dashboard')}
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+StudioNotFoundPage.displayName = 'StudioNotFoundPage';

frontend/libs/studio-components/src/components/StudioNotFoundPage/index.ts

@@ -0,0 +1 @@
+export { StudioNotFoundPage } from './StudioNotFoundPage';

frontend/libs/studio-components/src/components/index.ts

@@ -3,3 +3,4 @@ export * from './StudioNumberInput';
 export * from './StudioSpinner';
 export * from './StudioPageSpinner';
 export * from './StudioCenter';
+export * from './StudioNotFoundPage';

frontend/studio-root/app/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import classes from './App.module.css';
 import { Route, Routes } from 'react-router-dom';
-import { NotFoundPage } from 'app-shared/components/notFound';
+import { StudioNotFoundPage } from '@studio/components';
 
 import './App.css';
 import { PageLayout } from '../pages/PageLayout';
@@ -13,7 +13,7 @@ export const App = (): JSX.Element => {
       <Routes>
         <Route element={<PageLayout />}>
           <Route path='/contact' element={<Contact />} />
-          <Route path='*' element={<NotFoundPage />} />
+          <Route path='*' element={<StudioNotFoundPage />} />
         </Route>
       </Routes>
     </div>