plugin-git-manager 1.0.3 → 1.0.10

package/src/client/components/MergeRequests.tsx

@@ -0,0 +1,681 @@
+import React, { useEffect, useState, useCallback, memo } from 'react';
+import {
+  Table, Empty, Spin, Typography, Tag, Drawer, Space, Avatar, Select,
+  Button, Tooltip, Input, Badge, Tabs, Divider, theme,
+} from 'antd';
+import {
+  MergeOutlined,
+  BranchesOutlined,
+  UserOutlined,
+  ClockCircleOutlined,
+  CommentOutlined,
+  ExportOutlined,
+  SearchOutlined,
+  CheckCircleOutlined,
+  CloseCircleOutlined,
+  ExclamationCircleOutlined,
+  FileTextOutlined,
+  ReloadOutlined,
+} from '@ant-design/icons';
+import { useAPIClient } from '@nocobase/client';
+import { useGitManager } from '../context/GitManagerContext';
+import { RunReviewButton } from './RunReviewButton';
+import { useT } from '../locale';
+
+const { Text, Paragraph, Title } = Typography;
+const { useToken } = theme;
+
+const STATE_CONFIG: Record<string, { color: string; icon: React.ReactNode; label: string }> = {
+  opened: { color: 'blue', icon: <MergeOutlined />, label: 'Open' },
+  merged: { color: 'purple', icon: <CheckCircleOutlined />, label: 'Merged' },
+  closed: { color: 'red', icon: <CloseCircleOutlined />, label: 'Closed' },
+};
+
+export const MergeRequests: React.FC = () => {
+  const t = useT();
+  const { token } = useToken();
+  const api = useAPIClient();
+  const { selectedRepo } = useGitManager();
+  const [mergeRequestsList, setMergeRequestsList] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [stateFilter, setStateFilter] = useState('opened');
+  const [searchText, setSearchText] = useState('');
+  const [pagination, setPagination] = useState({ page: 1, perPage: 20, total: 0, totalPages: 0 });
+  const [selectedMR, setSelectedMR] = useState<any>(null);
+  const [mrDetail, setMrDetail] = useState<any>(null);
+  const [detailLoading, setDetailLoading] = useState(false);
+  const [notes, setNotes] = useState<any[]>([]);
+  const [notesLoading, setNotesLoading] = useState(false);
+
+  const loadMergeRequests = useCallback(async (page = 1) => {
+    if (!selectedRepo) return;
+    setLoading(true);
+    try {
+      const { data } = await api.request({
+        url: 'gitManager:mergeRequests',
+        params: {
+          repositoryId: selectedRepo.id,
+          state: stateFilter,
+          search: searchText || undefined,
+          page,
+          perPage: 20,
+        },
+      });
+      const responseData = data?.data || data;
+      setMergeRequestsList(responseData?.data || []);
+      if (responseData?.pagination) {
+        setPagination(responseData.pagination);
+      }
+    } catch (err: any) {
+      setMergeRequestsList([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [api, selectedRepo, stateFilter, searchText]);
+
+  useEffect(() => {
+    if (selectedRepo?.status === 'connected') {
+      loadMergeRequests(1);
+    } else {
+      setMergeRequestsList([]);
+    }
+  }, [selectedRepo, stateFilter]);
+
+  const handleSearch = () => {
+    loadMergeRequests(1);
+  };
+
+  const openMRDetail = async (mr: any) => {
+    setSelectedMR(mr);
+    setDetailLoading(true);
+    setNotes([]);
+    try {
+      const [detailRes, notesRes] = await Promise.all([
+        api.request({
+          url: 'gitManager:mergeRequestDetail',
+          params: { repositoryId: selectedRepo!.id, mrIid: mr.iid },
+        }),
+        api.request({
+          url: 'gitManager:mergeRequestNotes',
+          params: { repositoryId: selectedRepo!.id, mrIid: mr.iid },
+        }),
+      ]);
+      const detailData = detailRes?.data?.data?.data || detailRes?.data?.data;
+      setMrDetail(detailData);
+      const notesData = notesRes?.data?.data?.data || notesRes?.data?.data;
+      setNotes(Array.isArray(notesData) ? notesData : []);
+    } catch {
+      setMrDetail(null);
+    } finally {
+      setDetailLoading(false);
+    }
+  };
+
+  if (!selectedRepo) {
+    return <Empty description={t('No repository selected')} />;
+  }
+  if (selectedRepo.status !== 'connected') {
+    return <Empty description={t('Repository not cloned yet')} />;
+  }
+
+  const columns = [
+    {
+      title: '',
+      key: 'state_icon',
+      width: 40,
+      render: (_: any, record: any) => {
+        const cfg = STATE_CONFIG[record.state] || STATE_CONFIG.opened;
+        return (
+          <Tooltip title={cfg.label}>
+            <span style={{ color: token[`color${cfg.color === 'blue' ? 'Primary' : cfg.color === 'purple' ? 'PurpleText' : 'Error'}`] || cfg.color, fontSize: 16 }}>
+              {cfg.icon}
+            </span>
+          </Tooltip>
+        );
+      },
+    },
+    {
+      title: t('Title'),
+      key: 'title',
+      render: (_: any, record: any) => (
+        <div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+            {record.draft && (
+              <Tag color="default" style={{ fontSize: 11, lineHeight: '16px' }}>DRAFT</Tag>
+            )}
+            <Text strong style={{ fontSize: 13 }}>
+              {record.title}
+            </Text>
+            {record.hasConflicts && (
+              <Tooltip title={t('Has conflicts')}>
+                <ExclamationCircleOutlined style={{ color: token.colorWarning }} />
+              </Tooltip>
+            )}
+          </div>
+          <div style={{ marginTop: 2 }}>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              !{record.iid}
+              <span style={{ margin: '0 6px' }}>·</span>
+              <UserOutlined style={{ marginRight: 3 }} />
+              {record.author?.name || record.author?.username || 'Unknown'}
+              <span style={{ margin: '0 6px' }}>·</span>
+              <ClockCircleOutlined style={{ marginRight: 3 }} />
+              {formatDate(record.updatedAt)}
+            </Text>
+          </div>
+        </div>
+      ),
+    },
+    {
+      title: '',
+      key: 'branches',
+      width: 250,
+      render: (_: any, record: any) => (
+        <div style={{ fontSize: 12 }}>
+          <Tag color="blue" style={{ fontSize: 11 }}>
+            <BranchesOutlined /> {record.sourceBranch}
+          </Tag>
+          <span style={{ margin: '0 4px', color: token.colorTextSecondary }}>→</span>
+          <Tag color="green" style={{ fontSize: 11 }}>
+            <BranchesOutlined /> {record.targetBranch}
+          </Tag>
+        </div>
+      ),
+    },
+    {
+      title: '',
+      key: 'labels',
+      width: 180,
+      render: (_: any, record: any) => (
+        <Space size={2} wrap>
+          {(record.labels || []).slice(0, 3).map((label: string) => (
+            <Tag key={label} style={{ fontSize: 11 }}>{label}</Tag>
+          ))}
+          {record.labels?.length > 3 && (
+            <Text type="secondary" style={{ fontSize: 11 }}>+{record.labels.length - 3}</Text>
+          )}
+        </Space>
+      ),
+    },
+    {
+      title: '',
+      key: 'meta',
+      width: 120,
+      render: (_: any, record: any) => (
+        <Space size={12}>
+          {record.userNotesCount > 0 && (
+            <Tooltip title={`${record.userNotesCount} comments`}>
+              <Badge count={record.userNotesCount} size="small" color={token.colorTextSecondary}>
+                <CommentOutlined style={{ fontSize: 14, color: token.colorTextSecondary }} />
+              </Badge>
+            </Tooltip>
+          )}
+          {record.assignees?.length > 0 && (
+            <Avatar.Group size="small" max={{ count: 2 }}>
+              {record.assignees.map((a: any) => (
+                <Tooltip key={a.username} title={a.name}>
+                  <Avatar size="small" src={a.avatarUrl}>
+                    {a.name?.[0]}
+                  </Avatar>
+                </Tooltip>
+              ))}
+            </Avatar.Group>
+          )}
+        </Space>
+      ),
+    },
+    {
+      title: '',
+      key: 'actions',
+      width: 160,
+      render: (_: any, record: any) => (
+        <Space onClick={(e) => e.stopPropagation()}>
+          <RunReviewButton
+            target={{ type: 'mr', repositoryId: selectedRepo!.id, mrIid: record.iid, title: record.title }}
+            size="small"
+          />
+          <Tooltip title={t('View Details')}>
+            <Button size="small" icon={<FileTextOutlined />} onClick={(e) => { e.stopPropagation(); openMRDetail(record); }} />
+          </Tooltip>
+          <Tooltip title={t('Open in GitLab')}>
+            <Button size="small" icon={<ExportOutlined />} onClick={(e) => { e.stopPropagation(); window.open(record.webUrl, '_blank'); }} />
+          </Tooltip>
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      {/* Filters bar */}
+      <div style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
+        <Select
+          size="small"
+          style={{ width: 140 }}
+          value={stateFilter}
+          onChange={(v) => setStateFilter(v)}
+          options={[
+            { label: `🟢 ${t('Open')}`, value: 'opened' },
+            { label: `🟣 ${t('Merged')}`, value: 'merged' },
+            { label: `🔴 ${t('Closed')}`, value: 'closed' },
+            { label: `📋 ${t('All')}`, value: 'all' },
+          ]}
+        />
+        <Input.Search
+          size="small"
+          style={{ width: 260 }}
+          placeholder={t('Search merge requests...')}
+          value={searchText}
+          onChange={(e) => setSearchText(e.target.value)}
+          onSearch={handleSearch}
+          allowClear
+        />
+        <Button size="small" icon={<ReloadOutlined />} onClick={() => loadMergeRequests(1)}>
+          {t('Refresh')}
+        </Button>
+        <Text type="secondary" style={{ fontSize: 12 }}>
+          {pagination.total != null ? `${pagination.total} ${t('total')}` : ''}
+        </Text>
+      </div>
+
+      {loading ? (
+        <Spin />
+      ) : (
+        <Table
+          dataSource={mergeRequestsList}
+          columns={columns}
+          rowKey="iid"
+          size="small"
+          pagination={{
+            current: pagination.page,
+            pageSize: pagination.perPage,
+            total: pagination.total || undefined,
+            onChange: (page) => loadMergeRequests(page),
+            showSizeChanger: false,
+          }}
+          onRow={(record) => ({
+            style: { cursor: 'pointer' },
+            onClick: () => openMRDetail(record),
+          })}
+        />
+      )}
+
+      {/* MR Detail Drawer */}
+      <Drawer
+        title={
+          selectedMR ? (
+            <div>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                {(() => {
+                  const cfg = STATE_CONFIG[selectedMR.state] || STATE_CONFIG.opened;
+                  return <Tag color={cfg.color}>{cfg.icon} {cfg.label}</Tag>;
+                })()}
+                {selectedMR.draft && <Tag>DRAFT</Tag>}
+                <Text strong style={{ fontSize: 15 }}>!{selectedMR.iid}</Text>
+              </div>
+              <Text strong style={{ fontSize: 16, display: 'block', marginTop: 4 }}>{selectedMR.title}</Text>
+            </div>
+          ) : t('Merge Request')
+        }
+        open={!!selectedMR}
+        onClose={() => { setSelectedMR(null); setMrDetail(null); setNotes([]); }}
+        width={900}
+        extra={
+          selectedMR && (
+            <Space>
+              <RunReviewButton
+                target={{
+                  type: 'mr',
+                  repositoryId: selectedRepo!.id,
+                  mrIid: selectedMR.iid,
+                  title: selectedMR.title,
+                }}
+                size="small"
+              />
+              <Button
+                type="link"
+                icon={<ExportOutlined />}
+                onClick={() => window.open(selectedMR.webUrl, '_blank')}
+              >
+                {t('Open in GitLab')}
+              </Button>
+            </Space>
+          )
+        }
+      >
+        {detailLoading ? (
+          <Spin />
+        ) : mrDetail ? (
+          <Tabs
+            defaultActiveKey="overview"
+            items={[
+              {
+                key: 'overview',
+                label: t('Overview'),
+                children: <MROverview mr={mrDetail} />,
+              },
+              {
+                key: 'changes',
+                label: `${t('Changes')} (${mrDetail.changes?.length || 0})`,
+                children: <MRChanges changes={mrDetail.changes || []} />,
+              },
+              {
+                key: 'comments',
+                label: (
+                  <Badge count={notes.length} size="small" offset={[6, 0]}>
+                    {t('Comments')}
+                  </Badge>
+                ),
+                children: <MRNotes notes={notes} />,
+              },
+            ]}
+          />
+        ) : null}
+      </Drawer>
+    </div>
+  );
+};
+
+/* ─── Sub-components ─── */
+
+const MROverview: React.FC<{ mr: any }> = ({ mr }) => {
+  const t = useT();
+  const { token } = useToken();
+
+  return (
+    <div>
+      {/* Branch info */}
+      <div style={{
+        padding: '12px 16px',
+        background: token.colorBgLayout,
+        borderRadius: 8,
+        marginBottom: 16,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+      }}>
+        <Tag color="blue"><BranchesOutlined /> {mr.sourceBranch}</Tag>
+        <span style={{ color: token.colorTextSecondary, fontSize: 16 }}>→</span>
+        <Tag color="green"><BranchesOutlined /> {mr.targetBranch}</Tag>
+        {mr.hasConflicts && (
+          <Tag color="warning" icon={<ExclamationCircleOutlined />}>
+            {t('Has conflicts')}
+          </Tag>
+        )}
+      </div>
+
+      {/* Description */}
+      {mr.description && (
+        <div style={{ marginBottom: 16 }}>
+          <Text strong>{t('Description')}</Text>
+          <div style={{
+            marginTop: 8,
+            padding: '12px 16px',
+            background: token.colorBgLayout,
+            borderRadius: 8,
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontSize: 13,
+            lineHeight: 1.6,
+          }}>
+            {mr.description}
+          </div>
+        </div>
+      )}
+
+      {/* Metadata grid */}
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '12px 24px',
+        fontSize: 13,
+      }}>
+        <MetaItem label={t('Author')} value={
+          mr.author && (
+            <Space size={6}>
+              <Avatar size="small" src={mr.author.avatarUrl}>{mr.author.name?.[0]}</Avatar>
+              <Text>{mr.author.name}</Text>
+              <Text type="secondary">@{mr.author.username}</Text>
+            </Space>
+          )
+        } />
+
+        <MetaItem label={t('Assignees')} value={
+          mr.assignees?.length > 0 ? (
+            <Space size={4} wrap>
+              {mr.assignees.map((a: any) => (
+                <Tooltip key={a.username} title={a.name}>
+                  <Tag icon={<Avatar size={14} src={a.avatarUrl}>{a.name?.[0]}</Avatar>}>
+                    {a.name}
+                  </Tag>
+                </Tooltip>
+              ))}
+            </Space>
+          ) : <Text type="secondary">—</Text>
+        } />
+
+        <MetaItem label={t('Reviewers')} value={
+          mr.reviewers?.length > 0 ? (
+            <Space size={4} wrap>
+              {mr.reviewers.map((r: any) => (
+                <Tag key={r.username}>{r.name}</Tag>
+              ))}
+            </Space>
+          ) : <Text type="secondary">—</Text>
+        } />
+
+        <MetaItem label={t('Labels')} value={
+          mr.labels?.length > 0 ? (
+            <Space size={4} wrap>
+              {mr.labels.map((l: string) => <Tag key={l}>{l}</Tag>)}
+            </Space>
+          ) : <Text type="secondary">—</Text>
+        } />
+
+        <MetaItem label={t('Created')} value={<Text>{formatDateFull(mr.createdAt)}</Text>} />
+        <MetaItem label={t('Updated')} value={<Text>{formatDateFull(mr.updatedAt)}</Text>} />
+
+        {mr.mergedBy && (
+          <MetaItem label={t('Merged by')} value={
+            <Text>{mr.mergedBy.name} — {formatDateFull(mr.mergedAt)}</Text>
+          } />
+        )}
+        {mr.closedBy && (
+          <MetaItem label={t('Closed by')} value={
+            <Text>{mr.closedBy.name} — {formatDateFull(mr.closedAt)}</Text>
+          } />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const MetaItem: React.FC<{ label: string; value: React.ReactNode }> = ({ label, value }) => (
+  <div>
+    <Text type="secondary" style={{ fontSize: 12, display: 'block', marginBottom: 2 }}>{label}</Text>
+    <div>{value}</div>
+  </div>
+);
+
+const MRChanges: React.FC<{ changes: any[] }> = ({ changes }) => {
+  const { token } = useToken();
+  const t = useT();
+  const [expandedFile, setExpandedFile] = useState<string | null>(null);
+
+  if (!changes.length) {
+    return <Empty description={t('No changes')} />;
+  }
+
+  return (
+    <div>
+      {changes.map((change, idx) => {
+        const filePath = change.newPath || change.oldPath;
+        const isExpanded = expandedFile === filePath;
+        let statusTag: React.ReactNode = null;
+        if (change.newFile) statusTag = <Tag color="green">NEW</Tag>;
+        else if (change.deletedFile) statusTag = <Tag color="red">DEL</Tag>;
+        else if (change.renamedFile) statusTag = <Tag color="orange">RENAMED</Tag>;
+        else statusTag = <Tag color="blue">MOD</Tag>;
+
+        return (
+          <div key={idx} style={{ marginBottom: 8 }}>
+            <div
+              style={{
+                padding: '6px 12px',
+                background: isExpanded ? token.colorPrimaryBg : token.colorBgLayout,
+                borderRadius: 6,
+                cursor: 'pointer',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 8,
+              }}
+              onClick={() => setExpandedFile(isExpanded ? null : filePath)}
+            >
+              {statusTag}
+              <Text style={{ fontSize: 13, fontFamily: 'monospace' }}>{filePath}</Text>
+              {change.renamedFile && change.oldPath !== change.newPath && (
+                <Text type="secondary" style={{ fontSize: 11 }}>
+                  (← {change.oldPath})
+                </Text>
+              )}
+            </div>
+            {isExpanded && change.diff && (
+              <DiffViewer content={change.diff} />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const MRNotes: React.FC<{ notes: any[] }> = ({ notes }) => {
+  const { token } = useToken();
+  const t = useT();
+
+  if (!notes.length) {
+    return <Empty description={t('No comments')} />;
+  }
+
+  return (
+    <div>
+      {notes.map((note) => (
+        <div
+          key={note.id}
+          style={{
+            padding: '12px 16px',
+            marginBottom: 12,
+            background: token.colorBgLayout,
+            borderRadius: 8,
+            borderLeft: `3px solid ${note.resolved ? token.colorSuccess : token.colorBorderSecondary}`,
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
+            <Avatar size="small" src={note.author?.avatarUrl}>
+              {note.author?.name?.[0]}
+            </Avatar>
+            <Text strong style={{ fontSize: 13 }}>{note.author?.name}</Text>
+            <Text type="secondary" style={{ fontSize: 12 }}>
+              @{note.author?.username}
+            </Text>
+            <Text type="secondary" style={{ fontSize: 11, marginLeft: 'auto' }}>
+              {formatDate(note.createdAt)}
+            </Text>
+            {note.resolvable && (
+              <Tag color={note.resolved ? 'success' : 'default'} style={{ fontSize: 11 }}>
+                {note.resolved ? t('Resolved') : t('Unresolved')}
+              </Tag>
+            )}
+          </div>
+          <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', fontSize: 13, lineHeight: 1.6 }}>
+            {note.body}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const DiffViewer: React.FC<{ content: string }> = memo(({ content }) => {
+  const { token } = useToken();
+  const lines = content.split('\n');
+
+  return (
+    <div
+      style={{
+        fontFamily: "'JetBrains Mono', 'Fira Code', Consolas, monospace",
+        fontSize: 12,
+        lineHeight: 1.5,
+        border: `1px solid ${token.colorBorderSecondary}`,
+        borderRadius: 6,
+        overflow: 'auto',
+        maxHeight: 400,
+        margin: '4px 0',
+      }}
+    >
+      {lines.map((line, i) => {
+        let bg = 'transparent';
+        let color = token.colorText;
+        if (line.startsWith('+') && !line.startsWith('+++')) {
+          bg = 'rgba(46, 160, 67, 0.12)';
+          color = '#2ea043';
+        } else if (line.startsWith('-') && !line.startsWith('---')) {
+          bg = 'rgba(248, 81, 73, 0.12)';
+          color = '#f85149';
+        } else if (line.startsWith('@@')) {
+          bg = 'rgba(56, 139, 253, 0.08)';
+          color = '#388bfd';
+        } else if (line.startsWith('diff') || line.startsWith('index')) {
+          color = token.colorTextSecondary;
+        }
+        return (
+          <div
+            key={i}
+            style={{
+              padding: '0 12px',
+              background: bg,
+              color,
+              whiteSpace: 'pre',
+              minHeight: 20,
+            }}
+          >
+            <span style={{
+              display: 'inline-block',
+              width: 40,
+              color: token.colorTextQuaternary,
+              userSelect: 'none',
+              textAlign: 'right',
+              marginRight: 12,
+            }}>
+              {i + 1}
+            </span>
+            {line}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+/* ─── Utilities ─── */
+
+function formatDate(dateStr: string): string {
+  if (!dateStr) return '';
+  const d = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffHours = diffMs / (1000 * 60 * 60);
+
+  if (diffHours < 1) return `${Math.round(diffMs / 60000)}m ago`;
+  if (diffHours < 24) return `${Math.round(diffHours)}h ago`;
+  if (diffHours < 168) return `${Math.round(diffHours / 24)}d ago`;
+  return d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+}
+
+function formatDateFull(dateStr: string): string {
+  if (!dateStr) return '';
+  return new Date(dateStr).toLocaleString('en-US', {
+    year: 'numeric', month: 'short', day: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  });
+}