From d5b202e715fe3c2e4ccd3a18cbedbbed88ac7972 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Tue, 17 Oct 2023 18:03:34 +0200 Subject: [PATCH] chore(admin): convert NotFoundPage to TS --- .../core/admin/admin/src/pages/Admin/index.js | 2 +- .../core/admin/admin/src/pages/App/index.js | 2 +- .../index.js => NotFoundPage.tsx} | 16 +- .../pages/NotFoundPage/tests/index.test.js | 433 ------------------ 4 files changed, 11 insertions(+), 442 deletions(-) rename packages/core/admin/admin/src/pages/{NotFoundPage/index.js => NotFoundPage.tsx} (82%) delete mode 100644 packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js diff --git a/packages/core/admin/admin/src/pages/Admin/index.js b/packages/core/admin/admin/src/pages/Admin/index.js index 50d93bf520..af482f6f57 100644 --- a/packages/core/admin/admin/src/pages/Admin/index.js +++ b/packages/core/admin/admin/src/pages/Admin/index.js @@ -33,7 +33,7 @@ const MarketplacePage = lazy(() => import(/* webpackChunkName: "Admin_marketplace" */ '../MarketplacePage') ); const NotFoundPage = lazy(() => - import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage') + import(/* webpackChunkName: "Admin_NotFoundPage" */ '../NotFoundPage').then(({ NotFoundPage }) => ({ default: NotFoundPage })) ); const InternalErrorPage = lazy(() => import(/* webpackChunkName: "Admin_InternalErrorPage" */ '../InternalErrorPage') diff --git a/packages/core/admin/admin/src/pages/App/index.js b/packages/core/admin/admin/src/pages/App/index.js index 8009c739d8..f95020d7b4 100644 --- a/packages/core/admin/admin/src/pages/App/index.js +++ b/packages/core/admin/admin/src/pages/App/index.js @@ -27,7 +27,7 @@ import { useConfiguration } from '../../hooks/useConfiguration'; import { useEnterprise } from '../../hooks/useEnterprise'; import { createRoute, makeUniqueRoutes } from '../../utils'; import AuthPage from '../AuthPage'; -import NotFoundPage from '../NotFoundPage'; +import { NotFoundPage } from '../NotFoundPage'; import UseCasePage from '../UseCasePage'; import { ROUTES_CE, SET_ADMIN_PERMISSIONS } from './constants'; diff --git a/packages/core/admin/admin/src/pages/NotFoundPage/index.js b/packages/core/admin/admin/src/pages/NotFoundPage.tsx similarity index 82% rename from packages/core/admin/admin/src/pages/NotFoundPage/index.js rename to packages/core/admin/admin/src/pages/NotFoundPage.tsx index a48d81b1b2..9ebb05c8c2 100644 --- a/packages/core/admin/admin/src/pages/NotFoundPage/index.js +++ b/packages/core/admin/admin/src/pages/NotFoundPage.tsx @@ -4,14 +4,18 @@ * This is the page we show when the user visits a url that doesn't have a route * */ -import React from 'react'; - -import { ContentLayout, EmptyStateLayout, HeaderLayout, Main } from '@strapi/design-system'; -import { LinkButton, useFocusWhenNavigate } from '@strapi/helper-plugin'; +import { + ContentLayout, + EmptyStateLayout, + HeaderLayout, + LinkButton, + Main, +} from '@strapi/design-system'; +import { useFocusWhenNavigate } from '@strapi/helper-plugin'; import { ArrowRight, EmptyPictures } from '@strapi/icons'; import { useIntl } from 'react-intl'; -const NoContentType = () => { +export const NotFoundPage = () => { const { formatMessage } = useIntl(); useFocusWhenNavigate(); @@ -46,5 +50,3 @@ const NoContentType = () => { ); }; - -export default NoContentType; diff --git a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js b/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js deleted file mode 100644 index ee340a39de..0000000000 --- a/packages/core/admin/admin/src/pages/NotFoundPage/tests/index.test.js +++ /dev/null @@ -1,433 +0,0 @@ -import React from 'react'; - -import { lightTheme, ThemeProvider } from '@strapi/design-system'; -import { render } from '@testing-library/react'; -import { createMemoryHistory } from 'history'; -import { IntlProvider } from 'react-intl'; -import { Router } from 'react-router-dom'; - -import NotFoundPage from '../index'; - -const history = createMemoryHistory(); - -const App = ( - - - - - - - -); - -describe('NotFoundPage', () => { - it('renders and matches the snapshot', () => { - const { - container: { firstChild }, - } = render(App); - - expect(firstChild).toMatchInlineSnapshot(` - .c6 { - font-weight: 600; - font-size: 2rem; - line-height: 1.25; - color: #32324d; - } - - .c13 { - font-weight: 500; - font-size: 1rem; - line-height: 1.25; - color: #666687; - text-align: center; - } - - .c18 { - font-size: 0.75rem; - line-height: 1.33; - font-weight: 600; - color: #ffffff; - } - - .c1 { - background: #f6f6f9; - padding-top: 40px; - padding-right: 56px; - padding-bottom: 40px; - padding-left: 56px; - } - - .c3 { - min-width: 0; - } - - .c7 { - padding-right: 56px; - padding-left: 56px; - } - - .c8 { - background: #ffffff; - padding: 64px; - border-radius: 4px; - box-shadow: 0px 1px 4px rgba(33,33,52,0.1); - } - - .c10 { - padding-bottom: 24px; - } - - .c12 { - padding-bottom: 16px; - } - - .c14 { - background: #4945ff; - padding-top: 8px; - padding-right: 16px; - padding-bottom: 8px; - padding-left: 16px; - border-radius: 4px; - border-color: #4945ff; - border: 1px solid #4945ff; - } - - .c2 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - } - - .c4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - - .c9 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - - .c15 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 8px; - } - - .c16 { - position: relative; - outline: none; - } - - .c16 > svg { - height: 12px; - width: 12px; - } - - .c16 > svg > g, - .c16 > svg path { - fill: #ffffff; - } - - .c16[aria-disabled='true'] { - pointer-events: none; - } - - .c16:after { - -webkit-transition-property: all; - transition-property: all; - -webkit-transition-duration: 0.2s; - transition-duration: 0.2s; - border-radius: 8px; - content: ''; - position: absolute; - top: -4px; - bottom: -4px; - left: -4px; - right: -4px; - border: 2px solid transparent; - } - - .c16:focus-visible { - outline: none; - } - - .c16:focus-visible:after { - border-radius: 8px; - content: ''; - position: absolute; - top: -5px; - bottom: -5px; - left: -5px; - right: -5px; - border: 2px solid #4945ff; - } - - .c11 svg { - height: 5.5rem; - } - - .c0:focus-visible { - outline: none; - } - - .c17 { - -webkit-text-decoration: none; - text-decoration: none; - border: 1px solid #d9d8ff; - background: #f0f0ff; - } - - .c17[aria-disabled='true'] { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c17[aria-disabled='true'] .c5 { - color: #666687; - } - - .c17[aria-disabled='true'] svg > g, - .c17[aria-disabled='true'] svg path { - fill: #666687; - } - - .c17[aria-disabled='true']:active { - border: 1px solid #dcdce4; - background: #eaeaef; - } - - .c17[aria-disabled='true']:active .c5 { - color: #666687; - } - - .c17[aria-disabled='true']:active svg > g, - .c17[aria-disabled='true']:active svg path { - fill: #666687; - } - - .c17:hover { - background-color: #ffffff; - } - - .c17:active { - background-color: #ffffff; - border: 1px solid #4945ff; - } - - .c17:active .c5 { - color: #4945ff; - } - - .c17:active svg > g, - .c17:active svg path { - fill: #4945ff; - } - - .c17 .c5 { - color: #271fe0; - } - - .c17 svg > g, - .c17 svg path { - fill: #271fe0; - } - -
-
-
-
-
-

- Page not found -

-
-
-
-
-
-
- -
-

- Oops! We can't seem to find the page you're looging for... -

-
- - - Back to homepage - - - -
-
-
- `); - }); -});