diff --git a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx index 3adec71fe..14a4370a1 100644 --- a/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx +++ b/frontend/app/components/UsabilityTesting/UsabilityTesting.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { UxTListEntry } from "App/services/UxtestingService"; +import { UxTListEntry } from 'App/services/UxtestingService'; import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; import { numberWithCommas } from 'App/utils'; import { Button, Input, Typography, Tag, Modal, Space } from 'antd'; import AnimatedSVG from 'Shared/AnimatedSVG'; import { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; -import { Loader, NoContent, Pagination, Link, Icon } from "UI"; +import { Loader, NoContent, Pagination, Link, Icon } from 'UI'; import { checkForRecent, getDateFromMill } from 'App/date'; import { UnorderedListOutlined, ArrowRightOutlined } from '@ant-design/icons'; import { useHistory, useParams } from 'react-router-dom'; @@ -18,8 +18,9 @@ const { Search } = Input; const PER_PAGE = 10; -let debouncedSearch: any = () => null -const defaultDescription = `To evaluate the usability of [Feature Name], focusing on user interaction, efficiency, and satisfaction. The aim is to identify any usability issues that users may encounter, understand how they navigate [Feature Name], and gauge the intuitiveness of the workflow.` +let debouncedSearch: any = () => null; +const defaultDescription = `To evaluate the usability of [Feature Name], focusing on user interaction, efficiency, and satisfaction. The aim is to identify any usability issues that users may encounter, understand how they navigate [Feature Name], and gauge the intuitiveness of the workflow.`; + function TestsTable() { const inputRef = React.useRef(null); const [newTestTitle, setNewTestTitle] = React.useState(''); @@ -29,12 +30,12 @@ function TestsTable() { const onSearch = (value: string) => { uxtestingStore.setQuery(value); - debouncedSearch() - } + debouncedSearch(); + }; React.useEffect(() => { uxtestingStore.getList(); - debouncedSearch = debounce(uxtestingStore.getList, 500) + debouncedSearch = debounce(uxtestingStore.getList, 500); }, []); const onPageChange = (page: number) => { @@ -68,7 +69,7 @@ function TestsTable() { }; return ( -
+
-
-
Test Title
-
Created by
-
Updated at
-
Status
-
-
- - - -
- {uxtestingStore.searchQuery === '' - ? "You haven't created any usability tests yet" - : 'No matching results'} -
+ + + + {uxtestingStore.searchQuery === '' ? ( + + ) : null} +
+ {uxtestingStore.searchQuery === '' + ? 'Uncover real user insights through usability tests.' + : 'No results matching your search'}
- } - > +
+ {uxtestingStore.searchQuery === '' + ? 'Conduct summative testing to observe task completion and iterate your product.' + : ''} +
+
+ } + > +
+
Test Title
+
Created by
+
Updated at
+
Status
+
+
{uxtestingStore.tests.map((test) => ( ))} - - -
+
+ +
{uxtestingStore.isLoading || uxtestingStore.tests?.length === 0 ? null : ( <> @@ -175,32 +184,38 @@ function TestsTable() { } const statusMap = { - preview: "Draft", - 'in-progress': "Ongoing", - paused: "On Hold", - closed: "Closed", -} + preview: 'Draft', + 'in-progress': 'Ongoing', + paused: 'On Hold', + closed: 'Closed', +}; -function Row({ test, siteId }: { test: UxTListEntry, siteId: string }) { - const link = usabilityTestingView(test.testId.toString()) - const editLink = usabilityTestingEdit(test.testId.toString()) - const history = useHistory() +function Row({ test, siteId }: { test: UxTListEntry; siteId: string }) { + const link = usabilityTestingView(test.testId.toString()); + const editLink = usabilityTestingEdit(test.testId.toString()); + const history = useHistory(); const redirect = () => { - history.push(withSiteId(test.status === 'preview' ? editLink : link, siteId)) - } + history.push(withSiteId(test.status === 'preview' ? editLink : link, siteId)); + }; return ( -
+
-
+
- {/*} />*/} + {/*} />*/}
- + {test.title}
@@ -210,7 +225,9 @@ function Row({ test, siteId }: { test: UxTListEntry, siteId: string }) {
{test.createdBy.name} - {checkForRecent(getDateFromMill(test.updatedAt)!, 'LLL dd, yyyy, hh:mm a')} + + {checkForRecent(getDateFromMill(test.updatedAt)!, 'LLL dd, yyyy, hh:mm a')} + {statusMap[test.status]} @@ -223,10 +240,10 @@ const colors = { closed: 'grey', paused: 'orange', preview: 'geekblue', -} as const +} as const; function Cell({ size, children }: { size: number; children?: React.ReactNode }) { return
{children}
; } -export default withPageTitle('Usability Tests')(observer(TestsTable)) +export default withPageTitle('Usability Tests')(observer(TestsTable)); diff --git a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx index 26f95aed8..df7685b3a 100644 --- a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx +++ b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx @@ -27,6 +27,7 @@ export enum ICONS { NO_PROJECTS = 'ca-no-projects', NO_FFLAGS = 'no-fflags', PROCESSING = 'ca-processing', + NO_UXT = 'ca-no-uxt', } const ICONS_SVGS = { @@ -56,6 +57,7 @@ const ICONS_SVGS = { [ICONS.NO_PROJECTS]: require('../../../svg/ca-no-projects.svg').default, [ICONS.NO_FFLAGS]: require('../../../svg/no-fflags.svg').default, [ICONS.PROCESSING]: require('../../../svg/ca-processing.svg').default, + [ICONS.NO_UXT]: require('../../../svg/empty-uxt-list.svg').default, }; interface Props { diff --git a/frontend/app/svg/empty-uxt-list.svg b/frontend/app/svg/empty-uxt-list.svg new file mode 100644 index 000000000..215b1cee2 --- /dev/null +++ b/frontend/app/svg/empty-uxt-list.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + +