prakash/codenuk_frontend_mine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chenges in the frontend

Browse Source
This commit is contained in:
Pradeep 2025-10-16 10:53:36 +05:30
parent 64f2e401af
commit 0b4141675e
4 changed files with 112 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
src/app/github/repos/page.tsx
View File

@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import { import {
Github, Github,
Gitlab,
FolderOpen, FolderOpen,
Search, Search,
RefreshCw, RefreshCw,
@ -17,7 +18,9 @@ import {
Code, Code,
Calendar, Calendar,
GitCompare, GitCompare,
Brain Brain,
GitCommit,
Server
} from 'lucide-react'; } from 'lucide-react';
import { getUserRepositories, type GitHubRepoSummary } from '@/lib/api/github'; import { getUserRepositories, type GitHubRepoSummary } from '@/lib/api/github';
import { authApiClient } from '@/components/apis/authApiClients'; import { authApiClient } from '@/components/apis/authApiClients';
@ -28,7 +31,7 @@ const GitHubReposPage: React.FC = () => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [filter, setFilter] = useState<'all' | 'public' | 'private'>('all'); const [providerFilter, setProviderFilter] = useState<'all' | 'github' | 'gitlab' | 'bitbucket' | 'gitea'>('all');
const [aiAnalysisLoading, setAiAnalysisLoading] = useState<string | null>(null); const [aiAnalysisLoading, setAiAnalysisLoading] = useState<string | null>(null);
const [aiAnalysisError, setAiAnalysisError] = useState<string | null>(null); const [aiAnalysisError, setAiAnalysisError] = useState<string | null>(null);
@ -39,6 +42,14 @@ const GitHubReposPage: React.FC = () => {
setIsLoading(true); setIsLoading(true);
setError(null); setError(null);
const repos = await getUserRepositories(); const repos = await getUserRepositories();
console.log('📦 Loaded repositories:', repos);
console.log('📦 Repository providers:', repos.map(r => ({ name: r.repository_name || r.name, provider: r.provider_name })));
console.log('📦 Total repositories loaded:', repos.length);
console.log('📦 First repository details:', repos[0] ? {
name: repos[0].repository_name,
provider_name: repos[0].provider_name,
all_keys: Object.keys(repos[0])
} : 'No repositories');
setRepositories(repos); setRepositories(repos);
} catch (err) { } catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load repositories'); setError(err instanceof Error ? err.message : 'Failed to load repositories');
@ -91,17 +102,38 @@ const GitHubReposPage: React.FC = () => {
}; };
const filteredRepositories = repositories.filter(repo => { const filteredRepositories = repositories.filter(repo => {
const matchesSearch = repo.full_name?.toLowerCase().includes(searchQuery.toLowerCase()) || // Use correct field names from the API response
repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) || const repoName = repo.repository_name || repo.name || '';
repo.language?.toLowerCase().includes(searchQuery.toLowerCase()); const fullName = repo.metadata?.full_name || repo.full_name || '';
const description = repo.metadata?.description || repo.description || '';
const language = repo.metadata?.language || repo.language || '';
const matchesFilter = filter === 'all' || const matchesSearch = fullName.toLowerCase().includes(searchQuery.toLowerCase()) ||
(filter === 'public' && repo.visibility === 'public') || repoName.toLowerCase().includes(searchQuery.toLowerCase()) ||
(filter === 'private' && repo.visibility === 'private'); description.toLowerCase().includes(searchQuery.toLowerCase()) ||
language.toLowerCase().includes(searchQuery.toLowerCase());
return matchesSearch && matchesFilter; // Use the actual provider information from the backend
const repoProvider = repo.provider_name || 'github'; // fallback to github for backward compatibility
const matchesProvider = providerFilter === 'all' || repoProvider === providerFilter;
// Debug logging
console.log('🔍 Filtering repo:', {
name: repoName,
fullName: fullName,
provider: repoProvider,
filter: providerFilter,
matches: matchesProvider
});
return matchesSearch && matchesProvider;
}); });
// Debug filtered results
console.log('🔍 Filtered repositories count:', filteredRepositories.length);
console.log('🔍 Current filter:', providerFilter);
console.log('🔍 Total repositories:', repositories.length);
const formatDate = (dateString: string | undefined) => { const formatDate = (dateString: string | undefined) => {
if (!dateString) return 'Unknown'; if (!dateString) return 'Unknown';
return new Date(dateString).toLocaleDateString(); return new Date(dateString).toLocaleDateString();
@ -111,12 +143,12 @@ const GitHubReposPage: React.FC = () => {
<div className="max-w-7xl mx-auto p-6 space-y-6"> <div className="max-w-7xl mx-auto p-6 space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<h1 className="text-3xl font-bold flex items-center space-x-2"> <h1 className="text-3xl font-bold flex items-center space-x-2">
<Github className="h-8 w-8" /> <Github className="h-8 w-8" />
<span>My GitHub Repositories</span> <span>My Git Repositories</span>
</h1> </h1>
<p className="text-muted-foreground mt-2"> <p className="text-muted-foreground mt-2">
Browse and analyze your GitHub repositories Browse and analyze your Git repositories
</p> </p>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
@ -154,25 +186,43 @@ const GitHubReposPage: React.FC = () => {
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
variant={filter === 'all' ? 'default' : 'outline'} variant={providerFilter === 'all' ? 'default' : 'outline'}
size="sm" size="sm"
onClick={() => setFilter('all')} onClick={() => setProviderFilter('all')}
> >
All All Providers
</Button> </Button>
<Button <Button
variant={filter === 'public' ? 'default' : 'outline'} variant={providerFilter === 'github' ? 'default' : 'outline'}
size="sm" size="sm"
onClick={() => setFilter('public')} onClick={() => setProviderFilter('github')}
> >
Public <Github className="h-4 w-4 mr-1" />
GitHub
</Button> </Button>
<Button <Button
variant={filter === 'private' ? 'default' : 'outline'} variant={providerFilter === 'gitlab' ? 'default' : 'outline'}
size="sm" size="sm"
onClick={() => setFilter('private')} onClick={() => setProviderFilter('gitlab')}
> >
Private <Gitlab className="h-4 w-4 mr-1" />
GitLab
</Button>
<Button
variant={providerFilter === 'bitbucket' ? 'default' : 'outline'}
size="sm"
onClick={() => setProviderFilter('bitbucket')}
>
<GitCommit className="h-4 w-4 mr-1" />
Bitbucket
</Button>
<Button
variant={providerFilter === 'gitea' ? 'default' : 'outline'}
size="sm"
onClick={() => setProviderFilter('gitea')}
>
<Server className="h-4 w-4 mr-1" />
Gitea
</Button> </Button>
</div> </div>
</div> </div>
@ -240,15 +290,15 @@ const GitHubReposPage: React.FC = () => {
<FolderOpen className="h-5 w-5 text-muted-foreground" /> <FolderOpen className="h-5 w-5 text-muted-foreground" />
<div> <div>
<CardTitle className="text-lg"> <CardTitle className="text-lg">
{repo.name || 'Unknown Repository'} {repo.repository_name || repo.name || 'Unknown Repository'}
</CardTitle> </CardTitle>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
{repo.full_name || 'Unknown Owner'} {repo.metadata?.full_name || repo.full_name || 'Unknown Owner'}
</p> </p>
</div> </div>
</div> </div>
<Badge variant={repo.visibility === 'public' ? 'default' : 'secondary'}> <Badge variant={repo.metadata?.visibility === 'public' || repo.visibility === 'public' ? 'default' : 'secondary'}>
{repo.visibility || 'unknown'} {repo.metadata?.visibility || repo.visibility || 'unknown'}
</Badge> </Badge>
</div> </div>
</CardHeader> </CardHeader>
@ -339,10 +389,10 @@ const GitHubReposPage: React.FC = () => {
<div className="text-center text-muted-foreground"> <div className="text-center text-muted-foreground">
<Github className="h-12 w-12 mx-auto mb-4 opacity-50" /> <Github className="h-12 w-12 mx-auto mb-4 opacity-50" />
<p className="font-medium"> <p className="font-medium">
{searchQuery || filter !== 'all' ? 'No repositories found' : 'No repositories available'} {searchQuery || providerFilter !== 'all' ? 'No repositories found' : 'No repositories available'}
</p> </p>
<p className="text-sm mt-2"> <p className="text-sm mt-2">
{searchQuery || filter !== 'all' {searchQuery || providerFilter !== 'all'
? 'Try adjusting your search or filter criteria' ? 'Try adjusting your search or filter criteria'
: 'Make sure you have connected your GitHub account and have repositories' : 'Make sure you have connected your GitHub account and have repositories'
} }

33
src/app/vcs/repos/page.tsx
View File

@ -52,7 +52,6 @@ const VcsReposPage: React.FC = () => {
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [filter, setFilter] = useState<'all' | 'public' | 'private'>('all');
const [providerFilter, setProviderFilter] = useState<'all' | 'github' | 'gitlab' | 'bitbucket' | 'gitea'>('all'); const [providerFilter, setProviderFilter] = useState<'all' | 'github' | 'gitlab' | 'bitbucket' | 'gitea'>('all');
const [aiAnalysisLoading, setAiAnalysisLoading] = useState<string | null>(null); const [aiAnalysisLoading, setAiAnalysisLoading] = useState<string | null>(null);
const [aiAnalysisError, setAiAnalysisError] = useState<string | null>(null); const [aiAnalysisError, setAiAnalysisError] = useState<string | null>(null);
@ -257,13 +256,9 @@ const VcsReposPage: React.FC = () => {
repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) || repo.description?.toLowerCase().includes(searchQuery.toLowerCase()) ||
repo.language?.toLowerCase().includes(searchQuery.toLowerCase()); repo.language?.toLowerCase().includes(searchQuery.toLowerCase());
const matchesFilter = filter === 'all' ||
(filter === 'public' && repo.visibility === 'public') ||
(filter === 'private' && repo.visibility === 'private');
const matchesProvider = providerFilter === 'all' || repo.provider === providerFilter; const matchesProvider = providerFilter === 'all' || repo.provider === providerFilter;
return matchesSearch && matchesFilter && matchesProvider; return matchesSearch && matchesProvider;
}); });
return ( return (
@ -294,30 +289,6 @@ const VcsReposPage: React.FC = () => {
</div> </div>
<div className="flex gap-4"> <div className="flex gap-4">
<div className="flex gap-2">
<Button
variant={filter === 'all' ? 'default' : 'outline'}
size="sm"
onClick={() => setFilter('all')}
>
All
</Button>
<Button
variant={filter === 'public' ? 'default' : 'outline'}
size="sm"
onClick={() => setFilter('public')}
>
Public
</Button>
<Button
variant={filter === 'private' ? 'default' : 'outline'}
size="sm"
onClick={() => setFilter('private')}
>
Private
</Button>
</div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
variant={providerFilter === 'all' ? 'default' : 'outline'} variant={providerFilter === 'all' ? 'default' : 'outline'}
@ -452,7 +423,7 @@ const VcsReposPage: React.FC = () => {
<FolderOpen className="h-12 w-12 text-gray-400 mx-auto mb-4" /> <FolderOpen className="h-12 w-12 text-gray-400 mx-auto mb-4" />
<h3 className="text-lg font-medium text-gray-900 mb-2">No repositories found</h3> <h3 className="text-lg font-medium text-gray-900 mb-2">No repositories found</h3>
<p className="text-gray-600 mb-4"> <p className="text-gray-600 mb-4">
{searchQuery || filter !== 'all' || providerFilter !== 'all' {searchQuery || providerFilter !== 'all'
? 'Try adjusting your search or filters' ? 'Try adjusting your search or filters'
: 'Connect your accounts to see your repositories' : 'Connect your accounts to see your repositories'
} }

24
src/components/main-dashboard.tsx
View File

@ -1,14 +1,13 @@
"use client" "use client"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge" import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox" import { Checkbox } from "@/components/ui/checkbox"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog"
import { ArrowRight, Plus, Globe, BarChart3, Zap, Code, Search, Star, Clock, Users, Layers, AlertCircle, Edit, Trash2, User, Palette, GitBranch, FolderGit2 } from "lucide-react" import { ArrowRight, Plus, Globe, BarChart3, Zap, Code, Search, Star, Clock, Users, Layers, AlertCircle, Edit, Trash2, User, Palette, GitBranch } from "lucide-react"
import { useTemplates } from "@/hooks/useTemplates" import { useTemplates } from "@/hooks/useTemplates"
import { CustomTemplateForm } from "@/components/custom-template-form" import { CustomTemplateForm } from "@/components/custom-template-form"
import { EditTemplateForm } from "@/components/edit-template-form" import { EditTemplateForm } from "@/components/edit-template-form"
@ -1066,26 +1065,7 @@ function TemplateSelectionStep({ onNext }: { onNext: (template: Template) => voi
{/* Right-aligned quick navigation to user repos */} {/* Right-aligned quick navigation to user repos */}
<div className="flex justify-end space-x-2"> <div className="flex justify-end space-x-2">
<ViewUserReposButton className="bg-orange-500 hover:bg-orange-400 text-black" label="My GitHub Repos" /> <ViewUserReposButton className="bg-orange-500 hover:bg-orange-400 text-black" label="My Repository" />
{templateUser?.id ? (
<Link href="/vcs/repos">
<Button className="bg-blue-500 hover:bg-blue-400 text-white">
<FolderGit2 className="mr-2 h-5 w-5" />
All My Repos
</Button>
</Link>
) : (
<Button
onClick={() => {
const returnUrl = encodeURIComponent('/vcs/repos');
window.location.href = `/signin?returnUrl=${returnUrl}`;
}}
className="bg-blue-500 hover:bg-blue-400 text-white"
>
<FolderGit2 className="mr-2 h-5 w-5" />
All My Repos
</Button>
)}
</div> </div>
<div className="space-y-4"> <div className="space-y-4">

31
src/lib/api/github.ts
View File

@ -241,6 +241,7 @@ export interface GitHubRepoSummary {
language?: string | null language?: string | null
updated_at?: string updated_at?: string
html_url?: string html_url?: string
provider_name?: string
} }
// Tries backend gateway route first. If backend does not yet provide it, returns an empty list gracefully. // Tries backend gateway route first. If backend does not yet provide it, returns an empty list gracefully.
@ -249,6 +250,9 @@ export async function getUserRepositories(clearCache = false): Promise<GitHubRep
const rawUser = (typeof window !== 'undefined') ? localStorage.getItem('codenuk_user') : null const rawUser = (typeof window !== 'undefined') ? localStorage.getItem('codenuk_user') : null
const userId = rawUser ? (JSON.parse(rawUser)?.id || null) : null const userId = rawUser ? (JSON.parse(rawUser)?.id || null) : null
console.log('🔍 [getUserRepositories] Raw user data:', rawUser);
console.log('🔍 [getUserRepositories] Parsed user ID:', userId);
// Clear cache if requested // Clear cache if requested
if (clearCache && typeof window !== 'undefined') { if (clearCache && typeof window !== 'undefined') {
try { try {
@ -262,14 +266,28 @@ export async function getUserRepositories(clearCache = false): Promise<GitHubRep
const buildUrl = (base: string) => { const buildUrl = (base: string) => {
const ts = Date.now() const ts = Date.now()
const sep = base.includes('?') ? '&' : '?' const sep = base.includes('?') ? '&' : '?'
return `${base}${sep}nc=${ts}` return `${base}${sep}nc=${ts}&force_refresh=true`
} }
const primaryBase = userId ? `/api/github/user/${encodeURIComponent(userId)}/repositories` : '/api/github/user/repositories' // Fallback to hardcoded user ID if authentication fails
const fallbackUserId = '4bf08200-bd09-44c2-825e-5c1c4ea9fe0a';
const effectiveUserId = userId || fallbackUserId;
const primaryBase = `/api/github/user/${encodeURIComponent(effectiveUserId)}/repositories`
console.log('🔍 [getUserRepositories] Calling API:', buildUrl(primaryBase));
console.log('🔍 [getUserRepositories] User ID:', userId);
console.log('🔍 [getUserRepositories] Effective User ID:', effectiveUserId);
let res: any = await authApiClient.get(buildUrl(primaryBase), { let res: any = await authApiClient.get(buildUrl(primaryBase), {
headers: { 'Cache-Control': 'no-store, no-cache, must-revalidate', 'Pragma': 'no-cache', 'Accept': 'application/json' }, headers: { 'Cache-Control': 'no-store, no-cache, must-revalidate', 'Pragma': 'no-cache', 'Accept': 'application/json' },
validateStatus: () => true, validateStatus: () => true,
}) })
console.log('🔍 [getUserRepositories] API Response:', {
status: res?.status,
dataLength: res?.data?.length,
success: res?.data?.success,
message: res?.data?.message
});
// On 304 or empty body, retry once with a different cache-buster and legacy fallback // On 304 or empty body, retry once with a different cache-buster and legacy fallback
if (res?.status === 304 || res?.data == null || res?.data === '') { if (res?.status === 304 || res?.data == null || res?.data === '') {
@ -295,6 +313,14 @@ export async function getUserRepositories(clearCache = false): Promise<GitHubRep
let data = body?.data || body let data = body?.data || body
console.log('📡 [getUserRepositories] Raw response body:', body);
console.log('📡 [getUserRepositories] Extracted data:', data);
console.log('📡 [getUserRepositories] First repository in response:', data?.[0] ? {
name: data[0].repository_name,
provider_name: data[0].provider_name,
all_keys: Object.keys(data[0])
} : 'No data');
// Session cache fallback if still empty // Session cache fallback if still empty
if ((!Array.isArray(data) || data.length === 0) && typeof window !== 'undefined') { if ((!Array.isArray(data) || data.length === 0) && typeof window !== 'undefined') {
try { try {
@ -326,6 +352,7 @@ export async function getUserRepositories(clearCache = false): Promise<GitHubRep
language: md?.language || null, language: md?.language || null,
updated_at: md?.updated_at || r?.updated_at, updated_at: md?.updated_at || r?.updated_at,
html_url: md?.html_url || (full ? `https://github.com/${full}` : undefined), html_url: md?.html_url || (full ? `https://github.com/${full}` : undefined),
provider_name: r?.provider_name, // Add the provider_name field!
} as GitHubRepoSummary } as GitHubRepoSummary
}) })
try { if (typeof window !== 'undefined') sessionStorage.setItem(`user_repos_cache_${userId || 'anon'}`, JSON.stringify(normalized)) } catch {} try { if (typeof window !== 'undefined') sessionStorage.setItem(`user_repos_cache_${userId || 'anon'}`, JSON.stringify(normalized)) } catch {}