From c441f8a1ec83dee654cd64e418090f1fe1dfc137 Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Thu, 7 Dec 2023 10:35:25 +0100
Subject: [PATCH] fix(ui) uxt fixes

---
 .../components/UsabilityTesting/SidePanel.tsx |  6 +++---
 .../components/UsabilityTesting/TestEdit.tsx  | 20 +++++++++++++++----
 .../UsabilityTesting/UsabilityTesting.tsx     | 10 +++++-----
 frontend/app/utils/index.ts                   |  4 +++-
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/UsabilityTesting/SidePanel.tsx b/frontend/app/components/UsabilityTesting/SidePanel.tsx
index 17c766bbc..e6f798b90 100644
--- a/frontend/app/components/UsabilityTesting/SidePanel.tsx
+++ b/frontend/app/components/UsabilityTesting/SidePanel.tsx
@@ -4,7 +4,7 @@ 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 SidePanel = observer(({ onSave, onPreview, taskLen, isStartingPointValid }: any) => {
   const { uxtestingStore } = useStore();
   return (
     <div className={'flex flex-col gap-2 col-span-1'}>
@@ -38,14 +38,14 @@ const SidePanel = observer(({ onSave, onPreview, taskLen }: any) => {
       </div>
 
       <Tooltip title={taskLen === 0 ? 'Define the starting point and the tasks to proceed.' : ''}>
-        <Button type={'primary'} ghost onClick={onPreview} disabled={taskLen === 0}>
+        <Button type={'primary'} ghost onClick={onPreview} disabled={taskLen === 0 || !isStartingPointValid}>
           <Space align={'center'}>
             Save Draft & 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}>
+        <Button type={'primary'} onClick={onSave} disabled={taskLen === 0 || !isStartingPointValid}>
           Publish Test
         </Button>
       </Tooltip>
diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx
index bc9d3da78..6cfa67326 100644
--- a/frontend/app/components/UsabilityTesting/TestEdit.tsx
+++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx
@@ -1,4 +1,5 @@
 import { Button, Input, Typography, Dropdown, Modal } from 'antd';
+import { isValidUrl } from 'App/utils';
 import React from 'react';
 import {
   withSiteId,
@@ -16,7 +17,7 @@ import { confirm } from 'UI';
 import StepsModal from './StepsModal';
 import SidePanel from './SidePanel';
 import usePageTitle from 'App/hooks/usePageTitle';
-import { toast } from 'react-toastify'
+import { toast } from 'react-toastify';
 
 const menuItems = [
   {
@@ -119,6 +120,8 @@ function TestEdit() {
 
   const isPublished =
     uxtestingStore.instance.status !== undefined && uxtestingStore.instance.status !== 'preview';
+  const isStartingPointValid = isValidUrl(uxtestingStore.instance.startingPath);
+
   return (
     <div className="w-full mx-auto" style={{ maxWidth: '1360px' }}>
       <Breadcrumb
@@ -198,12 +201,16 @@ function TestEdit() {
               onChange={(e) => {
                 setHasChanged(true);
                 if (!e.target.value.startsWith('https://')) {
-                  e.target.value = 'https://' + e.target.value;
+                  e.target.value = 'https://';
                 }
                 uxtestingStore.instance!.setProperty('startingPath', e.target.value);
               }}
             />
-            <Typography.Text>Test will begin on this page.</Typography.Text>
+            {uxtestingStore.instance!.startingPath === 'https://' || isStartingPointValid ? (
+              <Typography.Text>Test will begin on this page.</Typography.Text>
+            ) : (
+              <Typography.Text color={'red'}>Starting point URL is invalid.</Typography.Text>
+            )}
           </div>
 
           <div className={'p-4 rounded bg-white border flex flex-col gap-2'}>
@@ -381,6 +388,7 @@ function TestEdit() {
           </div>
         </div>
         <SidePanel
+          isStartingPointValid={isStartingPointValid}
           taskLen={uxtestingStore.instance.tasks.length}
           onSave={() => onSave(false)}
           onPreview={() => onSave(true)}
@@ -404,7 +412,11 @@ export function Step({
   hover?: boolean;
 }) {
   return (
-    <div className={`p-4 rounded border ${hover ? 'bg-white hover:' : ''}bg-active-blue flex items-start gap-2`}>
+    <div
+      className={`p-4 rounded border ${
+        hover ? 'bg-white hover:' : ''
+      }bg-active-blue flex items-start gap-2`}
+    >
       <div className={'w-6 h-6 bg-white rounded-full border flex items-center justify-center'}>
         {ind + 1}
       </div>
diff --git a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
index 839621d95..11ba2e859 100644
--- a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
+++ b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx
@@ -95,7 +95,7 @@ function TestsTable() {
         />
         <Typography.Text strong>Test Objective (optional)</Typography.Text>
         <Input.TextArea
-          rows={5}
+          rows={9}
           value={newTestDescription}
           onChange={(e) => setNewTestDescription(e.target.value)}
           placeholder="Share a brief statement about what you aim to discover through this study."
@@ -175,10 +175,10 @@ function TestsTable() {
 }
 
 const statusMap = {
-  preview: "Preview",
-  'in-progress': "In progress",
-  paused: "Paused",
-  closed: "Completed",
+  preview: "Draft",
+  'in-progress': "Ongoing",
+  paused: "On Hold",
+  closed: "Closed",
 }
 
 function Row({ test, siteId }: { test: UxTListEntry, siteId: string }) {
diff --git a/frontend/app/utils/index.ts b/frontend/app/utils/index.ts
index 3b9f2d3ea..bb7d32e3a 100644
--- a/frontend/app/utils/index.ts
+++ b/frontend/app/utils/index.ts
@@ -464,4 +464,6 @@ export const checkParam = (paramName: string, storageKey?: string, search?: stri
   }
 
   return existsAndTrue;
-};
\ No newline at end of file
+};
+
+export const isValidUrl = (url) => /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/.test(url);
\ No newline at end of file