refactor: unify 404 page components (#6778)

packages/core/client/src/common/AppNotFound.tsx

@@ -0,0 +1,30 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import { Button, Result } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+export const AppNotFound = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation();
+  return (
+    <Result
+      status="404"
+      title="404"
+      subTitle={t('Sorry, the page you visited does not exist.')}
+      extra={
+        <Button onClick={() => navigate('/', { replace: true })} type="primary">
+          Back Home
+        </Button>
+      }
+    />
+  );
+};

packages/core/client/src/common/index.ts

@@ -7,5 +7,6 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+export * from './AppNotFound';
 export * from './SelectWithTitle';
 export * from './useFieldComponentName';

packages/core/client/src/nocobase-buildin-plugin/index.tsx

@@ -14,12 +14,13 @@ import { getSubAppName } from '@nocobase/sdk';
 import { tval } from '@nocobase/utils/client';
 import { Button, Modal, Result, Spin } from 'antd';
 import React, { FC } from 'react';
-import { Navigate, useNavigate } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
 import { ACLPlugin } from '../acl';
 import { Application } from '../application';
 import { Plugin } from '../application/Plugin';
 import { BlockSchemaComponentPlugin } from '../block-provider';
 import { CollectionPlugin } from '../collection-manager';
+import { AppNotFound } from '../common/AppNotFound';
 import { RemoteDocumentTitlePlugin } from '../document-title';
 import { PinnedListPlugin } from '../plugin-manager';
 import { PMPlugin } from '../pm';
@@ -260,22 +261,6 @@ const AppMaintainingDialog: FC<{ app: Application; error: Error }> = observer(
   { displayName: 'AppMaintainingDialog' },
 );
 
-export const AppNotFound = () => {
-  const navigate = useNavigate();
-  return (
-    <Result
-      status="404"
-      title="404"
-      subTitle="Sorry, the page you visited does not exist."
-      extra={
-        <Button onClick={() => navigate('/', { replace: true })} type="primary">
-          Back Home
-        </Button>
-      }
-    />
-  );
-};
-
 export class NocoBaseBuildInPlugin extends Plugin {
   async afterAdd() {
     this.app.addComponents({

packages/core/client/src/pm/PluginManager.tsx

@@ -10,7 +10,7 @@
 export * from './PluginManagerLink';
 import { PageHeader } from '@ant-design/pro-layout';
 import { useDebounce } from 'ahooks';
-import { Button, Col, Divider, Input, List, Modal, Result, Row, Space, Spin, Table, Tabs } from 'antd';
+import { Button, Col, Divider, Input, List, Modal, Row, Space, Spin, Table, Tabs } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +19,7 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { css } from '@emotion/css';
 import { useACLRoleContext } from '../acl/ACLProvider';
 import { useAPIClient, useRequest } from '../api-client';
+import { AppNotFound } from '../common/AppNotFound';
 import { useDocumentTitle } from '../document-title';
 import { useToken } from '../style';
 import { PluginCard } from './PluginCard';
@@ -407,6 +408,6 @@ export const PluginManager = () => {
       </div>
     </div>
   ) : (
-    <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." />
+    <AppNotFound />
   );
 };

packages/core/client/src/pm/PluginSetting.tsx

@@ -9,11 +9,12 @@
 
 import { PageHeader } from '@ant-design/pro-layout';
 import { css } from '@emotion/css';
-import { Layout, Menu, Result } from 'antd';
+import { Layout, Menu } from 'antd';
 import _ from 'lodash';
 import React, { createContext, useCallback, useEffect, useMemo } from 'react';
 import { Navigate, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ADMIN_SETTINGS_PATH, PluginSettingsPageType, useApp } from '../application';
+import { AppNotFound } from '../common/AppNotFound';
 import { useDocumentTitle } from '../document-title';
 import { useCompile } from '../schema-component';
 import { useStyles } from './style';
@@ -223,13 +224,7 @@ export const AdminSettingsLayout = () => {
               }
             />
           )}
-          <div className={styles.pageContent}>
-            {currentSetting ? (
-              <Outlet />
-            ) : (
-              <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." />
-            )}
-          </div>
+          <div className={styles.pageContent}>{currentSetting ? <Outlet /> : <AppNotFound />}</div>
         </Layout.Content>
       </Layout>
     </div>

packages/core/client/src/route-switch/antd/admin-layout/index.tsx

@@ -18,7 +18,6 @@ import { useTranslation } from 'react-i18next';
 import { Link, Navigate, Outlet, useLocation, useNavigate } from 'react-router-dom';
 import {
   ACLRolesCheckProvider,
-  AppNotFound,
   CurrentAppInfoProvider,
   DndContext,
   Icon,
@@ -45,6 +44,7 @@ import {
   useLocationNoUpdate,
 } from '../../../application/CustomRouterContextProvider';
 import { Plugin } from '../../../application/Plugin';
+import { AppNotFound } from '../../../common/AppNotFound';
 import { withTooltipComponent } from '../../../hoc/withTooltipComponent';
 import { menuItemInitializer } from '../../../modules/menu/menuItemInitializer';
 import { useMenuTranslation } from '../../../schema-component/antd/menu/locale';

packages/core/client/src/schema-component/antd/page/Page.tsx

@@ -29,10 +29,10 @@ import {
   useNavigateNoUpdate,
   useRouterBasename,
 } from '../../../application/CustomRouterContextProvider';
+import { AppNotFound } from '../../../common/AppNotFound';
 import { useDocumentTitle } from '../../../document-title';
 import { useGlobalTheme } from '../../../global-theme';
 import { Icon } from '../../../icon';
-import { AppNotFound } from '../../../nocobase-buildin-plugin';
 import {
   NocoBaseDesktopRouteType,
   NocoBaseRouteContext,

packages/core/client/src/schema-component/antd/page/PagePopups.tsx

@@ -10,12 +10,11 @@
 import { ISchema, Schema } from '@formily/json-schema';
 import { useFieldSchema } from '@formily/react';
 import { uid } from '@formily/shared';
-import { Result } from 'antd';
 import _ from 'lodash';
 import { FC, default as React, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { Location, useLocation } from 'react-router-dom';
 import { useAPIClient } from '../../../api-client';
+import { AppNotFound } from '../../../common/AppNotFound';
 import { DataBlockProvider } from '../../../data-source/data-block/DataBlockProvider';
 import { BlockRequestContextProvider } from '../../../data-source/data-block/DataBlockRequestProvider';
 import { useKeepAlive } from '../../../route-switch/antd/admin-layout/KeepAlive';
@@ -475,10 +474,7 @@ function get404Schema() {
                     version: '2.0',
                     type: 'void',
                     'x-component': function Com() {
-                      const { t } = useTranslation();
-                      return (
-                        <Result status="404" title="404" subTitle={t('Sorry, the page you visited does not exist.')} />
-                      );
+                      return <AppNotFound />;
                     },
                     'x-uid': uid(),
                     'x-async': false,