From 9759ad41a9e52bed6aed36412250a74824936ac9 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 1 Dec 2023 17:27:19 +0100
Subject: [PATCH] fix(ui): uxt fixes

---
 .../components/UsabilityTesting/TestEdit.tsx  |  6 ++++-
 .../UsabilityTesting/TestOverview.tsx         | 23 +++++++++----------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx
index 9b3280560..4d9a8eb56 100644
--- a/frontend/app/components/UsabilityTesting/TestEdit.tsx
+++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx
@@ -110,6 +110,7 @@ function TestEdit() {
     }
   };
 
+  const isPublished = uxtestingStore.instance.status !== undefined && uxtestingStore.instance.status !== 'preview'
   return (
     <div className="w-full mx-auto" style={{ maxWidth: '1360px' }}>
       <Breadcrumb
@@ -183,6 +184,7 @@ function TestEdit() {
             <Input
               style={{ width: 400 }}
               type={'url'}
+              disabled={isPublished}
               placeholder={'https://mywebsite.com/example-page'}
               value={uxtestingStore.instance!.startingPath}
               onChange={(e) => {
@@ -252,7 +254,7 @@ function TestEdit() {
                 description={task.description}
                 buttons={
                   <>
-                    <Button size={'small'} icon={<EditOutlined rev={undefined} />} onClick={() => {
+                    <Button size={'small'} disabled={isPublished} icon={<EditOutlined rev={undefined} />} onClick={() => {
                       showModal(
                         <StepsModal
                           editTask={task}
@@ -277,6 +279,7 @@ function TestEdit() {
                           )
                         );
                       }}
+                      disabled={isPublished}
                       size={'small'}
                       icon={<DeleteOutlined rev={undefined} />}
                     />
@@ -288,6 +291,7 @@ function TestEdit() {
               <Button
                 type={'primary'}
                 ghost
+                disabled={isPublished}
                 onClick={() =>
                   showModal(
                     <StepsModal
diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx
index cf333eb24..834f0062b 100644
--- a/frontend/app/components/UsabilityTesting/TestOverview.tsx
+++ b/frontend/app/components/UsabilityTesting/TestOverview.tsx
@@ -186,22 +186,22 @@ const ParticipantOverview = observer(() => {
     <div className={'p-4 rounded border bg-white mt-2'}>
       <Typography.Title level={5}>Participant Overview</Typography.Title>
       {uxtestingStore.testStats ? (
-        <div className={'flex gap-2'}>
+        <div className={'flex gap-4'}>
           <div className={'rounded border p-2 flex-1'}>
-            <div className={'flex items-center gap-2'}>
+            <div className={'flex items-center gap-2 mb-2'}>
               <UserOutlined style={{ fontSize: 18, color: '#394EFF' }} rev={undefined} />
               <Typography.Text strong>Total Participants</Typography.Text>
             </div>
-            <Typography.Title level={5}>{uxtestingStore.testStats.tests_attempts}</Typography.Title>
+            <Typography.Title level={4}>{uxtestingStore.testStats.tests_attempts}</Typography.Title>
           </div>
           <div className={'rounded border p-2 flex-1'}>
-            <div className={'flex items-center gap-2'}>
+            <div className={'flex items-center gap-2 mb-2'}>
               <CheckCircleOutlined style={{ fontSize: 18, color: '#389E0D' }} rev={undefined} />
               <Typography.Text strong>Completed all tasks</Typography.Text>
             </div>
             <div className={'flex items-center gap-2'}>
               {uxtestingStore.testStats.tests_attempts > 0 ? (
-                <Typography.Title level={5}>
+                <Typography.Title level={4}>
                   {Math.round(
                     (uxtestingStore.testStats.completed_all_tasks /
                       uxtestingStore.testStats.tests_attempts) *
@@ -214,13 +214,13 @@ const ParticipantOverview = observer(() => {
             </div>
           </div>
           <div className={'rounded border p-2 flex-1'}>
-            <div className={'flex items-center gap-2'}>
+            <div className={'flex items-center gap-2 mb-2'}>
               <FastForwardOutlined style={{ fontSize: 18, color: '#874D00' }} rev={undefined} />
               <Typography.Text strong>Skipped tasks</Typography.Text>
             </div>
             <div className={'flex items-center gap-2'}>
               {uxtestingStore.testStats.tests_attempts > 0 ? (
-                <Typography.Title level={5}>
+                <Typography.Title level={4}>
                   {Math.round(
                     (uxtestingStore.testStats.tasks_skipped /
                       uxtestingStore.testStats.tests_attempts) *
@@ -233,13 +233,13 @@ const ParticipantOverview = observer(() => {
             </div>
           </div>
           <div className={'rounded border p-2 flex-1'}>
-            <div className={'flex items-center gap-2'}>
+            <div className={'flex items-center gap-2 mb-2'}>
               <UserDeleteOutlined style={{ fontSize: 18, color: '#CC0000' }} rev={undefined} />
               <Typography.Text strong>Aborted the test</Typography.Text>
             </div>
             <div className={'flex items-center gap-2'}>
               {uxtestingStore.testStats.tests_attempts > 0 ? (
-                <Typography.Title level={5}>
+                <Typography.Title level={4}>
                   {Math.round(
                     (uxtestingStore.testStats.tests_skipped /
                       uxtestingStore.testStats.tests_attempts) *
@@ -251,7 +251,6 @@ const ParticipantOverview = observer(() => {
               <Typography.Text>{uxtestingStore.testStats.tests_skipped}</Typography.Text>
             </div>
           </div>
-          <div className={'flex-1'} />
         </div>
       ) : null}
     </div>
@@ -284,7 +283,7 @@ const TaskSummary = observer(() => {
       </div>
       {!uxtestingStore.taskStats.length ? <NoContent show title={'No data'} /> : null}
       {uxtestingStore.taskStats.map((tst, index) => (
-        <Stage stage={tst} uxt index={index + 1} />
+        <Stage stage={{ ...tst, isActive: true }} uxt index={index + 1} />
       ))}
     </div>
   );
@@ -388,7 +387,7 @@ const Title = observer(({ testId, siteId }: any) => {
           <Button icon={<MoreOutlined rev={undefined} />}></Button>
         </Dropdown>
       </div>
-      <div className={'text-disabled-text whitespace-pre-wrap'}>
+      <div className={'whitespace-pre-wrap'}>
         {uxtestingStore.instance!.description}
       </div>
     </div>