@nocobase/client-v2 2.1.0-alpha.4 → 2.1.0-alpha.45

package/src/settings-center/plugin-manager/index.tsx

@@ -0,0 +1,254 @@
+/**
+ * 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 { MenuOutlined } from '@ant-design/icons';
+import { useDebounce, useMemoizedFn, useRequest } from 'ahooks';
+import { Alert, Button, Card, Divider, Flex, Grid, Input, List, Popover, Space, Spin, theme } from 'antd';
+import _ from 'lodash';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useApp } from '../../hooks/useApp';
+import { BulkEnableButton } from './BulkEnableButton';
+import { PluginCard } from './PluginCard';
+import type { IPluginData } from './types';
+
+const KEYWORDS = [
+  'Data model tools',
+  'Data sources',
+  'Collections',
+  'Collection fields',
+  'Blocks',
+  'Actions',
+  'Workflow',
+  'Users & permissions',
+  'AI',
+  'Authentication',
+  'Notification',
+  'System management',
+  'Security',
+  'Architecture',
+  'Logging and monitoring',
+  'Others',
+];
+
+const FILTER_TYPES = ['All', 'Built-in', 'Enabled', 'Not enabled', 'Problematic'] as const;
+type FilterType = (typeof FILTER_TYPES)[number];
+
+const SIDEBAR_WIDTH = 200;
+
+function hasIntersection(arr1?: string[], arr2?: string[]) {
+  if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false;
+  return arr1.some((item) => arr2.includes(item));
+}
+
+function CategoryList({
+  items,
+  activeKeyword,
+  onSelect,
+}: {
+  items: { key: string; list?: IPluginData[] }[];
+  activeKeyword: string | null;
+  onSelect: (key: string) => void;
+}) {
+  const { t } = useTranslation();
+  return (
+    <List
+      size="small"
+      dataSource={items}
+      split={false}
+      renderItem={(item) => (
+        <List.Item style={{ padding: '3px 0', cursor: 'pointer' }} onClick={() => onSelect(item.key)}>
+          <a style={{ fontWeight: activeKeyword === item.key ? 'bold' : 'normal' }}>{t(item.key)}</a>
+        </List.Item>
+      )}
+    />
+  );
+}
+
+export const PluginManagerPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const app = useApp();
+  const screens = Grid.useBreakpoint();
+  const isWide = !!screens.md;
+
+  const {
+    data: plugins = [],
+    loading,
+    error,
+  } = useRequest<IPluginData[], []>(
+    async () => {
+      const response = await app.apiClient.request({
+        url: 'pm:list',
+        skipNotify: true,
+      });
+      return Array.isArray(response?.data?.data) ? response.data.data : [];
+    },
+    { cacheKey: 'pm:list' },
+  );
+
+  const filterBuckets = useMemo<{ type: FilterType; list: IPluginData[] }[]>(() => {
+    const list = [...plugins].reverse();
+    return [
+      { type: 'All', list },
+      { type: 'Built-in', list: _.filter(list, (item) => item.builtIn) },
+      { type: 'Enabled', list: _.filter(list, (item) => item.enabled) },
+      { type: 'Not enabled', list: _.filter(list, (item) => !item.enabled) },
+      { type: 'Problematic', list: _.filter(list, (item) => !item.isCompatible) },
+    ];
+  }, [plugins]);
+
+  const [filterIndex, setFilterIndex] = useState(0);
+  const [searchValue, setSearchValue] = useState('');
+  const [keyword, setKeyword] = useState<string | null>(null);
+  const [categoryOpen, setCategoryOpen] = useState(false);
+  const debouncedSearchValue = useDebounce(searchValue, { wait: 100 });
+
+  const keywordBuckets = useMemo(
+    () =>
+      KEYWORDS.map((k) => {
+        if (k === 'Others') {
+          return { key: k, list: plugins.filter((v) => !hasIntersection(v.keywords, KEYWORDS)) };
+        }
+        return { key: k, list: plugins.filter((v) => v.keywords?.includes(k)) };
+      }),
+    [plugins],
+  );
+
+  const pluginList = useMemo(() => {
+    let list = filterBuckets[filterIndex]?.list || [];
+    if (keyword) {
+      const byKeyword = keywordBuckets.find((v) => v.key === keyword)?.list || [];
+      if (filterIndex === 0) {
+        list = byKeyword;
+      } else {
+        list = byKeyword.filter((v) => list.find((k) => k.name === v.name));
+      }
+    }
+    const searchLower = debouncedSearchValue.toLowerCase().trim();
+    if (searchLower) {
+      list = _.filter(
+        list,
+        (item) =>
+          String(item.displayName || '')
+            .toLowerCase()
+            .includes(searchLower) ||
+          String(item.description || '')
+            .toLowerCase()
+            .includes(searchLower),
+      );
+    }
+    return [...list].sort((a, b) => (a.displayName || '').localeCompare(b.displayName || ''));
+  }, [filterIndex, filterBuckets, debouncedSearchValue, keyword, keywordBuckets]);
+
+  const handleKeywordSelect = useMemoizedFn((key: string) => {
+    setKeyword((prev) => (prev === key ? null : key));
+    setCategoryOpen(false);
+  });
+
+  const handleSearchChange = useMemoizedFn((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  });
+
+  if (loading) {
+    return <Spin />;
+  }
+
+  const filterTabs = (
+    <Space size={token.marginXXS} split={<Divider type="vertical" />} wrap>
+      {!isWide && (
+        <Popover
+          trigger="click"
+          placement="bottomLeft"
+          open={categoryOpen}
+          onOpenChange={setCategoryOpen}
+          content={
+            <div style={{ minWidth: 180, maxHeight: '60vh', overflowY: 'auto' }}>
+              <CategoryList items={keywordBuckets} activeKeyword={keyword} onSelect={handleKeywordSelect} />
+            </div>
+          }
+        >
+          <Button type="text" size="small" icon={<MenuOutlined />} aria-label={t('Category')} />
+        </Popover>
+      )}
+      {filterBuckets.map((item, index) => (
+        <a
+          role="button"
+          aria-label={item.type}
+          onClick={() => setFilterIndex(index)}
+          key={item.type}
+          style={{ fontWeight: filterIndex === index ? 'bold' : 'normal' }}
+        >
+          {t(item.type)}
+          {filterIndex === index ? `(${pluginList.length})` : null}
+        </a>
+      ))}
+    </Space>
+  );
+
+  const topBar = (
+    <Flex
+      wrap="wrap"
+      gap={token.margin}
+      align="center"
+      justify="space-between"
+      style={{ marginBottom: token.marginLG }}
+    >
+      {filterTabs}
+      <Flex gap={token.marginSM} align="center" style={{ flex: '1 1 auto', justifyContent: 'flex-end' }}>
+        <Input
+          allowClear
+          placeholder={t('Search plugin')}
+          onChange={handleSearchChange}
+          style={{ flex: '1 1 auto', maxWidth: 320, minWidth: 160 }}
+        />
+        <div style={{ flexShrink: 0 }}>
+          <BulkEnableButton plugins={plugins} />
+        </div>
+      </Flex>
+    </Flex>
+  );
+
+  return (
+    <>
+      {error ? (
+        <Alert
+          showIcon
+          type="error"
+          message={t('Failed to load plugins')}
+          description={error.message}
+          style={{ marginBottom: token.marginLG }}
+        />
+      ) : null}
+      {topBar}
+      <Flex gap={token.margin} align="flex-start">
+        {isWide && (
+          <Card style={{ width: SIDEBAR_WIDTH, flexShrink: 0 }} size="small">
+            <CategoryList items={keywordBuckets} activeKeyword={keyword} onSelect={handleKeywordSelect} />
+          </Card>
+        )}
+        <div
+          style={{
+            flex: '1 1 auto',
+            minWidth: 0,
+            display: 'grid',
+            gap: token.margin,
+            gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+          }}
+        >
+          {pluginList.map((item) => (
+            <PluginCard key={item.name} data={item} />
+          ))}
+        </div>
+      </Flex>
+    </>
+  );
+};
+
+export default PluginManagerPage;

package/src/settings-center/plugin-manager/types.ts

@@ -0,0 +1,35 @@
+/**
+ * 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.
+ */
+
+export interface IPluginData {
+  id: number;
+  createdAt: Date;
+  updatedAt: Date;
+  name: string;
+  displayName: string;
+  packageName: string;
+  version: string;
+  enabled: boolean;
+  removable?: boolean;
+  installed: boolean;
+  builtIn: boolean;
+  registry?: string;
+  authToken?: string;
+  compressedFileUrl?: string;
+  options: Record<string, unknown>;
+  description?: string;
+  type: 'npm' | 'upload' | 'url';
+  isCompatible?: boolean;
+  readmeUrl: string;
+  changelogUrl: string;
+  error: boolean;
+  updatable?: boolean;
+  homepage?: string;
+  keywords?: string[];
+}

