Mirror/gitea-mirror
1
0
Fork 0
mirror of https://github.com/RayLabsHQ/gitea-mirror.git synced 2026-01-30 22:37:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: streamline layout and improve tooltip descriptions in OrganizationConfiguration component

Browse Source
This commit is contained in:
Arunavo Ray
2025-06-17 14:26:52 +05:30
parent 403fe08bae
commit 2ac933b599
1 changed files with 102 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
src/components/config/OrganizationConfiguration.tsx
View File

@@ -45,10 +45,38 @@ export const OrganizationConfiguration: React.FC<OrganizationConfigurationProps>
</h4> </h4>
</div> </div>
{/* First row - Organization inputs with consistent layout */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Left column - always shows starred repos org */}
<div className="space-y-1">
<Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
<Star className="h-3.5 w-3.5" />
Starred Repositories Organization
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>Starred repositories will be organized separately in this organization</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Label>
<Input
id="starredReposOrg"
value={starredReposOrg || ""}
onChange={(e) => onStarredReposOrgChange(e.target.value)}
placeholder="starred"
className=""
/>
<p className="text-xs text-muted-foreground mt-1">
Keep starred repos organized separately
</p>
</div>
{/* Right column - shows destination org for single-org, empty div for others */}
{strategy === "single-org" ? ( {strategy === "single-org" ? (
<>
{/* Destination Organization - Left Column */}
<div className="space-y-1"> <div className="space-y-1">
<Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2"> <Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
Destination Organization Destination Organization
@@ -74,66 +102,12 @@ export const OrganizationConfiguration: React.FC<OrganizationConfigurationProps>
Organization for consolidated repositories Organization for consolidated repositories
</p> </p>
</div> </div>
{/* Starred Repositories Organization - Right Column */}
<div className="space-y-1">
<Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
<Star className="h-3.5 w-3.5" />
Starred Repositories Organization
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>Starred repositories will be organized separately in this organization</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Label>
<Input
id="starredReposOrg"
value={starredReposOrg || ""}
onChange={(e) => onStarredReposOrgChange(e.target.value)}
placeholder="starred"
className=""
/>
<p className="text-xs text-muted-foreground mt-1">
Keep starred repos organized separately
</p>
</div>
</>
) : ( ) : (
<> <div className="hidden md:block" />
{/* Starred Repositories Organization - Left Column */} )}
<div className="space-y-1">
<Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
<Star className="h-3.5 w-3.5" />
Starred Repositories Organization
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger>
<TooltipContent>
<p>Starred repositories will be organized separately in this organization</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</Label>
<Input
id="starredReposOrg"
value={starredReposOrg || ""}
onChange={(e) => onStarredReposOrgChange(e.target.value)}
placeholder="starred"
className=""
/>
<p className="text-xs text-muted-foreground mt-1">
Keep starred repos organized separately
</p>
</div> </div>
{/* Organization Visibility - Right Column */} {/* Second row - Organization Visibility (always shown) */}
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-sm font-normal flex items-center gap-2"> <Label className="text-sm font-normal flex items-center gap-2">
Organization Visibility Organization Visibility
@@ -143,80 +117,47 @@ export const OrganizationConfiguration: React.FC<OrganizationConfigurationProps>
<Info className="h-3.5 w-3.5 text-muted-foreground" /> <Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Visibility for newly created organizations</p> <p>Default visibility for newly created organizations</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</Label> </Label>
<div className="flex gap-2"> <div className="grid grid-cols-3 gap-2">
{visibilityOptions.map((option) => { {visibilityOptions.map((option) => {
const Icon = option.icon; const Icon = option.icon;
const isSelected = visibility === option.value; const isSelected = visibility === option.value;
return ( return (
<TooltipProvider key={option.value}>
<Tooltip>
<TooltipTrigger asChild>
<button <button
key={option.value}
type="button" type="button"
onClick={() => onVisibilityChange(option.value)} onClick={() => onVisibilityChange(option.value)}
className={cn( className={cn(
"flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm transition-all", "flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all",
"border flex-1", "border group",
isSelected isSelected
? "bg-accent border-accent-foreground/20" ? "bg-accent border-accent-foreground/20"
: "bg-background hover:bg-accent/50 border-input" : "bg-background hover:bg-accent/50 border-input"
)} )}
> >
<div className="flex items-center gap-2">
<Icon className="h-3.5 w-3.5" /> <Icon className="h-3.5 w-3.5" />
<span>{option.label}</span> <span>{option.label}</span>
</div>
<Info className="h-3 w-3 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity" />
</button> </button>
);
})}
</div>
</div>
</>
)}
</div>
{/* Organization Visibility - Full width when single-org is selected */}
{strategy === "single-org" && (
<div className="space-y-2">
<Label className="text-sm font-normal flex items-center gap-2">
Organization Visibility
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Info className="h-3.5 w-3.5 text-muted-foreground" />
</TooltipTrigger> </TooltipTrigger>
<TooltipContent> <TooltipContent>
<p>Visibility for newly created organizations</p> <p className="text-xs">{option.description}</p>
</TooltipContent> </TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
</Label>
<div className="flex gap-2">
{visibilityOptions.map((option) => {
const Icon = option.icon;
const isSelected = visibility === option.value;
return (
<button
key={option.value}
type="button"
onClick={() => onVisibilityChange(option.value)}
className={cn(
"flex items-center gap-1.5 px-4 py-1.5 rounded-md text-sm transition-all",
"border",
isSelected
? "bg-accent border-accent-foreground/20"
: "bg-background hover:bg-accent/50 border-input"
)}
>
<Icon className="h-3.5 w-3.5" />
<span>{option.label}</span>
</button>
); );
})} })}
</div> </div>
</div> </div>
)}
</div> </div>
); );
}; };