Fix lint errors in SignInPage: use Relay fragment for OIDC providers

- Add blank line between import groups (import-x/order)
- Use Relay fragment in OIDCButtons to colocate field queries (relay/unused-fields)

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

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

@@ -6,14 +6,14 @@ import { graphql } from "relay-runtime";
 
 import type { SignInPageQuery } from "#/__generated__/iam/SignInPageQuery.graphql";
 import { useSafeContinueUrl } from "#/hooks/useSafeContinueUrl";
+
 import { Divider } from "./_components/Divider";
 import { OIDCButtons } from "./_components/OIDCButtons";
 
 const signInPageQuery = graphql`
   query SignInPageQuery {
     oidcProviders {
-      name
-      loginURL
+      ...OIDCButtonsFragment
     }
   }
 `;

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

@@ -1,6 +1,17 @@
 import { useTranslate } from "@probo/i18n";
 import { Button, Google, Microsoft } from "@probo/ui";
 import type { ComponentProps } from "react";
+import { useFragment } from "react-relay";
+import { graphql } from "relay-runtime";
+
+import type { OIDCButtonsFragment$key } from "#/__generated__/iam/OIDCButtonsFragment.graphql";
+
+const fragment = graphql`
+  fragment OIDCButtonsFragment on OIDCProviderInfo {
+    name
+    loginURL
+  }
+`;
 
 const providerIcons: Record<
   string,
@@ -14,22 +25,39 @@ export function OIDCButtons({
   providers,
   safeContinueUrl,
 }: {
-  providers: ReadonlyArray<{ readonly name: string; readonly loginURL: string }>;
+  providers: ReadonlyArray<OIDCButtonsFragment$key>;
   safeContinueUrl: URL;
 }) {
   const { __ } = useTranslate();
 
-  if (providers.length === 0) {
-    return null;
-  }
-
   return (
     <>
-      {providers.map((provider) => {
+      {providers.map((providerRef, index) => (
+        <OIDCButton
+          key={index}
+          providerRef={providerRef}
+          safeContinueUrl={safeContinueUrl}
+          __={__}
+        />
+      ))}
+    </>
+  );
+}
+
+function OIDCButton({
+  providerRef,
+  safeContinueUrl,
+  __,
+}: {
+  providerRef: OIDCButtonsFragment$key;
+  safeContinueUrl: URL;
+  __: (s: string) => string;
+}) {
+  const provider = useFragment(fragment, providerRef);
   const Icon = providerIcons[provider.name];
+
   return (
     <Button
-            key={provider.name}
       variant="secondary"
       className="w-full h-10"
       onClick={() => {
@@ -45,7 +73,4 @@ export function OIDCButtons({
       </span>
     </Button>
   );
-      })}
-    </>
-  );
 }