From 27664444a5d5ac37f4838961ac4c20154992637d Mon Sep 17 00:00:00 2001
From: Open TAK server <opentak@netherlands.fable-jazz.ts.net>
Date: Mon, 27 Apr 2026 06:23:02 +0000
Subject: [PATCH] fix: reset Mission dialog title and warn on unsaved changes

Addresses issues 1 and 2 of brian7704/OpenTAKServer-UI#180.

- New Mission button now resets the dialog title back to "Add Mission"
  after the user has previously opened the Edit dialog.
- Modal close (outside-click / ESC / x button) now opens a confirmation
  prompt when the form has unsaved changes, instead of discarding them
  silently.

Issue 3 (password removal) needs a backend change in
brian7704/OpenTAKServer mission_api.py and is out of scope for this PR.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/pages/Missions.tsx | 27 +++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/pages/Missions.tsx b/src/pages/Missions.tsx
index b197b81..165ba8e 100644
--- a/src/pages/Missions.tsx
+++ b/src/pages/Missions.tsx
@@ -58,6 +58,8 @@ export default function Missions() {
     const [addEditTitle, setAddEditTitle] = useState(t("Add Mission"));
     const [selectedGroups, setSelectedGroups] = useState<string[]>([]);
     const [loading, setLoading] = useState(false);
+    const [isDirty, setIsDirty] = useState(false);
+    const [showUnsavedWarning, setShowUnsavedWarning] = useState(false);
     const [sortStatus, setSortStatus] = useState<DataTableSortStatus<MissionProperties>>({
         columnAccessor: 'name',
         direction: 'asc',
@@ -156,6 +158,7 @@ export default function Missions() {
                                 });
                                 setShowAddMission(true);
                                 setAddEditTitle(t("Edit Mission"));
+                                setIsDirty(false);
                                 let selected_groups: string[] = [];
                                 row.groups.map((group: any) => {
                                     selected_groups.push("" + group.id);
@@ -397,9 +400,15 @@ export default function Missions() {
                     <Button onClick={() => setDeleteMissionOpen(false)}>No</Button>
                 </Center>
             </Modal>
-            <Modal opened={showAddMission} onClose={() => {setShowAddMission(false);}} title={addEditTitle}>
-                <TextInput defaultValue={missionProperties.name} required placeholder={t("Mission")} label={t("Name")} onChange={e => { missionProperties.name = e.target.value; }} mb="md" />
-                <TextInput defaultValue={missionProperties.description} placeholder={t("Description")} label={t("Description")} onChange={e => { missionProperties.description = e.target.value; }} mb="md" />
+            <Modal opened={showUnsavedWarning} onClose={() => setShowUnsavedWarning(false)} title={t("Discard unsaved changes?")}>
+                <Center>
+                    <Button mr="md" color="red" onClick={() => { setShowUnsavedWarning(false); setIsDirty(false); setShowAddMission(false); }}>{t("Discard")}</Button>
+                    <Button onClick={() => setShowUnsavedWarning(false)}>{t("Keep editing")}</Button>
+                </Center>
+            </Modal>
+            <Modal opened={showAddMission} onClose={() => { if (isDirty) { setShowUnsavedWarning(true); } else { setShowAddMission(false); } }} title={addEditTitle}>
+                <TextInput defaultValue={missionProperties.name} required placeholder={t("Mission")} label={t("Name")} onChange={e => { missionProperties.name = e.target.value; setIsDirty(true); }} mb="md" />
+                <TextInput defaultValue={missionProperties.description} placeholder={t("Description")} label={t("Description")} onChange={e => { missionProperties.description = e.target.value; setIsDirty(true); }} mb="md" />
                 <MultiSelect
                     pb="md"
                     placeholder={t("Search")}
@@ -408,12 +417,12 @@ export default function Missions() {
                     nothingFoundMessage={t("Nothing found...")}
                     label={t("Groups")}
                     defaultValue={selectedGroups}
-                    onChange={(value) => {setGroups(value)}}
+                    onChange={(value) => { setGroups(value); setIsDirty(true); }}
                     data={allGroups} />
                 <Select
                     required
                     label={t("Default Role")}
-                    onChange={e => { missionProperties.default_role = String(e); }}
+                    onChange={e => { missionProperties.default_role = String(e); setIsDirty(true); }}
                     data={[{value: 'MISSION_SUBSCRIBER', label: t('Subscriber')}, {value: 'MISSION_OWNER', label: t('Owner')}, {value: 'MISSION_READ_ONLY', label: t('Read Only')}]}
                     mb="md"
                     defaultValue={missionProperties.default_role || "MISSION_SUBSCRIBER"}
@@ -426,16 +435,18 @@ export default function Missions() {
                     nothingFoundMessage={t("Nothing found...")}
                     label={t("Creator")}
                     description={t("The callsign of the EUD that owns this mission")}
-                    onChange={(value, option) => {missionProperties.creator_uid = option.value;}}
+                    onChange={(value, option) => { missionProperties.creator_uid = option.value; setIsDirty(true); }}
                     data={callsigns}
                     defaultValue={missionProperties.creator_uid}
                     allowDeselect={false}
                     mb="md" />
-                <PasswordInput defaultValue={missionProperties.password} label={t("Password")} onChange={e => { missionProperties.password = e.target.value; }} mb="md" />
-                <Button onClick={() => {add_mission()}}>{addEditTitle}</Button>
+                <PasswordInput defaultValue={missionProperties.password} label={t("Password")} onChange={e => { missionProperties.password = e.target.value; setIsDirty(true); }} mb="md" />
+                <Button onClick={() => { setIsDirty(false); add_mission(); }}>{addEditTitle}</Button>
             </Modal>
             <Button leftSection={<IconPlus size={14} />} mb="md" onClick={() => {
                 setShowAddMission(true);
+                setAddEditTitle(t("Add Mission"));
+                setIsDirty(false);
                 setMissionProperties({
                     name: "",
                     description: "",