fix(ui): uxt fixes

frontend/app/components/UsabilityTesting/LiveTestsModal.tsx

@@ -6,7 +6,7 @@ import SessionItem from 'Shared/SessionItem';
 import { Pagination } from 'UI';
 import { observer } from 'mobx-react-lite';
 
-function LiveTestsModal({ testId }: { testId: string }) {
+function LiveTestsModal({ testId, closeModal }: { testId: string, closeModal: () => void }) {
   const [page, setPage] = React.useState(1);
   const [userId, setUserId] = React.useState('');
   const { uxtestingStore } = useStore();
@@ -32,7 +32,7 @@ function LiveTestsModal({ testId }: { testId: string }) {
         />
       </div>
       {uxtestingStore.testAssistSessions.list.map((s: any) => (
-        <SessionItem key={s.sessionId} session={s} live />
+        <SessionItem onClick={closeModal} key={s.sessionId} session={s} live />
       ))}
       <div className={'flex items-center justify-between'}>
         <div>

frontend/app/components/UsabilityTesting/TestEdit.tsx

@@ -121,7 +121,7 @@ function TestEdit() {
           },
           {
             label: uxtestingStore.instance.title,
-            to: withSiteId(usabilityTestingView(testId), siteId),
+            to: isPublished ? withSiteId(usabilityTestingView(testId), siteId) : undefined,
           },
           {
             label: 'Edit',

frontend/app/components/UsabilityTesting/TestOverview.tsx

@@ -63,7 +63,7 @@ const menuItems = [
 function TestOverview() {
   // @ts-ignore
   const { siteId, testId } = useParams();
-  const { showModal } = useModal();
+  const { showModal, hideModal } = useModal();
   const { uxtestingStore } = useStore();
   usePageTitle(`Usability Tests | ${uxtestingStore.instance?.title || ''}`);
 
@@ -105,7 +105,7 @@ function TestOverview() {
               the moment.
             </Typography.Text>
             <Button onClick={() => {
-              showModal(<LiveTestsModal testId={testId} />, { right: true, width: 900 })
+              showModal(<LiveTestsModal closeModal={hideModal} testId={testId} />, { right: true, width: 900 })
             }}>
               <Space align={'center'}>
                 Moderate Real-Time
@@ -290,6 +290,7 @@ const TaskSummary = observer(() => {
 });
 
 const Title = observer(({ testId, siteId }: any) => {
+  const [truncate, setTruncate] = React.useState(true);
   const { uxtestingStore } = useStore();
   const history = useHistory();
 
@@ -317,6 +318,12 @@ const Title = observer(({ testId, siteId }: any) => {
       }
     }
   };
+
+  if (!uxtestingStore.instance) {
+    return null;
+  }
+
+  const truncatedDescr = uxtestingStore.instance.description.length > 250 && truncate ? uxtestingStore.instance?.description.substring(0, 250) + '...' : uxtestingStore.instance?.description;
   const redirectToEdit = async () => {
     if (
       await confirm({
@@ -388,8 +395,9 @@ const Title = observer(({ testId, siteId }: any) => {
         </Dropdown>
       </div>
       <div className={'whitespace-pre-wrap'}>
-        {uxtestingStore.instance!.description}
+        {truncatedDescr}
       </div>
+      {uxtestingStore.instance.description.length > 250 ? (<div className={'link'} onClick={() => setTruncate(!truncate)}>{truncate ? 'Show more' : 'Show less'}</div>) : null}
     </div>
   );
 });