From 63b99432039a2935b35a950596f5038a81fac4c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C4=B1dvan=20Akca?= Date: Thu, 7 Mar 2024 18:13:18 +0300 Subject: [PATCH] refactor: rewrite useAppConfig with RQ --- .../src/graphql/queries/get-app-config.ee.js | 17 --------- .../backend/src/graphql/query-resolvers.js | 2 -- packages/backend/src/graphql/schema.graphql | 1 - .../index.jsx | 9 +++-- .../AdminApplicationSettings/index.jsx | 25 ++++++++----- .../ChooseConnectionSubstep/index.jsx | 36 ++++++++++++++----- .../src/graphql/queries/get-app-config.ee.js | 14 -------- packages/web/src/hooks/useAppConfig.ee.js | 26 ++++++++------ packages/web/src/pages/Application/index.jsx | 13 +++---- 9 files changed, 72 insertions(+), 71 deletions(-) delete mode 100644 packages/backend/src/graphql/queries/get-app-config.ee.js delete mode 100644 packages/web/src/graphql/queries/get-app-config.ee.js diff --git a/packages/backend/src/graphql/queries/get-app-config.ee.js b/packages/backend/src/graphql/queries/get-app-config.ee.js deleted file mode 100644 index 513191f5..00000000 --- a/packages/backend/src/graphql/queries/get-app-config.ee.js +++ /dev/null @@ -1,17 +0,0 @@ -import AppConfig from '../../models/app-config.js'; - -const getAppConfig = async (_parent, params, context) => { - context.currentUser.can('create', 'Connection'); - - const appConfig = await AppConfig.query() - .withGraphFetched({ - appAuthClients: true, - }) - .findOne({ - key: params.key, - }); - - return appConfig; -}; - -export default getAppConfig; diff --git a/packages/backend/src/graphql/query-resolvers.js b/packages/backend/src/graphql/query-resolvers.js index 71e75e9d..f9c578c5 100644 --- a/packages/backend/src/graphql/query-resolvers.js +++ b/packages/backend/src/graphql/query-resolvers.js @@ -1,7 +1,6 @@ import getApp from './queries/get-app.js'; import getAppAuthClient from './queries/get-app-auth-client.ee.js'; import getAppAuthClients from './queries/get-app-auth-clients.ee.js'; -import getAppConfig from './queries/get-app-config.ee.js'; import getBillingAndUsage from './queries/get-billing-and-usage.ee.js'; import getConfig from './queries/get-config.ee.js'; import getConnectedApps from './queries/get-connected-apps.js'; @@ -35,7 +34,6 @@ const queryResolvers = { getApp, getAppAuthClient, getAppAuthClients, - getAppConfig, getBillingAndUsage, getConfig, getConnectedApps, diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index ddbdfdf6..0bd4deb7 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -1,6 +1,5 @@ type Query { getApp(key: String!): App - getAppConfig(key: String!): AppConfig getAppAuthClient(id: String!): AppAuthClient getAppAuthClients(appKey: String!, active: Boolean): [AppAuthClient] getConnectedApps(name: String): [App] diff --git a/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx b/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx index 394db3f5..4271605a 100644 --- a/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx +++ b/packages/web/src/components/AdminApplicationCreateAuthClient/index.jsx @@ -14,7 +14,9 @@ function AdminApplicationCreateAuthClient(props) { const { appKey, onClose } = props; const { data: auth } = useAppAuth(appKey); const formatMessage = useFormatMessage(); - const { appConfig, loading: loadingAppConfig } = useAppConfig(appKey); + + const { data: appConfig, isLoading: isAppConfigLoading } = + useAppConfig(appKey); const [ createAppConfig, @@ -33,7 +35,7 @@ function AdminApplicationCreateAuthClient(props) { }); const submitHandler = async (values) => { - let appConfigId = appConfig?.id; + let appConfigId = appConfig?.data?.id; if (!appConfigId) { const { data: appConfigData } = await createAppConfig({ @@ -51,6 +53,7 @@ function AdminApplicationCreateAuthClient(props) { } const { name, active, ...formattedAuthDefaults } = values; + await createAppAuthClient({ variables: { input: { @@ -97,7 +100,7 @@ function AdminApplicationCreateAuthClient(props) { onClose={onClose} error={createAppConfigError || createAppAuthClientError} title={formatMessage('createAuthClient.title')} - loading={loadingAppConfig} + loading={isAppConfigLoading} submitHandler={submitHandler} authFields={auth?.data?.fields} submitting={loadingCreateAppConfig || loadingCreateAppAuthClient} diff --git a/packages/web/src/components/AdminApplicationSettings/index.jsx b/packages/web/src/components/AdminApplicationSettings/index.jsx index 63fc36d7..504b7d44 100644 --- a/packages/web/src/components/AdminApplicationSettings/index.jsx +++ b/packages/web/src/components/AdminApplicationSettings/index.jsx @@ -7,6 +7,7 @@ import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import LoadingButton from '@mui/lab/LoadingButton'; import { useMutation } from '@apollo/client'; + import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config'; import { UPDATE_APP_CONFIG } from 'graphql/mutations/update-app-config'; import Form from 'components/Form'; @@ -14,24 +15,28 @@ import { Switch } from './style'; import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar'; function AdminApplicationSettings(props) { - const { appConfig, loading } = useAppConfig(props.appKey); + const formatMessage = useFormatMessage(); + const enqueueSnackbar = useEnqueueSnackbar(); + + const { data: appConfig, isLoading: loading } = useAppConfig(props.appKey); + const [createAppConfig, { loading: loadingCreateAppConfig }] = useMutation( CREATE_APP_CONFIG, { refetchQueries: ['GetAppConfig'], }, ); + const [updateAppConfig, { loading: loadingUpdateAppConfig }] = useMutation( UPDATE_APP_CONFIG, { refetchQueries: ['GetAppConfig'], }, ); - const formatMessage = useFormatMessage(); - const enqueueSnackbar = useEnqueueSnackbar(); + const handleSubmit = async (values) => { try { - if (!appConfig) { + if (!appConfig.data) { await createAppConfig({ variables: { input: { key: props.appKey, ...values }, @@ -40,10 +45,11 @@ function AdminApplicationSettings(props) { } else { await updateAppConfig({ variables: { - input: { id: appConfig.id, ...values }, + input: { id: appConfig.data.id, ...values }, }, }); } + enqueueSnackbar(formatMessage('adminAppsSettings.successfullySaved'), { variant: 'success', SnackbarProps: { @@ -54,13 +60,14 @@ function AdminApplicationSettings(props) { throw new Error('Failed while saving!'); } }; + const defaultValues = useMemo( () => ({ - allowCustomConnection: appConfig?.allowCustomConnection || false, - shared: appConfig?.shared || false, - disabled: appConfig?.disabled || false, + allowCustomConnection: appConfig?.data?.allowCustomConnection || false, + shared: appConfig?.data?.shared || false, + disabled: appConfig?.data?.disabled || false, }), - [appConfig], + [appConfig?.data], ); return (
{ if (connection?.id) { testConnection({ @@ -77,32 +83,38 @@ function ChooseConnectionSubstep(props) { } // intentionally no dependencies for initial test }, []); + const connectionOptions = React.useMemo(() => { const appWithConnections = data?.getApp; const options = appWithConnections?.connections?.map((connection) => optionGenerator(connection), ) || []; - if (!appConfig || appConfig.canCustomConnect) { + + if (!appConfig?.data || appConfig?.data?.canCustomConnect) { options.push({ label: formatMessage('chooseConnectionSubstep.addNewConnection'), value: ADD_CONNECTION_VALUE, }); } - if (appConfig?.canConnect) { + + if (appConfig?.data?.canConnect) { options.push({ label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'), value: ADD_SHARED_CONNECTION_VALUE, }); } + return options; - }, [data, formatMessage, appConfig]); + }, [data, formatMessage, appConfig?.data]); + const handleClientClick = async (appAuthClientId) => { try { const response = await authenticate?.({ appAuthClientId, }); const connectionId = response?.createConnection.id; + if (connectionId) { await refetch(); onChange({ @@ -120,11 +132,14 @@ function ChooseConnectionSubstep(props) { setShowAddSharedConnectionDialog(false); } }; + const { name } = substep; + const handleAddConnectionClose = React.useCallback( async (response) => { setShowAddConnectionDialog(false); const connectionId = response?.createConnection.id; + if (connectionId) { await refetch(); onChange({ @@ -146,14 +161,17 @@ function ChooseConnectionSubstep(props) { const typedSelectedOption = selectedOption; const option = typedSelectedOption; const connectionId = option?.value; + if (connectionId === ADD_CONNECTION_VALUE) { setShowAddConnectionDialog(true); return; } + if (connectionId === ADD_SHARED_CONNECTION_VALUE) { setShowAddSharedConnectionDialog(true); return; } + if (connectionId !== step.connection?.id) { onChange({ step: { @@ -168,6 +186,7 @@ function ChooseConnectionSubstep(props) { }, [step, onChange], ); + React.useEffect(() => { if (step.connection?.id) { retestConnection({ @@ -175,6 +194,7 @@ function ChooseConnectionSubstep(props) { }); } }, [step.connection?.id, retestConnection]); + const onToggle = expanded ? onCollapse : onExpand; return ( diff --git a/packages/web/src/graphql/queries/get-app-config.ee.js b/packages/web/src/graphql/queries/get-app-config.ee.js deleted file mode 100644 index 6576f10b..00000000 --- a/packages/web/src/graphql/queries/get-app-config.ee.js +++ /dev/null @@ -1,14 +0,0 @@ -import { gql } from '@apollo/client'; -export const GET_APP_CONFIG = gql` - query GetAppConfig($key: String!) { - getAppConfig(key: $key) { - id - key - allowCustomConnection - canConnect - canCustomConnect - shared - disabled - } - } -`; diff --git a/packages/web/src/hooks/useAppConfig.ee.js b/packages/web/src/hooks/useAppConfig.ee.js index 06d62888..078ea8e0 100644 --- a/packages/web/src/hooks/useAppConfig.ee.js +++ b/packages/web/src/hooks/useAppConfig.ee.js @@ -1,13 +1,17 @@ -import { useQuery } from '@apollo/client'; -import { GET_APP_CONFIG } from 'graphql/queries/get-app-config.ee'; -export default function useAppConfig(key) { - const { data, loading } = useQuery(GET_APP_CONFIG, { - variables: { key }, - context: { autoSnackbar: false }, +import { useQuery } from '@tanstack/react-query'; +import api from 'helpers/api'; + +export default function useAppConfig(appKey) { + const query = useQuery({ + queryKey: ['appConfig', appKey], + queryFn: async ({ payload, signal }) => { + const { data } = await api.get(`/v1/app-configs/${appKey}`, { + signal, + }); + + return data; + }, }); - const appConfig = data?.getAppConfig; - return { - appConfig, - loading, - }; + + return query; } diff --git a/packages/web/src/pages/Application/index.jsx b/packages/web/src/pages/Application/index.jsx index f7588d1a..92fa597f 100644 --- a/packages/web/src/pages/Application/index.jsx +++ b/packages/web/src/pages/Application/index.jsx @@ -66,13 +66,14 @@ export default function Application() { const connectionOptions = React.useMemo(() => { const shouldHaveCustomConnection = - appConfig?.canConnect && appConfig?.canCustomConnect; + appConfig?.data?.canConnect && appConfig?.data?.canCustomConnect; + const options = [ { label: formatMessage('app.addConnection'), key: 'addConnection', 'data-test': 'add-connection-button', - to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.canConnect), + to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.data?.canConnect), }, ]; @@ -86,7 +87,7 @@ export default function Application() { } return options; - }, [appKey, appConfig]); + }, [appKey, appConfig?.data]); if (loading) return null; @@ -135,9 +136,9 @@ export default function Application() { element={