Merge pull request #1738 from automatisch/AUT-849

refactor: rewrite useAdminSamlAuthProviderRoleMappings with RQ

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

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_SAML_AUTH_PROVIDER_ROLE_MAPPINGS = gql`
-  query GetSamlAuthProviderRoleMappings($id: String!) {
-    getSamlAuthProviderRoleMappings(id: $id) {
-      id
-      samlAuthProviderId
-      roleId
-      remoteRoleName
-    }
-  }
-`;

packages/web/src/hooks/useAdminSamlAuthProviderRoleMappings.js

@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAdminSamlAuthProviderRoleMappings({
+  adminSamlAuthProviderId,
+}) {
+  const query = useQuery({
+    queryKey: ['adminSamlAuthProviderRoleMappings', adminSamlAuthProviderId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(
+        `/v1/admin/saml-auth-providers/${adminSamlAuthProviderId}/role-mappings`,
+        {
+          signal,
+        },
+      );
+
+      return data;
+    },
+    enabled: !!adminSamlAuthProviderId,
+  });
+
+  return query;
+}

packages/web/src/hooks/useSamlAuthProviderRoleMappings.js

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { useLazyQuery } from '@apollo/client';
-import { GET_SAML_AUTH_PROVIDER_ROLE_MAPPINGS } from 'graphql/queries/get-saml-auth-provider-role-mappings';
-export default function useSamlAuthProviderRoleMappings(providerId) {
-  const [getSamlAuthProviderRoleMappings, { data, loading }] = useLazyQuery(
-    GET_SAML_AUTH_PROVIDER_ROLE_MAPPINGS,
-  );
-  React.useEffect(() => {
-    if (providerId) {
-      getSamlAuthProviderRoleMappings({
-        variables: {
-          id: providerId,
-        },
-      });
-    }
-  }, [providerId]);
-  return {
-    roleMappings: data?.getSamlAuthProviderRoleMappings || [],
-    loading,
-  };
-}

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

@@ -5,29 +5,39 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import { useMemo } from 'react';
+
 import Form from 'components/Form';
 import { UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS } from 'graphql/mutations/upsert-saml-auth-providers-role-mappings';
 import useFormatMessage from 'hooks/useFormatMessage';
-import useSamlAuthProviderRoleMappings from 'hooks/useSamlAuthProviderRoleMappings';
+import useAdminSamlAuthProviderRoleMappings from 'hooks/useAdminSamlAuthProviderRoleMappings';
 import RoleMappingsFieldArray from './RoleMappingsFieldsArray';
+
 function generateFormRoleMappings(roleMappings) {
-  if (roleMappings.length === 0) {
+  if (roleMappings?.length === 0) {
     return [{ roleId: '', remoteRoleName: '' }];
   }
-  return roleMappings.map(({ roleId, remoteRoleName }) => ({
+
+  return roleMappings?.map(({ roleId, remoteRoleName }) => ({
     roleId,
     remoteRoleName,
   }));
 }
+
 function RoleMappings({ provider, providerLoading }) {
   const formatMessage = useFormatMessage();
   const enqueueSnackbar = useEnqueueSnackbar();
-  const { roleMappings, loading: roleMappingsLoading } =
-    useSamlAuthProviderRoleMappings(provider?.id);
+
+  const { data, isLoading: isAdminSamlAuthProviderRoleMappingsLoading } =
+    useAdminSamlAuthProviderRoleMappings({
+      adminSamlAuthProviderId: provider?.id,
+    });
+  const roleMappings = data?.data;
+
   const [
     upsertSamlAuthProvidersRoleMappings,
     { loading: upsertRoleMappingsLoading },
   ] = useMutation(UPSERT_SAML_AUTH_PROVIDERS_ROLE_MAPPINGS);
+
   const handleRoleMappingsUpdate = async (values) => {
     try {
       if (provider?.id) {
@@ -44,6 +54,7 @@ function RoleMappings({ provider, providerLoading }) {
             },
           },
         });
+
         enqueueSnackbar(formatMessage('roleMappingsForm.successfullySaved'), {
           variant: 'success',
           SnackbarProps: {
@@ -55,15 +66,22 @@ function RoleMappings({ provider, providerLoading }) {
       throw new Error('Failed while saving!');
     }
   };
+
   const defaultValues = useMemo(
     () => ({
       roleMappings: generateFormRoleMappings(roleMappings),
     }),
     [roleMappings],
   );
-  if (providerLoading || !provider?.id || roleMappingsLoading) {
+
+  if (
+    providerLoading ||
+    !provider?.id ||
+    isAdminSamlAuthProviderRoleMappingsLoading
+  ) {
     return null;
   }
+
   return (
     <>
       <Divider sx={{ pt: 2 }} />