chore(pm): migrate pm to system settings (#1566)

Co-authored-by: sealday <sealday@gmail.com>
Reviewed-on: daoyoucloud/tachybase#1566

packages/core/client/src/built-in/index.tsx

@@ -341,7 +341,6 @@ export class BuiltInPlugin extends Plugin {
           ui: { order: 50, component: 'DesignableSwitch', pin: true, snippet: 'ui.*' },
           wf: { order: 100, component: 'WorkflowLink', pin: true, snippet: 'pm.*' },
           ds: { order: 200, component: 'DatasourceLink', pin: true, snippet: 'pm.*' },
-          pm: { order: 300, component: 'PluginManagerLink', pin: true, snippet: 'pm' },
           sc: { order: 400, component: 'SettingsCenterDropdown', pin: true, snippet: 'pm.*' },
         },
       },

packages/core/client/src/built-in/pm/PluginManager.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { fuzzysearch } from '@tachybase/utils/client';
 
-import { PageHeader } from '@ant-design/pro-layout';
 import { useDebounce } from 'ahooks';
 import {
   Button,
@@ -350,25 +349,10 @@ const MarketplacePlugins = () => {
 };
 
 export const PluginManager = () => {
-  const params = useParams();
-  const navigate = useNavigate();
-  const { tabName = 'local' } = params;
-  const { t } = useTranslation();
   const { snippets = [] } = useACLRoleContext();
-  const { styles } = useStyles();
-
-  useEffect(() => {
-    const { tabName } = params;
-    if (!tabName) {
-      navigate(`/admin/pm/list/local/`, { replace: true });
-    }
-  }, []);
 
   return snippets.includes('pm') ? (
-    <div>
-      <PageHeader className={styles.pageHeader} ghost={false} title={t('Plugin manager')}></PageHeader>
-      <LocalPlugins />
-    </div>
+    <LocalPlugins />
   ) : (
     <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." />
   );

packages/core/client/src/built-in/pm/PluginManagerLink.tsx

@@ -9,24 +9,6 @@ import { useApp } from '../../application';
 import { useCompile } from '../../schema-component';
 import { useToken } from '../../style';
 
-export const PluginManagerLink = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { token } = useToken();
-  return (
-    <Tooltip title={t('Plugin manager')}>
-      <Button
-        data-testid={'plugin-manager-button'}
-        icon={<ApiOutlined style={{ color: token.colorTextHeaderMenu }} />}
-        title={t('Plugin manager')}
-        onClick={() => {
-          navigate('/admin/pm/list');
-        }}
-      />
-    </Tooltip>
-  );
-};
-
 export const SettingsCenterDropdown = () => {
   const compile = useCompile();
   const { token } = useToken();

packages/core/client/src/built-in/pm/index.tsx

@@ -2,11 +2,10 @@ import React from 'react';
 
 import { ADMIN_SETTINGS_PATH } from '../../application';
 import { Plugin } from '../../application/Plugin';
-import { USER_SETTINGS_PATH } from '../../application/UserSettingsManager';
 import { BlockTemplatesPane } from '../../schema-templates';
 import { SystemSettingsPane } from '../system-settings';
 import { PluginManager } from './PluginManager';
-import { DatasourceLink, PluginManagerLink, SettingsCenterDropdown, WorkflowLink } from './PluginManagerLink';
+import { SettingsCenterDropdown } from './PluginManagerLink';
 import { AdminSettingsLayout } from './PluginSetting';
 
 export * from './PluginManager';
@@ -33,11 +32,16 @@ export class PMPlugin extends Plugin {
       Component: SystemSettingsPane,
       aclSnippet: 'pm.system-settings.system-settings',
     });
+    this.app.pluginSettingsManager.add('plugin-manager', {
+      icon: 'ApiOutlined',
+      title: '{{t("Plugin manager")}}',
+      Component: PluginManager,
+      aclSnippet: 'pm',
+    });
   }
 
   addComponents() {
     this.app.addComponents({
-      PluginManagerLink,
       SettingsCenterDropdown,
     });
   }