PLU-310: show num pipes connected to a tile (#797)

## Problem
Pipes are failing when users accidentally delete Tiles that are
connected to existing Pipes.

Closes [PLU-310: show connected pipes to
tiles](https://linear.app/ogp/issue/PLU-310/show-connected-pipes-to-tiles)

## Solution
Display the number of Pipes using the Tile, including Pipes of current
user and collaborators of the Tile.

**Improvements**:
- Removed unnecessary menu button (current menu only shows "View" /
"Delete")
  - User can view the Tile by clicking on the row
- Delete button will be made visible to Tile owners when they hover a
Tile

## Before & After Screenshots

**BEFORE**:
<img width="1512" alt="Screenshot 2024-11-15 at 3 05 26 PM"
src="https://github.com/user-attachments/assets/235e190d-fdd5-47a4-b0d7-23c7a2b13ca5">


**AFTER**:
- Show number of Pipes and remove menu
<img width="1512" alt="Screenshot 2024-11-15 at 3 06 03 PM"
src="https://github.com/user-attachments/assets/817af8d3-725d-47fc-a044-e2a096603a64">

- Show delete icon on hover
<img width="1512" alt="Screenshot 2024-11-15 at 3 06 46 PM"
src="https://github.com/user-attachments/assets/b087596b-1fac-4c5e-ac06-83a4c7e37cc6">


## Tests
- [x] Number of Pipes displayed is correct, including pipes of Tile
collaborators
- [x] Able to view Tiles for all roles (Owner / Editor / Viewer)
- [x] Able to delete Tiles


**New scripts**:
-
`packages/backend/src/graphql/__tests__/queries/tiles/get-table-connections.itest.ts`
: tests for retrieving table connections
- `packages/backend/src/graphql/queries/tiles/get-table-connections.ts`
: query for retrieving table connections
- `packages/frontend/src/graphql/queries/tiles/get-table-connections.ts`
: query for retrieving table connections

Author: kevinkim-ogp

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,

packages/backend/src/graphql/__tests__/queries/tiles/get-table-connections.itest.ts

@@ -0,0 +1,231 @@
+import crypto from 'crypto'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import getTableConnections from '@/graphql/queries/tiles/get-table-connections'
+import getTables from '@/graphql/queries/tiles/get-tables'
+import Flow from '@/models/flow'
+import Context from '@/types/express/context'
+
+import {
+  generateMockContext,
+  generateMockFlow,
+  generateMockTable,
+} from '../../mutations/tiles/table.mock'
+
+interface TablePipeCountObj {
+  [key: string]: number
+}
+
+function getRandNum() {
+  return crypto.randomInt(1, 6)
+}
+
+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,
+      { tableIds: [] },
+      context,
+    )
+    const flowQuerySpy = vi.spyOn(Flow, 'query')
+    expect(flowQuerySpy).not.toHaveBeenCalled()
+    expect(tableConnections).toEqual({})
+    expect(Object.keys(tableConnections).length).toBe(0)
+  })
+
+  it('should return empty object if user has no access to any tables', async () => {
+    const numTables = 5
+    const testIds = Array.from({ length: numTables }, () => crypto.randomUUID())
+
+    const tableConnections = await getTableConnections(
+      null,
+      { tableIds: testIds },
+      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, numSteps] = [getRandNum(), getRandNum()]
+      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,
+        { tableIds: pageTableIds },
+        context,
+      )
+      expect(Object.keys(tableConnections).length).toBe(expectedLength)
+      expect(Object.keys(tableConnections).sort()).toEqual(pageTableIds.sort())
+
+      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,
+        { tableIds: pageTableIds },
+        context,
+      )
+      expect(Object.keys(tableConnections).length).toBe(expectedLength)
+      expect(Object.keys(tableConnections).sort()).toEqual(pageTableIds.sort())
+
+      Object.entries(tableConnections).forEach(([key, value]) => {
+        expect(value).toBe(tablePipeCount[key])
+      })
+    }
+  })
+
+  it('should not return table connections for tables the user does not have access to', 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,
+        })
+      }
+    }
+
+    // test as a whole
+    const { edges, pageInfo } = await getTables(
+      null,
+      { limit: 10, offset: 0 },
+      context,
+    )
+
+    const pageTables = edges.map((edge) => edge.node)
+    expect(pageTables).toHaveLength(numTables)
+    expect(pageInfo.currentPage).toBe(1)
+    expect(pageInfo.totalCount).toBe(numTables)
+
+    const pageTableIds = edges.map((edge) => edge.node.id)
+    const testIds = [...pageTableIds, crypto.randomUUID()] // add a random table id
+    expect(testIds).toHaveLength(numTables + 1)
+    const tableConnections = await getTableConnections(
+      null,
+      { tableIds: testIds },
+      context,
+    )
+    expect(Object.keys(tableConnections).length).toBe(numTables)
+    expect(Object.keys(tableConnections).sort()).toEqual(pageTableIds.sort())
+
+    Object.entries(tableConnections).forEach(([key, value]) => {
+      expect(value).toBe(tablePipeCount[key])
+    })
+  })
+
+  it('should throw error if tableIds is null', async () => {
+    await expect(
+      getTableConnections(null, { tableIds: null }, context),
+    ).rejects.toThrow('tableIds is required')
+  })
+})

