nocobase/packages/core/client/src/pm/PluginCard.tsx

import { App, Card, Divider, Popconfirm, Space, Switch, Typography, message } from 'antd';
import classnames from 'classnames';
import React, { FC, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import { DeleteOutlined, ReadOutlined, ReloadOutlined, SettingOutlined } from '@ant-design/icons';
import { css } from '@emotion/css';
import { useAPIClient } from '../api-client';
import { PluginDetail } from './PluginDetail';
import { PluginUpgradeModal } from './PluginForm/modal/PluginUpgradeModal';
import { useStyles } from './style';
import type { IPluginData } from './types';

interface IPluginInfo extends IPluginCard {
  onClick: () => void;
}

function PluginInfo(props: IPluginInfo) {
  const { data, onClick } = props;
  const { name, displayName, isCompatible, packageName, updatable, builtIn, enabled, description, type, error } = data;
  const { styles, theme } = useStyles();
  const navigate = useNavigate();
  const { t } = useTranslation();
  const api = useAPIClient();
  const { modal } = App.useApp();
  const [showUploadForm, setShowUploadForm] = useState(false);
  const [enabledVal, setEnabledVal] = useState(enabled);
  const reload = () => window.location.reload();

  return (
    <>
      {showUploadForm && (
        <PluginUpgradeModal
          isShow={showUploadForm}
          pluginData={data}
          onClose={(isRefresh) => {
            setShowUploadForm(false);
          }}
        />
      )}
      <Card
        size={'small'}
        bordered={false}
        onClick={() => {
          !error && onClick();
        }}
        headStyle={{ border: 'none', minHeight: 'inherit', paddingTop: 14 }}
        bodyStyle={{ paddingTop: 10 }}
        // style={{ marginBottom: theme.marginLG }}
        title={<div>{displayName || name || packageName}</div>}
        hoverable
        className={css`
          .ant-card-actions {
            li .ant-space {
              gap: 2px !important;
            }
            li a {
              .anticon {
                margin-right: 3px;
                /* display: none; */
              }
            }
            li:last-child {
              width: 20% !important;
            }
            li:first-child {
              width: 80% !important;
              border-inline-end: 0;
              text-align: left;
              padding-left: 16px;
            }
          }
        `}
        actions={[
          <Space split={<Divider type="vertical" />} key={'1'}>
            <a key={'5'}>
              <ReadOutlined /> {t('Docs')}
            </a>
            {updatable && (
              <a
                key={'3'}
                onClick={(e) => {
                  e.stopPropagation();
                  setShowUploadForm(true);
                }}
              >
                <ReloadOutlined /> {t('Update')}
              </a>
            )}
            {enabled ? (
              <a
                onClick={(e) => {
                  e.stopPropagation();
                  navigate(`/admin/settings/${name}`);
                }}
              >
                <SettingOutlined /> {t('Setting')}
              </a>
            ) : (
              <Popconfirm
                key={'delete'}
                disabled={builtIn}
                title={t('Are you sure to delete this plugin?')}
                onConfirm={async (e) => {
                  e.stopPropagation();
                  api.request({
                    url: `pm:remove`,
                    params: {
                      filterByTk: name,
                    },
                  });
                }}
                onCancel={(e) => e.stopPropagation()}
                okText={t('Yes')}
                cancelText={t('No')}
              >
                <a
                  onClick={(e) => {
                    e.stopPropagation();
                  }}
                  className={classnames({ [styles.cardActionDisabled]: builtIn })}
                >
                  <DeleteOutlined /> {t('Remove')}
                </a>
              </Popconfirm>
            )}
          </Space>,
          <Switch
            key={'enable'}
            size={'small'}
            disabled={builtIn || error}
            onChange={async (checked, e) => {
              e.stopPropagation();
              if (!isCompatible && checked) {
                message.error(t("Dependencies check failed, can't enable."));
                return;
              }
              await api.request({
                url: `pm:${checked ? 'enable' : 'disable'}`,
                params: {
                  filterByTk: name,
                },
              });
            }}
            checked={enabledVal}
          ></Switch>,
        ].filter(Boolean)}
      >
        <Card.Meta
          description={
            !error ? (
              <Typography.Paragraph
                style={{ height: theme.fontSize * theme.lineHeight * 3 }}
                type={isCompatible ? 'secondary' : 'danger'}
                ellipsis={{ rows: 3 }}
              >
                {isCompatible ? description : t('Plugin dependencies check failed')}
              </Typography.Paragraph>
            ) : (
              <Typography.Text type="danger">
                {t('Plugin loading failed. Please check the server logs.')}
              </Typography.Text>
            )
          }
        />
        {/* {!isCompatible && !error && (
          <Button style={{ padding: 0 }} type="link">
            <Typography.Text type="danger">{t('Dependencies check failed')}</Typography.Text>
          </Button>
        )} */}
        {/* 
          <Col span={8}>
            <Space direction="vertical" align="end" style={{ display: 'flex', marginTop: -10 }}>
              {type && (
                <Button
                  onClick={(e) => {
                    e.stopPropagation();
                    setShowUploadForm(true);
                  }}
                  ghost
                  type="primary"
                >
                  {t('Update plugin')}
                </Button>
              )}
              
              {!error && (
                <Button style={{ padding: 0 }} type="link">
                  {t('More details')}
                </Button>
              )}
            </Space>
          </Col> */}
      </Card>
    </>
  );
}

export interface IPluginCard {
  data: IPluginData;
}

export const PluginCard: FC<IPluginCard> = (props) => {
  const { data } = props;
  const [plugin, setPlugin] = useState<IPluginData>(undefined);

  return (
    <>
      {plugin && <PluginDetail plugin={plugin} onCancel={() => setPlugin(undefined)} />}
      <PluginInfo
        onClick={() => {
          setPlugin(data);
        }}
        data={data}
      />
    </>
  );
};