Management: fix routing

packages/management/src/App.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { observer, Provider as MobxProvider } from "mobx-react";
 import { I18nextProvider, useTranslation } from "react-i18next";
+import { Outlet } from "react-router-dom";
 
 import { isMobileOnly } from "react-device-detect";
 
@@ -11,13 +12,13 @@ import Toast from "@docspace/components/toast";
 import "@docspace/common/custom.scss";
 
 import { RootStoreContext, RootStore, useStore } from "./store";
-import Client from "./categories";
 import SimpleHeader from "./SimpleHeader";
 
 import store from "client/store";
 import Layout from "client/Layout";
 import Main from "client/Main";
 import NavMenu from "client/NavMenu";
+import MainLayout from "SRC_DIR/Layout";
 
 import i18n from "./i18n";
 
@@ -60,7 +61,9 @@ const App = observer(() => {
         <NavMenu hideProfileMenu customHeader={<SimpleHeader />} />
         <Main isDesktop={false}>
           <div className="main-container">
-            <Client />
+            <MainLayout>
+              <Outlet />
+            </MainLayout>
           </div>
         </Main>
       </Layout>

packages/management/src/Layout/Article/Body/index.tsx

@@ -33,7 +33,7 @@ const ArticleBodyContent = () => {
   }, []);
 
   const onClickItem = (item: TSettingsTreeItem) => {
-    const path = "/management/" + item.link;
+    const path = item.link;
     setSelectedKey(item.key);
 
     if (isMobileOnly || isMobile()) {

packages/management/src/Layout/index.tsx

@@ -24,7 +24,7 @@ const ArticleSettings = React.memo(() => {
   );
 });
 
-const Layout = ({ children }: TLayoutProps) => {
+const MainLayout = ({ children }: TLayoutProps) => {
   return (
     <>
       <ArticleSettings />
@@ -39,4 +39,4 @@ const Layout = ({ children }: TLayoutProps) => {
   );
 };
 
-export default observer(Layout);
+export default observer(MainLayout);

packages/management/src/categories/index.tsx

@@ -1,14 +0,0 @@
-import React from "react";
-import { Outlet } from "react-router-dom";
-
-import Layout from "SRC_DIR/Layout";
-
-const Client = () => {
-  return (
-    <Layout>
-      <Outlet />
-    </Layout>
-  );
-};
-
-export default Client;

packages/management/src/router.tsx

@@ -9,15 +9,21 @@ import Backup from "./categories/backup";
 import Restore from "./categories/restore";
 import Payments from "./categories/payments";
 
+import ErrorBoundary from "@docspace/common/components/ErrorBoundary";
+
 import Error404 from "client/Error404";
 
-const router = createBrowserRouter([
+const routes = [
   {
-    path: "/management",
+    path: "/",
-    element: <App />,
+    element: (
+      <ErrorBoundary>
+        <App />
+      </ErrorBoundary>
+    ),
     errorElement: <Error404 />,
     children: [
-      { index: true, element: <Navigate to="/management/spaces" replace /> },
+      { index: true, element: <Navigate to="spaces" replace /> },
       {
         path: "spaces",
         element: <Spaces />,
@@ -28,7 +34,7 @@ const router = createBrowserRouter([
       },
       {
         path: "backup",
-        element: <Navigate to="/management/backup/data-backup" />,
+        element: <Navigate to="data-backup" />,
       },
       {
         path: "backup/data-backup",
@@ -48,6 +54,10 @@ const router = createBrowserRouter([
       },
     ],
   },
-]);
+];
+
+const router = createBrowserRouter(routes, {
+  basename: "/management",
+});
 
 export default router;

packages/management/src/utils/index.ts

@@ -2,7 +2,7 @@ import { settingsTree } from "./settingsTree"
 import { translations } from "../autoGeneratedTranslations";
 
 export const getItemByLink = (path: string) => {
-    const resultPath = path.split("/")[2];
+    const resultPath = path.split("/")[1];
     const item = settingsTree.filter((item) => item.link === resultPath);
     return item[0];
 }