refactor: rewrite useSamlAuthProviders with RQ

packages/backend/src/graphql/queries/list-saml-auth-providers.ee.js

@@ -1,9 +0,0 @@
-import SamlAuthProvider from '../../models/saml-auth-provider.ee.js';
-
-const listSamlAuthProviders = async () => {
-  const providers = await SamlAuthProvider.query().where({ active: true });
-
-  return providers;
-};
-
-export default listSamlAuthProviders;

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

@@ -14,7 +14,6 @@ import getSamlAuthProviderRoleMappings from './queries/get-saml-auth-provider-ro
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
 import getTrialStatus from './queries/get-trial-status.ee.js';
 import getUsers from './queries/get-users.js';
-import listSamlAuthProviders from './queries/list-saml-auth-providers.ee.js';
 import testConnection from './queries/test-connection.js';
 
 const queryResolvers = {
@@ -34,7 +33,6 @@ const queryResolvers = {
   getStepWithTestExecutions,
   getTrialStatus,
   getUsers,
-  listSamlAuthProviders,
   testConnection,
 };
 

packages/backend/src/graphql/schema.graphql

@@ -30,7 +30,6 @@ type Query {
   getSamlAuthProviderRoleMappings(id: String!): [SamlAuthProvidersRoleMapping]
   getTrialStatus: GetTrialStatus
   getUsers(limit: Int!, offset: Int!): UserConnection
-  listSamlAuthProviders: [ListSamlAuthProvider]
 }
 
 type Mutation {
@@ -642,13 +641,6 @@ type Usage {
   task: Int
 }
 
-type ListSamlAuthProvider {
-  id: String
-  name: String
-  issuer: String
-  loginUrl: String
-}
-
 type Permission {
   id: String
   action: String

packages/backend/src/helpers/authentication.js

@@ -44,7 +44,6 @@ export const authenticationRules = {
     '*': isAuthenticatedRule,
     getConfig: allow,
     getNotifications: allow,
-    listSamlAuthProviders: allow,
   },
   Mutation: {
     '*': isAuthenticatedRule,

packages/web/src/components/SsoProviders/index.ee.jsx

@@ -3,19 +3,25 @@ import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';
 import Divider from '@mui/material/Divider';
+
 import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+
 function SsoProviders() {
   const formatMessage = useFormatMessage();
-  const { providers, loading } = useSamlAuthProviders();
+  const { data, isLoading: isSamlAuthProvidersLoading } =
-  if (!loading && providers.length === 0) return null;
+    useSamlAuthProviders();
+  const providers = data?.data;
+
+  if (!isSamlAuthProvidersLoading && providers?.length === 0) return null;
+
   return (
     <>
       <Divider>{formatMessage('loginPage.divider')}</Divider>
 
       <Paper sx={{ px: 2, py: 4 }}>
         <Stack direction="column" gap={1}>
-          {providers.map((provider) => (
+          {providers?.map((provider) => (
             <Button
               key={provider.id}
               component="a"

packages/web/src/graphql/queries/list-saml-auth-providers.ee.js

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-export const LIST_SAML_AUTH_PROVIDERS = gql`
-  query ListSamlAuthProviders {
-    listSamlAuthProviders {
-      id
-      name
-      loginUrl
-      issuer
-    }
-  }
-`;

packages/web/src/hooks/useAdminSamlAuthProviders.ee.js

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAdminSamlAuthProviders() {
+  const query = useQuery({
+    queryKey: ['adminSamlAuthProviders'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/admin/saml-auth-providers', {
+        signal,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/hooks/useLazyApps.js

@@ -3,7 +3,7 @@ import { useMutation } from '@tanstack/react-query';
 import api from 'helpers/api';
 import React from 'react';
 
-export default function useLazyApps({ appName } = {}, { onSuccess }) {
+export default function useLazyApps({ appName } = {}, { onSuccess } = {}) {
   const abortControllerRef = React.useRef(new AbortController());
 
   React.useEffect(() => {

packages/web/src/hooks/useSamlAuthProviders.ee.js

@@ -1,9 +1,18 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@tanstack/react-query';
-import { LIST_SAML_AUTH_PROVIDERS } from 'graphql/queries/list-saml-auth-providers.ee';
+
+import api from 'helpers/api';
+
 export default function useSamlAuthProviders() {
-  const { data, loading } = useQuery(LIST_SAML_AUTH_PROVIDERS);
+  const query = useQuery({
-  return {
+    queryKey: ['samlAuthProviders'],
-    providers: data?.listSamlAuthProviders || [],
+    queryFn: async ({ signal }) => {
-    loading,
+      const { data } = await api.get('/v1/saml-auth-providers', {
-  };
+        signal,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
 }

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

@@ -6,12 +6,14 @@ import useFormatMessage from 'hooks/useFormatMessage';
 import useSamlAuthProvider from 'hooks/useSamlAuthProvider';
 import SamlConfiguration from './SamlConfiguration';
 import RoleMappings from './RoleMappings';
-import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
+import useAdminSamlAuthProviders from 'hooks/useAdminSamlAuthProviders.ee';
 function AuthenticationPage() {
   const formatMessage = useFormatMessage();
-  const { providers } = useSamlAuthProviders();
+
-  const samlAuthProviderId = providers[0]?.id;
+  const { data: adminSamlAuthProviders } = useAdminSamlAuthProviders();
-  const { data, loading: isProviderLoading } = useSamlAuthProvider({
+  const samlAuthProviderId = adminSamlAuthProviders?.data?.[0].id;
+
+  const { data, isLoading: isProviderLoading } = useSamlAuthProvider({
     samlAuthProviderId,
   });
   const provider = data?.data;

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

@@ -30,7 +30,7 @@ export default function EditUser() {
   const { userId } = useParams();
   const { data: userData, loading: isUserLoading } = useUser({ userId });
   const user = userData?.data;
-  const { data, loading: isRolesLoading } = useRoles();
+  const { data, isLoading: isRolesLoading } = useRoles();
   const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
   const navigate = useNavigate();

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

@@ -63,7 +63,7 @@ function ProfileSettings() {
       optimisticResponse: {
         updateCurrentUser: {
           __typename: 'User',
-          id: currentUser?.id,
+          id: currentUser.id,
           fullName,
           email,
         },