feat: show num pipes connected to a tile

kevinkim-ogp · kevinkim-ogp · commit 57b6dc27710e · 2024-11-15T14:44:13.000+08:00
diff --git a/packages/backend/src/graphql/__tests__/mutations/tiles/table.mock.ts b/packages/backend/src/graphql/__tests__/mutations/tiles/table.mock.ts
@@ -1,5 +1,6 @@
 import { randomUUID } from 'crypto'
 
+import Step from '@/models/step'
 import TableCollaborator from '@/models/table-collaborators'
 import TableColumnMetadata from '@/models/table-column-metadata'
 import TableMetadata from '@/models/table-metadata'
@@ -52,6 +53,56 @@ export async function generateMockTable({
   }
 }
 
+// generate mock flow including steps
+export async function generateMockFlow({
+  userId,
+  tableId,
+  numSteps,
+}: {
+  userId: string
+  tableId: string
+  numSteps: number
+}) {
+  const currentUser = await User.query().findById(userId)
+
+  const tableName = `test-flow-${tableId}`
+  const flowRes = await currentUser.$relatedQuery('flows').insert({
+    name: tableName,
+  })
+  const flowId = flowRes.id
+
+  for (let i = 0; i < numSteps; i++) {
+    await generateMockStep({
+      tableId,
+      flowId,
+      position: i + 2,
+    })
+  }
+}
+
+export async function generateMockStep({
+  tableId,
+  flowId,
+  position,
+}: {
+  tableId: string
+  flowId: string
+  position?: number
+}) {
+  await Step.query().insert({
+    key: 'createTileRow',
+    appKey: 'tiles',
+    type: 'action',
+    parameters: {
+      rowData: [],
+      tableId: tableId,
+    },
+    flowId: flowId,
+    status: 'incomplete',
+    position: position,
+  })
+}
+
 export async function generateMockTableColumns({
   tableId,
   numColumns = 5,
diff --git a/packages/backend/src/graphql/__tests__/queries/tiles/get-table-connections.itest.ts b/packages/backend/src/graphql/__tests__/queries/tiles/get-table-connections.itest.ts
@@ -0,0 +1,155 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import getTableConnections from '@/graphql/queries/tiles/get-table-connections'
+import getTables from '@/graphql/queries/tiles/get-tables'
+import Context from '@/types/express/context'
+
+import {
+  generateMockContext,
+  generateMockFlow,
+  generateMockTable,
+} from '../../mutations/tiles/table.mock'
+
+interface TablePipeCountObj {
+  [key: string]: number
+}
+
+function getRandNum() {
+  return Math.floor(Math.random() * 5) + 1
+}
+
+describe('get table connections query', () => {
+  let context: Context
+
+  beforeEach(async () => {
+    context = await generateMockContext()
+  })
+
+  it('should return empty object if no tables found', async () => {
+    const { edges } = await getTables(null, { limit: 10, offset: 0 }, context)
+    const tables = edges.map((edge) => edge.node)
+    expect(tables).toHaveLength(0)
+
+    const tableConnections = await getTableConnections(
+      null,
+      { limit: 10, offset: 0 },
+      context,
+    )
+    expect(tableConnections).toEqual({})
+    expect(Object.keys(tableConnections).length).toBe(0)
+  })
+
+  it('should return the correct number of table connections for user flows only', async () => {
+    const numTables = 5
+    const tablePipeCount: TablePipeCountObj = {}
+    for (let i = 0; i < numTables; i++) {
+      const res = await generateMockTable({ userId: context.currentUser.id })
+      const { id: tableId } = res.table
+
+      const numFlows = Math.floor(Math.random() * 5) + 1
+      const numSteps = Math.floor(Math.random() * 5) + 1
+      tablePipeCount[tableId] = numFlows
+
+      for (let i = 0; i < numFlows; i++) {
+        await generateMockFlow({
+          userId: context.currentUser.id,
+          tableId,
+          numSteps,
+        })
+      }
+    }
+
+    // tests each page
+    const limit = 2
+    for (let i = 0; i < Math.ceil(numTables / 2); i++) {
+      const offset = limit * i
+      const { edges, pageInfo } = await getTables(
+        null,
+        { limit, offset },
+        context,
+      )
+
+      const pageTables = edges.map((edge) => edge.node)
+      const expectedLength = Math.min(limit, numTables - limit * i)
+      expect(pageTables).toHaveLength(expectedLength)
+      expect(pageInfo.currentPage).toBe(i + 1)
+      expect(pageInfo.totalCount).toBe(numTables)
+
+      const pageTableIds = edges.map((edge) => edge.node.id)
+
+      const tableConnections = await getTableConnections(
+        null,
+        { limit, offset },
+        context,
+      )
+      expect(Object.keys(tableConnections).length).toBe(expectedLength)
+      expect(Object.keys(tableConnections).sort()).toEqual(pageTableIds.sort())
+
+      //   Object.keys(tableConnections).forEach()
+      Object.entries(tableConnections).forEach(([key, value]) => {
+        expect(value).toBe(tablePipeCount[key])
+      })
+    }
+  })
+
+  it('should return the correct number of table connections for flows by user and editor', async () => {
+    const numTables = 5
+    const tablePipeCount: TablePipeCountObj = {}
+    for (let i = 0; i < numTables; i++) {
+      const res = await generateMockTable({ userId: context.currentUser.id })
+      const { id: tableId } = res.table
+      const { id: editorId } = res.editor
+
+      const [numFlows, numSteps] = [getRandNum(), getRandNum()]
+      const [editorFlows, editorSteps] = [getRandNum(), getRandNum()]
+
+      tablePipeCount[tableId] = numFlows + editorFlows
+      for (let i = 0; i < numFlows; i++) {
+        await generateMockFlow({
+          userId: context.currentUser.id,
+          tableId,
+          numSteps,
+        })
+      }
+      for (let i = 0; i < editorFlows; i++) {
+        await generateMockFlow({
+          userId: editorId,
+          tableId,
+          numSteps: editorSteps,
+        })
+      }
+    }
+
+    // tests each page
+    const limit = 2
+    for (let i = 0; i < Math.ceil(numTables / 2); i++) {
+      const offset = limit * i
+      const { edges, pageInfo } = await getTables(
+        null,
+        { limit, offset },
+        context,
+      )
+
+      const pageTables = edges.map((edge) => edge.node)
+      const expectedLength = Math.min(limit, numTables - limit * i)
+      expect(pageTables).toHaveLength(expectedLength)
+      expect(pageInfo.currentPage).toBe(i + 1)
+      expect(pageInfo.totalCount).toBe(numTables)
+
+      const pageTableIds = edges.map((edge) => edge.node.id)
+
+      const tableConnections = await getTableConnections(
+        null,
+        { limit, offset },
+        context,
+      )
+      expect(Object.keys(tableConnections).length).toBe(expectedLength)
+      expect(Object.keys(tableConnections).sort()).toEqual(pageTableIds.sort())
+
+      //   Object.keys(tableConnections).forEach()
+      Object.entries(tableConnections).forEach(([key, value]) => {
+        expect(value).toBe(tablePipeCount[key])
+      })
+    }
+  })
+})
diff --git a/packages/backend/src/graphql/queries/tiles/get-table-connections.ts b/packages/backend/src/graphql/queries/tiles/get-table-connections.ts
@@ -0,0 +1,50 @@
+import Flow from '@/models/flow'
+
+import type { QueryResolvers } from '../../__generated__/types.generated'
+
+import getTables from './get-tables'
+
+interface ExtendedFlow extends Flow {
+  tableid: string
+}
+
+interface TableConnection {
+  [key: string]: number
+}
+
+const getTableConnections: QueryResolvers['getTableConnections'] = async (
+  _parent,
+  { limit, offset, name },
+  context,
+) => {
+  // get tables of currentUser in the current page
+  const tables = await getTables(_parent, { limit, offset, name }, context)
+
+  if (tables.edges.length === 0) {
+    return {}
+  }
+  const tableIds = tables.edges.map((t) => t.node.id)
+  const tableIdStr = tableIds.map((id) => `'${id}'`).join(', ')
+
+  // get distinct rows of tables used in flows
+  // returns flow id and table id
+  const distinctTableFlows = await Flow.query()
+    .distinct('flows.id', Flow.raw("steps.parameters ->> 'tableId' AS tableId"))
+    .innerJoinRelated('steps')
+    .innerJoinRelated('user')
+    .where('steps.app_key', 'tiles')
+    .whereRaw("steps.parameters ->> 'tableId' IS NOT NULL")
+    .whereRaw(`steps.parameters ->> 'tableId' IN (${tableIdStr})`)
+
+  const result = distinctTableFlows.reduce(
+    (acc: TableConnection, obj: ExtendedFlow) => {
+      acc[obj.tableid] = (acc[obj.tableid] || 0) + 1
+      return acc
+    },
+    {},
+  )
+
+  return result
+}
+
+export default getTableConnections
diff --git a/packages/backend/src/graphql/queries/tiles/index.ts b/packages/backend/src/graphql/queries/tiles/index.ts
@@ -2,6 +2,12 @@ import type { QueryResolvers } from '../../__generated__/types.generated'
 
 import getAllRows from './get-all-rows'
 import getTable from './get-table'
+import getTableConnections from './get-table-connections'
 import getTables from './get-tables'
 
-export default { getTable, getTables, getAllRows } satisfies QueryResolvers
+export default {
+  getTable,
+  getTableConnections,
+  getTables,
+  getAllRows,
+} satisfies QueryResolvers
diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql
@@ -36,11 +36,8 @@ type Query {
   ): [JSONObject]
   # Tiles
   getTable(tableId: String!): TableMetadata!
-  getTables(
-    limit: Int!
-    offset: Int!
-    name: String
-  ): PaginatedTables!
+  getTableConnections(limit: Int!, offset: Int!, name: String): JSONObject
+  getTables(limit: Int!, offset: Int!, name: String): PaginatedTables!
   # Tiles rows
   getAllRows(tableId: String!): Any!
   getCurrentUser: User
diff --git a/packages/frontend/src/graphql/queries/tiles/get-table-connections.ts b/packages/frontend/src/graphql/queries/tiles/get-table-connections.ts
@@ -0,0 +1,7 @@
+import { gql } from '@apollo/client'
+
+export const GET_TABLE_CONNECTIONS = gql`
+  query GetTableConnections($limit: Int!, $offset: Int!, $name: String) {
+    getTableConnections(limit: $limit, offset: $offset, name: $name)
+  }
+`
diff --git a/packages/frontend/src/pages/Tiles/components/TileList.tsx b/packages/frontend/src/pages/Tiles/components/TileList.tsx
diff --git a/packages/frontend/src/pages/Tiles/index.tsx b/packages/frontend/src/pages/Tiles/index.tsx
