feat: add useAppAuth with RQ

packages/web/src/components/AddAppConnection/index.jsx

@@ -16,10 +16,12 @@ import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { generateExternalLink } from 'helpers/translationValues';
 import { Form } from './style';
+import useAppAuth from 'hooks/useAppAuth';
 
 function AddAppConnection(props) {
   const { application, connectionId, onClose } = props;
-  const { name, authDocUrl, key, auth } = application;
+  const { name, authDocUrl, key } = application;
+  const { data: auth } = useAppAuth(key);
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const formatMessage = useFormatMessage();
@@ -34,31 +36,40 @@ function AddAppConnection(props) {
     appAuthClientId,
     useShared: !!appAuthClientId,
   });
+
   React.useEffect(function relayProviderData() {
     if (window.opener) {
       window.opener.postMessage({
         source: 'automatisch',
         payload: { search: window.location.search, hash: window.location.hash },
       });
+
       window.close();
     }
   }, []);
+
   React.useEffect(
     function initiateSharedAuthenticationForGivenAuthClient() {
       if (!appAuthClientId) return;
+
       if (!authenticate) return;
+
       const asyncAuthenticate = async () => {
         await authenticate();
         navigate(URLS.APP_CONNECTIONS(key));
       };
+
       asyncAuthenticate();
     },
     [appAuthClientId, authenticate],
   );
+
   const handleClientClick = (appAuthClientId) =>
     navigate(URLS.APP_ADD_CONNECTION_WITH_AUTH_CLIENT_ID(key, appAuthClientId));
+
   const handleAuthClientsDialogClose = () =>
     navigate(URLS.APP_CONNECTIONS(key));
