feat: allow selection of db type on frontend

pregnantboy · pregnantboy · commit ae7dc49f235a · 2025-05-23T16:10:18.000+08:00
diff --git a/packages/backend/src/graphql/custom-resolvers/table-metadata.ts b/packages/backend/src/graphql/custom-resolvers/table-metadata.ts
@@ -4,6 +4,10 @@ import type { Resolvers } from '../__generated__/types.generated'
 
 type TableMetadataResolver = Resolvers['TableMetadata']
 
+const databaseType: TableMetadataResolver['databaseType'] = async (parent) => {
+  return parent.db
+}
+
 const columns: TableMetadataResolver['columns'] = async (parent) => {
   const columns = await parent
     .$relatedQuery('columns')
@@ -33,4 +37,5 @@ const collaborators: TableMetadataResolver['collaborators'] = async (
 export default {
   columns,
   collaborators,
+  databaseType,
 } satisfies TableMetadataResolver
diff --git a/packages/backend/src/graphql/schema.graphql b/packages/backend/src/graphql/schema.graphql
@@ -807,6 +807,7 @@ input DeleteTableCollaboratorInput {
 
 type TableMetadata {
   id: ID!
+  databaseType: DatabaseType!
   name: String!
   columns: [TableColumnMetadata!]
   lastAccessedAt: String!
diff --git a/packages/frontend/src/components/ControlledAutocomplete/AddNewOptionModal.tsx b/packages/frontend/src/components/ControlledAutocomplete/AddNewOptionModal.tsx
@@ -13,6 +13,7 @@ import {
 } from '@chakra-ui/react'
 import { Button, FormLabel, Input } from '@opengovsg/design-system-react'
 
+import { DatabaseType } from '@/graphql/__generated__/graphql'
 import client from '@/graphql/client'
 import { CREATE_TABLE } from '@/graphql/mutations/tiles/create-table'
 import { UPDATE_TABLE } from '@/graphql/mutations/tiles/update-table'
@@ -49,6 +50,7 @@ export function useCreateNewOption(setValue: (newValue: string) => void) {
                 input: {
                   name: inputValue.trim(),
                   isBlank: true,
+                  databaseType: DatabaseType.Pg,
                 },
               },
             })
diff --git a/packages/frontend/src/graphql/queries/tiles/get-table.ts b/packages/frontend/src/graphql/queries/tiles/get-table.ts
@@ -6,6 +6,7 @@ export const GET_TABLE = gql`
       id
       name
       viewOnlyKey
+      databaseType
       columns {
         id
         name
diff --git a/packages/frontend/src/pages/Tile/components/TableBanner/ImportCsvButton.tsx b/packages/frontend/src/pages/Tile/components/TableBanner/ImportCsvButton.tsx
@@ -29,6 +29,7 @@ import Papa, { ParseMeta, ParseResult } from 'papaparse'
 import { SetRequired } from 'type-fest'
 
 import PrimarySpinner from '@/components/PrimarySpinner'
+import { DatabaseType } from '@/graphql/__generated__/graphql'
 import { CREATE_ROWS } from '@/graphql/mutations/tiles/create-rows'
 import { GET_TABLE } from '@/graphql/queries/tiles/get-table'
 
@@ -49,7 +50,10 @@ type IMPORT_STATUS =
 // 2 MB in bytes
 const MAX_FILE_SIZE = 2 * 1000 * 1000
 // Add row chunk size
-const CHUNK_SIZE = 100
+const CHUNK_SIZE = {
+  [DatabaseType.Pg]: 1000,
+  [DatabaseType.Ddb]: 100,
+}
 
 const ImportStatus = ({
   columnsToCreate,
@@ -134,7 +138,7 @@ export const ImportCsvModalContent = ({
   onPostImport?: () => void
   onBack?: () => void
 }) => {
-  const { tableId, tableColumns, refetch } = useTableContext()
+  const { tableId, tableColumns, refetch, databaseType } = useTableContext()
   const { createColumns } = useUpdateTable()
   const [createRows] = useMutation(CREATE_ROWS)
   const [getTableData] = useLazyQuery<{
@@ -255,7 +259,7 @@ export const ImportCsvModalContent = ({
         setImportStatus('importing')
         setRowsToImport(mappedData.length)
         setRowsImported(0)
-        const chunkedData = chunk(mappedData, CHUNK_SIZE)
+        const chunkedData = chunk(mappedData, CHUNK_SIZE[databaseType])
 
         for (let i = 0; i < chunkedData.length; i++) {
           await createRows({
@@ -269,7 +273,7 @@ export const ImportCsvModalContent = ({
           if (i === chunkedData.length - 1 && !onPreImport) {
             await refetch()
           }
-          setRowsImported((i + 1) * CHUNK_SIZE)
+          setRowsImported((i + 1) * CHUNK_SIZE[databaseType])
         }
       }
       setImportStatus('completed')
@@ -291,6 +295,7 @@ export const ImportCsvModalContent = ({
     onPreImport,
     refetch,
     result,
+    databaseType,
     tableColumns,
     tableId,
   ])
diff --git a/packages/frontend/src/pages/Tile/contexts/TableContext.tsx b/packages/frontend/src/pages/Tile/contexts/TableContext.tsx
@@ -13,12 +13,15 @@ import React, {
   useState,
 } from 'react'
 
+import { DatabaseType } from '@/graphql/__generated__/graphql'
+
 import { flattenRows } from '../helpers/flatten-rows'
 import { EditMode, GenericRowData } from '../types'
 
 interface TableContextProps {
   tableId: string
   tableName: string
+  databaseType: DatabaseType
   flattenedData: GenericRowData[]
   tableColumns: ITableColumnMetadata[]
   filteredDataRef: MutableRefObject<GenericRowData[]>
@@ -49,6 +52,7 @@ export const useTableContext = () => {
 interface TableContextProviderProps {
   tableId: string
   tableName: string
+  databaseType: DatabaseType
   tableColumns: ITableColumnMetadata[]
   tableRows: ITableRow[]
   children: React.ReactNode
@@ -64,6 +68,7 @@ interface TableContextProviderProps {
 export const TableContextProvider = ({
   tableId,
   tableName,
+  databaseType,
   tableColumns,
   tableRows,
   children,
@@ -86,6 +91,7 @@ export const TableContextProvider = ({
       value={{
         tableId,
         tableName,
+        databaseType,
         flattenedData,
         tableColumns,
         allDataRef,
diff --git a/packages/frontend/src/pages/Tile/index.tsx b/packages/frontend/src/pages/Tile/index.tsx
@@ -80,13 +80,14 @@ export default function Tile(): JSX.Element | null {
     return null
   }
 
-  const { id, name, columns, viewOnlyKey, collaborators } =
+  const { id, name, columns, viewOnlyKey, collaborators, databaseType } =
     getTableData.getTable
 
   return (
     <TableContextProvider
       tableName={name}
       tableId={id}
+      databaseType={databaseType}
       tableColumns={columns}
       tableRows={rows}
       viewOnlyKey={viewOnlyKey}
diff --git a/packages/frontend/src/pages/Tiles/components/CreateTileButton.tsx b/packages/frontend/src/pages/Tiles/components/CreateTileButton.tsx
@@ -6,6 +6,7 @@ import { useNavigate } from 'react-router-dom'
 import { useMutation } from '@apollo/client'
 import {
   Flex,
+  FormControl,
   Modal,
   ModalBody,
   ModalContent,
@@ -16,14 +17,17 @@ import {
   useDisclosure,
 } from '@chakra-ui/react'
 import {
+  Badge,
   Button,
   FormLabel,
   Input,
   ModalCloseButton,
   Tile,
 } from '@opengovsg/design-system-react'
 
+import { SingleSelect } from '@/components/SingleSelect'
 import * as URLS from '@/config/urls'
+import { DatabaseType } from '@/graphql/__generated__/graphql'
 import { CREATE_TABLE } from '@/graphql/mutations/tiles/create-table'
 import { ImportCsvModalContent } from '@/pages/Tile/components/TableBanner/ImportCsvButton'
 import { TableContextProvider } from '@/pages/Tile/contexts/TableContext'
@@ -33,12 +37,16 @@ type TILE_CREATE_MODE = 'import' | 'new'
 const CreateTileForm = ({
   tableName,
   setTableName,
+  databaseType,
+  setDatabaseType,
   onSubmit,
   isSubmitting,
   onImportNext,
 }: {
   tableName: string
   setTableName: (tableName: string) => void
+  databaseType: DatabaseType
+  setDatabaseType: (databaseType: DatabaseType) => void
   onSubmit: () => Promise<void>
   isSubmitting: boolean
   onImportNext: () => void
@@ -49,41 +57,55 @@ const CreateTileForm = ({
     <>
       <ModalHeader>Create a Tile</ModalHeader>
       <ModalCloseButton />
-      <ModalBody>
-        <FormLabel isRequired>Enter a name for your new tile</FormLabel>
-        <Input
-          value={tableName}
-          onChange={(e) => setTableName(e.target.value)}
-        />
-        <FormLabel mt={8} isRequired>
-          How do you want to start?
-        </FormLabel>
-        <Flex gap={4}>
-          <Tile
-            icon={BiSpreadsheet}
-            flex={1}
-            onClick={() => setCreateMode('import')}
-            isSelected={createMode === 'import'}
-          >
-            <Text textStyle="h5" mt={4}>
-              Import CSV
-            </Text>
-            <Text textStyle="body-2">
-              Start with data that you have already collected
-            </Text>
-          </Tile>
-          <Tile
-            icon={BiTable}
-            flex={1}
-            onClick={() => setCreateMode('new')}
-            isSelected={createMode === 'new'}
-          >
-            <Text textStyle="h5" mt={4}>
-              Start from scratch
-            </Text>
-            <Text textStyle="body-2">Start with a blank database</Text>
-          </Tile>
-        </Flex>
+      <ModalBody gap={8} display="flex" flexDirection="column">
+        <FormControl>
+          <FormLabel isRequired>Enter a name for your new tile</FormLabel>
+          <Input
+            value={tableName}
+            onChange={(e) => setTableName(e.target.value)}
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Select version</FormLabel>
+          <SingleSelect
+            items={[
+              {
+                label: 'Tiles v2 (PostgreSQL)',
+                value: DatabaseType.Pg,
+                badge: <Badge>NEW</Badge>,
+              },
+              { label: 'Tiles v1 (DynamoDB)', value: DatabaseType.Ddb },
+            ]}
+            value={databaseType}
+            onChange={(value) => setDatabaseType(value as DatabaseType)}
+            name="databaseType"
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel isRequired>How do you want to start?</FormLabel>
+          <Flex gap={4} direction={{ base: 'column', sm: 'row' }}>
+            <Tile
+              icon={BiSpreadsheet}
+              flex={1}
+              onClick={() => setCreateMode('import')}
+              isSelected={createMode === 'import'}
+            >
+              <Text textStyle="h5">Import CSV</Text>
+              <Text textStyle="body-2">
+                Start with data that you have already collected
+              </Text>
+            </Tile>
+            <Tile
+              icon={BiTable}
+              flex={1}
+              onClick={() => setCreateMode('new')}
+              isSelected={createMode === 'new'}
+            >
+              <Text textStyle="h5">Start from scratch</Text>
+              <Text textStyle="body-2">Start with a blank database</Text>
+            </Tile>
+          </Flex>
+        </FormControl>
       </ModalBody>
       <ModalFooter>
         <Button
@@ -104,6 +126,9 @@ const CreateTileModal = ({ onClose }: { onClose: () => void }): JSX.Element => {
   const [tableName, setTableName] = useState('')
   const [showImportModal, setShowImportModal] = useState(false)
   const [tableData, setTableData] = useState<ITableMetadata | null>(null)
+  const [databaseType, setDatabaseType] = useState<DatabaseType>(
+    DatabaseType.Pg,
+  )
 
   const [createTableMutation, { loading }] = useMutation<{
     createTable: ITableMetadata
@@ -116,6 +141,7 @@ const CreateTileModal = ({ onClose }: { onClose: () => void }): JSX.Element => {
           input: {
             name: tableName,
             isBlank,
+            databaseType,
           },
         },
       })
@@ -125,7 +151,7 @@ const CreateTileModal = ({ onClose }: { onClose: () => void }): JSX.Element => {
       setTableData(data.createTable)
       return data.createTable
     },
-    [createTableMutation, tableName],
+    [createTableMutation, databaseType, tableName],
   )
 
   const navigateToTile = useCallback(
@@ -155,6 +181,7 @@ const CreateTileModal = ({ onClose }: { onClose: () => void }): JSX.Element => {
       <ModalContent>
         {showImportModal ? (
           <TableContextProvider
+            databaseType={databaseType}
             tableName={tableName}
             tableId={tableData ? tableData.id : ''}
             tableColumns={[]}
@@ -174,6 +201,8 @@ const CreateTileModal = ({ onClose }: { onClose: () => void }): JSX.Element => {
           <CreateTileForm
             tableName={tableName}
             setTableName={setTableName}
+            setDatabaseType={setDatabaseType}
+            databaseType={databaseType}
             onSubmit={onSubmit}
             isSubmitting={loading}
             onImportNext={() => setShowImportModal(true)}
diff --git a/packages/types/index.d.ts b/packages/types/index.d.ts
@@ -903,6 +903,7 @@ export interface ITableColumnMetadata {
 export interface ITableMetadata {
   id: string
   name: string
+  databaseType: DatabaseType
   columns: ITableColumnMetadata[]
   lastAccessedAt: string
   viewOnlyKey?: string
