refactor: rewrite useSamlAuthProvider with RQ

packages/backend/src/graphql/queries/get-saml-auth-provider.ee.js

@@ -1,14 +0,0 @@
-import SamlAuthProvider from '../../models/saml-auth-provider.ee.js';
-
-const getSamlAuthProvider = async (_parent, params, context) => {
-  context.currentUser.can('read', 'SamlAuthProvider');
-
-  const samlAuthProvider = await SamlAuthProvider.query()
-    .limit(1)
-    .first()
-    .throwIfNotFound();
-
-  return samlAuthProvider;
-};
-
-export default getSamlAuthProvider;

packages/backend/src/graphql/query-resolvers.js

@@ -12,7 +12,6 @@ import getFlows from './queries/get-flows.js';
 import getNotifications from './queries/get-notifications.js';
 import getPermissionCatalog from './queries/get-permission-catalog.ee.js';
 import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-role-mappings.ee.js';
-import getSamlAuthProvider from './queries/get-saml-auth-provider.ee.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
 import getTrialStatus from './queries/get-trial-status.ee.js';
 import getUser from './queries/get-user.js';
@@ -34,7 +33,6 @@ const queryResolvers = {
   getFlows,
   getNotifications,
   getPermissionCatalog,
-  getSamlAuthProvider,
   getSamlAuthProviderRoleMappings,
   getStepWithTestExecutions,
   getTrialStatus,

packages/backend/src/graphql/schema.graphql

@@ -28,7 +28,6 @@ type Query {
   getConfig(keys: [String]): JSONObject
   getPermissionCatalog: PermissionCatalog
   getNotifications: [Notification]
-  getSamlAuthProvider: SamlAuthProvider
   getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
   getTrialStatus: GetTrialStatus
   getUser(id: String!): User

packages/web/src/graphql/queries/get-saml-auth-provider.js

@@ -1,19 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_SAML_AUTH_PROVIDER = gql`
-  query GetSamlAuthProvider {
-    getSamlAuthProvider {
-      id
-      name
-      certificate
-      signatureAlgorithm
-      issuer
-      entryPoint
-      firstnameAttributeName
-      surnameAttributeName
-      emailAttributeName
-      roleAttributeName
-      active
-      defaultRoleId
-    }
-  }
-`;

packages/web/src/hooks/useSamlAuthProvider.js

@@ -1,12 +1,22 @@
-import { useQuery } from '@apollo/client';
-import { GET_SAML_AUTH_PROVIDER } from 'graphql/queries/get-saml-auth-provider';
-export default function useSamlAuthProvider() {
-  const { data, loading, refetch } = useQuery(GET_SAML_AUTH_PROVIDER, {
-    context: { autoSnackbar: false },
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useSamlAuthProvider({ samlAuthProviderId }) {
+  const query = useQuery({
+    queryKey: ['samlAuthProvider', samlAuthProviderId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(
+        `/v1/admin/saml-auth-providers/${samlAuthProviderId}`,
+        {
+          signal,
+        },
+      );
+
+      return data;
+    },
+    enabled: !!samlAuthProviderId,
   });
-  return {
-    provider: data?.getSamlAuthProvider,
-    loading,
-    refetch,
-  };
+
+  return query;
 }

packages/web/src/pages/Authentication/SamlConfiguration.jsx

@@ -31,7 +31,7 @@ function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
 
-function SamlConfiguration({ provider, providerLoading, refetchProvider }) {
+function SamlConfiguration({ provider, providerLoading }) {
   const formatMessage = useFormatMessage();
   const { data, loading: isRolesLoading } = useRoles();
   const roles = data?.data;
@@ -74,10 +74,6 @@ function SamlConfiguration({ provider, providerLoading, refetchProvider }) {
         },
       });
 
-      if (!provider?.id) {
-        await refetchProvider();
-      }
-
       enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
         variant: 'success',
         SnackbarProps: {

packages/web/src/pages/Authentication/index.jsx

@@ -6,13 +6,16 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useSamlAuthProvider from 'hooks/useSamlAuthProvider';
 import SamlConfiguration from './SamlConfiguration';
 import RoleMappings from './RoleMappings';
+import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
 function AuthenticationPage() {
   const formatMessage = useFormatMessage();
-  const {
-    provider,
-    loading: providerLoading,
-    refetch: refetchProvider,
-  } = useSamlAuthProvider();
+  const { providers } = useSamlAuthProviders();
+  const samlAuthProviderId = providers[0]?.id;
+  const { data, loading: isProviderLoading } = useSamlAuthProvider({
+    samlAuthProviderId,
+  });
+  const provider = data?.data;
+
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
@@ -23,12 +26,11 @@ function AuthenticationPage() {
           <Stack spacing={5}>
             <SamlConfiguration
               provider={provider}
-              providerLoading={providerLoading}
-              refetchProvider={refetchProvider}
+              providerLoading={isProviderLoading}
             />
             <RoleMappings
               provider={provider}
-              providerLoading={providerLoading}
+              providerLoading={isProviderLoading}
             />
           </Stack>
         </Grid>