fix(ui): uxt fixes

frontend/app/components/UsabilityTesting/LiveTestsModal.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { useStore } from 'App/mstore';
+import { numberWithCommas } from 'App/utils';
+import { Input } from 'antd';
+import SessionItem from 'Shared/SessionItem';
+import { Pagination } from 'UI';
+import { observer } from 'mobx-react-lite';
+
+function LiveTestsModal({ testId }: { testId: string }) {
+  const [page, setPage] = React.useState(1);
+  const [userId, setUserId] = React.useState('');
+  const { uxtestingStore } = useStore();
+
+  React.useEffect(() => {
+    uxtestingStore.getAssistSessions(testId, page, undefined);
+  }, []);
+
+  const refreshData = (page: number) => {
+    setPage(page);
+    uxtestingStore.getAssistSessions(testId, page, userId);
+  };
+
+  return (
+    <div className={'h-screen p-4 bg-white'}>
+      <div className={'border-b flex items-center justify-between'}>
+        <div>Live Participants</div>
+        <Input.Search
+          allowClear
+          placeholder="Search by participant ID or name"
+          onChange={(e) => setUserId(e.target.value)}
+          onSearch={() => refreshData(page)}
+        />
+      </div>
+      {uxtestingStore.testAssistSessions.list.map((s: any) => (
+        <SessionItem key={s.sessionId} session={s} live />
+      ))}
+      <div className={'flex items-center justify-between'}>
+        <div>
+          Showing{' '}
+          <span className="font-medium">{(uxtestingStore.testSessions.page - 1) * 10 + 1}</span> to{' '}
+          <span className="font-medium">
+            {(uxtestingStore.page - 1) * 10 + uxtestingStore.testSessions.list.length}
+          </span>{' '}
+          of{' '}
+          <span className="font-medium">{numberWithCommas(uxtestingStore.testSessions.total)}</span>{' '}
+          ongoing tests.
+        </div>
+        <Pagination
+          page={uxtestingStore.testAssistSessions.page}
+          totalPages={Math.ceil(uxtestingStore.testAssistSessions.total / 10)}
+          onPageChange={refreshData}
+          limit={10}
+          debounceRequest={200}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default observer(LiveTestsModal);

frontend/app/components/UsabilityTesting/TestOverview.tsx

@@ -3,6 +3,7 @@ import usePageTitle from 'App/hooks/usePageTitle';
 import { numberWithCommas } from 'App/utils';
 import { getPdf2 } from 'Components/AssistStats/pdfGenerator';
 import { useModal } from 'Components/Modal';
+import LiveTestsModal from "Components/UsabilityTesting/LiveTestsModal";
 import React from 'react';
 import { Button, Typography, Select, Space, Popover, Dropdown } from 'antd';
 import { withSiteId, usabilityTesting, usabilityTestingEdit } from 'App/routes';
@@ -36,7 +37,6 @@ import ResponsesOverview from './ResponsesOverview';
 const { Option } = Select;
 
 const statusItems = [
-  { 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} /> },
@@ -104,7 +104,9 @@ function TestOverview() {
               {uxtestingStore.instance.liveCount} participants are engaged in this usability test at
               the moment.
             </Typography.Text>
-            <Button>
+            <Button onClick={() => {
+              showModal(<LiveTestsModal testId={testId} />, { right: true, width: 600 })
+            }}>
               <Space align={'center'}>
                 Moderate Real-Time
                 <ArrowRightOutlined rev={undefined} />

frontend/app/mstore/uxtestingStore.ts

@@ -45,8 +45,9 @@ Test Guidelines:
 4. Pace Yourself: Take your time, there's no rush to complete the tasks quickly.
 
 5. Technical Issues: If you encounter any issues, please describe what you were attempting to do when the issue occurred.
-`
-const defaultConclusion = 'Thank you for participating in our usability test. Your feedback is invaluable to us and will contribute significantly to improving our product.'
+`;
+const defaultConclusion =
+  'Thank you for participating in our usability test. Your feedback is invaluable to us and will contribute significantly to improving our product.';
 
 export default class UxtestingStore {
   client = uxtestingService;
@@ -58,6 +59,11 @@ export default class UxtestingStore {
   searchQuery: string = '';
   testStats: Stats | null = null;
   testSessions: { list: Session[]; total: number; page: number } = { list: [], total: 0, page: 1 };
+  testAssistSessions: { list: Session[]; total: number; page: number } = {
+    list: [],
+    total: 0,
+    page: 1,
+  };
   taskStats: TaskStats[] = [];
   isLoading: boolean = false;
   responses: Record<number, { list: Response[]; total: number }> = {};
@@ -206,7 +212,7 @@ export default class UxtestingStore {
     try {
       const test = await this.client.fetchTest(testId);
       this.setInstance(new UxTestInst(test));
-      return this.instance
+      return this.instance;
     } catch (e) {
       console.error(e);
     } finally {
@@ -228,12 +234,29 @@ export default class UxtestingStore {
 
   setSessionsPage(page: number) {
     this.testSessions.page = page;
-    this.client.fetchTestSessions(this.instance!.testId!.toString(), this.testSessions.page, 10)
+    this.client
+      .fetchTestSessions(this.instance!.testId!.toString(), this.testSessions.page, 10)
       .then((result) => {
-        this.setTestSessions(result)
-      })
+        this.setTestSessions(result);
+      });
   }
 
+  setAssistSessions = (sessions: { list: Session[]; total: number; page: number }) => {
+    this.testAssistSessions = sessions;
+  };
+
+  getAssistSessions = async (testId: string, page: number, userId?: string) => {
+    this.setLoading(true);
+    try {
+      const sessions = await this.client.fetchTestSessions(testId, page, 10, true, userId);
+      this.setAssistSessions(sessions);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      this.setLoading(false);
+    }
+  };
+
   getTest = async (testId: string) => {
     this.setLoading(true);
     try {

frontend/app/services/UxtestingService.ts

@@ -81,8 +81,8 @@ export default class UxtestingService extends BaseService {
     return j.data || [];
   }
 
-  async fetchTestSessions(id: string, page: number, limit: number) {
-    const r = await this.client.get(`${this.prefix}/${id}/sessions`, { page, limit });
+  async fetchTestSessions(id: string, page: number, limit: number, isLive?: boolean, userId?: string) {
+    const r = await this.client.get(`${this.prefix}/${id}/sessions`, { page, limit, live: isLive, userId });
     return await r.json();
   }