forked from baron/baron-sso
258 lines
9.0 KiB
TypeScript
258 lines
9.0 KiB
TypeScript
import { Building2, X } from "lucide-react";
|
|
import type { ReactNode } from "react";
|
|
import { useEffect, useState } from "react";
|
|
import { Button } from "../../../components/ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../../../components/ui/dialog";
|
|
import { Label } from "../../../components/ui/label";
|
|
import type { TenantSummary } from "../../../lib/adminApi";
|
|
import { t } from "../../../lib/i18n";
|
|
import {
|
|
buildAuthenticatedOrgChartTenantPickerUrl,
|
|
parseOrgChartTenantSelection,
|
|
} from "../../users/orgChartPicker";
|
|
import { filterParentTenants } from "./ParentTenantSelector.helpers";
|
|
|
|
type ParentTenantSelectorProps = {
|
|
id: string;
|
|
label: string;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
tenants: TenantSummary[];
|
|
noneLabel: string;
|
|
helpText?: string;
|
|
excludeTenantId?: string;
|
|
labelAction?: ReactNode;
|
|
contextLabel?: string;
|
|
orgChartPickerLabel?: string;
|
|
localPickerLabel?: string;
|
|
localTenantFilter?: (tenant: TenantSummary) => boolean;
|
|
compact?: boolean;
|
|
controlTestId?: string;
|
|
};
|
|
|
|
export function ParentTenantSelector({
|
|
id,
|
|
label,
|
|
value,
|
|
onChange,
|
|
tenants,
|
|
noneLabel,
|
|
helpText,
|
|
excludeTenantId,
|
|
labelAction,
|
|
contextLabel,
|
|
orgChartPickerLabel,
|
|
localPickerLabel,
|
|
localTenantFilter,
|
|
compact = false,
|
|
controlTestId,
|
|
}: ParentTenantSelectorProps) {
|
|
const [pickerOpen, setPickerOpen] = useState(false);
|
|
const [localPickerOpen, setLocalPickerOpen] = useState(false);
|
|
const [localSearch, setLocalSearch] = useState("");
|
|
const selectedTenant = tenants.find((tenant) => tenant.id === value);
|
|
const localCandidates = filterParentTenants(
|
|
localTenantFilter ? tenants.filter(localTenantFilter) : tenants,
|
|
localSearch,
|
|
false,
|
|
excludeTenantId,
|
|
);
|
|
const pickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
|
|
import.meta.env.ORGFRONT_URL,
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!pickerOpen) return;
|
|
|
|
const onMessage = (event: MessageEvent) => {
|
|
const selection = parseOrgChartTenantSelection(event.data);
|
|
if (!selection) return;
|
|
if (excludeTenantId && selection.id === excludeTenantId) return;
|
|
|
|
onChange(selection.id);
|
|
setPickerOpen(false);
|
|
};
|
|
|
|
window.addEventListener("message", onMessage);
|
|
return () => window.removeEventListener("message", onMessage);
|
|
}, [excludeTenantId, onChange, pickerOpen]);
|
|
|
|
return (
|
|
<div className={compact ? "space-y-1" : "space-y-2"}>
|
|
<div
|
|
className={
|
|
compact
|
|
? "flex min-h-5 flex-wrap items-center justify-between gap-2"
|
|
: "flex min-h-8 flex-wrap items-center justify-between gap-2"
|
|
}
|
|
>
|
|
<Label className="text-sm font-semibold">{label}</Label>
|
|
{labelAction}
|
|
</div>
|
|
<input id={id} name={id} type="hidden" value={value} readOnly />
|
|
<div
|
|
data-testid={controlTestId}
|
|
className={
|
|
compact
|
|
? "flex h-10 min-w-0 items-center gap-2 rounded-lg border border-input bg-background px-2"
|
|
: "flex min-h-10 flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2"
|
|
}
|
|
>
|
|
<Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
className={compact ? "h-8 shrink-0 px-2" : undefined}
|
|
>
|
|
<Building2 className="h-4 w-4" />
|
|
{orgChartPickerLabel ??
|
|
(compact ? undefined : selectedTenant?.name) ??
|
|
t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-[460px] p-4">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t(
|
|
"msg.admin.tenants.parent.picker_description",
|
|
"org-chart에서 테넌트를 선택하면 상위 테넌트에 반영됩니다.",
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<iframe
|
|
title={t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
|
|
src={pickerUrl}
|
|
className="h-[600px] w-full rounded-md border"
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
{localPickerLabel && (
|
|
<Dialog open={localPickerOpen} onOpenChange={setLocalPickerOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button type="button" variant="outline" size="sm">
|
|
<Building2 className="h-4 w-4" />
|
|
{localPickerLabel}
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-[460px] p-4">
|
|
<DialogHeader>
|
|
<DialogTitle>
|
|
{localPickerLabel ??
|
|
t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
{t(
|
|
"msg.admin.tenants.parent.local_picker_description",
|
|
"테넌트 목록에서 상위 테넌트로 사용할 항목을 선택합니다.",
|
|
)}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="space-y-3">
|
|
<input
|
|
id="parent-tenant-local-search"
|
|
name="parent-tenant-local-search"
|
|
className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
|
value={localSearch}
|
|
onChange={(event) => setLocalSearch(event.target.value)}
|
|
placeholder={t(
|
|
"ui.admin.tenants.parent.local_search_placeholder",
|
|
"테넌트 이름 또는 슬러그 검색",
|
|
)}
|
|
/>
|
|
<div className="max-h-[360px] space-y-2 overflow-y-auto">
|
|
{localCandidates.map((tenant) => (
|
|
<Button
|
|
key={tenant.id}
|
|
type="button"
|
|
variant="outline"
|
|
className="h-auto w-full justify-start px-3 py-2 text-left"
|
|
onClick={() => {
|
|
onChange(tenant.id);
|
|
setLocalPickerOpen(false);
|
|
setLocalSearch("");
|
|
}}
|
|
>
|
|
<span>
|
|
<span className="block text-sm font-medium">
|
|
{tenant.name}
|
|
</span>
|
|
<span className="block text-xs text-muted-foreground">
|
|
{tenant.slug} · {tenant.type}
|
|
</span>
|
|
</span>
|
|
</Button>
|
|
))}
|
|
{localCandidates.length === 0 && (
|
|
<p className="rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground">
|
|
{t(
|
|
"msg.admin.tenants.parent.local_picker_empty",
|
|
"선택할 수 있는 테넌트가 없습니다.",
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)}
|
|
{selectedTenant ? (
|
|
<>
|
|
<span
|
|
className={
|
|
compact
|
|
? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
|
|
: "text-xs text-muted-foreground"
|
|
}
|
|
title={`${selectedTenant.name} · ${selectedTenant.slug} · ${selectedTenant.type}`}
|
|
>
|
|
{compact
|
|
? `${selectedTenant.name} · ${selectedTenant.slug}`
|
|
: `${selectedTenant.slug} · ${selectedTenant.type}`}
|
|
</span>
|
|
<Button
|
|
type="button"
|
|
variant="ghost"
|
|
size="icon"
|
|
className={compact ? "h-7 w-7 shrink-0" : "h-8 w-8"}
|
|
onClick={() => onChange("")}
|
|
aria-label={noneLabel}
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<span
|
|
className={
|
|
compact
|
|
? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
|
|
: "text-xs text-muted-foreground"
|
|
}
|
|
>
|
|
{noneLabel}
|
|
</span>
|
|
)}
|
|
{contextLabel && (
|
|
<span className="rounded-md border px-2 py-1 text-xs font-medium text-muted-foreground">
|
|
{contextLabel}
|
|
</span>
|
|
)}
|
|
</div>
|
|
{helpText && (
|
|
<p className="mt-1 text-xs text-muted-foreground">{helpText}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|