import and unassocaite org idp

src/components/OrgIdpTable.tsx

@@ -4,13 +4,37 @@ import { ColumnDef } from "@tanstack/react-table";
 import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import { IdpDataTable } from "@app/components/OrgIdpDataTable";
 import { Button } from "@app/components/ui/button";
-import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
-import { useState } from "react";
+import {
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import {
+    ArrowRight,
+    ArrowUpDown,
+    KeyRound,
+    MoreHorizontal
+} from "lucide-react";
+import { useMemo, useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { toast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useUserContext } from "@app/hooks/useUserContext";
 import { useRouter } from "next/navigation";
 import {
     DropdownMenu,
@@ -21,6 +45,11 @@ import {
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import IdpTypeBadge from "@app/components/IdpTypeBadge";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
+import { useQuery } from "@tanstack/react-query";
+import { useDebounce } from "use-debounce";
+import type { ListUserAdminOrgIdpsResponse } from "@server/routers/orgIdp/types";
+import { cn } from "@app/lib/cn";
 
 export type IdpRow = {
     idpId: number;
@@ -29,6 +58,15 @@ export type IdpRow = {
     variant?: string;
 };
 
+type AdminIdpRow = ListUserAdminOrgIdpsResponse["idps"][number];
+
+function IdpImportRowIcon({
+    type,
+    variant
+}: Pick<AdminIdpRow, "type" | "variant">) {
+    return <IdpTypeIcon type={type} variant={variant} size={20} />;
+}
+
 type Props = {
     idps: IdpRow[];
     orgId: string;
@@ -37,10 +75,48 @@ type Props = {
 export default function IdpTable({ idps, orgId }: Props) {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [selectedIdp, setSelectedIdp] = useState<IdpRow | null>(null);
+    const [isUnassociateModalOpen, setIsUnassociateModalOpen] = useState(false);
+    const [selectedUnassociateIdp, setSelectedUnassociateIdp] =
+        useState<IdpRow | null>(null);
+    const [importDialogOpen, setImportDialogOpen] = useState(false);
+    const [importSearchQuery, setImportSearchQuery] = useState("");
+    const [importSubmitting, setImportSubmitting] = useState(false);
+    const [debouncedImportSearch] = useDebounce(importSearchQuery, 150);
+
     const api = createApiClient(useEnvContext());
+    const { user } = useUserContext();
     const router = useRouter();
     const t = useTranslations();
 
+    const { data: adminIdpsRaw = [] } = useQuery({
+        queryKey: ["admin-org-idps", user.userId],
+        queryFn: async () => {
+            const res = await api.get<{
+                data: ListUserAdminOrgIdpsResponse;
+            }>(`/user/${user.userId}/admin-org-idps`);
+            return res.data.data.idps;
+        },
+        enabled: importDialogOpen && !!user?.userId
+    });
+
+    const importableIdps = useMemo(() => {
+        const localIds = new Set(idps.map((i) => i.idpId));
+        return adminIdpsRaw.filter(
+            (row) => row.orgId !== orgId && !localIds.has(row.idpId)
+        );
+    }, [adminIdpsRaw, orgId, idps]);
+
+    const shownImportIdps = useMemo(() => {
+        const q = debouncedImportSearch.trim().toLowerCase();
+        if (!q) {
+            return importableIdps;
+        }
+        return importableIdps.filter((row) => {
+            const hay = `${row.orgName} ${row.name}`.toLowerCase();
+            return hay.includes(q);
+        });
+    }, [importableIdps, debouncedImportSearch]);
+
     const deleteIdp = async (idpId: number) => {
         try {
             await api.delete(`/org/${orgId}/idp/${idpId}`);
@@ -59,6 +135,49 @@ export default function IdpTable({ idps, orgId }: Props) {
         }
     };
 
+    const importIdp = async (row: AdminIdpRow) => {
+        setImportSubmitting(true);
+        try {
+            await api.post(`/org/${orgId}/idp/${row.idpId}/import`, {
+                sourceOrgId: row.orgId
+            });
+            toast({
+                title: t("success"),
+                description: t("idpImportedDescription")
+            });
+            setImportDialogOpen(false);
+            setImportSearchQuery("");
+            router.refresh();
+            router.push(`/${orgId}/settings/idp/${row.idpId}/general`);
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e),
+                variant: "destructive"
+            });
+        } finally {
+            setImportSubmitting(false);
+        }
+    };
+
+    const unassociateIdp = async (idpId: number) => {
+        try {
+            await api.delete(`/org/${orgId}/idp/${idpId}/association`);
+            toast({
+                title: t("success"),
+                description: t("idpUnassociatedDescription")
+            });
+            setIsUnassociateModalOpen(false);
+            router.refresh();
+        } catch (e) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(e),
+                variant: "destructive"
+            });
+        }
+    };
+
     const columns: ExtendedColumnDef<IdpRow>[] = [
         {
             accessorKey: "idpId",
@@ -142,6 +261,14 @@ export default function IdpTable({ idps, orgId }: Props) {
                                         {t("viewSettings")}
                                     </DropdownMenuItem>
                                 </Link>
+                                <DropdownMenuItem
+                                    onClick={() => {
+                                        setSelectedUnassociateIdp(siteRow);
+                                        setIsUnassociateModalOpen(true);
+                                    }}
+                                >
+                                    {t("idpUnassociateMenu")}
+                                </DropdownMenuItem>
                                 <DropdownMenuItem
                                     onClick={() => {
                                         setSelectedIdp(siteRow);
@@ -149,7 +276,7 @@ export default function IdpTable({ idps, orgId }: Props) {
                                     }}
                                 >
                                     <span className="text-red-500">
-                                        {t("delete")}
+                                        {t("idpDeleteAllOrgsMenu")}
                                     </span>
                                 </DropdownMenuItem>
                             </DropdownMenuContent>
@@ -179,8 +306,8 @@ export default function IdpTable({ idps, orgId }: Props) {
                     }}
                     dialog={
                         <div className="space-y-2">
-                            <p>{t("idpQuestionRemove")}</p>
-                            <p>{t("idpMessageRemove")}</p>
+                            <p>{t("idpDeleteGlobalQuestion")}</p>
+                            <p>{t("idpDeleteGlobalDescription")}</p>
                         </div>
                     }
                     buttonText={t("idpConfirmDelete")}
@@ -189,11 +316,122 @@ export default function IdpTable({ idps, orgId }: Props) {
                     title={t("idpDelete")}
                 />
             )}
+            {selectedUnassociateIdp && (
+                <ConfirmDeleteDialog
+                    open={isUnassociateModalOpen}
+                    setOpen={(val) => {
+                        setIsUnassociateModalOpen(val);
+                        setSelectedUnassociateIdp(null);
+                    }}
+                    dialog={
+                        <div className="space-y-2">
+                            <p>{t("idpUnassociateQuestion")}</p>
+                            <p>{t("idpUnassociateDescription")}</p>
+                        </div>
+                    }
+                    buttonText={t("idpUnassociateConfirm")}
+                    onConfirm={async () =>
+                        unassociateIdp(selectedUnassociateIdp.idpId)
+                    }
+                    string={selectedUnassociateIdp.name}
+                    title={t("idpUnassociateTitle")}
+                    warningText={t("idpUnassociateWarning")}
+                />
+            )}
+
+            <Credenza
+                open={importDialogOpen}
+                onOpenChange={(open) => {
+                    setImportDialogOpen(open);
+                    if (!open) {
+                        setImportSearchQuery("");
+                    }
+                }}
+            >
+                <CredenzaContent className="sm:max-w-lg">
+                    <CredenzaHeader>
+                        <CredenzaTitle>
+                            {t("idpImportDialogTitle")}
+                        </CredenzaTitle>
+                        <CredenzaDescription>
+                            {t("idpImportDialogDescription")}
+                        </CredenzaDescription>
+                    </CredenzaHeader>
+                    <CredenzaBody
+                        className={cn(
+                            importSubmitting && "pointer-events-none opacity-60"
+                        )}
+                    >
+                        <Command shouldFilter={false}>
+                            <CommandInput
+                                placeholder={t("idpImportSearchPlaceholder")}
+                                value={importSearchQuery}
+                                onValueChange={setImportSearchQuery}
+                            />
+                            <CommandList>
+                                <CommandEmpty>
+                                    {t("idpImportEmpty")}
+                                </CommandEmpty>
+                                <CommandGroup>
+                                    {shownImportIdps.map((row) => (
+                                        <CommandItem
+                                            key={`${row.idpId}:${row.orgId}`}
+                                            className="items-start gap-3 py-2.5"
+                                            value={`${row.idpId}:${row.orgId}:${row.orgName}:${row.name}`}
+                                            onSelect={() => {
+                                                void importIdp(row);
+                                            }}
+                                        >
+                                            <div className="mt-0.5 shrink-0">
+                                                <IdpImportRowIcon
+                                                    type={row.type}
+                                                    variant={row.variant}
+                                                />
+                                            </div>
+                                            <div className="min-w-0 flex-1 text-left">
+                                                <div className="truncate font-medium leading-tight">
+                                                    {row.orgName}
+                                                </div>
+                                                <div className="truncate text-sm leading-tight text-muted-foreground">
+                                                    {row.name}
+                                                </div>
+                                            </div>
+                                        </CommandItem>
+                                    ))}
+                                </CommandGroup>
+                            </CommandList>
+                        </Command>
+                    </CredenzaBody>
+                    <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button
+                                variant="outline"
+                                disabled={importSubmitting}
+                            >
+                                {t("cancel")}
+                            </Button>
+                        </CredenzaClose>
+                    </CredenzaFooter>
+                </CredenzaContent>
+            </Credenza>
 
             <IdpDataTable
                 columns={columns}
                 data={idps}
-                onAdd={() => router.push(`/${orgId}/settings/idp/create`)}
+                addActions={[
+                    {
+                        label: t("idpAddActionCreateNew"),
+                        onSelect: () => {
+                            router.push(`/${orgId}/settings/idp/create`);
+                        }
+                    },
+                    {
+                        label: t("idpAddActionImportFromOrg"),
+                        onSelect: () => {
+                            setImportDialogOpen(true);
+                        }
+                    }
+                ]}
             />
         </>
     );