refactor: remove hidden fields toggle from UI (#6649)

apps/web/app/(app)/environments/[environmentId]/project/integrations/notion/components/AddIntegrationModal.tsx

@@ -1,5 +1,18 @@
 "use client";
 
+import { useTranslate } from "@tolgee/react";
+import { PlusIcon, TrashIcon } from "lucide-react";
+import Image from "next/image";
+import React, { useEffect, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { TIntegrationInput } from "@formbricks/types/integration";
+import {
+  TIntegrationNotion,
+  TIntegrationNotionConfigData,
+  TIntegrationNotionDatabase,
+} from "@formbricks/types/integration/notion";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 import { createOrUpdateIntegrationAction } from "@/app/(app)/environments/[environmentId]/project/integrations/actions";
 import {
   ERRORS,
@@ -23,19 +36,6 @@ import {
 } from "@/modules/ui/components/dialog";
 import { DropdownSelector } from "@/modules/ui/components/dropdown-selector";
 import { Label } from "@/modules/ui/components/label";
-import { useTranslate } from "@tolgee/react";
-import { PlusIcon, TrashIcon } from "lucide-react";
-import Image from "next/image";
-import React, { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
-import { TIntegrationInput } from "@formbricks/types/integration";
-import {
-  TIntegrationNotion,
-  TIntegrationNotionConfigData,
-  TIntegrationNotionDatabase,
-} from "@formbricks/types/integration/notion";
-import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
 
 interface AddIntegrationModalProps {
   environmentId: string;
@@ -134,13 +134,12 @@ export const AddIntegrationModal = ({
         type: TSurveyQuestionTypeEnum.OpenText,
       })) || [];
 
-    const hiddenFields = selectedSurvey?.hiddenFields.enabled
-      ? selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
-          id: fId,
-          name: `${t("common.hidden_field")} : ${fId}`,
-          type: TSurveyQuestionTypeEnum.OpenText,
-        })) || []
-      : [];
+    const hiddenFields =
+      selectedSurvey?.hiddenFields.fieldIds?.map((fId) => ({
+        id: fId,
+        name: `${t("common.hidden_field")} : ${fId}`,
+        type: TSurveyQuestionTypeEnum.OpenText,
+      })) || [];
     const Metadata = [
       {
         id: "metadata",

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

@@ -1,5 +1,3 @@
-import { ResponseCardModal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseCardModal";
-import { SingleResponseCard } from "@/modules/analysis/components/SingleResponseCard";
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
@@ -8,6 +6,8 @@ import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
 import { TUser, TUserLocale } from "@formbricks/types/user";
+import { ResponseCardModal } from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseCardModal";
+import { SingleResponseCard } from "@/modules/analysis/components/SingleResponseCard";
 
 vi.mock("@/modules/analysis/components/SingleResponseCard", () => ({
   SingleResponseCard: vi.fn(() => <div data-testid="single-response-card">SingleResponseCard</div>),
@@ -46,6 +46,11 @@ vi.mock("@/modules/ui/components/dialog", () => ({
   )),
   DialogBody: vi.fn(({ children }) => <div data-testid="dialog-body">{children}</div>),
   DialogFooter: vi.fn(({ children }) => <div data-testid="dialog-footer">{children}</div>),
+  DialogTitle: vi.fn(({ children }) => <div data-testid="dialog-title">{children}</div>),
+}));
+
+vi.mock("@radix-ui/react-visually-hidden", () => ({
+  VisuallyHidden: vi.fn(({ children }) => <div data-testid="visually-hidden">{children}</div>),
 }));
 
 const mockResponses = [

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

@@ -1,6 +1,4 @@
-import { SingleResponseCard } from "@/modules/analysis/components/SingleResponseCard";
-import { Button } from "@/modules/ui/components/button";
-import { Dialog, DialogBody, DialogContent, DialogFooter } from "@/modules/ui/components/dialog";
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useEffect, useState } from "react";
 import { TEnvironment } from "@formbricks/types/environment";
@@ -8,6 +6,9 @@ import { TResponse } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
 import { TTag } from "@formbricks/types/tags";
 import { TUser, TUserLocale } from "@formbricks/types/user";
+import { SingleResponseCard } from "@/modules/analysis/components/SingleResponseCard";
+import { Button } from "@/modules/ui/components/button";
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogTitle } from "@/modules/ui/components/dialog";
 
 interface ResponseCardModalProps {
   responses: TResponse[];
@@ -77,6 +78,9 @@ export const ResponseCardModal = ({
   return (
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent width="wide">
+        <VisuallyHidden asChild>
+          <DialogTitle>Survey Response Details</DialogTitle>
+        </VisuallyHidden>
         <DialogBody>
           <SingleResponseCard
             survey={survey}

apps/web/modules/analysis/components/SingleResponseCard/components/SingleResponseCardBody.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { getLocalizedValue } from "@/lib/i18n/utils";
-import { parseRecallInfo } from "@/lib/utils/recall";
-import { ResponseCardQuotas } from "@/modules/ee/quotas/components/single-response-card-quotas";
 import { useTranslate } from "@tolgee/react";
 import { CheckCircle2Icon } from "lucide-react";
 import { TResponseWithQuotas } from "@formbricks/types/responses";
 import { TSurvey } from "@formbricks/types/surveys/types";
+import { getLocalizedValue } from "@/lib/i18n/utils";
+import { parseRecallInfo } from "@/lib/utils/recall";
+import { ResponseCardQuotas } from "@/modules/ee/quotas/components/single-response-card-quotas";
 import { isValidValue } from "../util";
 import { HiddenFields } from "./HiddenFields";
 import { QuestionSkip } from "./QuestionSkip";
@@ -118,7 +118,7 @@ export const SingleResponseCardBody = ({
       {survey.variables.length > 0 && (
         <ResponseVariables variables={survey.variables} variablesData={response.variables} />
       )}
-      {survey.hiddenFields.enabled && survey.hiddenFields.fieldIds && (
+      {survey.hiddenFields.fieldIds && (
         <HiddenFields hiddenFields={survey.hiddenFields} responseData={response.data} />
       )}
 

apps/web/modules/survey/editor/components/hidden-fields-card.tsx

@@ -1,13 +1,5 @@
 "use client";
 
-import { cn } from "@/lib/cn";
-import { extractRecallInfo } from "@/lib/utils/recall";
-import { findHiddenFieldUsedInLogic, isUsedInQuota } from "@/modules/survey/editor/lib/utils";
-import { Button } from "@/modules/ui/components/button";
-import { Input } from "@/modules/ui/components/input";
-import { Label } from "@/modules/ui/components/label";
-import { Switch } from "@/modules/ui/components/switch";
-import { Tag } from "@/modules/ui/components/tag";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useTranslate } from "@tolgee/react";
@@ -17,6 +9,13 @@ import { toast } from "react-hot-toast";
 import { TSurveyQuota } from "@formbricks/types/quota";
 import { TSurvey, TSurveyHiddenFields, TSurveyQuestionId } from "@formbricks/types/surveys/types";
 import { validateId } from "@formbricks/types/surveys/validation";
+import { cn } from "@/lib/cn";
+import { extractRecallInfo } from "@/lib/utils/recall";
+import { findHiddenFieldUsedInLogic, isUsedInQuota } from "@/modules/survey/editor/lib/utils";
+import { Button } from "@/modules/ui/components/button";
+import { Input } from "@/modules/ui/components/input";
+import { Label } from "@/modules/ui/components/label";
+import { Tag } from "@/modules/ui/components/tag";
 
 interface HiddenFieldsCardProps {
   localSurvey: TSurvey;
@@ -145,21 +144,6 @@ export const HiddenFieldsCard = ({
                 <p className="text-sm font-semibold">{t("common.hidden_fields")}</p>
               </div>
             </div>
-
-            <div className="flex items-center space-x-2">
-              <Label htmlFor="hidden-fields-toggle">
-                {localSurvey?.hiddenFields?.enabled ? t("common.on") : t("common.off")}
-              </Label>
-
-              <Switch
-                id="hidden-fields-toggle"
-                checked={localSurvey?.hiddenFields?.enabled}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  updateSurvey({ enabled: !localSurvey.hiddenFields?.enabled });
-                }}
-              />
-            </div>
           </div>
         </Collapsible.CollapsibleTrigger>
         <Collapsible.CollapsibleContent className={`flex flex-col px-4 ${open && "pb-6"}`} ref={parent}>
@@ -218,7 +202,7 @@ export const HiddenFieldsCard = ({
                 onChange={(e) => setHiddenField(e.target.value.trim())}
                 placeholder={t("environments.surveys.edit.type_field_id") + "..."}
               />
-              <Button variant="secondary" type="submit" size="sm" className="whitespace-nowrap">
+              <Button variant="secondary" type="submit" className="h-10 whitespace-nowrap">
                 {t("environments.surveys.edit.add_hidden_field_id")}
               </Button>
             </div>

apps/web/modules/survey/follow-ups/components/follow-up-modal.tsx

@@ -1,5 +1,24 @@
 "use client";
 
+import { zodResolver } from "@hookform/resolvers/zod";
+import { createId } from "@paralleldrive/cuid2";
+import { useTranslate } from "@tolgee/react";
+import DOMpurify from "isomorphic-dompurify";
+import {
+  ArrowDownIcon,
+  EyeOffIcon,
+  HandshakeIcon,
+  MailIcon,
+  TriangleAlertIcon,
+  UserIcon,
+  ZapIcon,
+} from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import toast from "react-hot-toast";
+import { TSurveyFollowUpAction, TSurveyFollowUpTrigger } from "@formbricks/database/types/survey-follow-up";
+import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
+import { TUserLocale } from "@formbricks/types/user";
 import { getLocalizedValue } from "@/lib/i18n/utils";
 import { recallToHeadline } from "@/lib/utils/recall";
 import { getSurveyFollowUpActionDefaultBody } from "@/modules/survey/editor/lib/utils";
@@ -41,25 +60,6 @@ import {
   SelectValue,
 } from "@/modules/ui/components/select";
 import { cn } from "@/modules/ui/lib/utils";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { createId } from "@paralleldrive/cuid2";
-import { useTranslate } from "@tolgee/react";
-import DOMpurify from "isomorphic-dompurify";
-import {
-  ArrowDownIcon,
-  EyeOffIcon,
-  HandshakeIcon,
-  MailIcon,
-  TriangleAlertIcon,
-  UserIcon,
-  ZapIcon,
-} from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-import toast from "react-hot-toast";
-import { TSurveyFollowUpAction, TSurveyFollowUpTrigger } from "@formbricks/database/types/survey-follow-up";
-import { TSurvey, TSurveyQuestionTypeEnum } from "@formbricks/types/surveys/types";
-import { TUserLocale } from "@formbricks/types/user";
 
 interface AddFollowUpModalProps {
   localSurvey: TSurvey;
@@ -118,10 +118,9 @@ export const FollowUpModal = ({
       return false;
     });
 
-    const hiddenFields =
-      localSurvey.hiddenFields.enabled && localSurvey.hiddenFields.fieldIds
-        ? { fieldIds: localSurvey.hiddenFields.fieldIds }
-        : { fieldIds: [] };
+    const hiddenFields = localSurvey.hiddenFields.fieldIds
+      ? { fieldIds: localSurvey.hiddenFields.fieldIds }
+      : { fieldIds: [] };
 
     const updatedTeamMemberDetails = teamMemberDetails.map((teamMemberDetail) => {
       if (teamMemberDetail.email === userEmail) {

packages/types/surveys/types.ts

@@ -1373,7 +1373,7 @@ export const ZSurvey = z
                   return false;
                 })
                 .map((q) => q.id),
-              ...(survey.hiddenFields.enabled ? (survey.hiddenFields.fieldIds ?? []) : []),
+              ...(survey.hiddenFields.fieldIds ?? []),
             ];
 
             if (validOptions.findIndex((option) => option === followUp.action.properties.to) === -1) {