diff --git a/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx b/frontend/app/components/UsabilityTesting/LiveTestsModal.tsx
new file mode 100644
index 000000000..18c6c33c9
--- /dev/null
+++ b/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 (
+
+
+
Live Participants
+
setUserId(e.target.value)}
+ onSearch={() => refreshData(page)}
+ />
+
+ {uxtestingStore.testAssistSessions.list.map((s: any) => (
+
+ ))}
+
+
+ Showing{' '}
+ {(uxtestingStore.testSessions.page - 1) * 10 + 1} to{' '}
+
+ {(uxtestingStore.page - 1) * 10 + uxtestingStore.testSessions.list.length}
+ {' '}
+ of{' '}
+ {numberWithCommas(uxtestingStore.testSessions.total)}{' '}
+ ongoing tests.
+
+
+
+
+ );
+}
+
+export default observer(LiveTestsModal);
diff --git a/frontend/app/components/UsabilityTesting/TestOverview.tsx b/frontend/app/components/UsabilityTesting/TestOverview.tsx
index c60658c9d..cf333eb24 100644
--- a/frontend/app/components/UsabilityTesting/TestOverview.tsx
+++ b/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: },
{ value: 'in-progress', label: 'Ongoing', icon: },
{ value: 'paused', label: 'On Hold', icon: },
{ value: 'closed', label: 'Closed', icon: },
@@ -104,7 +104,9 @@ function TestOverview() {
{uxtestingStore.instance.liveCount} participants are engaged in this usability test at
the moment.
-