93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Building2, Save } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { Button } from "../../components/ui/button";
|
|
import { toast } from "../../components/ui/use-toast";
|
|
import { fetchMyTenants } from "../../lib/devApi";
|
|
import { t } from "../../lib/i18n";
|
|
|
|
export default function ProfileTenantSwitcher() {
|
|
const queryClient = useQueryClient();
|
|
|
|
const { data: tenants, isLoading } = useQuery({
|
|
queryKey: ["myTenants"],
|
|
queryFn: fetchMyTenants,
|
|
});
|
|
|
|
const [selectedTenantId, setSelectedTenantId] = useState<string>(() => {
|
|
return window.localStorage.getItem("dev_tenant_id") || "";
|
|
});
|
|
|
|
const handleSave = () => {
|
|
window.localStorage.setItem("dev_tenant_id", selectedTenantId);
|
|
|
|
// Invalidate queries to refresh data with new tenant context
|
|
queryClient.invalidateQueries({
|
|
predicate: (query) =>
|
|
query.queryKey[0] !== "userMe" && query.queryKey[0] !== "myTenants",
|
|
});
|
|
|
|
toast(t("ui.dev.tenant.switch_success", "테넌트 전환 완료"), "success");
|
|
};
|
|
|
|
if (isLoading || !tenants || tenants.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
// If there's only one tenant, the user doesn't need to switch.
|
|
// Still show it as read-only or hidden. Let's just show it as disabled.
|
|
const isSingleTenant = tenants.length <= 1;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 mt-6 p-4 rounded-lg border border-border bg-card">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Building2 className="h-5 w-5 text-primary" />
|
|
<h3 className="font-semibold">
|
|
{t("ui.dev.tenant.workspace", "작업 테넌트 (컨텍스트)")}
|
|
</h3>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground -mt-2 mb-2">
|
|
{t(
|
|
"ui.dev.tenant.workspace_desc",
|
|
"현재 작업 중인 테넌트를 선택하고 저장하여 API 요청 컨텍스트를 변경합니다.",
|
|
)}
|
|
</p>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<select
|
|
aria-label={t("ui.dev.tenant.workspace", "작업 테넌트 (컨텍스트)")}
|
|
value={selectedTenantId}
|
|
onChange={(e) => setSelectedTenantId(e.target.value)}
|
|
disabled={isSingleTenant}
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{tenants.map((tenant) => (
|
|
<option key={tenant.id} value={tenant.id}>
|
|
{tenant.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<Button
|
|
type="button"
|
|
onClick={handleSave}
|
|
disabled={isSingleTenant}
|
|
className="gap-2"
|
|
>
|
|
<Save size={16} />
|
|
{t("ui.common.save", "저장")}
|
|
</Button>
|
|
</div>
|
|
|
|
{isSingleTenant && (
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
{t(
|
|
"ui.dev.tenant.single_notice",
|
|
"단일 테넌트에 소속되어 전환할 필요가 없습니다.",
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|