Allow questionId to be changed for newly added questions (#476)

* add isDraft=true to all new questions and remove it on save

* update button to show on draft questions

* re-add input validation

---------

Co-authored-by: Johannes <johannes@formbricks.com>
Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/QuestionsView.tsx

@@ -100,7 +100,7 @@ export default function QuestionsView({
 
   const addQuestion = (question: any) => {
     const updatedSurvey = JSON.parse(JSON.stringify(localSurvey));
-    updatedSurvey.questions.push(question);
+    updatedSurvey.questions.push({ ...question, isDraft: true });
     setLocalSurvey(updatedSurvey);
     setActiveQuestionId(question.id);
     internalQuestionIdMap[question.id] = createId();

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/SurveyMenuBar.tsx

@@ -86,7 +86,15 @@ export default function SurveyMenuBar({
   };
 
   const saveSurveyAction = (shouldNavigateBack = false) => {
-    triggerSurveyMutate({ ...localSurvey })
+    // variable named strippedSurvey that is a copy of localSurvey with isDraft removed from every question
+    const strippedSurvey = {
+      ...localSurvey,
+      questions: localSurvey.questions.map((question) => {
+        const { isDraft, ...rest } = question;
+        return rest;
+      }),
+    };
+    triggerSurveyMutate({ ...strippedSurvey })
       .then(async (response) => {
         if (!response?.ok) {
           throw new Error(await response?.text());
@@ -108,6 +116,7 @@ export default function SurveyMenuBar({
         toast.error(`Error saving changes`);
       });
   };
+
   return (
     <div className="border-b border-slate-200 bg-white px-5 py-3 sm:flex sm:items-center sm:justify-between">
       <div className="flex items-center space-x-2 whitespace-nowrap">

apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/UpdateQuestionId.tsx

@@ -31,18 +31,19 @@ export default function UpdateQuestionId({ localSurvey, question, questionIdx, u
           name="questionId"
           value={currentValue}
           onChange={(e) => setCurrentValue(e.target.value)}
-          disabled={localSurvey.status !== "draft"}
+          disabled={!(localSurvey.status === "draft" || question.isDraft)}
           className={isInputInvalid ? "border-red-300 focus:border-red-300" : ""}
         />
-        {localSurvey.status === "draft" && (
-          <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>
-        )}
+        {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>
   );

packages/types/questions.ts

@@ -30,6 +30,7 @@ export interface IQuestion<T extends Logic> {
   required: boolean;
   buttonLabel?: string;
   logic?: T[];
+  isDraft?: boolean;
 }
 
 export interface OpenTextQuestion extends IQuestion<OpenTextLogic> {