packages/backend/src/graphql/queries/tiles/get-table-connections.ts

@@ -0,0 +1,75 @@
+import { raw } from 'objection'
+
+import logger from '@/helpers/logger'
+import Flow from '@/models/flow'
+import Step from '@/models/step'
+import TableCollaborator from '@/models/table-collaborators'
+
+import type { QueryResolvers } from '../../__generated__/types.generated'
+
+interface ExtendedFlow extends Flow {
+  tableid: string
+  count: number
+}
+
+interface TableConnection {
+  [key: string]: number
+}
+
+const getTableConnections: QueryResolvers['getTableConnections'] = async (
+  _parent,
+  params,
+  context,
+) => {
+  const { tableIds } = params
+  if (!tableIds) {
+    throw new Error('tableIds is required')
+  }
+  if (tableIds.length === 0) {
+    return {}
+  }
+
+  try {
+    // get distinct rows of tables used in flows
+    // returns flow id and table id
+    // MONITOR (ogp-kevin): add index on steps.parameters->>'tableId' if query is slow
+    const distinctTableFlows = await Flow.query()
+      .innerJoin(
+        Step.query()
+          .as('tileSteps')
+          .select(
+            raw("steps.parameters->>'tableId' AS tableid"),
+            'steps.flow_id',
+          )
+          .andWhere('steps.app_key', 'tiles')
+          .whereNotNull(raw("steps.parameters->>'tableId'"))
+          .whereIn(
+            raw("steps.parameters->>'tableId'"),
+            TableCollaborator.query()
+              .select(raw('"table_id"::TEXT AS table_id')) // Cast to TEXT, steps.parameters is JSONB
+              .whereIn('table_id', tableIds)
+              .where('user_id', context.currentUser.id),
+          ), // Only include tables that the user has access to
+        'flows.id',
+        'tileSteps.flow_id',
+      )
+      .select('tileSteps.tableid')
+      .countDistinct('flows.id')
+      .groupBy('tileSteps.tableid')
+
+    const result = distinctTableFlows.reduce(
+      (acc: TableConnection, row: ExtendedFlow) => {
+        acc[row.tableid] = row.count
+        return acc
+      },
+      {},
+    )
+
+    return result
+  } catch (e) {
+    logger.error(e)
+    throw new Error('Error fetching table connections')
+  }
+}
+
+export default getTableConnections

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

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(tableIds: [String!]!): JSONObject
+  getTables(limit: Int!, offset: Int!, name: String): PaginatedTables!
   # Tiles rows
   getAllRows(tableId: String!): Any!
   getCurrentUser: User