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
+      ...OIDCButtonsFragment
-      loginURL
     }
   }
 `;

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,38 +25,52 @@ 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) => (
-        const Icon = providerIcons[provider.name];
+        <OIDCButton
-        return (
+          key={index}
-          <Button
+          providerRef={providerRef}
-            key={provider.name}
+          safeContinueUrl={safeContinueUrl}
-            variant="secondary"
+          __={__}
-            className="w-full h-10"
+        />
-            onClick={() => {
+      ))}
-              window.location.href
-                = provider.loginURL
-                  + "?continue="
-                  + encodeURIComponent(safeContinueUrl.toString());
-            }}
-          >
-            <span className="flex items-center gap-2">
-              {Icon && <Icon width={18} height={18} />}
-              {__(`Sign in with ${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`)}
-            </span>
-          </Button>
-        );
-      })}
     </>
   );
 }
+
+function OIDCButton({
+  providerRef,
+  safeContinueUrl,
+  __,
+}: {
+  providerRef: OIDCButtonsFragment$key;
+  safeContinueUrl: URL;
+  __: (s: string) => string;
+}) {
+  const provider = useFragment(fragment, providerRef);
+  const Icon = providerIcons[provider.name];
+
+  return (
+    <Button
+      variant="secondary"
+      className="w-full h-10"
+      onClick={() => {
+        window.location.href
+          = provider.loginURL
+            + "?continue="
+            + encodeURIComponent(safeContinueUrl.toString());
+      }}
+    >
+      <span className="flex items-center gap-2">
+        {Icon && <Icon width={18} height={18} />}
+        {__(`Sign in with ${provider.name.charAt(0).toUpperCase() + provider.name.slice(1)}`)}
+      </span>
+    </Button>
+  );
+}