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

@@ -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">

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>
   );

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}>

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");