fix: added people column to data table (#3110)

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Johannes <72809645+jobenjada@users.noreply.github.com>

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseDataView.tsx

@@ -66,6 +66,8 @@ const mapResponsesToTableData = (responses: TResponse[], survey: TSurvey): TResp
     notes: response.notes,
     verifiedEmail: typeof response.data["verifiedEmail"] === "string" ? response.data["verifiedEmail"] : "",
     language: response.language,
+    person: response.person,
+    personAttributes: response.personAttributes,
   }));
 };
 

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns.tsx

@@ -2,8 +2,10 @@
 
 import { QUESTIONS_ICON_MAP } from "@/app/lib/questions";
 import { ColumnDef } from "@tanstack/react-table";
-import { EyeOffIcon, MailIcon, TagIcon } from "lucide-react";
+import { CircleHelpIcon, EyeOffIcon, MailIcon, TagIcon } from "lucide-react";
+import Link from "next/link";
 import { getLocalizedValue } from "@formbricks/lib/i18n/utils";
+import { getPersonIdentifier } from "@formbricks/lib/person/utils";
 import { processResponseData } from "@formbricks/lib/responses";
 import { recallToHeadline } from "@formbricks/lib/utils/recall";
 import { TResponseTableData } from "@formbricks/types/responses";
@@ -11,6 +13,7 @@ import { TSurvey, TSurveyQuestion } from "@formbricks/types/surveys/types";
 import { Checkbox } from "@formbricks/ui/Checkbox";
 import { ResponseBadges } from "@formbricks/ui/ResponseBadges";
 import { RenderResponse } from "@formbricks/ui/SingleResponseCard/components/RenderResponse";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@formbricks/ui/Tooltip";
 
 const getAddressFieldLabel = (field: string) => {
   switch (field) {
@@ -182,6 +185,45 @@ export const generateColumns = (
     },
   };
 
+  const personColumn: ColumnDef<TResponseTableData> = {
+    accessorKey: "personId",
+    header: () => (
+      <div className="flex items-center gap-x-1.5">
+        Person
+        <TooltipProvider delayDuration={0}>
+          <Tooltip>
+            <TooltipTrigger>
+              <CircleHelpIcon className="h-3 w-3 text-slate-500" strokeWidth={1.5} />
+            </TooltipTrigger>
+            <TooltipContent side="bottom" className="font-normal">
+              How to identify users for{" "}
+              <Link
+                className="underline underline-offset-2 hover:text-slate-900"
+                href="https://formbricks.com/docs/link-surveys/user-identification"
+                target="_blank">
+                link surveys
+              </Link>{" "}
+              or{" "}
+              <Link
+                className="underline underline-offset-2 hover:text-slate-900"
+                href="https://formbricks.com/docs/app-surveys/user-identification"
+                target="_blank">
+                in-app surveys.
+              </Link>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+    ),
+    size: 275,
+    cell: ({ row }) => {
+      const personId = row.original.person
+        ? getPersonIdentifier(row.original.person, row.original.personAttributes)
+        : "Anonymous";
+      return <p className="truncate text-slate-900">{personId}</p>;
+    },
+  };
+
   const statusColumn: ColumnDef<TResponseTableData> = {
     accessorKey: "status",
     size: 200,
@@ -259,6 +301,7 @@ export const generateColumns = (
   // Combine the selection column with the dynamic question columns
   return [
     ...(isViewer ? [] : [selectionColumn]),
+    personColumn,
     dateColumn,
     statusColumn,
     ...(survey.isVerifyEmailEnabled ? [verifiedEmailColumn] : []),

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableHeader.tsx

@@ -44,9 +44,9 @@ export const ResponseTableHeader = ({ header, setIsTableSettingsModalOpen }: Res
       ref={setNodeRef}
       style={style}
       key={header.id}
-      className="group relative border border-slate-300 bg-slate-200 p-2 px-4 text-center">
+      className="group relative h-10 border border-slate-300 bg-slate-200 px-2 text-center">
       <div className="flex items-center justify-between">
-        <div className="flex-1 truncate text-left">
+        <div className="truncate text-left font-semibold">
           {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
         </div>
 

apps/web/playwright/survey.spec.ts

@@ -309,10 +309,6 @@ test.describe("Multi Language Survey Create", async () => {
     await page
       .getByPlaceholder("Your question here. Recall")
       .fill(surveys.germanCreate.openTextQuestion.question);
-    await page.getByPlaceholder("Your question here. Recall").press("Tab");
-    await page
-      .getByPlaceholder("Your description here. Recall")
-      .fill(surveys.germanCreate.openTextQuestion.description);
     await page.getByLabel("Placeholder").click();
     await page.getByLabel("Placeholder").fill(surveys.germanCreate.openTextQuestion.placeholder);
 
@@ -322,10 +318,6 @@ test.describe("Multi Language Survey Create", async () => {
     await page
       .getByPlaceholder("Your question here. Recall")
       .fill(surveys.germanCreate.singleSelectQuestion.question);
-    await page.getByPlaceholder("Your description here. Recall").click();
-    await page
-      .getByPlaceholder("Your description here. Recall")
-      .fill(surveys.germanCreate.singleSelectQuestion.description);
     await page.getByPlaceholder("Option 1").click();
     await page.getByPlaceholder("Option 1").fill(surveys.germanCreate.singleSelectQuestion.options[0]);
     await page.getByPlaceholder("Option 2").click();
@@ -351,10 +343,6 @@ test.describe("Multi Language Survey Create", async () => {
     await page
       .getByPlaceholder("Your question here. Recall")
       .fill(surveys.germanCreate.pictureSelectQuestion.question);
-    await page.getByPlaceholder("Your description here. Recall").click();
-    await page
-      .getByPlaceholder("Your description here. Recall")
-      .fill(surveys.germanCreate.pictureSelectQuestion.description);
 
     // Fill Rating question in german
     await page.getByRole("main").getByText("Rating").click();
@@ -362,10 +350,6 @@ test.describe("Multi Language Survey Create", async () => {
     await page
       .getByPlaceholder("Your question here. Recall")
       .fill(surveys.germanCreate.ratingQuestion.question);
-    await page.getByPlaceholder("Your description here. Recall").click();
-    await page
-      .getByPlaceholder("Your description here. Recall")
-      .fill(surveys.germanCreate.ratingQuestion.description);
     await page.getByPlaceholder("Not good").click();
     await page.getByPlaceholder("Not good").fill(surveys.germanCreate.ratingQuestion.lowLabel);
     await page.getByPlaceholder("Very satisfied").click();
@@ -398,10 +382,6 @@ test.describe("Multi Language Survey Create", async () => {
     await page.getByRole("main").getByText("Matrix").click();
     await page.getByPlaceholder("Your question here. Recall").click();
     await page.getByPlaceholder("Your question here. Recall").fill(surveys.germanCreate.matrix.question);
-    await page.getByPlaceholder("Your description here. Recall").click();
-    await page
-      .getByPlaceholder("Your description here. Recall")
-      .fill(surveys.germanCreate.matrix.description);
     await page.locator("#row-0").click();
     await page.locator("#row-0").fill(surveys.germanCreate.matrix.rows[0]);
     await page.locator("#row-1").click();

apps/web/playwright/utils/helper.ts

@@ -153,6 +153,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
   await page.getByRole("main").getByText("What would you like to know?").click();
 
   await page.getByLabel("Question*").fill(params.openTextQuestion.question);
+  await page.getByRole("button", { name: "Add Description", exact: true }).click();
   await page.getByLabel("Description").fill(params.openTextQuestion.description);
   await page.getByLabel("Placeholder").fill(params.openTextQuestion.placeholder);
 
@@ -166,6 +167,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Single-Select" }).click();
   await page.getByLabel("Question*").fill(params.singleSelectQuestion.question);
+  await page.getByRole("button", { name: "Add Description", exact: true }).click();
   await page.getByLabel("Description").fill(params.singleSelectQuestion.description);
   await page.getByPlaceholder("Option 1").fill(params.singleSelectQuestion.options[0]);
   await page.getByPlaceholder("Option 2").fill(params.singleSelectQuestion.options[1]);
@@ -193,6 +195,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Rating" }).click();
   await page.getByLabel("Question*").fill(params.ratingQuestion.question);
+  await page.getByRole("button", { name: "Add Description", exact: true }).click();
   await page.getByLabel("Description").fill(params.ratingQuestion.description);
   await page.getByPlaceholder("Not good").fill(params.ratingQuestion.lowLabel);
   await page.getByPlaceholder("Very satisfied").fill(params.ratingQuestion.highLabel);
@@ -236,6 +239,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Picture Selection" }).click();
   await page.getByLabel("Question*").fill(params.pictureSelectQuestion.question);
+  await page.getByRole("button", { name: "Add Description", exact: true }).click();
   await page.getByLabel("Description").fill(params.pictureSelectQuestion.description);
 
   // File Upload Question
@@ -255,6 +259,7 @@ export const createSurvey = async (page: Page, params: CreateSurveyParams) => {
     .click();
   await page.getByRole("button", { name: "Matrix" }).click();
   await page.getByLabel("Question*").fill(params.matrix.question);
+  await page.getByRole("button", { name: "Add Description", exact: true }).click();
   await page.getByLabel("Description").fill(params.matrix.description);
   await page.locator("#row-0").click();
   await page.locator("#row-0").fill(params.matrix.rows[0]);

packages/types/responses.ts

@@ -314,6 +314,8 @@ export const ZResponseTableData = z.object({
   notes: z.array(ZResponseNote),
   language: z.string().nullable(),
   responseData: ZResponseData,
+  person: ZResponsePerson.nullable(),
+  personAttributes: ZResponsePersonAttributes,
 });
 
 export type TResponseTableData = z.infer<typeof ZResponseTableData>;