diff --git a/packages/backend/src/graphql/queries/get-apps.js b/packages/backend/src/graphql/queries/get-apps.js deleted file mode 100644 index 2c3a78a0..00000000 --- a/packages/backend/src/graphql/queries/get-apps.js +++ /dev/null @@ -1,17 +0,0 @@ -import App from '../../models/app.js'; - -const getApps = async (_parent, params) => { - const apps = await App.findAll(params.name); - - if (params.onlyWithTriggers) { - return apps.filter((app) => app.triggers?.length); - } - - if (params.onlyWithActions) { - return apps.filter((app) => app.actions?.length); - } - - return apps; -}; - -export default getApps; diff --git a/packages/backend/src/graphql/query-resolvers.js b/packages/backend/src/graphql/query-resolvers.js index f4535809..71e75e9d 100644 --- a/packages/backend/src/graphql/query-resolvers.js +++ b/packages/backend/src/graphql/query-resolvers.js @@ -2,7 +2,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 getApps from './queries/get-apps.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'; @@ -37,7 +36,6 @@ const queryResolvers = { getAppAuthClient, getAppAuthClients, getAppConfig, - getApps, getBillingAndUsage, getConfig, getConnectedApps, diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql index f244b2f0..ddbdfdf6 100644 --- a/packages/backend/src/graphql/schema.graphql +++ b/packages/backend/src/graphql/schema.graphql @@ -1,9 +1,4 @@ type Query { - getApps( - name: String - onlyWithTriggers: Boolean - onlyWithActions: Boolean - ): [App] getApp(key: String!): App getAppConfig(key: String!): AppConfig getAppAuthClient(id: String!): AppAuthClient diff --git a/packages/web/src/components/AddNewAppConnection/index.jsx b/packages/web/src/components/AddNewAppConnection/index.jsx index def8b3cc..f798eba1 100644 --- a/packages/web/src/components/AddNewAppConnection/index.jsx +++ b/packages/web/src/components/AddNewAppConnection/index.jsx @@ -1,6 +1,5 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { useLazyQuery } from '@apollo/client'; import { Link } from 'react-router-dom'; import debounce from 'lodash/debounce'; import { useTheme } from '@mui/material/styles'; @@ -20,15 +19,18 @@ import InputLabel from '@mui/material/InputLabel'; import OutlinedInput from '@mui/material/OutlinedInput'; import FormControl from '@mui/material/FormControl'; import Box from '@mui/material/Box'; + +import api from 'helpers/api'; import * as URLS from 'config/urls'; import AppIcon from 'components/AppIcon'; -import { GET_APPS } from 'graphql/queries/get-apps'; import useFormatMessage from 'hooks/useFormatMessage'; +import { useMutation } from '@tanstack/react-query'; function createConnectionOrFlow(appKey, supportsConnections = false) { if (!supportsConnections) { return URLS.CREATE_FLOW_WITH_APP(appKey); } + return URLS.APP_ADD_CONNECTION(appKey); } function AddNewAppConnection(props) { @@ -36,29 +38,31 @@ function AddNewAppConnection(props) { const theme = useTheme(); const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm')); const formatMessage = useFormatMessage(); - const [appName, setAppName] = React.useState(null); - const [loading, setLoading] = React.useState(false); - const [getApps, { data }] = useLazyQuery(GET_APPS, { - onCompleted: () => { - setLoading(false); + const [appName, setAppName] = React.useState(''); + const [isLoading, setIsLoading] = React.useState(false); + + const { data: apps, mutate } = useMutation({ + mutationFn: async ({ payload, signal }) => { + const { data } = await api.get('/v1/apps', { + params: { name: appName }, + }); + + return data; + }, + onSuccess: () => { + setIsLoading(false); }, }); - const fetchData = React.useMemo( - () => debounce((name) => getApps({ variables: { name } }), 300), - [getApps], - ); - React.useEffect( - function fetchAppsOnAppNameChange() { - setLoading(true); - fetchData(appName); - }, - [fetchData, appName], - ); - React.useEffect(function cancelDebounceOnUnmount() { - return () => { - fetchData.cancel(); - }; - }, []); + + const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]); + + React.useEffect(() => { + setIsLoading(true); + fetchData(appName); + + return () => fetchData.cancel(); + }, [fetchData, appName]); + return ( - {loading && ( + {isLoading && ( )} - {!loading && - data?.getApps?.map((app) => ( + {!isLoading && + apps?.data.map((app) => ( { + const { data } = await api.get('/v1/apps', { + params: { name: appName }, + signal, + }); + + return data; + }, }); - const apps = data?.getApps; + const onSearchChange = React.useCallback((event) => { setAppName(event.target.value); }, []); + return ( @@ -44,7 +56,7 @@ function AdminApplications() { )} {!appsLoading && - apps?.map((app) => ( + apps?.data?.map((app) => (