jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): uxt fixes

Browse source
This commit is contained in:
nick-delirium 2023-12-01 17:27:19 +01:00
parent a85bf399b6
commit 9759ad41a9
2 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/app/components/UsabilityTesting/TestEdit.tsx
View file

@ -110,6 +110,7 @@ function TestEdit() {
}
};
const isPublished = uxtestingStore.instance.status !== undefined && uxtestingStore.instance.status !== 'preview'
return (
<div className="w-full mx-auto" style={{ maxWidth: '1360px' }}>
<Breadcrumb
@ -183,6 +184,7 @@ function TestEdit() {
<Input
style={{ width: 400 }}
type={'url'}
disabled={isPublished}
placeholder={'https://mywebsite.com/example-page'}
value={uxtestingStore.instance!.startingPath}
onChange={(e) => {
@ -252,7 +254,7 @@ function TestEdit() {
description={task.description}
buttons={
<>
<Button size={'small'} icon={<EditOutlined rev={undefined} />} onClick={() => {
<Button size={'small'} disabled={isPublished} icon={<EditOutlined rev={undefined} />} onClick={() => {
showModal(
<StepsModal
editTask={task}
@ -277,6 +279,7 @@ function TestEdit() {
)
);
}}
disabled={isPublished}
size={'small'}
icon={<DeleteOutlined rev={undefined} />}
/>
@ -288,6 +291,7 @@ function TestEdit() {
<Button
type={'primary'}
ghost
disabled={isPublished}
onClick={() =>
showModal(
<StepsModal

23
frontend/app/components/UsabilityTesting/TestOverview.tsx
View file

@ -186,22 +186,22 @@ const ParticipantOverview = observer(() => {
<div className={'p-4 rounded border bg-white mt-2'}>
<Typography.Title level={5}>Participant Overview</Typography.Title>
{uxtestingStore.testStats ? (
<div className={'flex gap-2'}>
<div className={'flex gap-4'}>
<div className={'rounded border p-2 flex-1'}>
<div className={'flex items-center gap-2'}>
<div className={'flex items-center gap-2 mb-2'}>
<UserOutlined style={{ fontSize: 18, color: '#394EFF' }} rev={undefined} />
<Typography.Text strong>Total Participants</Typography.Text>
</div>
<Typography.Title level={5}>{uxtestingStore.testStats.tests_attempts}</Typography.Title>
<Typography.Title level={4}>{uxtestingStore.testStats.tests_attempts}</Typography.Title>
</div>
<div className={'rounded border p-2 flex-1'}>
<div className={'flex items-center gap-2'}>
<div className={'flex items-center gap-2 mb-2'}>
<CheckCircleOutlined style={{ fontSize: 18, color: '#389E0D' }} rev={undefined} />
<Typography.Text strong>Completed all tasks</Typography.Text>
</div>
<div className={'flex items-center gap-2'}>
{uxtestingStore.testStats.tests_attempts > 0 ? (
<Typography.Title level={5}>
<Typography.Title level={4}>
{Math.round(
(uxtestingStore.testStats.completed_all_tasks /
uxtestingStore.testStats.tests_attempts) *
@ -214,13 +214,13 @@ const ParticipantOverview = observer(() => {
</div>
</div>
<div className={'rounded border p-2 flex-1'}>
<div className={'flex items-center gap-2'}>
<div className={'flex items-center gap-2 mb-2'}>
<FastForwardOutlined style={{ fontSize: 18, color: '#874D00' }} rev={undefined} />
<Typography.Text strong>Skipped tasks</Typography.Text>
</div>
<div className={'flex items-center gap-2'}>
{uxtestingStore.testStats.tests_attempts > 0 ? (
<Typography.Title level={5}>
<Typography.Title level={4}>
{Math.round(
(uxtestingStore.testStats.tasks_skipped /
uxtestingStore.testStats.tests_attempts) *
@ -233,13 +233,13 @@ const ParticipantOverview = observer(() => {
</div>
</div>
<div className={'rounded border p-2 flex-1'}>
<div className={'flex items-center gap-2'}>
<div className={'flex items-center gap-2 mb-2'}>
<UserDeleteOutlined style={{ fontSize: 18, color: '#CC0000' }} rev={undefined} />
<Typography.Text strong>Aborted the test</Typography.Text>
</div>
<div className={'flex items-center gap-2'}>
{uxtestingStore.testStats.tests_attempts > 0 ? (
<Typography.Title level={5}>
<Typography.Title level={4}>
{Math.round(
(uxtestingStore.testStats.tests_skipped /
uxtestingStore.testStats.tests_attempts) *
@ -251,7 +251,6 @@ const ParticipantOverview = observer(() => {
<Typography.Text>{uxtestingStore.testStats.tests_skipped}</Typography.Text>
</div>
</div>
<div className={'flex-1'} />
</div>
) : null}
</div>
@ -284,7 +283,7 @@ const TaskSummary = observer(() => {
</div>
{!uxtestingStore.taskStats.length ? <NoContent show title={'No data'} /> : null}
{uxtestingStore.taskStats.map((tst, index) => (
<Stage stage={tst} uxt index={index + 1} />
<Stage stage={{ ...tst, isActive: true }} uxt index={index + 1} />
))}
</div>
);
@ -388,7 +387,7 @@ const Title = observer(({ testId, siteId }: any) => {
<Button icon={<MoreOutlined rev={undefined} />}></Button>
</Dropdown>
</div>
<div className={'text-disabled-text whitespace-pre-wrap'}>
<div className={'whitespace-pre-wrap'}>
{uxtestingStore.instance!.description}
</div>
</div>