From af1b29f8bcfb291e2687e50e2acb718d5cfa9973 Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Tue, 11 Jul 2023 05:29:50 -0500
Subject: [PATCH] Improve QuestionID UX by updating onBlur (#523)

* change questionId on blur, fix placeholder

* fix build error

* fix UX issues
---
 apps/formbricks-com/pages/index.tsx           |  2 +-
 .../[surveyId]/edit/UpdateQuestionId.tsx      | 31 +++++++++++--------
 .../[surveyId]/responses/ResponseTimeline.tsx |  6 +++-
 .../surveys/[surveyId]/responses/page.tsx     |  3 --
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/apps/formbricks-com/pages/index.tsx b/apps/formbricks-com/pages/index.tsx
index 49824b0327..c21f7950a1 100644
--- a/apps/formbricks-com/pages/index.tsx
+++ b/apps/formbricks-com/pages/index.tsx
@@ -10,7 +10,7 @@ import BestPractices from "@/components/shared/BestPractices";
 
 const IndexPage = () => (
   <Layout
-    title="Formbricks | Privacy-first user research"
+    title="Formbricks | Privacy-first Experience Management"
     description="Build qualitative user research into your product. Leverage Best practices to increase Product-Market Fit.">
     <Hero />
     <div className="hidden lg:block">
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
index c57f877605..1b18a11d26 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx
@@ -1,23 +1,37 @@
 "use client";
 
-import { Button, Input, Label } from "@formbricks/ui";
-import { CheckIcon } from "@heroicons/react/24/solid";
+import { Input, Label } from "@formbricks/ui";
 import { useState } from "react";
 import toast from "react-hot-toast";
 
 export default function UpdateQuestionId({ localSurvey, question, questionIdx, updateQuestion }) {
   const [currentValue, setCurrentValue] = useState(question.id);
+  const [prevValue, setPrevValue] = useState(question.id);
 
   const saveAction = () => {
+    // return early if the input value was not changed
+    if (currentValue === prevValue) {
+      return;
+    }
+
     // check if id is unique
     const questionIds = localSurvey.questions.map((q) => q.id);
     if (questionIds.includes(currentValue)) {
-      alert("Question Identifier must be unique within the survey.");
+      toast.error("IDs have to be unique per survey.");
       setCurrentValue(question.id);
       return;
     }
+
+    // check if id contains any spaces
+    if (currentValue.trim() === "" || currentValue.includes(" ")) {
+      toast.error("ID should not contain space.");
+      setCurrentValue(question.id);
+      return;
+    }
+
     updateQuestion(questionIdx, { id: currentValue });
     toast.success("Question ID updated.");
+    setPrevValue(currentValue); // after successful update, set current value as previous value
   };
 
   const isInputInvalid = currentValue.trim() === "" || currentValue.includes(" ");
@@ -31,19 +45,10 @@ export default function UpdateQuestionId({ localSurvey, question, questionIdx, u
           name="questionId"
           value={currentValue}
           onChange={(e) => setCurrentValue(e.target.value)}
+          onBlur={saveAction}
           disabled={!(localSurvey.status === "draft" || question.isDraft)}
           className={isInputInvalid ? "border-red-300 focus:border-red-300" : ""}
         />
-        {localSurvey.status === "draft" ||
-          (question.isDraft && (
-            <Button
-              variant="darkCTA"
-              className="ml-2 bg-slate-600 text-white hover:bg-slate-700 disabled:bg-slate-400"
-              onClick={saveAction}
-              disabled={isInputInvalid || currentValue === question.id}>
-              <CheckIcon className="h-4 w-4" />
-            </Button>
-          ))}
       </div>
     </div>
   );
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx
index 04f4cb9531..51251578a0 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/ResponseTimeline.tsx
@@ -172,7 +172,11 @@ export default function ResponseTimeline({
   return (
     <div className="space-y-4">
       {responses.length === 0 ? (
-        <EmptySpaceFiller type="response" environmentId={environmentId} />
+        <EmptySpaceFiller
+          type="response"
+          environmentId={environmentId}
+          noWidgetRequired={survey.type === "link"}
+        />
       ) : (
         <div>
           <Button variant="darkCTA" onClick={() => downloadResponses()} loading={isDownloadCSVLoading}>
diff --git a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx
index 6713d6fff7..92ba2ac871 100644
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/responses/page.tsx
@@ -9,9 +9,6 @@ import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions";
 import { getAnalysisData } from "@/app/environments/[environmentId]/surveys/[surveyId]/summary/data";
 
 export default async function ResponsesPage({ params }) {
-  const environmentId = params.environmentId;
-
-  console.log(environmentId);
   const session = await getServerSession(authOptions);
   if (!session) {
     throw new Error("Unauthorized");