[feature]: Add create-dms-page CLI for automating DMS page creation

.gitignore

@@ -2,7 +2,7 @@
 
 # dependencies
 /packages/*/node_modules
-/scripts/*/node_modules
+/scripts/**/node_modules
 /node_modules
 /.pnpm-store
 /.pnp
@@ -41,4 +41,4 @@ yarn-error.log*
 /packages/icons/.dumi/tmp*
 docs-dist
 docs-dist.tar.gz
-es
+es

package.json

@@ -12,9 +12,9 @@
     "build": "pnpm --filter base build",
     "build:ee": "pnpm --filter base build:ee",
     "build:demo": "pnpm --filter base build:demo",
-    "prettier:w": "prettier -w packages/*/src/ packages/*/lib/",
-    "prettier:c": "prettier -c packages/*/src/ packages/*/lib/",
-    "eslint": "eslint  packages/*/src/ packages/*/lib/",
+    "prettier:w": "prettier -w packages/*/src/ packages/*/lib/ scripts/cli/*/src",
+    "prettier:c": "prettier -c packages/*/src/ packages/*/lib/ scripts/cli/*/src",
+    "eslint": "eslint  packages/*/src/ packages/*/lib/ scripts/cli/*/src",
     "stylelint": "stylelint packages/*/{src,lib}/**/{*.less,style.ts,element.ts}",
     "ts-check": "tsc --noEmit",
     "checker": "pnpm ts-check && pnpm eslint && pnpm stylelint && pnpm prettier:c",
@@ -26,11 +26,13 @@
     "icon:docs:g": "pnpm --filter @actiontech/icons docs:g",
     "icon:docs": "pnpm --filter @actiontech/icons start",
     "icon:docs:build": "pnpm --filter @actiontech/icons docs:build",
