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

---
 .../components/UsabilityTesting/TestEdit.tsx  |   1 -
 .../UsabilityTesting/TestOverview.tsx         | 156 +++++++++---------
 .../UsabilityTesting/UsabilityTesting.tsx     |  18 +-
 frontend/app/services/UxtestingService.ts     |   2 +-
 4 files changed, 91 insertions(+), 86 deletions(-)

diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx
index dd3827ba2..80ba4fe1d 100644
--- a/frontend/app/components/UsabilityTesting/TestEdit.tsx
+++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx
@@ -66,7 +66,6 @@ function TestEdit() {
       });
     } else {
       uxtestingStore.createNewTest(isPreview).then((test) => {
-        console.log(test);
         if (isPreview) {
           window.open(`${test.startingPath}?oruxt=${test.testId}`, '_blank', 'noopener,noreferrer');
           history.push(withSiteId(usabilityTestingEdit(test.testId), siteId));
diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx
index 2759ff284..c60658c9d 100644
--- a/frontend/app/components/UsabilityTesting/TestOverview.tsx
+++ b/frontend/app/components/UsabilityTesting/TestOverview.tsx
@@ -1,5 +1,5 @@
 import { durationFormatted } from 'App/date';
-import usePageTitle from "App/hooks/usePageTitle";
+import usePageTitle from 'App/hooks/usePageTitle';
 import { numberWithCommas } from 'App/utils';
 import { getPdf2 } from 'Components/AssistStats/pdfGenerator';
 import { useModal } from 'Components/Modal';
@@ -36,10 +36,10 @@ import ResponsesOverview from './ResponsesOverview';
 const { Option } = Select;
 
 const statusItems = [
-  { value: 'preview', label: 'Preview', icon: <HourglassOutlined rev={undefined} /> },
-  { value: 'in-progress', label: 'In Progress', icon: <HourglassOutlined rev={undefined} /> },
-  { value: 'paused', label: 'Pause', icon: <PauseCircleOutlined rev={undefined} /> },
-  { value: 'closed', label: 'End Testing', icon: <StopOutlined rev={undefined} /> },
+  { value: 'preview', label: 'Draft', icon: <HourglassOutlined rev={undefined} /> },
+  { value: 'in-progress', label: 'Ongoing', icon: <HourglassOutlined rev={undefined} /> },
+  { value: 'paused', label: 'On Hold', icon: <PauseCircleOutlined rev={undefined} /> },
+  { value: 'closed', label: 'Closed', icon: <StopOutlined rev={undefined} /> },
 ];
 
 const menuItems = [
@@ -71,7 +71,6 @@ function TestOverview() {
     uxtestingStore.getTest(testId);
   }, [testId]);
 
-
   if (!uxtestingStore.instance) {
     return <Loader loading={uxtestingStore.isLoading}>No data.</Loader>;
   }
@@ -81,7 +80,7 @@ function TestOverview() {
   };
 
   return (
-    <div className="w-full mx-auto" style={{ maxWidth: '1360px'}}>
+    <div className="w-full mx-auto" style={{ maxWidth: '1360px' }}>
       <Breadcrumb
         items={[
           {
@@ -117,7 +116,6 @@ function TestOverview() {
       <ParticipantOverview />
       <TaskSummary />
 
-
       <div className={'mt-2 rounded border p-4 bg-white flex gap-2 items-center'}>
         <Typography.Title style={{ marginBottom: 0 }} level={5}>
           Open-ended task responses
@@ -192,9 +190,7 @@ const ParticipantOverview = observer(() => {
               <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={5}>{uxtestingStore.testStats.tests_attempts}</Typography.Title>
           </div>
           <div className={'rounded border p-2 flex-1'}>
             <div className={'flex items-center gap-2'}>
@@ -207,7 +203,7 @@ const ParticipantOverview = observer(() => {
                   {Math.round(
                     (uxtestingStore.testStats.completed_all_tasks /
                       uxtestingStore.testStats.tests_attempts) *
-                    100
+                      100
                   )}
                   %
                 </Typography.Title>
@@ -226,7 +222,7 @@ const ParticipantOverview = observer(() => {
                   {Math.round(
                     (uxtestingStore.testStats.tasks_skipped /
                       uxtestingStore.testStats.tests_attempts) *
-                    100
+                      100
                   )}
                   %
                 </Typography.Title>
@@ -245,7 +241,7 @@ const ParticipantOverview = observer(() => {
                   {Math.round(
                     (uxtestingStore.testStats.tests_skipped /
                       uxtestingStore.testStats.tests_attempts) *
-                    100
+                      100
                   )}
                   %
                 </Typography.Title>
@@ -257,8 +253,8 @@ const ParticipantOverview = observer(() => {
         </div>
       ) : null}
     </div>
-  )
-})
+  );
+});
 
 const TaskSummary = observer(() => {
   const { uxtestingStore } = useStore();
@@ -273,11 +269,11 @@ const TaskSummary = observer(() => {
             <Typography.Text strong>
               {uxtestingStore.taskStats
                 ? durationFormatted(
-                  uxtestingStore.taskStats.reduce(
-                    (stats, task) => stats + task.avgCompletionTime,
-                    0
-                  ) / uxtestingStore.taskStats.length
-                )
+                    uxtestingStore.taskStats.reduce(
+                      (stats, task) => stats + task.avgCompletionTime,
+                      0
+                    ) / uxtestingStore.taskStats.length
+                  )
                 : null}
             </Typography.Text>
             <ClockCircleOutlined rev={undefined} />
@@ -289,8 +285,8 @@ const TaskSummary = observer(() => {
         <Stage stage={tst} uxt index={index + 1} />
       ))}
     </div>
-  )
-})
+  );
+});
 
 const Title = observer(({ testId, siteId }: any) => {
   const { uxtestingStore } = useStore();
@@ -333,65 +329,67 @@ const Title = observer(({ testId, siteId }: any) => {
   };
 
   return (
-    <div className={'p-4 flex items-center gap-2 border-b'}>
-      <div>
+    <div className={'p-4 border-b'}>
+      <div className={'flex items-center gap-2'}>
         <Typography.Title level={4}>{uxtestingStore.instance!.title}</Typography.Title>
-        <div className={'text-disabled-text'}>{uxtestingStore.instance!.description}</div>
-      </div>
-      <div className={'ml-auto'} />
-      <Select
-        value={uxtestingStore.instance!.status}
-        style={{ width: 150 }}
-        onChange={handleChange}
-      >
-        {statusItems.map((item) => (
-          <Option key={item.value} value={item.value} label={item.label}>
-            <Space align={'center'}>
-              {item.icon} {item.label}
-            </Space>
-          </Option>
-        ))}
-      </Select>
-      <Button type={'primary'} onClick={redirectToEdit}>
-        <Space align={'center'}>
-          {uxtestingStore.instance!.tasks.length} Tasks <EditOutlined rev={undefined} />{' '}
-        </Space>
-      </Button>
-      <Popover
-        trigger={'click'}
-        title={'Participants Link'}
-        content={
-          <div style={{ width: '220px' }}>
-            <div className={'p-2 bg-white rounded border break-all mb-2'}>
-              {`${uxtestingStore.instance!.startingPath}?oruxt=${
-                uxtestingStore.instance!.testId
-              }`}
-            </div>
-            <Button
-              onClick={() => {
-                copy(
-                  `${uxtestingStore.instance!.startingPath}?oruxt=${
-                    uxtestingStore.instance!.testId
-                  }`
-                );
-              }}
-            >
-              Copy
-            </Button>
-          </div>
-        }
-      >
-        <Button type={'primary'} ghost>
+        <div className={'ml-auto'} />
+        <Select
+          value={uxtestingStore.instance!.status}
+          style={{ width: 150 }}
+          onChange={handleChange}
+        >
+          {statusItems.map((item) => (
+            <Option key={item.value} value={item.value} label={item.label}>
+              <Space align={'center'}>
+                {item.icon} {item.label}
+              </Space>
+            </Option>
+          ))}
+        </Select>
+        <Button type={'primary'} onClick={redirectToEdit}>
           <Space align={'center'}>
-            Distribute
-            <ShareAltOutlined rev={undefined} />
+            {uxtestingStore.instance!.tasks.length} Tasks <EditOutlined rev={undefined} />{' '}
           </Space>
         </Button>
-      </Popover>
-      <Dropdown menu={{ items: menuItems, onClick: onMenuClick }}>
-        <Button icon={<MoreOutlined rev={undefined} />}></Button>
-      </Dropdown>
+        <Popover
+          trigger={'click'}
+          title={'Participants Link'}
+          content={
+            <div style={{ width: '220px' }}>
+              <div className={'p-2 bg-white rounded border break-all mb-2'}>
+                {`${uxtestingStore.instance!.startingPath}?oruxt=${
+                  uxtestingStore.instance!.testId
+                }`}
+              </div>
+              <Button
+                onClick={() => {
+                  copy(
+                    `${uxtestingStore.instance!.startingPath}?oruxt=${
+                      uxtestingStore.instance!.testId
+                    }`
+                  );
+                }}
+              >
+                Copy
+              </Button>
+            </div>
+          }
+        >
+          <Button type={'primary'} ghost>
+            <Space align={'center'}>
+              Distribute
+              <ShareAltOutlined rev={undefined} />
+            </Space>
+          </Button>
+        </Popover>
+        <Dropdown menu={{ items: menuItems, onClick: onMenuClick }}>
+          <Button icon={<MoreOutlined rev={undefined} />}></Button>
+        </Dropdown>
+      </div>
+      <div className={'text-disabled-text whitespace-pre-wrap'}>
+        {uxtestingStore.instance!.description}
+      </div>
     </div>
-  )
-})
+  );
+});
 export default observer(TestOverview);
diff --git a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
index b893759a3..0982fa5e7 100644
--- a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
+++ b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
@@ -172,21 +172,22 @@ const statusMap = {
   preview: "Preview",
   'in-progress': "In progress",
   paused: "Paused",
-  completed: "Completed",
+  closed: "Completed",
 }
 
 function Row({ test }: { test: UxTListEntry }) {
   const link = usabilityTestingView(test.testId.toString())
+  const editLink = usabilityTestingEdit(test.testId.toString())
   return (
     <div className={'grid grid-cols-8 p-4 border-b hover:bg-active-blue'}>
       <Cell size={4}>
         <div className={'flex items-center gap-2'}>
           <Avatar size={'large'} icon={<UnorderedListOutlined rev={undefined} />} />
-          <div>
-            <Link className='link' to={link}>
+          <div style={{ maxWidth: 550 }}>
+            <Link className='link' to={test.status === 'preview' ? editLink : link}>
               {test.title}
             </Link>
-            <div className={'text-disabled-text'}>
+            <div className={'text-disabled-text whitespace-nowrap text-ellipsis overflow-hidden'}>
               {test.description}
             </div>
           </div>
@@ -195,12 +196,19 @@ function Row({ test }: { test: UxTListEntry }) {
       <Cell size={1}>{test.createdBy.name}</Cell>
       <Cell size={2}>{checkForRecent(getDateFromMill(test.updatedAt)!, 'LLL dd, yyyy, hh:mm a')}</Cell>
       <Cell size={1}>
-        <Tag color={test.status === 'in-progress' ? "orange" : ''}>{statusMap[test.status]}</Tag>
+        <Tag color={colors[test.status]}>{statusMap[test.status]}</Tag>
       </Cell>
     </div>
   );
 }
 
+const colors = {
+  'in-progress': 'green',
+  closed: 'geekblue',
+  paused: 'grey',
+  preview: 'orange',
+} as const
+
 function Cell({ size, children }: { size: number; children?: React.ReactNode }) {
   return <div className={`col-span-${size}`}>{children}</div>;
 }
diff --git a/frontend/app/services/UxtestingService.ts b/frontend/app/services/UxtestingService.ts
index f768a482c..19c177935 100644
--- a/frontend/app/services/UxtestingService.ts
+++ b/frontend/app/services/UxtestingService.ts
@@ -35,7 +35,7 @@ export interface UxTest {
 
 export interface UxTListEntry {
  createdAt: string;
- status: 'preview' | 'in-progress' | 'paused' | 'completed';
+ status: 'preview' | 'in-progress' | 'paused' | 'closed';
   createdBy: {
     userId: number;
     name: string;