refactor: rewrite useRoles with RQ

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

@@ -4,24 +4,32 @@ import Stack from '@mui/material/Stack';
 import DeleteIcon from '@mui/icons-material/Delete';
 import IconButton from '@mui/material/IconButton';
 import Button from '@mui/material/Button';
+import { Divider, Typography } from '@mui/material';
+
 import useRoles from 'hooks/useRoles.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
 import TextField from 'components/TextField';
-import { Divider, Typography } from '@mui/material';
+
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
+
 function RoleMappingsFieldArray() {
   const formatMessage = useFormatMessage();
   const { control } = useFormContext();
-  const { roles, loading: rolesLoading } = useRoles();
+  const { data, isLoading: isRolesLoading } = useRoles();
+  const roles = data?.data;
+
   const { fields, append, remove } = useFieldArray({
     control,
     name: 'roleMappings',
   });
+
   const handleAppendMapping = () => append({ roleId: '', remoteRoleName: '' });
+
   const handleRemoveMapping = (index) => () => remove(index);
+
   return (
     <>
       {fields.length === 0 && (
@@ -60,7 +68,7 @@ function RoleMappingsFieldArray() {
                     label={formatMessage('roleMappingsForm.role')}
                   />
                 )}
-                loading={rolesLoading}
+                loading={isRolesLoading}
                 required
               />
             </Stack>

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

@@ -2,8 +2,9 @@ import { useMutation } from '@apollo/client';
 import LoadingButton from '@mui/lab/LoadingButton';
 import Stack from '@mui/material/Stack';
 import MuiTextField from '@mui/material/TextField';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import * as React from 'react';
+
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import ControlledAutocomplete from 'components/ControlledAutocomplete';
 import Form from 'components/Form';
 import Switch from 'components/Switch';
@@ -11,6 +12,7 @@ import TextField from 'components/TextField';
 import { UPSERT_SAML_AUTH_PROVIDER } from 'graphql/mutations/upsert-saml-auth-provider';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useRoles from 'hooks/useRoles.ee';
+
 const defaultValues = {
   active: false,
   name: '',
@@ -24,16 +26,21 @@ const defaultValues = {
   roleAttributeName: '',
   defaultRoleId: '',
 };
+
 function generateRoleOptions(roles) {
   return roles?.map(({ name: label, id: value }) => ({ label, value }));
 }
+
 function SamlConfiguration({ provider, providerLoading, refetchProvider }) {
   const formatMessage = useFormatMessage();
-  const { roles, loading: rolesLoading } = useRoles();
+  const { data, loading: isRolesLoading } = useRoles();
+  const roles = data?.data;
   const enqueueSnackbar = useEnqueueSnackbar();
+
   const [upsertSamlAuthProvider, { loading }] = useMutation(
     UPSERT_SAML_AUTH_PROVIDER,
   );
+
   const handleProviderUpdate = async (providerDataToUpdate) => {
     try {
       const {
@@ -66,9 +73,11 @@ function SamlConfiguration({ provider, providerLoading, refetchProvider }) {
           },
         },
       });
+
       if (!provider?.id) {
         await refetchProvider();
       }
+
       enqueueSnackbar(formatMessage('authenticationForm.successfullySaved'), {
         variant: 'success',
         SnackbarProps: {
@@ -79,9 +88,11 @@ function SamlConfiguration({ provider, providerLoading, refetchProvider }) {
       throw new Error('Failed while saving!');
     }
   };
+
   if (providerLoading) {
     return null;
   }
+
   return (
     <Form
       defaultValues={provider || defaultValues}
@@ -170,7 +181,7 @@ function SamlConfiguration({ provider, providerLoading, refetchProvider }) {
               label={formatMessage('authenticationForm.defaultRole')}
             />
           )}
-          loading={rolesLoading}
+          loading={isRolesLoading}
         />
         <LoadingButton
           type="submit"