@nocobase/client-v2 2.1.0-beta.37 → 2.1.0-beta.38

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

@@ -0,0 +1,195 @@
+/**
+ * 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 { useRequest } from 'ahooks';
+import { Alert, Col, Modal, Row, Space, Spin, Table, Tabs, theme, Typography } from 'antd';
+import type { TabsProps } from 'antd';
+import React, { FC, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useApp } from '../../hooks/useApp';
+import type { IPluginData } from './types';
+
+type Author =
+  | string
+  | {
+      name: string;
+      email?: string;
+      url?: string;
+    };
+
+interface PackageJSON {
+  name: string;
+  version: string;
+  description?: string;
+  repository?: string | { type: string; url: string };
+  homepage?: string;
+  license?: string;
+  author?: Author;
+  devDependencies?: Record<string, string>;
+  dependencies?: Record<string, string>;
+}
+
+interface DepCompatible {
+  name: string;
+  result: boolean;
+  versionRange: string;
+  packageVersion: string;
+}
+
+interface IPluginDetailData {
+  packageJson: PackageJSON;
+  homepage?: string;
+  depsCompatible: DepCompatible[] | false;
+  isCompatible?: boolean;
+  lastUpdated: string;
+}
+
+interface IPluginDetailProps {
+  plugin: IPluginData;
+  onCancel: () => void;
+}
+
+export const PluginDetail: FC<IPluginDetailProps> = ({ plugin, onCancel }) => {
+  const { t } = useTranslation();
+  const { token } = theme.useToken();
+  const app = useApp();
+
+  const { data, loading } = useRequest<IPluginDetailData | undefined, []>(
+    async () => {
+      const response = await app.apiClient.request({
+        url: 'pm:get',
+        params: { filterByTk: plugin.name },
+        skipNotify: true,
+      });
+      return response?.data?.data as IPluginDetailData | undefined;
+    },
+    {
+      refreshDeps: [plugin.name],
+      ready: !!plugin.name,
+    },
+  );
+
+  const dependenciesCompatibleTableColumns = useMemo(
+    () => [
+      { title: t('Name'), dataIndex: 'name', key: 'name' },
+      { title: t('Version range'), dataIndex: 'versionRange', key: 'versionRange' },
+      { title: t("Plugin's version"), dataIndex: 'packageVersion', key: 'packageVersion' },
+      {
+        title: t('Result'),
+        dataIndex: 'result',
+        key: 'result',
+        render: (result: boolean) => (
+          <Typography.Text type={result ? 'success' : 'danger'}>{result ? t('Yes') : t('No')}</Typography.Text>
+        ),
+      },
+    ],
+    [t],
+  );
+
+  const repository = useMemo(() => {
+    const repo = data?.packageJson?.repository;
+    if (!repo) return null;
+    const url = typeof repo === 'string' ? repo : repo.url;
+    return url.replace(/\.git$/, '').replace(/^git\+/, '');
+  }, [data]);
+
+  const author = useMemo(() => {
+    const a = data?.packageJson?.author;
+    if (!a) return null;
+    if (typeof a === 'string') return a;
+    return a.name;
+  }, [data]);
+
+  const infoRow = (label: string, value: React.ReactNode) => (
+    <Col span={24}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: token.marginXXS, marginBottom: token.marginSM }}>
+        <Typography.Text type="secondary">{label}</Typography.Text>
+        <Typography.Text strong>{value}</Typography.Text>
+      </div>
+    </Col>
+  );
+
+  const tabItems: TabsProps['items'] = [
+    {
+      key: 'readme',
+      label: t('Readme'),
+      children: (
+        <Row gutter={token.marginLG}>
+          {plugin.name && infoRow(t('Name'), plugin.name)}
+          {plugin.displayName && infoRow(t('DisplayName'), plugin.displayName)}
+          {infoRow(t('PackageName'), plugin.packageName)}
+          {repository && infoRow(t('Repository'), repository)}
+          {data?.homepage &&
+            infoRow(
+              t('Homepage'),
+              <a href={data.homepage} target="_blank" rel="noreferrer">
+                {data.homepage}
+              </a>,
+            )}
+          {plugin.description && infoRow(t('Description'), plugin.description)}
+          {data?.packageJson?.license && infoRow(t('License'), data.packageJson.license)}
+          {author && infoRow(t('Author'), author)}
+          {infoRow(t('Version'), plugin.version)}
+        </Row>
+      ),
+    },
+    {
+      key: 'dependencies',
+      label: t('Dependencies compatibility check'),
+      children: (
+        <>
+          {data?.depsCompatible === false ? (
+            <Typography.Text type="danger">
+              {t('`dist/externalVersion.js` not found or failed to `require`. Please rebuild this plugin.')}
+            </Typography.Text>
+          ) : (
+            <>
+              {data && !data.isCompatible && (
+                <Alert
+                  showIcon
+                  type="error"
+                  message={t(
+                    'Plugin dependencies check failed, you should change the dependent version to meet the version requirements.',
+                  )}
+                />
+              )}
+              <Table
+                style={{ marginTop: token.margin }}
+                rowKey="name"
+                pagination={false}
+                columns={dependenciesCompatibleTableColumns}
+                dataSource={Array.isArray(data?.depsCompatible) ? data.depsCompatible : []}
+              />
+            </>
+          )}
+        </>
+      ),
+    },
+  ];
+
+  return (
+    <Modal open footer={false} destroyOnClose width={600} onCancel={onCancel}>
+      {loading ? (
+        <Spin />
+      ) : (
+        <>
+          <Typography.Title level={3}>{plugin.packageName}</Typography.Title>
+          <Space split={<span>&nbsp;•&nbsp;</span>}>
+            <span>{plugin.version}</span>
+          </Space>
+          <Tabs
+            style={{ minHeight: '50vh' }}
+            items={tabItems}
+            defaultActiveKey={plugin.isCompatible === false ? 'dependencies' : 'readme'}
+          />
+        </>
+      )}
+    </Modal>
+  );
+};

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

@@ -142,7 +142,14 @@ export function matchSettingsRoute(data: Record<string, PluginSettingsPageType>,
     }
   }
 
-  return null;
+  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;
 }
 
 /**

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/globalStyles.ts

@@ -18,4 +18,14 @@ injectGlobal`
   .ant-form-item-label > label {
     font-weight: 600;
   }
+
+  .nb-hidden {
+    display: none;
+  }
+
+  .nb-dialog-overflow-hidden {
+    .ant-modal-content {
+      overflow: hidden;
+    }
+  }
 `;

package/src/utils/globalDeps.ts

@@ -10,6 +10,7 @@
 import * as antdCssinjs from '@ant-design/cssinjs';
 import * as antdIcons from '@ant-design/icons';
 import * as antdStyle from 'antd-style';
+import * as ctrlTinycolor from '@ctrl/tinycolor';
 import * as emotionCss from '@emotion/css';
 import * as formilyAntdV5 from '@formily/antd-v5';
 import * as formilyCore from '@formily/core';
@@ -96,6 +97,7 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   defineGlobalDep(requirejs, '@dnd-kit/sortable', dndKitSortable);
 
   // utils
+  defineGlobalDep(requirejs, '@ctrl/tinycolor', ctrlTinycolor);
   defineGlobalDep(requirejs, 'ahooks', ahooks);
   defineGlobalDep(requirejs, 'axios', axios);
   defineGlobalDep(requirejs, 'dayjs', dayjs);