Merge pull request #446 from automatisch/feature/show-flow-count-with-connections

feat: Expose flow count with connections of getApp query

packages/backend/src/config/database.ts

@@ -1,4 +1,8 @@
 import process from 'process';
+// The following two lines are required to get count values as number.
+// More info: https://github.com/knex/knex/issues/387#issuecomment-51554522
+import pg from 'pg';
+pg.types.setTypeParser(20, 'text', parseInt);
 import knex from 'knex';
 import type { Knex } from 'knex';
 import knexConfig from '../../knexfile';
@@ -8,10 +12,12 @@ export const client: Knex = knex(knexConfig);
 
 const CONNECTION_REFUSED = 'ECONNREFUSED';
 
-client.raw('SELECT 1')
-  .catch((err) => {
-    if (err.code === CONNECTION_REFUSED) {
-      logger.error('Make sure you have installed PostgreSQL and it is running.', err);
-      process.exit();
-    }
-  });
+client.raw('SELECT 1').catch((err) => {
+  if (err.code === CONNECTION_REFUSED) {
+    logger.error(
+      'Make sure you have installed PostgreSQL and it is running.',
+      err
+    );
+    process.exit();
+  }
+});

packages/backend/src/graphql/queries/get-app.ts

@@ -11,10 +11,14 @@ const getApp = async (_parent: unknown, params: Params, context: Context) => {
   if (context.currentUser) {
     const connections = await context.currentUser
       .$relatedQuery('connections')
+      .select('connections.*')
+      .fullOuterJoinRelated('steps')
       .where({
-        key: params.key,
-        draft: false,
+        'connections.key': params.key,
+        'connections.draft': false,
       })
+      .countDistinct('steps.flow_id as flowCount')
+      .groupBy('connections.id')
       .orderBy('created_at', 'desc');
 
     return {

packages/backend/src/graphql/schema.graphql

@@ -161,6 +161,7 @@ type Connection {
   verified: Boolean
   app: App
   createdAt: String
+  flowCount: Int
 }
 
 type ConnectionData {

packages/backend/src/models/connection.ts

@@ -3,6 +3,7 @@ import type { RelationMappings } from 'objection';
 import { AES, enc } from 'crypto-js';
 import Base from './base';
 import User from './user';
+import Step from './step';
 import appConfig from '../config/app';
 import { IJSONObject } from '@automatisch/types';
 import Telemetry from '../helpers/telemetry';
@@ -16,6 +17,7 @@ class Connection extends Base {
   verified = false;
   draft: boolean;
   count?: number;
+  flowCount?: number;
 
   static tableName = 'connections';
 
@@ -43,6 +45,14 @@ class Connection extends Base {
         to: 'users.id',
       },
     },
+    steps: {
+      relation: Base.HasManyRelation,
+      modelClass: Step,
+      join: {
+        from: 'connections.id',
+        to: 'steps.connection_id',
+      },
+    },
   });
 
   encryptData(): void {

packages/types/index.d.ts

@@ -14,6 +14,7 @@ export interface IConnection {
   userId: string;
   verified: boolean;
   count: number;
+  flowCount: number;
   createdAt: string;
 }
 

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

@@ -42,7 +42,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
   const formatMessage = useFormatMessage();
-  const { id, key, formattedData, verified, createdAt } = props.connection;
+  const { id, key, formattedData, verified, createdAt, flowCount } = props.connection;
 
   const contextButtonRef = React.useRef<SVGSVGElement | null>(null);
   const [anchorEl, setAnchorEl] = React.useState<SVGSVGElement | null>(null);
@@ -121,7 +121,7 @@ function AppConnectionRow(props: AppConnectionRowProps): React.ReactElement {
 
             <Box sx={{ px: 2 }}>
               <Typography variant="caption" color="textSecondary" sx={{ display: ['none', 'inline-block'] }}>
-                {formatMessage('connection.flowCount', { count: countTranslation(0) })}
+                {formatMessage('connection.flowCount', { count: countTranslation(flowCount) })}
               </Typography>
             </Box>
 

packages/web/src/graphql/queries/get-app-connections.ts

@@ -8,6 +8,7 @@ export const GET_APP_CONNECTIONS = gql`
         id
         key
         verified
+        flowCount
         formattedData {
           screenName
         }