-    "icon:build": "pnpm --filter @actiontech/icons build"
+    "icon:build": "pnpm --filter @actiontech/icons build",
+    "dms:g": "pnpm --filter @actiontech/cli-create-dms-page build && create-dms-page"
   },
   "keywords": [],
   "author": "",
   "devDependencies": {
+    "@actiontech/cli-create-dms-page": "workspace:^",
     "@cfaester/enzyme-adapter-react-18": "^0.7.0",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",

packages/base/src/locale/zh-CN/dmsMenu.ts

@@ -1,3 +1,4 @@
+// @warn/cli/create-dms-page
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
   projectOverview: '项目概览',

packages/base/src/locale/zh-CN/index.ts

@@ -1,3 +1,4 @@
+// @warn/cli/create-dms-page
 import dmsLogin from './dmsLogin';
 import dmsHome from './dmsHome';
 import dmsLayout from './dmsLayout';

packages/base/src/page/Nav/SideMenu/MenuList/menus/base.tsx

@@ -1,3 +1,5 @@
+// @warn/cli/create-dms-page
+
 import {
   MemberFilled,
   ExportFilled,

packages/base/src/page/Nav/SideMenu/MenuList/menus/index.type.ts

@@ -1,3 +1,5 @@
+// @warn/cli/create-dms-page
+
 import { PermissionsConstantType } from '@actiontech/shared/lib/global';
 import { ItemType } from 'antd/es/menu/hooks/useItems';
 
@@ -21,11 +23,13 @@ export type MenuStructTreeType = Array<
 
 export type GenerateMenuItemType = (projectID: string) => CustomMenuItemType;
 
-export type MenuStructTreeKey =
+type BaseMenuStructTreeKey =
   | 'instance'
   | 'member'
   | 'cloud-beaver'
-  | 'data-export'
+  | 'data-export';
+
+type SqleMenuStructTreeKey =
   | 'project-overview'
   | 'sql-audit'
   | 'plugin-audit'
@@ -42,3 +46,5 @@ export type MenuStructTreeKey =
   | 'pipeline-configuration'
   | 'version-management'
   | 'data-source-comparison';
+
+export type MenuStructTreeKey = BaseMenuStructTreeKey | SqleMenuStructTreeKey;

packages/base/src/page/Nav/SideMenu/MenuList/menus/menu.data.tsx

@@ -1,3 +1,4 @@
+// @warn/cli/create-dms-page
 import { t } from '../../../../../locale';
 import { MenuStructTreeType } from './index.type';
 import { genMenuItemsWithMenuStructTree } from './common';

packages/base/src/page/Nav/SideMenu/MenuList/menus/sqle.tsx

@@ -1,3 +1,5 @@
+// @warn/cli/create-dms-page
+
 import { SIDE_MENU_DATA_PLACEHOLDER_KEY } from './common';
 import { t } from '../../../../../locale';
 import { GenerateMenuItemType } from './index.type';

packages/base/src/router/router.base.tsx

@@ -1,60 +1,69 @@
+// @warn/cli/create-dms-page
 import { PERMISSIONS } from '@actiontech/shared/lib/global';
 import { ROUTE_PATHS } from '@actiontech/shared/lib/data/routePaths';
 import { RouterConfigItem } from '@actiontech/shared/lib/types/common.type';
-import { lazy } from 'react';
-
+import React from 'react';
 // #if [ee]
-const Project = lazy(() => import('../page/Project'));
-const ImportProject = lazy(() => import('../page/Project/ImportProject'));
-const ProjectBatchImportDataSource = lazy(
+const Project = React.lazy(() => import('../page/Project'));
+const ImportProject = React.lazy(() => import('../page/Project/ImportProject'));
+const ProjectBatchImportDataSource = React.lazy(
   () => import('../page/Project/BatchImportDataSource')
 );
 
-const ExportTaskList = lazy(() => import('../page/DataExportManagement/List'));
-const CreateExportTask = lazy(
+const ExportTaskList = React.lazy(
+  () => import('../page/DataExportManagement/List')
+);
+const CreateExportTask = React.lazy(
   () => import('../page/DataExportManagement/Create')
 );
-const ExportTaskDetail = lazy(
+const ExportTaskDetail = React.lazy(
   () => import('../page/DataExportManagement/Detail')
 );
 
-const AddSyncTask = lazy(() => import('../page/SyncDataSource/AddPage'));
-const UpdateSyncTask = lazy(() => import('../page/SyncDataSource/UpdatePage'));
-const BatchImportDataSource = lazy(
+const AddSyncTask = React.lazy(() => import('../page/SyncDataSource/AddPage'));
+const UpdateSyncTask = React.lazy(
+  () => import('../page/SyncDataSource/UpdatePage')
+);
+const BatchImportDataSource = React.lazy(
   () => import('../page/DataSource/components/BatchImportDataSource')
 );
 
-const GlobalBatchImportDataSource = lazy(
+const GlobalBatchImportDataSource = React.lazy(
   () => import('../page/GlobalDataSource/BatchImportDataSource')
 );
-const GlobalAddDataSource = lazy(
+const GlobalAddDataSource = React.lazy(
   () => import('../page/DataSource/components/AddDataSource')
 );
 // #endif
 
-const Home = lazy(() => import('../page/Home'));
-const UserCenter = lazy(() => import('../page/UserCenter'));
-const DataSource = lazy(() => import('../page/DataSource'));
-const AddDataSource = lazy(
+const Home = React.lazy(() => import('../page/Home'));
+const UserCenter = React.lazy(() => import('../page/UserCenter'));
+const DataSource = React.lazy(() => import('../page/DataSource'));
+const AddDataSource = React.lazy(
   () => import('../page/DataSource/components/AddDataSource')
 );
-const UpdateDataSource = lazy(
+const UpdateDataSource = React.lazy(
   () => import('../page/DataSource/components/UpdateDataSource')
 );
-const DataSourceList = lazy(() => import('../page/DataSource/components/List'));
+const DataSourceList = React.lazy(
+  () => import('../page/DataSource/components/List')
+);
 
-const Member = lazy(() => import('../page/Member'));
-const ProjectDetail = lazy(() => import('../page/Project/Detail'));
-const System = lazy(() => import('../page/System'));
+const Member = React.lazy(() => import('../page/Member'));
+const System = React.lazy(() => import('../page/System'));
 
-const CloudBeaver = lazy(() => import('../page/CloudBeaver'));
-const Account = lazy(() => import('../page/Account'));
-const ExportTaskManagement = lazy(() => import('../page/DataExportManagement'));
-const DataSourceManagement = lazy(() => import('../page/DataSourceManagement'));
+const CloudBeaver = React.lazy(() => import('../page/CloudBeaver'));
+const Account = React.lazy(() => import('../page/Account'));
+const ExportTaskManagement = React.lazy(
+  () => import('../page/DataExportManagement')
+);
+const DataSourceManagement = React.lazy(
+  () => import('../page/DataSourceManagement')
+);
 
-const Transit = lazy(() => import('../page/Transit'));
+const Transit = React.lazy(() => import('../page/Transit'));
 
-export const BaseRouterConfig: RouterConfigItem[] = [
+export const BaseGlobalRouterConfig: RouterConfigItem[] = [
   {
     path: ROUTE_PATHS.BASE.HOME,
     key: 'home',
@@ -144,77 +153,73 @@ export const BaseRouterConfig: RouterConfigItem[] = [
         element: <ProjectBatchImportDataSource />
       }
     ]
-  },
+  }
   // #endif
+];
 
+export const BaseProjectRouterConfig: RouterConfigItem[] = [
+  {
+    path: ROUTE_PATHS.BASE.MEMBER.index.path,
+    key: 'member',
+    element: <Member />
+  },
   {
-    key: 'projectDetail',
-    path: ROUTE_PATHS.BASE.PROJECT_DETAIL,
-    element: <ProjectDetail />,
+    path: ROUTE_PATHS.BASE.DATA_SOURCE.index.path,
+    key: 'dataSource',
+    element: <DataSource />,
     children: [
       {
-        path: ROUTE_PATHS.BASE.MEMBER.index.path,
-        key: 'member',
-        element: <Member />
+        index: true,
+        element: <DataSourceList />,
+        key: 'dataSourceList'
+      },
+      {
+        path: ROUTE_PATHS.BASE.DATA_SOURCE.create.path,
+        element: <AddDataSource />,
+        key: 'dataSourceCreate'
       },
       {
-        path: ROUTE_PATHS.BASE.DATA_SOURCE.index.path,
-        key: 'dataSource',
-        element: <DataSource />,
-        children: [
-          {
-            index: true,
-            element: <DataSourceList />,
-            key: 'dataSourceList'
-          },
-          {
-            path: ROUTE_PATHS.BASE.DATA_SOURCE.create.path,
-            element: <AddDataSource />,
-            key: 'dataSourceCreate'
-          },
-          {
-            path: ROUTE_PATHS.BASE.DATA_SOURCE.update.path,
-            element: <UpdateDataSource />,
-            key: 'dataSourceUpdate'
-          },
-          // #if [ee]
-          {
-            path: ROUTE_PATHS.BASE.DATA_SOURCE.batch_import.path,
-            element: <BatchImportDataSource />,
-            key: 'batchImportDataSource'
-          }
-          // #endif
-        ]
+        path: ROUTE_PATHS.BASE.DATA_SOURCE.update.path,
+        element: <UpdateDataSource />,
+        key: 'dataSourceUpdate'
       },
+      // #if [ee]
+      {
+        path: ROUTE_PATHS.BASE.DATA_SOURCE.batch_import.path,
+        element: <BatchImportDataSource />,
+        key: 'batchImportDataSource'
+      }
+      // #endif
+    ]
+  },
+  {
+    path: ROUTE_PATHS.BASE.DATA_EXPORT.index.path,
+    key: 'dataExportManagement',
+    element: <ExportTaskManagement />,
+    // #if [ee]
+    children: [
       {
-        path: ROUTE_PATHS.BASE.DATA_EXPORT.index.path,
+        index: true,
         key: 'dataExportManagement',
-        element: <ExportTaskManagement />,
-        // #if [ee]
-        children: [
-          {
-            index: true,
-            key: 'dataExportManagement',
-            element: <ExportTaskList />
-          },
-          {
-            path: ROUTE_PATHS.BASE.DATA_EXPORT.create.path,
-            element: <CreateExportTask />,
-            key: 'CreateExportTask'
-          },
-          {
-            path: ROUTE_PATHS.BASE.DATA_EXPORT.detail.path,
-            element: <ExportTaskDetail />,
-            key: 'ExportTaskDetail'
-          }
-        ]
-        // #endif
+        element: <ExportTaskList />
+      },
+      {
+        path: ROUTE_PATHS.BASE.DATA_EXPORT.create.path,
+        element: <CreateExportTask />,
+        key: 'CreateExportTask'
       },
       {
-        path: ROUTE_PATHS.BASE.CLOUD_BEAVER.index.path,
-        key: 'cloudBeaver',
-        element: <CloudBeaver />
+        path: ROUTE_PATHS.BASE.DATA_EXPORT.detail.path,
+        element: <ExportTaskDetail />,
+        key: 'ExportTaskDetail'
       }
     ]
+
+    // #endif
+  },
+  {
+    path: ROUTE_PATHS.BASE.CLOUD_BEAVER.index.path,
+    key: 'cloudBeaver',
+    element: <CloudBeaver />
   }
 ];

packages/base/src/router/router.tsx

@@ -1,7 +1,7 @@
 import { Navigate, RouteObject } from 'react-router-dom';
 import { RouterConfigItem } from '@actiontech/shared/lib/types/common.type';
 import { lazy } from 'react';
-import { BaseRouterConfig } from './router.base';
+import { BaseGlobalRouterConfig, BaseProjectRouterConfig } from './router.base';
 import { ROUTE_PATHS } from '@actiontech/shared/lib/data/routePaths';
 
 // #if [sqle]
@@ -14,12 +14,18 @@ import {
 const ProjectDetail = lazy(() => import('../page/Project/Detail'));
 
 export const AuthRouterConfig: RouterConfigItem[] = [
-  ...BaseRouterConfig,
+  ...BaseGlobalRouterConfig,
+  {
+    key: 'projectDetail',
+    path: ROUTE_PATHS.BASE.PROJECT_DETAIL,
+    element: <ProjectDetail />,
+    children: BaseProjectRouterConfig
+  },
 
   // #if [sqle]
   ...SQLEGlobalRouterConfig,
   {
-    key: 'projectDetail',
+    key: 'sqleProjectDetail',
     path: ROUTE_PATHS.BASE.SQLE_PROJECT_DETAIL,
     element: <ProjectDetail />,
     children: SQLEProjectDetailRouterConfig

packages/base/src/router/test/__snapshots__/router.base.test.tsx.snap

@@ -201,7 +201,7 @@ exports[`base/router-base-ee render base route data snap 1`] = `
         "path": ":projectID/cloud-beaver",
       },
     ],
-    "element": <UNDEFINED />,
+    "element": <ProjectDetail />,
     "key": "projectDetail",
     "path": "/project/*",
   },

packages/base/src/router/test/__snapshots__/router.ce.base.test.tsx.snap

@@ -100,7 +100,7 @@ exports[`base/router-base-ce render base route data snap 1`] = `
         "path": ":projectID/cloud-beaver",
       },
     ],
-    "element": <UNDEFINED />,
+    "element": <ProjectDetail />,
     "key": "projectDetail",
     "path": "/project/*",
   },

packages/base/src/router/test/__snapshots__/router.ce.sqle.test.tsx.snap

@@ -997,7 +997,7 @@ exports[`base/router-sqle-ce render sqle route data snap 1`] = `
       },
     ],
     "element": <UNDEFINED />,
-    "key": "projectDetail",
+    "key": "sqleProjectDetail",
     "path": "/sqle/project/*",
   },
   {