chore: use column names in preview if no commas

Author: kevinkim-ogp

packages/backend/src/apps/formsg/auth/decrypt-form-response.ts

@@ -130,7 +130,10 @@ export async function decryptFormResponse(
             row.map((column) => column.replaceAll('\u0000', '')),
           )
 
-          rest.answer = convertTableAnswerArrayToTableObject(rest.answerArray)
+          rest.answer = convertTableAnswerArrayToTableObject(
+            rest.question,
+            rest.answerArray,
+          )
         } else {
           rest.answerArray = (rest.answerArray as string[]).map((answer) =>
             answer.replaceAll('\u0000', ''),

packages/backend/src/apps/formsg/common/process-table-field.ts

@@ -1,19 +1,36 @@
 import { FOR_EACH_INPUT_SOURCE } from '@/apps/toolbox/common/constants'
 
+import { extractLastTopLevelBracketContent } from '../triggers/new-submission/get-data-out-metadata'
+
+type TableColumn = {
+  id: string
+  label: string
+  name: string
+  value: string
+}
+
+const createColumn = (label: string): TableColumn => {
+  const id = Buffer.from(label).toString('hex')
+  return {
+    id,
+    label,
+    name: label,
+    value: `data.rows.*.data.${id}`,
+  }
+}
+
 export default function convertTableAnswerArrayToTableObject(
+  question: string,
   answerArray: string[][],
 ) {
-  const columns = (answerArray[0] as string[]).map(
-    (_: string, index: number) => {
-      const label = `Column ${index + 1}`
-      return {
-        id: Buffer.from(label).toString('hex'),
-        label,
-        name: label,
-        value: `data.rows.*.data.${Buffer.from(label).toString('hex')}`,
-      }
-    },
-  )
+  const { content: columnNames } = extractLastTopLevelBracketContent(question)
+  const columnNamesArray = columnNames.split(',').map((name) => name.trim())
+
+  const columns =
+    // make sure that column names do not contain commas
+    columnNamesArray.length === answerArray[0].length
+      ? columnNamesArray.map(createColumn)
+      : answerArray[0].map((_, index) => createColumn(`Column ${index + 1}`))
 
   /**
    * NOTE: we do not show table rows that do not have any data

packages/backend/src/apps/formsg/triggers/new-submission/get-data-out-metadata.ts

@@ -99,7 +99,7 @@ function buildAnswerArrayForCheckbox(
   }
 }
 
-function extractLastTopLevelBracketContent(questionText: string): {
+export function extractLastTopLevelBracketContent(questionText: string): {
   content: string
   prefix: string
 } {

packages/backend/src/apps/formsg/triggers/new-submission/get-mock-data.ts

@@ -149,8 +149,9 @@ async function getMockData($: IGlobalVariable) {
         if (data.responses[formFields[i]._id].fieldType === 'table') {
           const answerArray = data.responses[formFields[i]._id]
             .answerArray as string[][]
+          const question = data.responses[formFields[i]._id].question
           data.responses[formFields[i]._id].answer =
-            convertTableAnswerArrayToTableObject(answerArray)
+            convertTableAnswerArrayToTableObject(question, answerArray)
         }
 
         data.responses[formFields[i]._id].order = i + 1