From 0059dc88c6e820b4a1d74c940a0f695d0b2343b4 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 1 Dec 2023 15:51:26 +0100
Subject: [PATCH] fix(ui): uxt fixes

---
 .../app/components/UsabilityTesting/SidePanel.tsx |  5 +++++
 .../components/UsabilityTesting/StepsModal.tsx    | 10 +++++-----
 .../app/components/UsabilityTesting/TestEdit.tsx  | 15 ++++++++++++++-
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/app/components/UsabilityTesting/SidePanel.tsx b/frontend/app/components/UsabilityTesting/SidePanel.tsx
index 5b3715fda..9ebc8bc75 100644
--- a/frontend/app/components/UsabilityTesting/SidePanel.tsx
+++ b/frontend/app/components/UsabilityTesting/SidePanel.tsx
@@ -30,6 +30,11 @@ const SidePanel = observer(({ onSave, onPreview, taskLen }: any) => {
             unCheckedChildren="No"
           />
         </div>
+        <div className={'text-disabled-text text-sm'}>
+          If required, enable camera and mic access to observe participants' facial expressions and
+          verbal feedback in real-time, providing deeper insights into their user experience during
+          the test.
+        </div>
       </div>
 
       <Tooltip title={taskLen === 0 ? 'Define the starting point and the tasks to proceed.' : ''}>
diff --git a/frontend/app/components/UsabilityTesting/StepsModal.tsx b/frontend/app/components/UsabilityTesting/StepsModal.tsx
index 8f20b772c..beab8b7c1 100644
--- a/frontend/app/components/UsabilityTesting/StepsModal.tsx
+++ b/frontend/app/components/UsabilityTesting/StepsModal.tsx
@@ -2,10 +2,10 @@ import { UxTask } from "App/services/UxtestingService";
 import React from 'react'
 import { Button, Input, Switch, Typography } from 'antd'
 
-function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide: () => void }) {
-  const [title, setTitle] = React.useState('');
-  const [description, setDescription] = React.useState('');
-  const [isAnswerEnabled, setIsAnswerEnabled] = React.useState(false);
+function StepsModal({ onAdd, onHide, editTask }: { onAdd: (step: UxTask) => void; onHide: () => void, editTask?: UxTask }) {
+  const [title, setTitle] = React.useState(editTask?.title ?? '');
+  const [description, setDescription] = React.useState(editTask?.description ?? '');
+  const [isAnswerEnabled, setIsAnswerEnabled] = React.useState(editTask?.allowTyping ?? false);
 
   const save = () => {
     onAdd({
@@ -55,7 +55,7 @@ function StepsModal({ onAdd, onHide }: { onAdd: (step: UxTask) => void; onHide:
       </div>
       <div className={'flex gap-2'}>
         <Button type={'primary'} onClick={save} disabled={title === ''}>
-          Add
+          {editTask ? 'Save' : 'Add'}
         </Button>
         <Button onClick={onHide}>Cancel</Button>
       </div>
diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx
index 5929be980..7ab2b0b19 100644
--- a/frontend/app/components/UsabilityTesting/TestEdit.tsx
+++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx
@@ -231,7 +231,20 @@ function TestEdit() {
                 description={task.description}
                 buttons={
                   <>
-                    <Button size={'small'} icon={<EditOutlined rev={undefined} />} />
+                    <Button size={'small'} icon={<EditOutlined rev={undefined} />} onClick={() => {
+                      showModal(
+                        <StepsModal
+                          editTask={task}
+                          onHide={hideModal}
+                          onAdd={(task) => {
+                            const tasks = [...uxtestingStore.instance!.tasks];
+                            tasks[index] = task;
+                            uxtestingStore.instance!.setProperty('tasks', tasks);
+                          }}
+                        />,
+                        { right: true, width: 600 }
+                      )
+                    }} />
                     <Button
                       onClick={() => {
                         uxtestingStore.instance!.setProperty(