feat: introduce role mappings form on authentication page (#1256)

packages/web/src/hooks/useSamlAuthProvider.ts

@@ -1,20 +1,22 @@
-import { useQuery } from '@apollo/client';
+import { QueryResult, useQuery } from '@apollo/client';
 
 import { TSamlAuthProvider } from '@automatisch/types';
 import { GET_SAML_AUTH_PROVIDER } from 'graphql/queries/get-saml-auth-provider';
 
 type UseSamlAuthProviderReturn = {
-  provider: TSamlAuthProvider;
+  provider?: TSamlAuthProvider;
   loading: boolean;
+  refetch: QueryResult<TSamlAuthProvider | undefined>['refetch'];
 };
 
 export default function useSamlAuthProvider(): UseSamlAuthProviderReturn {
-  const { data, loading } = useQuery(GET_SAML_AUTH_PROVIDER, {
+  const { data, loading, refetch } = useQuery(GET_SAML_AUTH_PROVIDER, {
     context: { autoSnackbar: false },
   });
 
   return {
     provider: data?.getSamlAuthProvider,
     loading,
+    refetch,
   };
 }

packages/web/src/hooks/useSamlAuthProviderRoleMappings.ts

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