From e418d3d75d72d71a49a7fdd5882df6f7b7e869ad Mon Sep 17 00:00:00 2001
From: Matt Bemis <mbemis@broadinstitute.org>
Date: Tue, 17 Dec 2024 08:14:59 -0500
Subject: [PATCH 1/3] add freetext editor to survey designer

---
 .../forms/designer/split/FreetextEditor.tsx   | 34 +++++++++++++++++++
 .../split/SplitFormElementDesigner.tsx        | 34 ++++++++++++++-----
 .../split/controls/FormElementOptions.tsx     | 12 ++++++-
 3 files changed, 70 insertions(+), 10 deletions(-)
 create mode 100644 ui-admin/src/forms/designer/split/FreetextEditor.tsx

diff --git a/ui-admin/src/forms/designer/split/FreetextEditor.tsx b/ui-admin/src/forms/designer/split/FreetextEditor.tsx
new file mode 100644
index 0000000000..7993b5e608
--- /dev/null
+++ b/ui-admin/src/forms/designer/split/FreetextEditor.tsx
@@ -0,0 +1,34 @@
+import { Question, QuestionType } from '@juniper/ui-core'
+import React, { useState } from 'react'
+import { Textarea } from 'components/forms/Textarea'
+import { questionFromRawText } from '../../../util/juniperSurveyUtils'
+
+export const FreetextEditor = ({ question, onChange }: {
+    question: Question, onChange: (newQuestion: Question) => void
+}) => {
+  const [freetext, setFreetext] = useState<string>('')
+
+  return <Textarea
+    className="form-control mb-3 p-2"
+    value={freetext}
+    rows={15}
+    onChange={value => {
+      setFreetext(value)
+      const newQuestionObj = questionFromRawText(value)
+      const newType = newQuestionObj.type as QuestionType
+      //questionFromRawText can only reasonably predict the type of question, it's choices, and it's text.
+      //We'll pick those three fields out and allow the user to decide the rest of the fields explicitly.
+      onChange({
+        ...question,
+        type: newType,
+        title: newQuestionObj.title || '',
+        choices: newQuestionObj.choices
+      } as Question)
+    }}
+    label={'Freetext'}
+    labelClassname={'mb-0'}
+    infoContent={`Paste in question text to automatically generate a survey question. For text questions, 
+    simply paste in the text. For radio and dropdown questions, paste the question text followed by
+    a new option on each line.`}
+  />
+}
diff --git a/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx b/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx
index 1c94138b96..5089716929 100644
--- a/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx
+++ b/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx
@@ -14,6 +14,7 @@ import { isEqual } from 'lodash'
 import { FormElementEditor } from './FormElementEditor'
 import { FormElementJsonEditor } from './FormElementJsonEditor'
 import { FormElementOptions } from './controls/FormElementOptions'