+
   const submitHandler = React.useCallback(
     async (data) => {
       if (!authenticate) return;
@@ -78,6 +89,7 @@ function AddAppConnection(props) {
     },
     [authenticate],
   );
+
   if (useShared)
     return (
       <AppAuthClientsDialog
@@ -86,7 +98,9 @@ function AddAppConnection(props) {
         onClientClick={handleClientClick}
       />
     );
+
   if (appAuthClientId) return <React.Fragment />;
+
   return (
     <Dialog open={true} onClose={onClose} data-test="add-app-connection-dialog">
       <DialogTitle>
@@ -121,7 +135,7 @@ function AddAppConnection(props) {
       <DialogContent>
         <DialogContentText tabIndex={-1} component="div">
           <Form onSubmit={submitHandler}>
-            {auth?.fields?.map((field) => (
+            {auth?.data?.fields?.map((field) => (
               <InputCreator key={field.key} schema={field} />
             ))}
 

packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx

@@ -8,12 +8,14 @@ import { CREATE_APP_AUTH_CLIENT } from 'graphql/mutations/create-app-auth-client
 import useAppConfig from 'hooks/useAppConfig.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
+import useAppAuth from 'hooks/useAppAuth';
 
 function AdminApplicationCreateAuthClient(props) {
-  const { appKey, application, onClose } = props;
+  const { appKey, onClose } = props;
-  const { auth } = application;
+  const { data: auth } = useAppAuth(appKey);
   const formatMessage = useFormatMessage();
   const { appConfig, loading: loadingAppConfig } = useAppConfig(appKey);
+
   const [
     createAppConfig,
     { loading: loadingCreateAppConfig, error: createAppConfigError },
@@ -21,6 +23,7 @@ function AdminApplicationCreateAuthClient(props) {
     refetchQueries: ['GetAppConfig'],
     context: { autoSnackbar: false },
   });
+
   const [
     createAppAuthClient,
     { loading: loadingCreateAppAuthClient, error: createAppAuthClientError },
@@ -28,8 +31,10 @@ function AdminApplicationCreateAuthClient(props) {
     refetchQueries: ['GetAppAuthClients'],
     context: { autoSnackbar: false },
   });
+
   const submitHandler = async (values) => {
     let appConfigId = appConfig?.id;
+
     if (!appConfigId) {
       const { data: appConfigData } = await createAppConfig({
         variables: {
@@ -41,8 +46,10 @@ function AdminApplicationCreateAuthClient(props) {
           },
         },
       });
+
       appConfigId = appConfigData.createAppConfig.id;
     }
+
     const { name, active, ...formattedAuthDefaults } = values;
     await createAppAuthClient({
       variables: {
@@ -54,22 +61,28 @@ function AdminApplicationCreateAuthClient(props) {
         },
       },
     });
+
     onClose();
   };
+
   const getAuthFieldsDefaultValues = useCallback(() => {
-    if (!auth?.fields) {
+    if (!auth?.data?.fields) {
       return {};
     }
+
     const defaultValues = {};
-    auth.fields.forEach((field) => {
+
+    auth.data.fields.forEach((field) => {
       if (field.value || field.type !== 'string') {
         defaultValues[field.key] = field.value;
       } else if (field.type === 'string') {
         defaultValues[field.key] = '';
       }
     });
+
     return defaultValues;
-  }, [auth?.fields]);
+  }, [auth?.data?.fields]);
+
   const defaultValues = useMemo(
     () => ({
       name: '',
@@ -78,6 +91,7 @@ function AdminApplicationCreateAuthClient(props) {
     }),
     [getAuthFieldsDefaultValues],
   );
+
   return (
     <AdminApplicationAuthClientDialog
       onClose={onClose}
@@ -85,7 +99,7 @@ function AdminApplicationCreateAuthClient(props) {
       title={formatMessage('createAuthClient.title')}
       loading={loadingAppConfig}
       submitHandler={submitHandler}
-      authFields={auth?.fields}
+      authFields={auth?.data?.fields}
       submitting={loadingCreateAppConfig || loadingCreateAppAuthClient}
       defaultValues={defaultValues}
     />

packages/web/src/components/ChooseConnectionSubstep/index.jsx

@@ -176,6 +176,7 @@ function ChooseConnectionSubstep(props) {
     }
   }, [step.connection?.id, retestConnection]);
   const onToggle = expanded ? onCollapse : onExpand;
+
   return (
     <React.Fragment>
       <FlowSubstepTitle

packages/web/src/hooks/useAppAuth.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAppAuth(appKey) {
+  const query = useQuery({
+    queryKey: ['appAuth', appKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}/auth`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import { processStep } from 'helpers/authenticationSteps';
 import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
-import useApp from './useApp';
+import useAppAuth from './useAppAuth';
 
 function getSteps(auth, hasConnection, useShared) {
   if (hasConnection) {
@@ -21,10 +21,10 @@ function getSteps(auth, hasConnection, useShared) {
 
 export default function useAuthenticateApp(payload) {
   const { appKey, appAuthClientId, connectionId, useShared = false } = payload;
-  const { data: app } = useApp(appKey);
+  const { data: auth } = useAppAuth(appKey);
   const [authenticationInProgress, setAuthenticationInProgress] =
     React.useState(false);
-  const steps = getSteps(app?.data?.auth, !!connectionId, useShared);
+  const steps = getSteps(auth?.data, !!connectionId, useShared);
 
   const authenticate = React.useMemo(() => {
     if (!steps?.length) return;

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

@@ -24,8 +24,7 @@ import AdminApplicationSettings from 'components/AdminApplicationSettings';
 import AdminApplicationAuthClients from 'components/AdminApplicationAuthClients';
 import AdminApplicationCreateAuthClient from 'components/AdminApplicationCreateAuthClient';
 import AdminApplicationUpdateAuthClient from 'components/AdminApplicationUpdateAuthClient';
-import { useQuery } from '@tanstack/react-query';
+import useApp from 'hooks/useApp';
-import api from 'helpers/api';
 
 export default function AdminApplication() {
   const theme = useTheme();
@@ -46,17 +45,7 @@ export default function AdminApplication() {
   });
   const { appKey } = useParams();
 
-  const { data, loading } = useQuery({
+  const { data, loading } = useApp(appKey);
-    queryKey: ['app', appKey],
-    queryFn: async ({ payload, signal }) => {
-      const { data } = await api.get(`/v1/apps/${appKey}`, {
-        signal,
-      });
-
-      return data;
-    },
-    enabled: !!appKey,
-  });
 
   const app = data?.data || {};
 

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
-import { useQuery } from '@tanstack/react-query';
 
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
@@ -10,23 +9,13 @@ import SearchInput from 'components/SearchInput';
 import AppRow from 'components/AppRow';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import api from 'helpers/api';
+import useApps from 'hooks/useApps';
 
 function AdminApplications() {
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = React.useState(null);
 
-  const { data: apps, isLoading: appsLoading } = useQuery({
+  const { data: apps, isLoading: isAppsLoading } = useApps(appName);
-    queryKey: ['apps', appName],
-    queryFn: async ({ payload, signal }) => {
-      const { data } = await api.get('/v1/apps', {
-        params: { name: appName },
-        signal,
-      });
-
-      return data;
-    },
-  });
 
   const onSearchChange = React.useCallback((event) => {
     setAppName(event.target.value);
@@ -48,14 +37,14 @@ function AdminApplications() {
           <Divider sx={{ mt: [2, 0], mb: 2 }} />
         </Grid>
 
-        {appsLoading && (
+        {isAppsLoading && (
           <CircularProgress
             data-test="apps-loader"
             sx={{ display: 'block', margin: '20px auto' }}
           />
         )}
 
-        {!appsLoading &&
+        {!isAppsLoading &&
           apps?.data?.map((app) => (
             <Grid item xs={12} key={app.name}>
               <AppRow application={app} url={URLS.ADMIN_APP(app.key)} />

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

@@ -28,12 +28,12 @@ import AddAppConnection from 'components/AddAppConnection';
 import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
-import api from 'helpers/api';
+import useApp from 'hooks/useApp';
-import { useQuery } from '@tanstack/react-query';
 
 const ReconnectConnection = (props) => {
   const { application, onClose } = props;
   const { connectionId } = useParams();
+
   return (
     <AddAppConnection
       onClose={onClose}
@@ -56,18 +56,7 @@ export default function Application() {
   const { appKey } = useParams();
   const navigate = useNavigate();
 
-  const { data, loading } = useQuery({
+  const { data, loading } = useApp(appKey);
-    queryKey: ['app', appKey],
-    queryFn: async ({ payload, signal }) => {
-      const { data } = await api.get(`/v1/apps/${appKey}`, {
-        signal,
-      });
-
-      return data;
-    },
-    enabled: !!appKey,
-  });
-
   const app = data?.data || {};
 
   const { appConfig } = useAppConfig(appKey);