mirror of
https://github.com/RayLabsHQ/gitea-mirror.git
synced 2026-01-30 22:37:25 +03:00
refactor: streamline layout and improve tooltip descriptions in OrganizationConfiguration component
This commit is contained in:
Arunavo Ray
@@ -45,178 +45,119 @@ 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">
|
||||||
{strategy === "single-org" ? (
|
{/* Left column - always shows starred repos org */}
|
||||||
<>
|
<div className="space-y-1">
|
||||||
{/* Destination Organization - Left Column */}
|
<Label htmlFor="starredReposOrg" className="text-sm font-normal flex items-center gap-2">
|
||||||
<div className="space-y-1">
|
<Star className="h-3.5 w-3.5" />
|
||||||
<Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
|
Starred Repositories Organization
|
||||||
Destination Organization
|
|
||||||
<TooltipProvider>
|
|
||||||
<Tooltip>
|
|
||||||
<TooltipTrigger>
|
|
||||||
<Info className="h-3.5 w-3.5 text-muted-foreground" />
|
|
||||||
</TooltipTrigger>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>All repositories will be mirrored to this organization</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</TooltipProvider>
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="destinationOrg"
|
|
||||||
value={destinationOrg || ""}
|
|
||||||
onChange={(e) => onDestinationOrgChange(e.target.value)}
|
|
||||||
placeholder="github-mirrors"
|
|
||||||
className=""
|
|
||||||
/>
|
|
||||||
<p className="text-xs text-muted-foreground mt-1">
|
|
||||||
Organization for consolidated repositories
|
|
||||||
</p>
|
|
||||||
</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>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
{/* 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>
|
|
||||||
|
|
||||||
{/* Organization Visibility - Right Column */}
|
|
||||||
<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>
|
|
||||||
<TooltipContent>
|
|
||||||
<p>Visibility for newly created organizations</p>
|
|
||||||
</TooltipContent>
|
|
||||||
</Tooltip>
|
|
||||||
</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-3 py-1.5 rounded-md text-sm transition-all",
|
|
||||||
"border flex-1",
|
|
||||||
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>
|
|
||||||
|
|
||||||
{/* 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>
|
<TooltipProvider>
|
||||||
<Tooltip>
|
<Tooltip>
|
||||||
<TooltipTrigger>
|
<TooltipTrigger>
|
||||||
<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>Starred repositories will be organized separately in this organization</p>
|
||||||
</TooltipContent>
|
</TooltipContent>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
</Label>
|
</Label>
|
||||||
<div className="flex gap-2">
|
<Input
|
||||||
{visibilityOptions.map((option) => {
|
id="starredReposOrg"
|
||||||
const Icon = option.icon;
|
value={starredReposOrg || ""}
|
||||||
const isSelected = visibility === option.value;
|
onChange={(e) => onStarredReposOrgChange(e.target.value)}
|
||||||
return (
|
placeholder="starred"
|
||||||
<button
|
className=""
|
||||||
key={option.value}
|
/>
|
||||||
type="button"
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
onClick={() => onVisibilityChange(option.value)}
|
Keep starred repos organized separately
|
||||||
className={cn(
|
</p>
|
||||||
"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>
|
||||||
)}
|
|
||||||
|
{/* Right column - shows destination org for single-org, empty div for others */}
|
||||||
|
{strategy === "single-org" ? (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<Label htmlFor="destinationOrg" className="text-sm font-normal flex items-center gap-2">
|
||||||
|
Destination Organization
|
||||||
|
<TooltipProvider>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger>
|
||||||
|
<Info className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>All repositories will be mirrored to this organization</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="destinationOrg"
|
||||||
|
value={destinationOrg || ""}
|
||||||
|
onChange={(e) => onDestinationOrgChange(e.target.value)}
|
||||||
|
placeholder="github-mirrors"
|
||||||
|
className=""
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">
|
||||||
|
Organization for consolidated repositories
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="hidden md:block" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Second row - Organization Visibility (always shown) */}
|
||||||
|
<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>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Default visibility for newly created organizations</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
</Label>
|
||||||
|
<div className="grid grid-cols-3 gap-2">
|
||||||
|
{visibilityOptions.map((option) => {
|
||||||
|
const Icon = option.icon;
|
||||||
|
const isSelected = visibility === option.value;
|
||||||
|
return (
|
||||||
|
<TooltipProvider key={option.value}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onVisibilityChange(option.value)}
|
||||||
|
className={cn(
|
||||||
|
"flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all",
|
||||||
|
"border group",
|
||||||
|
isSelected
|
||||||
|
? "bg-accent border-accent-foreground/20"
|
||||||
|
: "bg-background hover:bg-accent/50 border-input"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Icon className="h-3.5 w-3.5" />
|
||||||
|
<span>{option.label}</span>
|
||||||
|
</div>
|
||||||
|
<Info className="h-3 w-3 text-muted-foreground opacity-50 group-hover:opacity-100 transition-opacity" />
|
||||||
|
</button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p className="text-xs">{option.description}</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user