Merge pull request #395 from automatisch/issue-369

feat: add non-auth apps and flowCount in getConnectedApps

packages/backend/src/graphql/queries/get-connected-apps.ts

@@ -20,18 +20,37 @@ const getConnectedApps = async (
     .count('connections.id as count')
     .groupBy('connections.key');
 
-  const connectionKeys = connections.map((connection) => connection.key);
+  const flows = await context.currentUser
+    .$relatedQuery('flows')
+    .withGraphJoined('steps')
+    .orderBy('created_at', 'desc');
+
+  const duplicatedUsedApps = flows
+    .map((flow) => flow.steps.map((step) => step.appKey))
+    .flat()
+    .filter(Boolean);
+
+  const usedApps = [...new Set(duplicatedUsedApps)];
 
   apps = apps
-    .filter((app: IApp) => connectionKeys.includes(app.key))
+    .filter((app: IApp) => {
+      return usedApps.includes(app.key);
+    })
     .map((app: IApp) => {
       const connection = connections.find(
         (connection) => (connection as IConnection).key === app.key
       );
 
-      if (connection) {
-        app.connectionCount = connection.count;
-      }
+      app.connectionCount = connection?.count || 0;
+      app.flowCount = 0;
+
+      flows.forEach((flow) => {
+        const usedFlow = flow.steps.find((step) => step.appKey === app.key);
+
+        if (usedFlow) {
+          app.flowCount += 1;
+        }
+      });
 
       return app;
     });

packages/backend/src/graphql/schema.graphql

@@ -90,6 +90,7 @@ type App {
   name: String
   key: String
   connectionCount: Int
+  flowCount: Int
   iconUrl: String
   docUrl: String
   primaryColor: String

packages/types/index.d.ts

@@ -152,6 +152,7 @@ export interface IApp {
   authenticationSteps: IAuthenticationStep[];
   reconnectionSteps: IAuthenticationStep[];
   connectionCount: number;
+  flowCount: number;
   triggers: any[];
   actions: any[];
   connections: IConnection[];

packages/web/src/components/AppRow/index.tsx

@@ -27,7 +27,7 @@ const countTranslation = (value: React.ReactNode) => (
 
 function AppRow(props: AppRowProps): React.ReactElement {
   const formatMessage = useFormatMessage();
-  const { name, primaryColor, iconUrl, connectionCount } = props.application;
+  const { name, primaryColor, iconUrl, connectionCount, flowCount } = props.application;
 
   return (
     <Link to={URLS.APP(name.toLowerCase())}>
@@ -52,7 +52,7 @@ function AppRow(props: AppRowProps): React.ReactElement {
 
             <Box sx={{ px: 2 }}>
               <Typography variant="caption" color="textSecondary" sx={{ display: ['none', 'inline-block'] }}>
-                {formatMessage('app.flowCount', { count: countTranslation(0) })}
+                {formatMessage('app.flowCount', { count: countTranslation(flowCount) })}
               </Typography>
             </Box>
 

packages/web/src/graphql/queries/get-connected-apps.ts

@@ -9,6 +9,7 @@ export const GET_CONNECTED_APPS = gql`
       docUrl
       primaryColor
       connectionCount
+      flowCount
       supportsConnections
     }
   }