Merge pull request #1732 from automatisch/AUT-842

refactor: rewrite useSamlAuthProvider with RQ

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>