+import { FreetextEditor } from './FreetextEditor'
 
 /* Note that this component is memoized using React.memo
  * Since survey pages can contain many elements, we need to be mindful of
@@ -31,6 +32,7 @@ export const SplitFormElementDesigner = memo(({
     editedContent: FormContent, onChange: (newContent: FormContent) => void
 }) => {
   const [showJsonEditor, setShowJsonEditor] = useState(false)
+  const [showFreetextMode, setShowFreetextMode] = useState(false)
 
   // Chop the survey down to just the specific question that we're editing, so we can display
   // a preview using the SurveyJS survey component.
@@ -51,13 +53,35 @@ export const SplitFormElementDesigner = memo(({
       <FormElementOptions
         showJsonEditor={showJsonEditor}
         setShowJsonEditor={setShowJsonEditor}
+        showFreetextMode={showFreetextMode}
+        setShowFreetextMode={setShowFreetextMode}
         elementIndex={elementIndex}
         element={element}
         currentPageNo={currentPageNo}
         editedContent={editedContent}
         onChange={onChange}
       />
-      { !showJsonEditor ?
+      { showFreetextMode &&
+        <FreetextEditor
+          question={element as Question}
+          onChange={newQuestion => {
+            const newContent = { ...editedContent }
+            newContent.pages[currentPageNo].elements[elementIndex] = newQuestion
+            onChange(newContent)
+          }}
+        />
+      }
+      { showJsonEditor &&
+        <FormElementJsonEditor
+          question={element as Question}
+          onChange={newQuestion => {
+            const newContent = { ...editedContent }
+            newContent.pages[currentPageNo].elements[elementIndex] = newQuestion
+            onChange(newContent)
+          }}
+        />
+      }
+      { !showJsonEditor && !showFreetextMode &&
         <FormElementEditor
           element={element}
           elementIndex={elementIndex}
@@ -66,14 +90,6 @@ export const SplitFormElementDesigner = memo(({
           onChange={onChange}
           currentLanguage={currentLanguage}
           supportedLanguages={supportedLanguages}
-        /> :
-        <FormElementJsonEditor
-          question={element as Question}
-          onChange={newQuestion => {
-            const newContent = { ...editedContent }
-            newContent.pages[currentPageNo].elements[elementIndex] = newQuestion
-            onChange(newContent)
-          }}
         />
       }
     </div>
diff --git a/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx b/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx
index 24961d6c21..f767a3548b 100644
--- a/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx
+++ b/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx
@@ -1,12 +1,14 @@
 import React from 'react'
 import { IconButton } from 'components/forms/Button'
-import { faClone, faCode } from '@fortawesome/free-solid-svg-icons'
+import { faClone, faCode, faKeyboard } from '@fortawesome/free-solid-svg-icons'
 import { ListElementController } from 'portal/siteContent/designer/components/ListElementController'
 import { FormContent, FormElement } from '@juniper/ui-core'
 
 type FormElementOptionsProps = {
     showJsonEditor: boolean,
     setShowJsonEditor: (show: boolean) => void,
+    showFreetextMode: boolean,
+    setShowFreetextMode: (show: boolean) => void,
     elementIndex: number,
     element: FormElement,
     currentPageNo: number,
@@ -17,6 +19,8 @@ type FormElementOptionsProps = {
 export const FormElementOptions = ({
   showJsonEditor,
   setShowJsonEditor,
+  showFreetextMode,
+  setShowFreetextMode,
   elementIndex,
   element,
   currentPageNo,
@@ -27,9 +31,15 @@ export const FormElementOptions = ({
     <div className="d-flex justify-content-end">
       <div className="d-flex border rounded-3 rounded-top-0 border-top-0 bg-light">
         <IconButton icon={faCode}
+          disabled={showFreetextMode}
           aria-label={showJsonEditor ? 'Switch to designer' : 'Switch to JSON editor'}
           onClick={() => setShowJsonEditor(!showJsonEditor)}
         />
+        <IconButton icon={faKeyboard}
+          disabled={showJsonEditor}
+          aria-label={showFreetextMode ? 'Switch to designer' : 'Switch to freetext editor'}
+          onClick={() => setShowFreetextMode(!showFreetextMode)}
+        />
         <IconButton icon={faClone}
           aria-label={'Clone'}
           onClick={() => {

From 4fd58b769048b9e29a4bb25fd07ad8df87bc15b1 Mon Sep 17 00:00:00 2001
From: Matt Bemis <mbemis@broadinstitute.org>
Date: Tue, 17 Dec 2024 08:16:50 -0500
Subject: [PATCH 2/3] rename

---
 .../{FreetextEditor.tsx => FormElementFreetextEditor.tsx}     | 2 +-
 .../src/forms/designer/split/SplitFormElementDesigner.tsx     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)
 rename ui-admin/src/forms/designer/split/{FreetextEditor.tsx => FormElementFreetextEditor.tsx} (95%)

diff --git a/ui-admin/src/forms/designer/split/FreetextEditor.tsx b/ui-admin/src/forms/designer/split/FormElementFreetextEditor.tsx
similarity index 95%
rename from ui-admin/src/forms/designer/split/FreetextEditor.tsx
rename to ui-admin/src/forms/designer/split/FormElementFreetextEditor.tsx
index 7993b5e608..a98d69d22f 100644
--- a/ui-admin/src/forms/designer/split/FreetextEditor.tsx
+++ b/ui-admin/src/forms/designer/split/FormElementFreetextEditor.tsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react'
 import { Textarea } from 'components/forms/Textarea'
 import { questionFromRawText } from '../../../util/juniperSurveyUtils'
 
-export const FreetextEditor = ({ question, onChange }: {
+export const FormElementFreetextEditor = ({ question, onChange }: {
     question: Question, onChange: (newQuestion: Question) => void
 }) => {
   const [freetext, setFreetext] = useState<string>('')
diff --git a/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx b/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx
index 5089716929..dcd29097c1 100644
--- a/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx
+++ b/ui-admin/src/forms/designer/split/SplitFormElementDesigner.tsx
@@ -14,7 +14,7 @@ import { isEqual } from 'lodash'
 import { FormElementEditor } from './FormElementEditor'
 import { FormElementJsonEditor } from './FormElementJsonEditor'
 import { FormElementOptions } from './controls/FormElementOptions'
-import { FreetextEditor } from './FreetextEditor'
+import { FormElementFreetextEditor } from './FormElementFreetextEditor'
 
 /* Note that this component is memoized using React.memo
  * Since survey pages can contain many elements, we need to be mindful of
@@ -62,7 +62,7 @@ export const SplitFormElementDesigner = memo(({
         onChange={onChange}
       />
       { showFreetextMode &&
-        <FreetextEditor
+        <FormElementFreetextEditor
           question={element as Question}
           onChange={newQuestion => {
             const newContent = { ...editedContent }

From 740a67340ae5f557a3ec498f162d97e1624273f8 Mon Sep 17 00:00:00 2001
From: Matt Bemis <mbemis@broadinstitute.org>
Date: Mon, 6 Jan 2025 14:48:58 -0500
Subject: [PATCH 3/3] tweaks

---
 .../designer/split/controls/FormElementOptions.tsx    | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx b/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx
index f767a3548b..540833e4ae 100644
--- a/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx
+++ b/ui-admin/src/forms/designer/split/controls/FormElementOptions.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { IconButton } from 'components/forms/Button'
-import { faClone, faCode, faKeyboard } from '@fortawesome/free-solid-svg-icons'
+import { faClone, faCode, faKeyboard, faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'
 import { ListElementController } from 'portal/siteContent/designer/components/ListElementController'
 import { FormContent, FormElement } from '@juniper/ui-core'
 
@@ -32,10 +32,15 @@ export const FormElementOptions = ({
       <div className="d-flex border rounded-3 rounded-top-0 border-top-0 bg-light">
         <IconButton icon={faCode}
           disabled={showFreetextMode}
-          aria-label={showJsonEditor ? 'Switch to designer' : 'Switch to JSON editor'}
+          aria-label={
+            showJsonEditor ?
+              'Switch to designer' :
+              showFreetextMode ? 'You must exit the freetext editor to switch to JSON editor' :
+                'Switch to JSON editor'
+          }
           onClick={() => setShowJsonEditor(!showJsonEditor)}
         />
-        <IconButton icon={faKeyboard}
+        <IconButton icon={showFreetextMode ? faKeyboard : faWandMagicSparkles}
           disabled={showJsonEditor}
           aria-label={showFreetextMode ? 'Switch to designer' : 'Switch to freetext editor'}
           onClick={() => setShowFreetextMode(!showFreetextMode)}