package/src/settings-center/utils.tsx

@@ -0,0 +1,284 @@
+/**
+ * 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 { Outlet } from 'react-router-dom';
+import type { PluginSettingsPageType } from '../PluginSettingsManager';
+
+export const ADMIN_SETTINGS_LAYOUT_MODEL_UID = 'admin-settings-layout-model';
+export const PLUGIN_MANAGER_SETTING_NAME = 'plugin-manager';
+export const SYSTEM_SETTINGS_SETTING_NAME = 'system-settings';
+
+/**
+ * 判断配置项是否拥有可直接渲染的页面。
+ *
+ * @param {PluginSettingsPageType | null | undefined} setting 当前配置项
+ * @returns {boolean} 是否可直接打开
+ */
+export function hasOwnSettingsPage(setting?: PluginSettingsPageType | null) {
+  if (!setting) {
+    return false;
+  }
+
+  return !!setting.link || !!setting.componentLoader || (!!setting.Component && setting.Component !== Outlet);
+}
+
+/**
+ * 递归移除没有页面也没有子项的占位配置。
+ *
+ * @param {PluginSettingsPageType[]} settings 原始配置树
+ * @returns {PluginSettingsPageType[]} 过滤后的配置树
+ */
+export function filterRenderableSettings(settings: readonly PluginSettingsPageType[] = []): PluginSettingsPageType[] {
+  return settings
+    .map((setting) => {
+      const children = filterRenderableSettings(setting.children || []);
+
+      if (!hasOwnSettingsPage(setting) && children.length === 0) {
+        return null;
+      }
+
+      return {
+        ...setting,
+        children: children.length ? children : undefined,
+      };
+    })
+    .filter(Boolean) as PluginSettingsPageType[];
+}
+
+/**
+ * 过滤出可用于导航展示的 settings。
+ *
+ * 该过程会移除 hidden 项，并继续清理没有可见页面的空 menu。
+ *
+ * @param {PluginSettingsPageType[]} settings 原始配置树
+ * @returns {PluginSettingsPageType[]} 可见配置树
+ */
+export function filterVisibleSettings(settings: readonly PluginSettingsPageType[] = []): PluginSettingsPageType[] {
+  return settings
+    .filter((setting) => !setting.hidden)
+    .map((setting) => {
+      const children = filterVisibleSettings((setting.children || []) as PluginSettingsPageType[]);
+
+      if (!hasOwnSettingsPage(setting) && children.length === 0) {
+        return null;
+      }
+
+      return {
+        ...setting,
+        children: children.length ? children : undefined,
+      };
+    })
+    .filter(Boolean) as PluginSettingsPageType[];
+}
+
+/**
+ * 对顶级 settings 菜单做稳定排序。
+ *
+ * @param {PluginSettingsPageType[]} settings 顶级配置项
+ * @returns {PluginSettingsPageType[]} 排序后的顶级配置项
+ */
+export function sortTopLevelSettings(settings: PluginSettingsPageType[] = []) {
+  return [...settings].sort((a, b) => {
+    if (a.name === SYSTEM_SETTINGS_SETTING_NAME && b.name !== SYSTEM_SETTINGS_SETTING_NAME) {
+      return -1;
+    }
+    if (b.name === SYSTEM_SETTINGS_SETTING_NAME && a.name !== SYSTEM_SETTINGS_SETTING_NAME) {
+      return 1;
+    }
+    if ((a.sort || 0) !== (b.sort || 0)) {
+      return (a.sort || 0) - (b.sort || 0);
+    }
+    return (a.name || '').localeCompare(b.name || '');
+  });
+}
+
+/**
+ * 将 settings 树压平为路径索引，供动态路由匹配使用。
+ *
+ * @param {PluginSettingsPageType[]} settings 过滤后的配置树
+ * @returns {Record<string, PluginSettingsPageType>} 路径索引
+ */
+export function createSettingsPathMap(settings: readonly PluginSettingsPageType[] = []) {
+  const pathMap: Record<string, PluginSettingsPageType> = {};
+
+  const traverse = (items: readonly PluginSettingsPageType[]) => {
+    items.forEach((item) => {
+      pathMap[item.path] = item;
+      if (item.children?.length) {
+        traverse(item.children);
+      }
+    });
+  };
+
+  traverse(settings);
+
+  return pathMap;
+}
+
+/**
+ * 按路径查找当前命中的配置项，支持 `:param` 动态段。
+ *
+ * @param {Record<string, PluginSettingsPageType>} data 路径索引
+ * @param {string} url 当前地址
+ * @returns {PluginSettingsPageType | null} 命中的配置项
+ */
+export function matchSettingsRoute(data: Record<string, PluginSettingsPageType>, url: string) {
+  const paths = Object.keys(data);
+
+  if (data[url]) {
+    return data[url];
+  }
+
+  for (const pattern of paths) {
+    const regexPattern = pattern.replace(/:[^/]+/g, '([^/]+)');
+    if (url.match(new RegExp(`^${regexPattern}$`))) {
+      return data[pattern];
+    }
+  }
+
+  const matchedPrefix = paths
+    .filter((pattern) => {
+      const regexPattern = pattern.replace(/:[^/]+/g, '[^/]+');
+      return url.match(new RegExp(`^${regexPattern}/`));
+    })
+    .sort((a, b) => b.length - a.length)[0];
+
+  return matchedPrefix ? data[matchedPrefix] : null;
+}
+
+/**
+ * 用实际路由参数替换 settings path 中的动态段。
+ *
+ * @param {string} urlTemplate 原始 settings 路由模板
+ * @param {Record<string, string>} params 当前路由参数
+ * @returns {string} 替换后的目标地址
+ */
+export function replaceRouteParams(urlTemplate: string, params?: Record<string, string>) {
+  return urlTemplate.replace(/:\w+/g, (match) => {
+    const paramName = match.substring(1);
+    return params?.[paramName] || match;
+  });
+}
+
+/**
+ * 递归查找某个配置项树中的第一个内部页面。
+ *
+ * @param {PluginSettingsPageType[]} settings 配置树
+ * @returns {PluginSettingsPageType | null} 第一个可内部打开的页面
+ */
+export function findFirstInternalSettingsPage(
+  settings: readonly PluginSettingsPageType[] = [],
+): PluginSettingsPageType | null {
+  for (const setting of settings) {
+    if (setting.children?.length) {
+      const firstChild = findFirstInternalSettingsPage(setting.children);
+      if (firstChild) {
+        return firstChild;
+      }
+    }
+
+    if (hasOwnSettingsPage(setting) && !setting.link) {
+      return setting;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 查找指定名称的配置项。
+ *
+ * @param {PluginSettingsPageType[]} settings 配置树
+ * @param {string} name 配置项名称
+ * @returns {PluginSettingsPageType | null} 命中的配置项
+ */
+export function findSettingsByName(
+  settings: readonly PluginSettingsPageType[] = [],
+  name: string,
+): PluginSettingsPageType | null {
+  for (const setting of settings) {
+    if (setting.name === name) {
+      return setting;
+    }
+    if (setting.children?.length) {
+      const child = findSettingsByName(setting.children, name);
+      if (child) {
+        return child;
+      }
+    }
+  }
+
+  return null;
+}
+
+/**
+ * 为 settings 首页计算默认落点。
+ *
+ * @param {PluginSettingsPageType[]} settings 当前可访问配置树
+ * @returns {string | undefined} 默认跳转路径
+ */
+export function getDefaultSettingsPath(settings: readonly PluginSettingsPageType[] = []) {
+  const preferredNames = [SYSTEM_SETTINGS_SETTING_NAME, PLUGIN_MANAGER_SETTING_NAME];
+
+  for (const name of preferredNames) {
+    const preferred = findSettingsByName(settings, name);
+    if (!preferred) {
+      continue;
+    }
+
+    if (hasOwnSettingsPage(preferred) && !preferred.link) {
+      return preferred.path;
+    }
+
+    const preferredChildPath = findFirstInternalSettingsPage(preferred.children as PluginSettingsPageType[])?.path;
+    if (preferredChildPath) {
+      return preferredChildPath;
+    }
+  }
+
+  return findFirstInternalSettingsPage(settings)?.path;
+}
+
+/**
+ * 把 settings 结构转换成 antd Menu items。
+ *
+ * @param {PluginSettingsPageType[]} settings 目标配置项
+ * @returns {any[] | undefined} Menu items
+ */
+export function getMenuItems(settings: readonly PluginSettingsPageType[] = []) {
+  const pinnedList = settings.filter((item) => item.isPinned && !item.hidden);
+  const otherList = settings.filter((item) => !item.isPinned && !item.hidden);
+  const items: any[] = [];
+
+  if (pinnedList.length) {
+    items.push(...pinnedList, { type: 'divider' });
+  }
+
+  if (otherList.length) {
+    items.push(...otherList);
+  }
+
+  if (items.length === 0) {
+    return undefined;
+  }
+
+  return items.map((item: any) => {
+    if (item.type === 'divider') {
+      return { type: 'divider' };
+    }
+
+    return {
+      key: item.name,
+      label: item.label,
+      title: item.title,
+      icon: item.icon,
+      children: item.children?.length ? getMenuItems(item.children) : undefined,
+    };
+  });
+}

package/src/theme/AntdAppProvider.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 { useApp } from '../hooks/useApp';
+import { App } from 'antd';
+import React, { memo, useLayoutEffect } from 'react';
+
+const AppInner = memo(({ children }: { children: React.ReactNode }) => {
+  const app = useApp();
+  const { notification } = App.useApp();
+
+  useLayoutEffect(() => {
+    app.context.defineProperty('notification', {
+      value: notification,
+    });
+  }, [app, notification]);
+
+  return <>{children}</>;
+});
+AppInner.displayName = 'AppInner';
+
+const AntdAppProvider = ({
+  children,
+  className,
+  style,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}) => {
+  return (
+    <App
+      className={className}
+      style={{
+        height: '100%',
+        ...style,
+      }}
+    >
+      <AppInner>{children}</AppInner>
+    </App>
+  );
+};
+
+AntdAppProvider.displayName = 'AntdAppProvider';
+
+export default AntdAppProvider;

package/src/theme/__tests__/globalStyles.test.ts

@@ -0,0 +1,24 @@
+/**
+ * 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 { describe, expect, it } from 'vitest';
+import '../globalStyles';
+
+describe('client-v2 global styles', () => {
+  it('includes flow view visibility classes used by drawer and dialog views', () => {
+    const styleText = Array.from(document.querySelectorAll('style'))
+      .map((style) => style.textContent || '')
+      .join('\n');
+
+    expect(styleText).toContain('.nb-hidden');
+    expect(styleText).toContain('display:none');
+    expect(styleText).toContain('.nb-dialog-overflow-hidden .ant-modal-content');
+    expect(styleText).toContain('overflow:hidden');
+  });
+});

package/src/theme/compatOldTheme.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 defaultTheme from './defaultTheme';
+import { ThemeConfig } from './type';
+
+function compatOldTheme(theme: ThemeConfig) {
+  if (!theme.token?.colorSettings) {
+    theme.token = { ...theme.token, ...defaultTheme.token };
+  }
+
+  return theme;
+}
+
+export default compatOldTheme;