From 8f89dd070b4e7f2da03f005e754346384257896f Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Thu, 7 Dec 2023 04:30:11 -0800
Subject: [PATCH] chore: Danger Zone error reporting fixes

---
 .../routes/app/instances/[instanceId]/+page.svelte  |  2 +-
 .../instances/[instanceId]/Danger/AdminSync.svelte  | 11 ++++++++++-
 .../[instanceId]/Danger/ErrorMessage.svelte         | 12 ++++++++++++
 .../[instanceId]/Danger/Maintenance.svelte          | 13 ++++++++++---
 .../[instanceId]/Danger/RenameInstance.svelte       | 11 +++--------
 .../Danger/{ => VersionChange}/VersionChange.svelte | 13 ++++---------
 .../Danger/{ => VersionChange}/VersionPicker.svelte |  0
 7 files changed, 40 insertions(+), 22 deletions(-)
 create mode 100644 frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/ErrorMessage.svelte
 rename frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/{ => VersionChange}/VersionChange.svelte (89%)
 rename frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/{ => VersionChange}/VersionPicker.svelte (100%)

diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/+page.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
index 2a63b262..a7098000 100644
--- a/frontends/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
+++ b/frontends/dashboard/src/routes/app/instances/[instanceId]/+page.svelte
@@ -8,7 +8,7 @@
   import DangerZoneTitle from './Danger/DangerZoneTitle.svelte'
   import Maintenance from './Danger/Maintenance.svelte'
   import RenameInstance from './Danger/RenameInstance.svelte'
-  import VersionChange from './Danger/VersionChange.svelte'
+  import VersionChange from './Danger/VersionChange/VersionChange.svelte'
   import Ftp from './Ftpx.svelte'
   import Logging from './Logging.svelte'
   import Secrets from './Secrets/Secrets.svelte'
diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/AdminSync.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/AdminSync.svelte
index 10a9391e..05b6f9ab 100644
--- a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/AdminSync.svelte
+++ b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/AdminSync.svelte
@@ -4,17 +4,24 @@
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
   import { instance } from '../store'
+  import ErrorMessage from './ErrorMessage.svelte'
 
   const { updateInstance } = client()
 
   $: ({ id, syncAdmin } = $instance)
 
+  let errorMessage = ''
+
   const handleChange = (e: Event) => {
     const target = e.target as HTMLInputElement
     const isChecked = target.checked
 
     // Update the database with the new value
-    updateInstance({ id, fields: { syncAdmin: isChecked } }).then(() => 'saved')
+    updateInstance({ id, fields: { syncAdmin: isChecked } })
+      .then(() => 'saved')
+      .catch((error) => {
+        errorMessage = error.data.message || error.message
+      })
   }
 </script>
 
@@ -28,6 +35,8 @@
     login.
   </p>
 
+  <ErrorMessage message={errorMessage} />
+
   <label class="label cursor-pointer justify-center gap-4">
     <span class="label-text">Admin Sync</span>
     <input
diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/ErrorMessage.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/ErrorMessage.svelte
new file mode 100644
index 00000000..5d357eff
--- /dev/null
+++ b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/ErrorMessage.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition'
+
+  export let message = ''
+</script>
+
+{#if message}
+  <div in:slide class="alert alert-error mb-4">
+    <i class="fa-regular fa-circle-exclamation"></i>
+    {message}
+  </div>
+{/if}
diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte
index a3be5441..47944d30 100644
--- a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte
+++ b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/Maintenance.svelte
@@ -4,9 +4,12 @@
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
   import { instance } from '../store'
+  import ErrorMessage from './ErrorMessage.svelte'
 
   const { updateInstance } = client()
 
+  let errorMessage = ''
+
   $: ({ id, maintenance } = $instance)
 
   const handleChange = (e: Event) => {
@@ -14,9 +17,11 @@
     const isChecked = target.checked
 
     // Update the database with the new value
-    updateInstance({ id, fields: { maintenance: isChecked } }).then(
-      () => 'saved',
-    )
+    updateInstance({ id, fields: { maintenance: isChecked } })
+      .then(() => 'saved')
+      .catch((error) => {
+        error.data.message || error.message
+      })
   }
 </script>
 
@@ -30,6 +35,8 @@
     Use this when you are upgrading, downgrading, or backing up your data.
   </p>
 
+  <ErrorMessage message={errorMessage} />
+
   <label class="label cursor-pointer justify-center gap-4">
     <span class="label-text">Maintenance Mode</span>
     <input
diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte
index 4aaa7c8b..dfa77c01 100644
--- a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte
+++ b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte
@@ -3,8 +3,8 @@
   import CardHeader from '$components/cards/CardHeader.svelte'
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
-  import { slide } from 'svelte/transition'
   import { instance } from '../store'
+  import ErrorMessage from './ErrorMessage.svelte'
 
   const { updateInstance } = client()
 
@@ -47,7 +47,7 @@
       })
         .then(() => 'saved')
         .catch((error) => {
-          errorMessage = error.message
+          error.data.message || error.message
         })
     }
 
@@ -68,12 +68,7 @@
     else choose it.
   </p>
 
-  {#if errorMessage}
-    <div in:slide class="alert alert-error mb-4">
-      <i class="fa-regular fa-circle-exclamation"></i>
-      {errorMessage}
-    </div>
-  {/if}
+  <ErrorMessage message={errorMessage} />
 
   <form
     class="flex rename-instance-form-container-query gap-4"
diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange/VersionChange.svelte
similarity index 89%
rename from frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte
rename to frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange/VersionChange.svelte
index 146c1604..8665e0d5 100644
--- a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte
+++ b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange/VersionChange.svelte
@@ -3,8 +3,8 @@
   import CardHeader from '$components/cards/CardHeader.svelte'
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase-client'
-  import { slide } from 'svelte/transition'
-  import { instance } from '../store'
+  import { instance } from '../../store'
+  import ErrorMessage from '../ErrorMessage.svelte'
   import VersionPicker from './VersionPicker.svelte'
 
   $: ({ id, maintenance, version } = $instance)
@@ -46,7 +46,7 @@
           return 'saved'
         })
         .catch((error) => {
-          errorMessage = error.message
+          error.data.message || error.message
         })
     } else {
       // If they hit cancel, reset the version number back to what it was initially
@@ -72,12 +72,7 @@
     > of PocketBase.
   </p>
 
-  {#if errorMessage}
-    <div in:slide class="alert alert-error mb-4">
-      <i class="fa-regular fa-circle-exclamation"></i>
-      {errorMessage}
-    </div>
-  {/if}
+  <ErrorMessage message={errorMessage} />
 
   <form
     class="flex change-version-form-container-query gap-4"
diff --git a/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionPicker.svelte b/frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange/VersionPicker.svelte
similarity index 100%
rename from frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionPicker.svelte
rename to frontends/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange/VersionPicker.svelte