@assistkick/create 1.2.0 → 1.3.0

package/templates/assistkick-product-system/packages/frontend/src/components/GitRepoModal.tsx

@@ -0,0 +1,352 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { apiClient } from '../api/client';
+import type { Project } from '../hooks/useProjects';
+
+interface GitRepoModalProps {
+  project: Project;
+  onClose: () => void;
+  onProjectUpdated: () => void;
+}
+
+interface Installation {
+  id: number;
+  account: string;
+  accountType: string;
+}
+
+interface Repo {
+  id: number;
+  fullName: string;
+  private: boolean;
+  defaultBranch: string;
+  cloneUrl: string;
+}
+
+type Tab = 'status' | 'github' | 'url' | 'init';
+
+export function GitRepoModal({ project, onClose, onProjectUpdated }: GitRepoModalProps) {
+  const [tab, setTab] = useState<Tab>('status');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+
+  // Status tab
+  const [gitStatus, setGitStatus] = useState<any>(null);
+
+  // GitHub tab
+  const [installations, setInstallations] = useState<Installation[]>([]);
+  const [selectedInstallation, setSelectedInstallation] = useState<string>('');
+  const [repos, setRepos] = useState<Repo[]>([]);
+  const [selectedRepo, setSelectedRepo] = useState<string>('');
+  const [githubConfigured, setGithubConfigured] = useState(false);
+
+  // URL tab
+  const [cloneUrl, setCloneUrl] = useState('');
+
+  const loadStatus = useCallback(async () => {
+    try {
+      const data = await apiClient.getGitStatus(project.id);
+      setGitStatus(data);
+      setGithubConfigured(data.githubAppConfigured);
+    } catch (err: any) {
+      setError(err.message);
+    }
+  }, [project.id]);
+
+  useEffect(() => {
+    loadStatus();
+  }, [loadStatus]);
+
+  const handleTestConnection = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await apiClient.testGitHubApp(project.id);
+      if (!data.configured) {
+        setError(data.error || 'GitHub App not configured');
+      } else if (data.error) {
+        setError(data.error);
+      } else {
+        setInstallations(data.installations || []);
+        setSuccess('GitHub App connection successful');
+      }
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLoadInstallations = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await apiClient.listGitHubInstallations(project.id);
+      setInstallations(data.installations || []);
+      setGithubConfigured(data.configured);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLoadRepos = async (installationId: string) => {
+    setSelectedInstallation(installationId);
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await apiClient.listGitHubRepos(project.id, installationId);
+      setRepos(data.repos || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleConnectGitHub = async () => {
+    if (!selectedRepo || !selectedInstallation) return;
+    const repo = repos.find(r => r.fullName === selectedRepo);
+    if (!repo) return;
+
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.connectGitRepo(project.id, {
+        githubInstallationId: selectedInstallation,
+        githubRepoFullName: repo.fullName,
+        baseBranch: repo.defaultBranch,
+      });
+      setSuccess(`Connected to ${repo.fullName}`);
+      onProjectUpdated();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleConnectUrl = async () => {
+    if (!cloneUrl.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.connectGitRepo(project.id, { repoUrl: cloneUrl.trim() });
+      setSuccess('Repository connected successfully');
+      onProjectUpdated();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInit = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.initGitRepo(project.id);
+      setSuccess('Local git repository initialized');
+      onProjectUpdated();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDisconnect = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await apiClient.disconnectGitRepo(project.id);
+      setSuccess('Repository disconnected');
+      onProjectUpdated();
+      await loadStatus();
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="git-modal-overlay" onClick={onClose}>
+      <div className="git-modal" onClick={e => e.stopPropagation()}>
+        <div className="git-modal-header">
+          <h3>Git Repository &mdash; {project.name}</h3>
+          <button className="git-modal-close" onClick={onClose}>&times;</button>
+        </div>
+
+        {error && <div className="git-modal-error">{error}</div>}
+        {success && <div className="git-modal-success">{success}</div>}
+
+        <div className="git-modal-tabs">
+          <button className={`git-modal-tab${tab === 'status' ? ' active' : ''}`} onClick={() => { setTab('status'); setError(null); setSuccess(null); }}>Status</button>
+          <button className={`git-modal-tab${tab === 'github' ? ' active' : ''}`} onClick={() => { setTab('github'); setError(null); setSuccess(null); handleLoadInstallations(); }}>GitHub</button>
+          <button className={`git-modal-tab${tab === 'url' ? ' active' : ''}`} onClick={() => { setTab('url'); setError(null); setSuccess(null); }}>Clone URL</button>
+          <button className={`git-modal-tab${tab === 'init' ? ' active' : ''}`} onClick={() => { setTab('init'); setError(null); setSuccess(null); }}>Init</button>
+        </div>
+
+        <div className="git-modal-body">
+          {tab === 'status' && (
+            <div className="git-modal-status">
+              {gitStatus ? (
+                <>
+                  <div className="git-status-row">
+                    <span className="git-status-label">Workspace:</span>
+                    <span className={`git-status-value ${gitStatus.hasWorkspace ? 'connected' : ''}`}>
+                      {gitStatus.hasWorkspace ? 'Configured' : 'Not configured'}
+                    </span>
+                  </div>
+                  {gitStatus.hasWorkspace && (
+                    <>
+                      <div className="git-status-row">
+                        <span className="git-status-label">Remote:</span>
+                        <span className={`git-status-value ${gitStatus.hasRemote ? 'connected' : ''}`}>
+                          {gitStatus.hasRemote ? 'Connected' : 'Local only'}
+                        </span>
+                      </div>
+                      <div className="git-status-row">
+                        <span className="git-status-label">Branch:</span>
+                        <span className="git-status-value">{gitStatus.currentBranch || '-'}</span>
+                      </div>
+                    </>
+                  )}
+                  {project.githubRepoFullName && (
+                    <div className="git-status-row">
+                      <span className="git-status-label">GitHub Repo:</span>
+                      <span className="git-status-value">{project.githubRepoFullName}</span>
+                    </div>
+                  )}
+                  {project.repoUrl && !project.githubRepoFullName && (
+                    <div className="git-status-row">
+                      <span className="git-status-label">Clone URL:</span>
+                      <span className="git-status-value git-status-url">{project.repoUrl}</span>
+                    </div>
+                  )}
+                  <div className="git-status-row">
+                    <span className="git-status-label">GitHub App:</span>
+                    <span className={`git-status-value ${gitStatus.githubAppConfigured ? 'connected' : ''}`}>
+                      {gitStatus.githubAppConfigured ? 'Configured' : 'Not configured'}
+                    </span>
+                  </div>
+                  {gitStatus.hasWorkspace && (
+                    <button className="git-modal-btn git-modal-btn-danger" onClick={handleDisconnect} disabled={loading}>
+                      Disconnect
+                    </button>
+                  )}
+                </>
+              ) : (
+                <div className="git-modal-loading">Loading...</div>
+              )}
+            </div>
+          )}
+
+          {tab === 'github' && (
+            <div className="git-modal-github">
+              {!githubConfigured ? (
+                <div className="git-modal-info">
+                  GitHub App not configured. Set GITHUB_APP_ID and GITHUB_APP_PRIVATE_KEY environment variables.
+                  <button className="git-modal-btn" onClick={handleTestConnection} disabled={loading}>
+                    Test Connection
+                  </button>
+                </div>
+              ) : (
+                <>
+                  {installations.length === 0 ? (
+                    <div className="git-modal-info">
+                      No GitHub App installations found. Install the app on your GitHub organization or account.
+                    </div>
+                  ) : (
+                    <div className="git-modal-installations">
+                      <label className="git-modal-label">Installation:</label>
+                      <select
+                        className="git-modal-select"
+                        value={selectedInstallation}
+                        onChange={e => handleLoadRepos(e.target.value)}
+                      >
+                        <option value="">Select installation...</option>
+                        {installations.map(i => (
+                          <option key={i.id} value={String(i.id)}>
+                            {i.account} ({i.accountType})
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  )}
+
+                  {repos.length > 0 && (
+                    <div className="git-modal-repos">
+                      <label className="git-modal-label">Repository:</label>
+                      <select
+                        className="git-modal-select"
+                        value={selectedRepo}
+                        onChange={e => setSelectedRepo(e.target.value)}
+                      >
+                        <option value="">Select repository...</option>
+                        {repos.map(r => (
+                          <option key={r.id} value={r.fullName}>
+                            {r.fullName} ({r.defaultBranch})
+                          </option>
+                        ))}
+                      </select>
+                      <button
+                        className="git-modal-btn git-modal-btn-primary"
+                        onClick={handleConnectGitHub}
+                        disabled={loading || !selectedRepo}
+                      >
+                        {loading ? 'Connecting...' : 'Connect'}
+                      </button>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+
+          {tab === 'url' && (
+            <div className="git-modal-url">
+              <label className="git-modal-label">Git clone URL:</label>
+              <input
+                className="git-modal-input"
+                type="text"
+                placeholder="https://github.com/org/repo.git"
+                value={cloneUrl}
+                onChange={e => setCloneUrl(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') handleConnectUrl(); }}
+              />
+              <button
+                className="git-modal-btn git-modal-btn-primary"
+                onClick={handleConnectUrl}
+                disabled={loading || !cloneUrl.trim()}
+              >
+                {loading ? 'Cloning...' : 'Clone & Connect'}
+              </button>
+            </div>
+          )}
+
+          {tab === 'init' && (
+            <div className="git-modal-init">
+              <p className="git-modal-info">
+                Initialize a new empty local git repository for this project.
+                You can connect it to a remote later.
+              </p>
+              <button
+                className="git-modal-btn git-modal-btn-primary"
+                onClick={handleInit}
+                disabled={loading}
+              >
+                {loading ? 'Initializing...' : 'Initialize Repository'}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}