Add git servers
This commit is contained in:
@@ -11,6 +11,7 @@ import (
|
||||
"quay/internal/config"
|
||||
"quay/internal/database"
|
||||
"quay/internal/envconfig"
|
||||
"quay/internal/security"
|
||||
|
||||
"github.com/gofiber/fiber/v3"
|
||||
)
|
||||
@@ -21,6 +22,26 @@ func Register(app *fiber.App, cfg *config.Config, envCfg *envconfig.EnvConfig, d
|
||||
userRepository := database.NewSQLiteUserRepository(db)
|
||||
gitServerRepository := database.NewSQLiteGitServerRepository(db)
|
||||
|
||||
if uList, err := userRepository.GetAllUsers(); err != nil {
|
||||
log.Printf("Warning checking users: %v", err)
|
||||
} else if len(uList) == 0 {
|
||||
pwd := "admin"
|
||||
hashedPassword, err := security.HashPassword(pwd)
|
||||
if err != nil {
|
||||
log.Println("Error hashing default user password: ", err)
|
||||
}
|
||||
defaultUser := models.User{
|
||||
Name: "admin",
|
||||
HashedPassword: hashedPassword,
|
||||
Role: "admin",
|
||||
}
|
||||
if err := userRepository.CreateUser(&defaultUser); err != nil {
|
||||
log.Printf("Warning creating default user: %v", err)
|
||||
} else {
|
||||
log.Printf("Created default user: admin/admin")
|
||||
}
|
||||
}
|
||||
|
||||
siteHandler := handlers.NewSiteHandler(siteRepository)
|
||||
deploySiteHandler := handlers.NewDeploySiteHandler(envCfg, siteRepository, deploymentRepository)
|
||||
userHandler := handlers.NewUserHandler(userRepository)
|
||||
@@ -85,18 +106,7 @@ func Register(app *fiber.App, cfg *config.Config, envCfg *envconfig.EnvConfig, d
|
||||
protected.Get("/users/:id", userHandler.GetUserById)
|
||||
protected.Get("/users/by-name/:name", userHandler.GetUserByName)
|
||||
protected.Get("/me", userHandler.GetMe)
|
||||
|
||||
// Allow creating the very first admin user without auth (bootstrap).
|
||||
// If an admin already exists, require auth to create users.
|
||||
if exists, err := userRepository.AdminUserExists(); err != nil {
|
||||
// if we can't determine, be conservative and require auth
|
||||
protected.Post("/users", userHandler.CreateUser)
|
||||
} else if !exists {
|
||||
public.Post("/users", userHandler.CreateUser)
|
||||
} else {
|
||||
protected.Post("/users", userHandler.CreateUser)
|
||||
}
|
||||
|
||||
protected.Put("/users/:id", userHandler.UpdateUser)
|
||||
protected.Delete("/users/:id", userHandler.DeleteUser)
|
||||
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
import { fetchWithAuth } from '.';
|
||||
import type { CreateGitServerRequest, GitServer, UpdateGitServerRequest } from './types/gitserver';
|
||||
|
||||
export const getGitServers = async (): Promise<GitServer[]> => {
|
||||
const response = await fetchWithAuth('/gitservers', {
|
||||
method: 'GET',
|
||||
});
|
||||
if (response.status === 404) {
|
||||
return [];
|
||||
}
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch git servers');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const getGitServerById = async (id: string): Promise<GitServer> => {
|
||||
const response = await fetchWithAuth(`/gitservers/${id}`, {
|
||||
method: 'GET',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch git server');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const createGitServer = async (data: CreateGitServerRequest): Promise<GitServer> => {
|
||||
const response = await fetchWithAuth('/gitservers', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to create git server');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const updateGitServer = async (
|
||||
id: string,
|
||||
data: UpdateGitServerRequest
|
||||
): Promise<GitServer> => {
|
||||
const response = await fetchWithAuth(`/gitservers/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to update git server');
|
||||
}
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const deleteGitServer = async (id: string): Promise<void> => {
|
||||
const response = await fetchWithAuth(`/gitservers/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete git server');
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,28 @@
|
||||
export type GitServerProtocol = 'http' | 'https';
|
||||
export type GitServerType = 'github' | 'gitlab' | 'gitea';
|
||||
|
||||
export interface GitServer {
|
||||
id: string;
|
||||
name: string;
|
||||
protocol: GitServerProtocol;
|
||||
baseUrl: string;
|
||||
type: GitServerType;
|
||||
auth_token?: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface CreateGitServerRequest {
|
||||
name: string;
|
||||
protocol: GitServerProtocol;
|
||||
baseUrl: string;
|
||||
type: GitServerType;
|
||||
auth_token?: string;
|
||||
}
|
||||
|
||||
export interface UpdateGitServerRequest {
|
||||
name?: string;
|
||||
protocol?: GitServerProtocol;
|
||||
baseUrl?: string;
|
||||
type?: GitServerType;
|
||||
auth_token?: string;
|
||||
}
|
||||
@@ -10,7 +10,15 @@ import {
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { Home, Library, PanelsTopLeft, PanelTop, Search } from 'lucide-react';
|
||||
import {
|
||||
Home,
|
||||
Library,
|
||||
PanelsTopLeft,
|
||||
PanelTop,
|
||||
Search,
|
||||
Users as UsersIcon,
|
||||
Code2,
|
||||
} from 'lucide-react';
|
||||
import { Link, useLocation } from 'react-router';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
|
||||
import { useTheme } from './theme-provider';
|
||||
@@ -79,6 +87,28 @@ const AppSidebar = () => {
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenuSub>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={location.pathname === '/users'}
|
||||
>
|
||||
<Link to={'/users'}>
|
||||
<UsersIcon />
|
||||
Users
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
isActive={location.pathname === '/gitservers'}
|
||||
>
|
||||
<Link to={'/gitservers'}>
|
||||
<Code2 />
|
||||
Git Servers
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
{/* <SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
asChild
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { IconProps } from './props';
|
||||
|
||||
export const GitHubIcon = ({ size = 24 }: IconProps) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { IconProps } from './props';
|
||||
|
||||
export const GitLabIcon = ({ size = 24 }: IconProps) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
>
|
||||
<title>GitLab</title>
|
||||
<path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z" />
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1,15 @@
|
||||
import type { IconProps } from './props';
|
||||
|
||||
export const GiteaIcon = ({ size = 24 }: IconProps) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
fill="currentColor"
|
||||
>
|
||||
<title>Gitea</title>
|
||||
<path d="M4.209 4.603c-.247 0-.525.02-.84.088-.333.07-1.28.283-2.054 1.027C-.403 7.25.035 9.685.089 10.052c.065.446.263 1.687 1.21 2.768 1.749 2.141 5.513 2.092 5.513 2.092s.462 1.103 1.168 2.119c.955 1.263 1.936 2.248 2.89 2.367 2.406 0 7.212-.004 7.212-.004s.458.004 1.08-.394c.535-.324 1.013-.893 1.013-.893s.492-.527 1.18-1.73c.21-.37.385-.729.538-1.068 0 0 2.107-4.471 2.107-8.823-.042-1.318-.367-1.55-.443-1.627-.156-.156-.366-.153-.366-.153s-4.475.252-6.792.306c-.508.011-1.012.023-1.512.027v4.474l-.634-.301c0-1.39-.004-4.17-.004-4.17-1.107.016-3.405-.084-3.405-.084s-5.399-.27-5.987-.324c-.187-.011-.401-.032-.648-.032zm.354 1.832h.111s.271 2.269.6 3.597C5.549 11.147 6.22 13 6.22 13s-.996-.119-1.641-.348c-.99-.324-1.409-.714-1.409-.714s-.73-.511-1.096-1.52C1.444 8.73 2.021 7.7 2.021 7.7s.32-.859 1.47-1.145c.395-.106.863-.12 1.072-.12zm8.33 2.554c.26.003.509.127.509.127l.868.422-.529 1.075a.686.686 0 0 0-.614.359.685.685 0 0 0 .072.756l-.939 1.924a.69.69 0 0 0-.66.527.687.687 0 0 0 .347.763.686.686 0 0 0 .867-.206.688.688 0 0 0-.069-.882l.916-1.874a.667.667 0 0 0 .237-.02.657.657 0 0 0 .271-.137 8.826 8.826 0 0 1 1.016.512.761.761 0 0 1 .286.282c.073.21-.073.569-.073.569-.087.29-.702 1.55-.702 1.55a.692.692 0 0 0-.676.477.681.681 0 1 0 1.157-.252c.073-.141.141-.282.214-.431.19-.397.515-1.16.515-1.16.035-.066.218-.394.103-.814-.095-.435-.48-.638-.48-.638-.467-.301-1.116-.58-1.116-.58s0-.156-.042-.27a.688.688 0 0 0-.148-.241l.516-1.062 2.89 1.401s.48.218.583.619c.073.282-.019.534-.069.657-.24.587-2.1 4.317-2.1 4.317s-.232.554-.748.588a1.065 1.065 0 0 1-.393-.045l-.202-.08-4.31-2.1s-.417-.218-.49-.596c-.083-.31.104-.691.104-.691l2.073-4.272s.183-.37.466-.497a.855.855 0 0 1 .35-.077z" />
|
||||
</svg>
|
||||
);
|
||||
@@ -0,0 +1 @@
|
||||
export type IconProps = { size?: number | string };
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { ChartLine, CircleUserRound, LogOut, Settings, Users } from 'lucide-react';
|
||||
import { GitBranch, LogOut, Users } from 'lucide-react';
|
||||
|
||||
interface NavbarProps {
|
||||
userName?: string;
|
||||
@@ -41,18 +41,6 @@ const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
|
||||
<DropdownMenuContent className="w-40" align="end">
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuLabel>{userName}</DropdownMenuLabel>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/account">
|
||||
<CircleUserRound />
|
||||
Account
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/analytics">
|
||||
<ChartLine />
|
||||
Analytics
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/users">
|
||||
<Users />
|
||||
@@ -60,9 +48,9 @@ const Navbar = ({ userName, profilePictureUrl }: NavbarProps) => {
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link to="/settings">
|
||||
<Settings />
|
||||
Settings
|
||||
<Link to="/gitservers">
|
||||
<GitBranch />
|
||||
Git servers
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { createGitServer } from '../../../api/gitservers.api';
|
||||
import type { CreateGitServerRequest } from '../../../api/types/gitserver';
|
||||
|
||||
export function useCreateGitServer() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (data: CreateGitServerRequest) => createGitServer(data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({
|
||||
queryKey: ['gitservers'],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { deleteGitServer } from '../../../api/gitservers.api';
|
||||
|
||||
export function useDeleteGitServer() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: (id: string) => deleteGitServer(id),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({
|
||||
queryKey: ['gitservers'],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { getGitServers } from '../../../api/gitservers.api';
|
||||
|
||||
export function useGitServers() {
|
||||
return useQuery({
|
||||
queryKey: ['gitservers'],
|
||||
queryFn: getGitServers,
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { updateGitServer } from '../../../api/gitservers.api';
|
||||
import type { UpdateGitServerRequest } from '../../../api/types/gitserver';
|
||||
|
||||
export function useUpdateGitServer() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ id, data }: { id: string; data: UpdateGitServerRequest }) =>
|
||||
updateGitServer(id, data),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({
|
||||
queryKey: ['gitservers'],
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -8,6 +8,7 @@ import './index.css';
|
||||
import NewSite from './pages/NewSite/NewSite';
|
||||
import SiteOverview from './pages/SiteOverview/SiteOverview';
|
||||
import Users from './pages/Users/Users';
|
||||
import GitServers from './pages/GitServers/GitServers';
|
||||
import Login from './pages/Login/Login';
|
||||
import Logout from './pages/Logout/Logout';
|
||||
|
||||
@@ -23,6 +24,7 @@ createRoot(document.getElementById('root')!).render(
|
||||
<Route path="/sites/new" element={<NewSite />} />
|
||||
<Route path="/sites/:id" element={<SiteOverview />} />
|
||||
<Route path="/users" element={<Users />} />
|
||||
<Route path="/gitservers" element={<GitServers />} />
|
||||
<Route path="/logout" element={<Logout />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
@@ -0,0 +1,502 @@
|
||||
import { Plus, Trash2, Edit2, X, Code2 } from 'lucide-react';
|
||||
import { Button } from '../../components/ui/button';
|
||||
import {
|
||||
Empty,
|
||||
EmptyDescription,
|
||||
EmptyHeader,
|
||||
EmptyMedia,
|
||||
EmptyTitle,
|
||||
} from '../../components/ui/empty';
|
||||
import { useGitServers } from '../../hooks/api/gitservers/useGitServers';
|
||||
import { useCreateGitServer } from '../../hooks/api/gitservers/useCreateGitServer';
|
||||
import { useDeleteGitServer } from '../../hooks/api/gitservers/useDeleteGitServer';
|
||||
import { useUpdateGitServer } from '../../hooks/api/gitservers/useUpdateGitServer';
|
||||
import Page from '../Page';
|
||||
import { Skeleton } from '../../components/ui/skeleton';
|
||||
import { memo, useState } from 'react';
|
||||
import type { GitServer, GitServerProtocol, GitServerType } from '../../api/types/gitserver';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from '../../components/ui/dialog';
|
||||
import { Input } from '../../components/ui/input';
|
||||
import { Label } from '../../components/ui/label';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '../../components/ui/select';
|
||||
import { GiteaIcon } from '../../components/icons/GiteaIcon';
|
||||
import { GitLabIcon } from '../../components/icons/GitLabIcon';
|
||||
import { GitHubIcon } from '../../components/icons/GitHubIcon';
|
||||
|
||||
const DeleteGitServerDialog = ({ gitServerId }: { gitServerId: string }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const deleteGitServer = useDeleteGitServer();
|
||||
|
||||
const handleDelete = () => {
|
||||
deleteGitServer.mutate(gitServerId, {
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon-sm">
|
||||
<Trash2 />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete git server</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete this git server? This action cannot be
|
||||
undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={deleteGitServer.isPending}
|
||||
>
|
||||
{deleteGitServer.isPending ? 'Deleting...' : 'Delete'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const GitServerTypeIcon = ({ type }: { type: GitServerType }) => {
|
||||
switch (type) {
|
||||
case 'github':
|
||||
return <GitHubIcon size={32} />;
|
||||
case 'gitlab':
|
||||
return <GitLabIcon size={32} />;
|
||||
case 'gitea':
|
||||
return <GiteaIcon size={32} />;
|
||||
default:
|
||||
return <Code2 />;
|
||||
}
|
||||
};
|
||||
|
||||
const GitServerRow = ({ gitServer }: { gitServer: GitServer }) => {
|
||||
return (
|
||||
<div className="flex items-center gap-4 p-4 rounded-lg border">
|
||||
<div className="text-2xl">
|
||||
<GitServerTypeIcon type={gitServer.type} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="font-medium">{gitServer.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{gitServer.protocol}://{gitServer.baseUrl}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<UpdateGitServerDialog gitServer={gitServer} />
|
||||
<DeleteGitServerDialog gitServerId={gitServer.id} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const GitServersLoadingSkeleton = memo(() => {
|
||||
return (
|
||||
<div className="w-full space-y-2">
|
||||
{[1, 2, 3].map((i) => (
|
||||
<Skeleton key={i} className="h-16 w-full rounded-lg" />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
const CreateGitServerDialog = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState('');
|
||||
const [protocol, setProtocol] = useState<'https' | 'http'>('https');
|
||||
const [baseUrl, setBaseUrl] = useState('');
|
||||
const [type, setType] = useState<'github' | 'gitlab' | 'gitea'>('github');
|
||||
const [authToken, setAuthToken] = useState('');
|
||||
|
||||
const { mutate: createGitServer, isPending, error, reset } = useCreateGitServer();
|
||||
|
||||
const resetForm = () => {
|
||||
setName('');
|
||||
setProtocol('https');
|
||||
setBaseUrl('');
|
||||
setType('github');
|
||||
setAuthToken('');
|
||||
reset();
|
||||
};
|
||||
|
||||
const handleOpenChange = (next: boolean) => {
|
||||
setOpen(next);
|
||||
if (!next) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim() || !baseUrl.trim()) return;
|
||||
|
||||
createGitServer(
|
||||
{
|
||||
name: name.trim(),
|
||||
protocol,
|
||||
baseUrl: baseUrl.trim(),
|
||||
type,
|
||||
auth_token: authToken.trim() || undefined,
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
resetForm();
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const isValid = name.trim().length > 0 && baseUrl.trim().length > 0;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
<Button size="default" variant="default">
|
||||
<Plus />
|
||||
Add git server
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create git server</DialogTitle>
|
||||
<DialogDescription>
|
||||
Add a new git server configuration. You can optionally provide an auth
|
||||
token.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-4 py-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="gs-name">Name</Label>
|
||||
<Input
|
||||
id="gs-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="My GitHub"
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="gs-type">Type</Label>
|
||||
<Select value={type} onValueChange={(v) => setType(v as GitServerType)}>
|
||||
<SelectTrigger id="gs-type" className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="github">GitHub</SelectItem>
|
||||
<SelectItem value="gitlab">GitLab</SelectItem>
|
||||
<SelectItem value="gitea">Gitea</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="gs-protocol">Protocol</Label>
|
||||
<Select
|
||||
value={protocol}
|
||||
onValueChange={(v) => setProtocol(v as GitServerProtocol)}
|
||||
>
|
||||
<SelectTrigger id="gs-protocol" className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="https">HTTPS</SelectItem>
|
||||
<SelectItem value="http">HTTP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="gs-baseurl">Base URL</Label>
|
||||
<Input
|
||||
id="gs-baseurl"
|
||||
value={baseUrl}
|
||||
onChange={(e) => setBaseUrl(e.target.value)}
|
||||
placeholder="github.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="gs-auth-token">Auth Token (optional)</Label>
|
||||
<Input
|
||||
id="gs-auth-token"
|
||||
type="password"
|
||||
value={authToken}
|
||||
onChange={(e) => setAuthToken(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">
|
||||
Failed to create git server. Please try again.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => handleOpenChange(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={!isValid || isPending}>
|
||||
{isPending ? 'Creating...' : 'Create'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const UpdateGitServerDialog = ({ gitServer }: { gitServer: GitServer }) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState(gitServer.name);
|
||||
const [protocol, setProtocol] = useState<'https' | 'http'>(gitServer.protocol);
|
||||
const [baseUrl, setBaseUrl] = useState(gitServer.baseUrl);
|
||||
const [type, setType] = useState<'github' | 'gitlab' | 'gitea'>(gitServer.type);
|
||||
const [authToken, setAuthToken] = useState(gitServer.auth_token || '');
|
||||
|
||||
const { mutate: updateGitServer, isPending, error, reset } = useUpdateGitServer();
|
||||
|
||||
const resetForm = () => {
|
||||
setName(gitServer.name);
|
||||
setProtocol(gitServer.protocol);
|
||||
setBaseUrl(gitServer.baseUrl);
|
||||
setType(gitServer.type);
|
||||
setAuthToken(gitServer.auth_token || '');
|
||||
reset();
|
||||
};
|
||||
|
||||
const handleOpenChange = (next: boolean) => {
|
||||
setOpen(next);
|
||||
if (!next) {
|
||||
resetForm();
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!name.trim() || !baseUrl.trim()) return;
|
||||
|
||||
updateGitServer(
|
||||
{
|
||||
id: gitServer.id,
|
||||
data: {
|
||||
name: name.trim(),
|
||||
protocol,
|
||||
baseUrl: baseUrl.trim(),
|
||||
type,
|
||||
auth_token: authToken.trim() || undefined,
|
||||
},
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
resetForm();
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
const isValid = name.trim().length > 0 && baseUrl.trim().length > 0;
|
||||
const hasChanges =
|
||||
name !== gitServer.name ||
|
||||
protocol !== gitServer.protocol ||
|
||||
baseUrl !== gitServer.baseUrl ||
|
||||
type !== gitServer.type ||
|
||||
authToken !== (gitServer.auth_token || '');
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon-sm">
|
||||
<Edit2 />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Edit git server</DialogTitle>
|
||||
<DialogDescription>Update the git server configuration.</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col gap-4 py-4">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="update-gs-name">Name</Label>
|
||||
<Input
|
||||
id="update-gs-name"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="My GitHub"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="update-gs-type">Type</Label>
|
||||
<Select value={type} onValueChange={(v) => setType(v as GitServerType)}>
|
||||
<SelectTrigger id="update-gs-type" className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="github">GitHub</SelectItem>
|
||||
<SelectItem value="gitlab">GitLab</SelectItem>
|
||||
<SelectItem value="gitea">Gitea</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="update-gs-protocol">Protocol</Label>
|
||||
<Select
|
||||
value={protocol}
|
||||
onValueChange={(v) => setProtocol(v as GitServerProtocol)}
|
||||
>
|
||||
<SelectTrigger id="update-gs-protocol" className="w-full">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="https">HTTPS</SelectItem>
|
||||
<SelectItem value="http">HTTP</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="update-gs-baseurl">Base URL</Label>
|
||||
<Input
|
||||
id="update-gs-baseurl"
|
||||
value={baseUrl}
|
||||
onChange={(e) => setBaseUrl(e.target.value)}
|
||||
placeholder="github.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label htmlFor="update-gs-auth-token">Auth Token (optional)</Label>
|
||||
<Input
|
||||
id="update-gs-auth-token"
|
||||
type="password"
|
||||
value={authToken}
|
||||
onChange={(e) => setAuthToken(e.target.value)}
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive">
|
||||
Failed to update git server. Please try again.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => handleOpenChange(false)}
|
||||
disabled={isPending}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={!isValid || !hasChanges || isPending}>
|
||||
{isPending ? 'Updating...' : 'Update'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export const GitServers = () => {
|
||||
const { data: gitServers, isLoading, error } = useGitServers();
|
||||
|
||||
if (isLoading || error) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Page title="Git Servers">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<h1 className="text-2xl font-semibold">Git Servers</h1>
|
||||
<CreateGitServerDialog />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{isLoading && <GitServersLoadingSkeleton />}
|
||||
{error && (
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon">
|
||||
<X />
|
||||
</EmptyMedia>
|
||||
<EmptyTitle className="text-xl">Failed to load git servers</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
An error occurred while fetching your git servers. Please try again
|
||||
later.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
)}
|
||||
{gitServers &&
|
||||
gitServers.length > 0 &&
|
||||
!error &&
|
||||
!isLoading &&
|
||||
gitServers.map((gs) => <GitServerRow key={gs.id} gitServer={gs} />)}
|
||||
{gitServers && !error && !isLoading && gitServers.length === 0 && (
|
||||
<Empty>
|
||||
<EmptyHeader>
|
||||
<EmptyMedia variant="icon">
|
||||
<Code2 />
|
||||
</EmptyMedia>
|
||||
<EmptyTitle className="text-xl font-semibold">
|
||||
No git servers found
|
||||
</EmptyTitle>
|
||||
<EmptyDescription>
|
||||
You haven't added any git servers yet.
|
||||
</EmptyDescription>
|
||||
</EmptyHeader>
|
||||
</Empty>
|
||||
)}
|
||||
</div>
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default GitServers;
|
||||
Reference in New Issue
Block a user