feat(ui): add repository link buttons for git providers

- Implement "View Repository" links for GitHub, GitLab, Bitbucket, and Git providers
- Add repository icons and direct links to source repositories
- Support links for both application and compose service git provider forms
- Enhance user experience with quick access to repository pages
This commit is contained in:
Mauricio Siu
2025-03-08 23:45:21 -06:00
parent 9d50f384d1
commit 467bca3efb
8 changed files with 129 additions and 14 deletions

View File

@@ -43,6 +43,8 @@ import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { toast } from "sonner";
import { z } from "zod";
import { GithubIcon } from "@/components/icons/data-tools-icons";
import Link from "next/link";
const GithubProviderSchema = z.object({
composePath: z.string().min(1),
@@ -199,7 +201,20 @@ export const SaveGithubProviderCompose = ({ composeId }: Props) => {
name="repository"
render={({ field }) => (
<FormItem className="md:col-span-2 flex flex-col">
<FormLabel>Repository</FormLabel>
<div className="flex items-center justify-between">
<FormLabel>Repository</FormLabel>
{field.value.owner && field.value.repo && (
<Link
href={`https://github.com/${field.value.owner}/${field.value.repo}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-1 text-sm text-muted-foreground hover:text-primary"
>
<GithubIcon className="h-4 w-4" />
<span>View Repository</span>
</Link>
)}
</div>
<Popover>
<PopoverTrigger asChild>
<FormControl>