Refactor OIDC buttons: extract OIDCButton component, inline loops

Address PR review feedback:
- Remove OIDCButtons wrapper components that only loop, inline .map()
  directly in SignInPage and ConnectPage
- OIDCButton uses useTranslate() and useSafeContinueUrl() hooks
  internally instead of receiving hook results as props
- Move OIDCButton to local _components folders
- Fix eslint import grouping in SignInPage

Signed-off-by: Bryan Frimin <bryan@getprobo.com>

apps/console/src/pages/iam/auth/sign-in/SignInPage.tsx

@@ -2,8 +2,7 @@ import { formatError, type GraphQLError } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
 import { Button, Field, useToast } from "@probo/ui";
 import type { FormEventHandler } from "react";
-import { useMutation, usePreloadedQuery } from "react-relay";
-import type { PreloadedQuery } from "react-relay";
+import { type PreloadedQuery, useMutation, usePreloadedQuery } from "react-relay";
 import { Link, matchPath, useLocation } from "react-router";
 import { graphql } from "relay-runtime";
 
@@ -12,7 +11,7 @@ import type { SignInPageQuery } from "#/__generated__/iam/SignInPageQuery.graphq
 import { useSafeContinueUrl } from "#/hooks/useSafeContinueUrl";
 
 import { Divider } from "./_components/Divider";
-import { OIDCButtons } from "./_components/OIDCButtons";
+import { OIDCButton } from "./_components/OIDCButton";
 
 const signInMutation = graphql`
   mutation SignInPageMutation($input: SignInInput!) {
@@ -27,7 +26,7 @@ const signInMutation = graphql`
 export const signInPageQuery = graphql`
   query SignInPageQuery {
     oidcProviders {
-      ...OIDCButtonsFragment
+      ...OIDCButtonFragment
     }
   }
 `;
@@ -140,10 +139,9 @@ export default function SignInPage(props: Props) {
       <div className="mt-6 space-y-4">
         <Divider>{__("Or")}</Divider>
 
-        <OIDCButtons
-          providers={data.oidcProviders}
-          safeContinueUrl={safeContinueUrl}
-        />
+        {data.oidcProviders.map((providerRef, index) => (
+          <OIDCButton key={index} providerRef={providerRef} />
+        ))}
 
         <Button
           variant="secondary"

apps/console/src/pages/iam/auth/sign-in/_components/OIDCButton.tsx

@@ -4,10 +4,11 @@ import type { ComponentProps } from "react";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
-import type { OIDCButtonsFragment$key } from "#/__generated__/iam/OIDCButtonsFragment.graphql";
+import type { OIDCButtonFragment$key } from "#/__generated__/iam/OIDCButtonFragment.graphql";
+import { useSafeContinueUrl } from "#/hooks/useSafeContinueUrl";
 
 const fragment = graphql`
-  fragment OIDCButtonsFragment on OIDCProviderInfo {
+  fragment OIDCButtonFragment on OIDCProviderInfo {
     name
     loginURL
   }
@@ -21,38 +22,13 @@ const providerIcons: Record<
   microsoft: Microsoft,
 };
 
-export function OIDCButtons({
-  providers,
-  safeContinueUrl,
+export function OIDCButton({
+  providerRef,
 }: {
-  providers: ReadonlyArray<OIDCButtonsFragment$key>;
-  safeContinueUrl: URL;
+  providerRef: OIDCButtonFragment$key;
 }) {
   const { __ } = useTranslate();
-
-  return (
-    <>
-      {providers.map((providerRef, index) => (
-        <OIDCButton
-          key={index}
-          providerRef={providerRef}
-          safeContinueUrl={safeContinueUrl}
-          __={__}
-        />
-      ))}
-    </>
-  );
-}
-
-function OIDCButton({
-  providerRef,
-  safeContinueUrl,
-  __,
-}: {
-  providerRef: OIDCButtonsFragment$key;
-  safeContinueUrl: URL;
-  __: (s: string) => string;
-}) {
+  const safeContinueUrl = useSafeContinueUrl();
   const provider = useFragment(fragment, providerRef);
   const Icon = providerIcons[provider.name];