fix(ui): uxt fixes

frontend/app/components/UsabilityTesting/SidePanel.tsx

@@ -1,8 +1,8 @@
-import { useStore } from "App/mstore";
-import React from 'react'
-import { observer } from 'mobx-react-lite'
-import { Typography, Switch, Button, Space } from "antd";
-import { ExportOutlined } from "@ant-design/icons";
+import { useStore } from 'App/mstore';
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { Typography, Switch, Button, Space, Tooltip } from 'antd';
+import { ExportOutlined } from '@ant-design/icons';
 
 const SidePanel = observer(({ onSave, onPreview, taskLen }: any) => {
   const { uxtestingStore } = useStore();
@@ -32,16 +32,20 @@ const SidePanel = observer(({ onSave, onPreview, taskLen }: any) => {
         </div>
       </div>
 
-      <Button type={'primary'} ghost onClick={onPreview} disabled={taskLen === 0}>
-        <Space align={'center'}>
-          Preview <ExportOutlined rev={undefined} />
-        </Space>
-      </Button>
-      <Button type={'primary'} onClick={onSave} disabled={taskLen === 0}>
-        Publish Test
-      </Button>
+      <Tooltip title={taskLen === 0 ? 'Define the starting point and the tasks to proceed.' : ''}>
+        <Button type={'primary'} ghost onClick={onPreview} disabled={taskLen === 0}>
+          <Space align={'center'}>
+            Preview <ExportOutlined rev={undefined} />
+          </Space>
+        </Button>
+      </Tooltip>
+      <Tooltip title={taskLen === 0 ? 'Define the starting point and the tasks to proceed.' : ''}>
+        <Button type={'primary'} onClick={onSave} disabled={taskLen === 0}>
+          Publish Test
+        </Button>
+      </Tooltip>
     </div>
   );
 });
 
-export default SidePanel
+export default SidePanel;

frontend/app/components/UsabilityTesting/StepsModal.tsx

@@ -20,7 +20,7 @@ function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide:
       <Typography.Title style={{ marginBottom: 0 }} level={4}>
         Add a task or question
       </Typography.Title>
-      <div className={'flex flex-col gap-1 items-start'}>
+      <div className={'flex flex-col items-start'}>
         <Typography.Title level={5} style={{ marginBottom: 4 }}>
           Title/Question
         </Typography.Title>
@@ -28,14 +28,17 @@ function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide:
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder={'Task title'}
+          className={'mb-4'}
         />
         <Typography.Title level={5} style={{ marginBottom: 4 }}>
           Instructions
         </Typography.Title>
         <Input.TextArea
           value={description}
+          rows={5}
           onChange={(e) => setDescription(e.target.value)}
           placeholder={'Task instructions'}
+          className={'mb-4'}
         />
         <Typography.Title level={5} style={{ marginBottom: 4 }}>
           Allow participants to type an answer
@@ -46,12 +49,12 @@ function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide:
           checkedChildren="Yes"
           unCheckedChildren="No"
         />
-        <div className={'text-disabled-text'}>
+        <div className={'text-disabled-text mb-4 mt-1'}>
           Enabling this option will show a text field for participants to type their answer.
         </div>
       </div>
       <div className={'flex gap-2'}>
-        <Button type={'primary'} onClick={save}>
+        <Button type={'primary'} onClick={save} disabled={title === ''}>
           Add
         </Button>
         <Button onClick={onHide}>Cancel</Button>

frontend/app/components/UsabilityTesting/TestEdit.tsx

@@ -182,7 +182,7 @@ function TestEdit() {
               <Input.TextArea
                 autoFocus
                 rows={5}
-                placeholder={'Task overview'}
+                placeholder={'Enter a brief introduction to the test and its goals here. Follow with clear, step-by-step guidelines for participants.'}
                 value={guidelines}
                 onChange={(e) => setGuidelines(e.target.value)}
               />
@@ -223,7 +223,7 @@ function TestEdit() {
           </div>
 
           <div className={'p-4 rounded bg-white border flex flex-col gap-2'}>
-            <Typography.Text strong>Task List</Typography.Text>
+            <Typography.Text strong>Tasks</Typography.Text>
             {uxtestingStore.instance!.tasks.map((task, index) => (
               <Step
                 ind={index}
@@ -263,7 +263,7 @@ function TestEdit() {
                         ]);
                       }}
                     />,
-                    { right: true }
+                    { right: true, width: 600 }
                   )
                 }
               >
@@ -277,7 +277,7 @@ function TestEdit() {
             <div>
               {isConclusionEditing ? (
                 <Input.TextArea
-                  placeholder={'Thanks for participation!..'}
+                  placeholder={'Enter your closing remarks here, thanking participants for their time and contributions.'}
                   value={conclusion}
                   onChange={(e) => setConclusion(e.target.value)}
                 />

frontend/app/mstore/uxtestingStore.ts

@@ -46,6 +46,7 @@ Test Guidelines:
 
 5. Technical Issues: If you encounter any issues, please describe what you were attempting to do when the issue occurred.
 `
+const defaultConclusion = 'Thank you for participating in our usability test. Your feedback is invaluable to us and will contribute significantly to improving our product.'
 
 export default class UxtestingStore {
   client = uxtestingService;
@@ -146,7 +147,7 @@ export default class UxtestingStore {
       requireCamera: false,
       description: description,
       guidelines: defaultGuidelines,
-      conclusionMessage: '',
+      conclusionMessage: defaultConclusion,
       visibility: true,
       tasks: [],
     };