groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: rewrite get-apps queries with RQ

Browse Source
This commit is contained in:
Rıdvan Akca
2024-03-06 14:36:37 +03:00
parent be62c09d06
commit c0cc6cc176
6 changed files with 48 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/backend/src/graphql/queries/get-apps.js
View File

@@ -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;

2
packages/backend/src/graphql/query-resolvers.js
View File

@@ -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,

5
packages/backend/src/graphql/schema.graphql
View File

@@ -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

54
packages/web/src/components/AddNewAppConnection/index.jsx
View File

@@ -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);
const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
React.useEffect(() => {
setIsLoading(true);
fetchData(appName);
},
[fetchData, appName],
);
React.useEffect(function cancelDebounceOnUnmount() {
return () => {
fetchData.cancel();
};
}, []);
return () => fetchData.cancel();
}, [fetchData, appName]);
return (
<Dialog
open={true}
@@ -102,15 +106,15 @@ function AddNewAppConnection(props) {
<DialogContent>
<List sx={{ pt: 2, width: '100%' }}>
{loading && (
{isLoading && (
<CircularProgress
data-test="search-for-app-loader"
sx={{ display: 'block', margin: '20px auto' }}
/>
)}
{!loading &&
data?.getApps?.map((app) => (
{!isLoading &&
apps?.data.map((app) => (
<ListItem disablePadding key={app.name} data-test="app-list-item">
<ListItemButton
component={Link}

234
packages/web/src/graphql/queries/get-apps.js
View File

@@ -1,234 +0,0 @@
import { gql } from '@apollo/client';
export const GET_APPS = gql`
query GetApps(
$name: String
$onlyWithTriggers: Boolean
$onlyWithActions: Boolean
) {
getApps(
name: $name
onlyWithTriggers: $onlyWithTriggers
onlyWithActions: $onlyWithActions
) {
name
key
iconUrl
docUrl
authDocUrl
primaryColor
connectionCount
flowCount
supportsConnections
auth {
fields {
key
label
type
required
readOnly
value
placeholder
description
docUrl
clickToCopy
options {
label
value
}
}
authenticationSteps {
type
name
arguments {
name
value
type
properties {
name
value
}
}
}
sharedAuthenticationSteps {
type
name
arguments {
name
value
type
properties {
name
value
}
}
}
reconnectionSteps {
type
name
arguments {
name
value
type
properties {
name
value
}
}
}
sharedReconnectionSteps {
type
name
arguments {
name
value
type
properties {
name
value
}
}
}
}
triggers {
name
key
type
showWebhookUrl
pollInterval
description
substeps {
key
name
arguments {
label
key
type
required
description
variables
dependsOn
options {
label
value
}
source {
type
name
arguments {
name
value
}
}
additionalFields {
type
name
arguments {
name
value
}
}
fields {
label
key
type
required
description
variables
value
dependsOn
options {
label
value
}
source {
type
name
arguments {
name
value
}
}
additionalFields {
type
name
arguments {
name
value
}
}
}
}
}
}
actions {
name
key
description
substeps {
key
name
arguments {
label
key
type
required
description
variables
dependsOn
value
options {
label
value
}
source {
type
name
arguments {
name
value
}
}
additionalFields {
type
name
arguments {
name
value
}
}
fields {
label
key
type
required
description
variables
value
dependsOn
options {
label
value
}
source {
type
name
arguments {
name
value
}
}
additionalFields {
type
name
arguments {
name
value
}
}
}
}
}
}
}
}
`;

24
packages/web/src/pages/AdminApplications/index.jsx
View File

@@ -2,24 +2,36 @@ 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 '@apollo/client';
import { useQuery } from '@tanstack/react-query';
import PageTitle from 'components/PageTitle';
import Container from 'components/Container';
import SearchInput from 'components/SearchInput';
import AppRow from 'components/AppRow';
import * as URLS from 'config/urls';
import useFormatMessage from 'hooks/useFormatMessage';
import { GET_APPS } from 'graphql/queries/get-apps';
import api from 'helpers/api';
function AdminApplications() {
const formatMessage = useFormatMessage();
const [appName, setAppName] = React.useState(null);
const { data, loading: appsLoading } = useQuery(GET_APPS, {
variables: { name: appName },
const { data: apps, isLoading: appsLoading } = useQuery({
queryKey: ['apps', appName],
queryFn: async ({ payload, signal }) => {
const { data } = await api.get('/v1/apps', {
params: { name: appName },
signal,
});
const apps = data?.getApps;
return data;
},
});
const onSearchChange = React.useCallback((event) => {
setAppName(event.target.value);
}, []);
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={10} md={9}>
@@ -44,7 +56,7 @@ function AdminApplications() {
)}
{!appsLoading &&
apps?.map((app) => (
apps?.data?.map((app) => (
<Grid item xs={12} key={app.name}>
<AppRow application={app} url={URLS.ADMIN_APP(app.key)} />
</Grid>