diff --git a/packages/web/src/components/AddAppConnection/index.jsx b/packages/web/src/components/AddAppConnection/index.jsx index 3b9737ea..41d72328 100644 --- a/packages/web/src/components/AddAppConnection/index.jsx +++ b/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 ( ); + if (appAuthClientId) return ; + return ( @@ -121,7 +135,7 @@ function AddAppConnection(props) {
- {auth?.fields?.map((field) => ( + {auth?.data?.fields?.map((field) => ( ))} diff --git a/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx b/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx index 4fe7c0e4..394db3f5 100644 --- a/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx +++ b/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 { auth } = application; + const { appKey, onClose } = props; + 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 ( diff --git a/packages/web/src/components/ChooseConnectionSubstep/index.jsx b/packages/web/src/components/ChooseConnectionSubstep/index.jsx index e5b0b8f3..303e6e0a 100644 --- a/packages/web/src/components/ChooseConnectionSubstep/index.jsx +++ b/packages/web/src/components/ChooseConnectionSubstep/index.jsx @@ -176,6 +176,7 @@ function ChooseConnectionSubstep(props) { } }, [step.connection?.id, retestConnection]); const onToggle = expanded ? onCollapse : onExpand; + return ( { + const { data } = await api.get(`/v1/apps/${appKey}/auth`, { + signal, + }); + + return data; + }, + enabled: !!appKey, + }); + + return query; +} diff --git a/packages/web/src/hooks/useAuthenticateApp.ee.js b/packages/web/src/hooks/useAuthenticateApp.ee.js index e1478fa5..68c8af8a 100644 --- a/packages/web/src/hooks/useAuthenticateApp.ee.js +++ b/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; diff --git a/packages/web/src/pages/AdminApplication/index.jsx b/packages/web/src/pages/AdminApplication/index.jsx index 6cda49db..44e73085 100644 --- a/packages/web/src/pages/AdminApplication/index.jsx +++ b/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 api from 'helpers/api'; +import useApp from 'hooks/useApp'; export default function AdminApplication() { const theme = useTheme(); @@ -46,17 +45,7 @@ export default function AdminApplication() { }); const { appKey } = useParams(); - const { data, loading } = useQuery({ - queryKey: ['app', appKey], - queryFn: async ({ payload, signal }) => { - const { data } = await api.get(`/v1/apps/${appKey}`, { - signal, - }); - - return data; - }, - enabled: !!appKey, - }); + const { data, loading } = useApp(appKey); const app = data?.data || {}; diff --git a/packages/web/src/pages/AdminApplications/index.jsx b/packages/web/src/pages/AdminApplications/index.jsx index 0dfca76b..a4c65316 100644 --- a/packages/web/src/pages/AdminApplications/index.jsx +++ b/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({ - queryKey: ['apps', appName], - queryFn: async ({ payload, signal }) => { - const { data } = await api.get('/v1/apps', { - params: { name: appName }, - signal, - }); - - return data; - }, - }); + const { data: apps, isLoading: isAppsLoading } = useApps(appName); const onSearchChange = React.useCallback((event) => { setAppName(event.target.value); @@ -48,14 +37,14 @@ function AdminApplications() { - {appsLoading && ( + {isAppsLoading && ( )} - {!appsLoading && + {!isAppsLoading && apps?.data?.map((app) => ( diff --git a/packages/web/src/pages/Application/index.jsx b/packages/web/src/pages/Application/index.jsx index 49e22a30..f7588d1a 100644 --- a/packages/web/src/pages/Application/index.jsx +++ b/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 { useQuery } from '@tanstack/react-query'; +import useApp from 'hooks/useApp'; const ReconnectConnection = (props) => { const { application, onClose } = props; const { connectionId } = useParams(); + return ( { - const { data } = await api.get(`/v1/apps/${appKey}`, { - signal, - }); - - return data; - }, - enabled: !!appKey, - }); - + const { data, loading } = useApp(appKey); const app = data?.data || {}; const { appConfig } = useAppConfig(appKey);