From: Jeremy Davis Date: Fri, 5 Jan 2024 14:16:50 +0000 (+0100) Subject: SONAR-21397 Migrate 404 error page to the new UI X-Git-Tag: 10.4.0.87286~205 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=620570834e67710eb480617aba56638fbcaa3de5;p=sonarqube.git SONAR-21397 Migrate 404 error page to the new UI --- diff --git a/server/sonar-web/src/main/js/app/components/NotFound.tsx b/server/sonar-web/src/main/js/app/components/NotFound.tsx index fb97fa303c0..2eb7ca4f6cf 100644 --- a/server/sonar-web/src/main/js/app/components/NotFound.tsx +++ b/server/sonar-web/src/main/js/app/components/NotFound.tsx @@ -17,30 +17,26 @@ * along with this program; if not, write to the Free Software Foundation, * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. */ +import { Card, CenteredLayout, Link, PageContentFontWrapper, Title } from 'design-system'; import * as React from 'react'; import { Helmet } from 'react-helmet-async'; -import Link from '../../components/common/Link'; import { translate } from '../../helpers/l10n'; -import SimpleContainer from './SimpleContainer'; -interface Props { - withContainer?: boolean; -} - -export default function NotFound({ withContainer = true }: Props) { - const Container = withContainer ? SimpleContainer : React.Fragment; +export default function NotFound() { return ( - + <> -
-
-

{translate('page_not_found')}

-

{translate('address_mistyped_or_page_moved')}

-

- {translate('go_back_to_homepage')} -

-
-
- + + + + {translate('page_not_found')} +

{translate('address_mistyped_or_page_moved')}

+

+ {translate('go_back_to_homepage')} +

+ + + + ); } diff --git a/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.tsx b/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.tsx index 966a7add21e..ed6214bc608 100644 --- a/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.tsx +++ b/server/sonar-web/src/main/js/app/components/extensions/GlobalAdminPageExtension.tsx @@ -27,6 +27,6 @@ export default function GlobalAdminPageExtension() { const { pluginKey, extensionKey } = useParams(); const { adminPages } = useOutletContext(); - const extension = (adminPages || []).find((p) => p.key === `${pluginKey}/${extensionKey}`); - return extension ? : ; + const extension = adminPages?.find((p) => p.key === `${pluginKey}/${extensionKey}`); + return extension ? : ; } diff --git a/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.tsx b/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.tsx index b271b37c54f..1fcedaa91b5 100644 --- a/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.tsx +++ b/server/sonar-web/src/main/js/app/components/extensions/GlobalPageExtension.tsx @@ -20,8 +20,8 @@ import * as React from 'react'; import { useParams } from 'react-router-dom'; import { AppState } from '../../../types/appstate'; -import withAppStateContext from '../app-state/withAppStateContext'; import NotFound from '../NotFound'; +import withAppStateContext from '../app-state/withAppStateContext'; import Extension from './Extension'; export interface GlobalPageExtensionProps { @@ -44,8 +44,8 @@ function GlobalPageExtension(props: GlobalPageExtensionProps) { ? `${params.pluginKey}/${params.extensionKey}` : `${pluginKey}/${extensionKey}`; - const extension = (globalPages || []).find((p) => p.key === fullKey); - return extension ? : ; + const extension = globalPages?.find((p) => p.key === fullKey); + return extension ? : ; } export default withAppStateContext(GlobalPageExtension); diff --git a/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.tsx b/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.tsx index cfcf315af9d..2d97554b7d8 100644 --- a/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.tsx +++ b/server/sonar-web/src/main/js/app/components/extensions/ProjectAdminPageExtension.tsx @@ -31,16 +31,13 @@ export default function ProjectAdminPageExtension() { // We keep that for compatibility but ideally should advocate to use tanstack query const onBranchesChange = useRefreshBranches(); - const extension = - component && - component.configuration && - (component.configuration.extensions || []).find( - (p) => p.key === `${pluginKey}/${extensionKey}`, - ); + const extension = component?.configuration?.extensions?.find( + (p) => p.key === `${pluginKey}/${extensionKey}`, + ); return extension ? ( ) : ( - + ); } diff --git a/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx b/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx index ce7cf80205a..025a9a20529 100644 --- a/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx +++ b/server/sonar-web/src/main/js/app/components/extensions/ProjectPageExtension.tsx @@ -46,10 +46,10 @@ export default function ProjectPageExtension({ params }: ProjectPageExtensionPro ? `${params.pluginKey}/${params.extensionKey}` : `${pluginKey}/${extensionKey}`; - const extension = component.extensions && component.extensions.find((p) => p.key === fullKey); + const extension = component.extensions?.find((p) => p.key === fullKey); return extension ? ( ) : ( - + ); } diff --git a/server/sonar-web/src/main/js/app/components/extensions/__tests__/GlobalAdminPageExtension-test.tsx b/server/sonar-web/src/main/js/app/components/extensions/__tests__/GlobalAdminPageExtension-test.tsx new file mode 100644 index 00000000000..8ce78ba24ea --- /dev/null +++ b/server/sonar-web/src/main/js/app/components/extensions/__tests__/GlobalAdminPageExtension-test.tsx @@ -0,0 +1,65 @@ +/* + * SonarQube + * Copyright (C) 2009-2024 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import { screen } from '@testing-library/react'; +import * as React from 'react'; +import { Outlet, Route } from 'react-router-dom'; +import { renderAppRoutes } from '../../../../helpers/testReactTestingUtils'; +import { AdminPagesContext } from '../../../../types/admin'; +import { Extension } from '../../../../types/types'; +import GlobalAdminPageExtension from '../GlobalAdminPageExtension'; + +jest.mock('../Extension', () => ({ + __esModule: true, + default(props: { extension: { key: string; name: string } }) { + return

{props.extension.name}

; + }, +})); + +const extensions = [{ key: 'plugin123/ext42', name: 'extension 42' }]; + +it('should find the extension from params', () => { + renderGlobalAdminPageExtension('admin/extension/plugin123/ext42', extensions); + + expect(screen.getByText('extension 42')).toBeInTheDocument(); +}); + +it('should notify if extension is not found', () => { + renderGlobalAdminPageExtension('admin/extension/plugin123/wrong-extension', extensions); + + expect(screen.getByText('page_not_found')).toBeInTheDocument(); +}); + +function renderGlobalAdminPageExtension(navigateTo: string, adminPages: Extension[] = []) { + renderAppRoutes( + `admin/extension/:pluginKey/:extensionKey`, + () => ( + }> + } /> + + ), + { + navigateTo, + }, + ); +} + +function Wrapper(props: Readonly) { + return ; +} diff --git a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx index 30367d34051..b12aae3de32 100644 --- a/server/sonar-web/src/main/js/app/utils/startReactApp.tsx +++ b/server/sonar-web/src/main/js/app/utils/startReactApp.tsx @@ -239,8 +239,11 @@ const router = createBrowserRouter( path="admin/plugin_risk_consent" element={} /> - } /> - } /> + + }> + } /> + } /> + ,