diff --git a/frontend/app/components/UsabilityTesting/TestEdit.tsx b/frontend/app/components/UsabilityTesting/TestEdit.tsx index 8f3cddc14..d84f795c0 100644 --- a/frontend/app/components/UsabilityTesting/TestEdit.tsx +++ b/frontend/app/components/UsabilityTesting/TestEdit.tsx @@ -6,7 +6,7 @@ import { usabilityTestingView, usabilityTestingEdit, } from 'App/routes'; -import { useParams, useHistory } from 'react-router-dom'; +import { useParams, useHistory, Prompt } from 'react-router-dom'; import Breadcrumb from 'Shared/Breadcrumb'; import { EditOutlined, DeleteOutlined, MoreOutlined } from '@ant-design/icons'; import { useModal } from 'App/components/Modal'; @@ -20,7 +20,7 @@ import usePageTitle from 'App/hooks/usePageTitle'; const menuItems = [ { key: '1', - label: 'Change title/description', + label: 'Edit Title and Description', icon: , }, { @@ -31,6 +31,7 @@ const menuItems = [ ]; function TestEdit() { + const [hasChanged, setHasChanged] = React.useState(false); const { uxtestingStore } = useStore(); const [newTestTitle, setNewTestTitle] = React.useState(''); const [newTestDescription, setNewTestDescription] = React.useState(''); @@ -123,6 +124,12 @@ function TestEdit() { }, ]} /> + { + return 'You have unsaved changes. Are you sure you want to leave?'; + }} + /> setNewTestTitle(e.target.value)} + onChange={(e) => { + setHasChanged(true); + setNewTestTitle(e.target.value) + }} /> Test Objective (optional) setNewTestDescription(e.target.value)} + onChange={(e) => { + setHasChanged(true); + setNewTestDescription(e.target.value) + }} placeholder="Share a brief statement about what you aim to discover through this study." /> @@ -170,6 +183,7 @@ function TestEdit() { placeholder={'https://mywebsite.com/example-page'} value={uxtestingStore.instance!.startingPath} onChange={(e) => { + setHasChanged(true); uxtestingStore.instance!.setProperty('startingPath', e.target.value); }} /> @@ -185,7 +199,10 @@ function TestEdit() { rows={5} placeholder={'Enter a brief introduction to the test and its goals here. Follow with clear, step-by-step guidelines for participants.'} value={guidelines} - onChange={(e) => setGuidelines(e.target.value)} + onChange={(e) => { + setHasChanged(true); + setGuidelines(e.target.value) + }} /> ) : (
@@ -238,6 +255,7 @@ function TestEdit() { editTask={task} onHide={hideModal} onAdd={(task) => { + setHasChanged(true); const tasks = [...uxtestingStore.instance!.tasks]; tasks[index] = task; uxtestingStore.instance!.setProperty('tasks', tasks); @@ -248,6 +266,7 @@ function TestEdit() { }} />