From e7098963d6ee46bc1204ab4d5b89f1d5d882d3fb Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Thu, 30 Jul 2026 17:56:15 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Code=20Refactoring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/IdpLoginButtons.tsx | 89 ++++++++++++++----------------
 src/components/OrgIdpTable.tsx     | 82 +++++++++++++--------------
 2 files changed, 80 insertions(+), 91 deletions(-)

diff --git a/src/components/IdpLoginButtons.tsx b/src/components/IdpLoginButtons.tsx
index 0851a0dd0..0adccc9c6 100644
--- a/src/components/IdpLoginButtons.tsx
+++ b/src/components/IdpLoginButtons.tsx
@@ -114,59 +114,52 @@ export default function IdpLoginButtons({
 
             <div className="space-y-4">
                 {params.get("gotoapp") ? (
-                    <>
-                        <Button
-                            type="button"
-                            className="w-full"
-                            onClick={() => {
-                                goToApp();
-                            }}
-                        >
-                            {t("continueToApplication")}
-                        </Button>
-                    </>
+                    <Button
+                        type="button"
+                        className="w-full"
+                        onClick={() => {
+                            goToApp();
+                        }}
+                    >
+                        {t("continueToApplication")}
+                    </Button>
                 ) : (
-                    <>
-                        {idps.map((idp) => {
-                            const effectiveType =
-                                idp.variant || idp.name.toLowerCase();
+                    idps.map((idp) => {
+                        const effectiveType =
+                            idp.variant || idp.name.toLowerCase();
 
-                            return (
-                                <div
-                                    className="w-full relative"
+                        return (
+                            <div className="w-full relative" key={idp.idpId}>
+                                <Button
                                     key={idp.idpId}
+                                    type="button"
+                                    variant="outline"
+                                    className="w-full inline-flex items-center space-x-2  after:absolute after:inset-0 after:z-10"
+                                    onClick={() => {
+                                        startTransition(() =>
+                                            loginWithIdp(idp.idpId)
+                                        );
+                                    }}
+                                    disabled={loading}
+                                    loading={loading}
                                 >
-                                    <Button
-                                        key={idp.idpId}
-                                        type="button"
-                                        variant="outline"
-                                        className="w-full inline-flex items-center space-x-2  after:absolute after:inset-0 after:z-10"
-                                        onClick={() => {
-                                            startTransition(() =>
-                                                loginWithIdp(idp.idpId)
-                                            );
-                                        }}
-                                        disabled={loading}
-                                        loading={loading}
-                                    >
-                                        <IdpTypeIcon
-                                            type={effectiveType}
-                                            size={16}
-                                        />
-                                        <span>{idp.name}</span>
-                                    </Button>
+                                    <IdpTypeIcon
+                                        type={effectiveType}
+                                        size={16}
+                                    />
+                                    <span>{idp.name}</span>
+                                </Button>
 
-                                    {idp.lastUsed && (
-                                        <div className="absolute inset-0">
-                                            <span className="absolute top-0 right-0 text-xs bg-primary text-primary-foreground rounded-bl-sm rounded-tr-sm px-2 py-0.5">
-                                                {t("idpLastUsed")}
-                                            </span>
-                                        </div>
-                                    )}
-                                </div>
-                            );
-                        })}
-                    </>
+                                {idp.lastUsed && (
+                                    <div className="absolute inset-0">
+                                        <span className="absolute top-0 right-0 text-xs bg-primary text-primary-foreground rounded-bl-sm rounded-tr-sm px-2 py-0.5">
+                                            {t("idpLastUsed")}
+                                        </span>
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })
                 )}
             </div>
         </div>
diff --git a/src/components/OrgIdpTable.tsx b/src/components/OrgIdpTable.tsx
index f72bc5341..4fb39f513 100644
--- a/src/components/OrgIdpTable.tsx
+++ b/src/components/OrgIdpTable.tsx
@@ -1,17 +1,6 @@
 "use client";
 
-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 {
-    Command,
-    CommandEmpty,
-    CommandGroup,
-    CommandInput,
-    CommandItem,
-    CommandList
-} from "@app/components/ui/command";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import {
     Credenza,
     CredenzaBody,
@@ -22,37 +11,42 @@ import {
     CredenzaHeader,
     CredenzaTitle
 } from "@app/components/Credenza";
+import { isIdpGlobalModeBannerVisible } from "@app/components/IdpGlobalModeBanner";
+import IdpTypeBadge from "@app/components/IdpTypeBadge";
+import IdpTypeIcon from "@app/components/IdpTypeIcon";
+import { IdpDataTable } from "@app/components/OrgIdpDataTable";
+import { Badge } from "@app/components/ui/badge";
+import { Button } from "@app/components/ui/button";
 import {
-    ArrowRight,
-    ArrowUpDown,
-    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";
+    Command,
+    CommandEmpty,
+    CommandGroup,
+    CommandInput,
+    CommandItem,
+    CommandList
+} from "@app/components/ui/command";
+import { ExtendedColumnDef } from "@app/components/ui/data-table";
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger
 } from "@app/components/ui/dropdown-menu";
-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";
-import { Badge } from "@app/components/ui/badge";
+import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
+import { toast } from "@app/hooks/useToast";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
-import { isIdpGlobalModeBannerVisible } from "@app/components/IdpGlobalModeBanner";
+import type { ListUserAdminOrgIdpsResponse } from "@server/routers/orgIdp/types";
+import { useQuery } from "@tanstack/react-query";
+import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { useDebounce } from "use-debounce";
 
 export type IdpRow = {
     idpId: number;
@@ -483,15 +477,17 @@ export default function IdpTable({ idps, orgId }: Props) {
                                                     {group.name}
                                                 </div>
                                                 <div className="mt-1 flex flex-wrap gap-1">
-                                                    {group.sources.map((src) => (
-                                                        <Badge
-                                                            key={src.orgId}
-                                                            variant="secondary"
-                                                            className="max-w-full truncate font-normal"
-                                                        >
-                                                            {src.orgName}
-                                                        </Badge>
-                                                    ))}
+                                                    {group.sources.map(
+                                                        (src) => (
+                                                            <Badge
+                                                                key={src.orgId}
+                                                                variant="secondary"
+                                                                className="max-w-full truncate font-normal"
+                                                            >
+                                                                {src.orgName}
+                                                            </Badge>
+                                                        )
+                                                    )}
                                                 </div>
                                             </div>
                                         </CommandItem>