From 2468005e02aecd242b05aeb7da8d63b09448cf41 Mon Sep 17 00:00:00 2001
From: Ben Allfree <ben@benallfree.com>
Date: Sat, 19 Oct 2024 11:28:32 -0700
Subject: [PATCH] dashboard: enhance error/success messages

---
 .../dashboard/src/components/AlertBar.svelte  |  3 +-
 .../src/pocketbase-client/PocketbaseClient.ts |  2 +-
 .../[instanceId]/rename/+page.svelte          | 84 +++++++++++--------
 .../[instanceId]/version/+page.svelte         |  7 +-
 .../pocketbase-client-helpers/RestHelper.ts   | 23 +----
 5 files changed, 61 insertions(+), 58 deletions(-)

diff --git a/packages/dashboard/src/components/AlertBar.svelte b/packages/dashboard/src/components/AlertBar.svelte
index 8ed8447f..5862c21c 100644
--- a/packages/dashboard/src/components/AlertBar.svelte
+++ b/packages/dashboard/src/components/AlertBar.svelte
@@ -19,7 +19,8 @@
 
   let isHidden = false
   $: {
-    if (flash) {
+    isHidden = false
+    if (flash && message) {
       setTimeout(() => {
         isHidden = true
       }, 5000)
diff --git a/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts b/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts
index 6b16085f..e0e6aa44 100644
--- a/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts
+++ b/packages/dashboard/src/pocketbase-client/PocketbaseClient.ts
@@ -165,7 +165,7 @@ export const createPocketbaseClient = (config: PocketbaseClientConfig) => {
     )
 
   const parseError = (e: Error): string[] => {
-    if (!(e instanceof ClientResponseError)) return [e.message]
+    if (!(e instanceof ClientResponseError)) return [`${e}`]
     if (e.data.message && keys(e.data.data).length === 0)
       return [e.data.message]
     return map(e.data.data, (v, k) => (v ? v.message : undefined)).filter(
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
index 90ad8f4b..f2bcbf89 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/rename/+page.svelte
@@ -20,10 +20,15 @@
   // Controls visibility of an error message
   let errorMessage = ''
 
+  let successMessage = ''
+
   // TODO: What are the limits for this?
   const onRename = (e: Event) => {
     e.preventDefault()
 
+    errorMessage = ''
+    successMessage = ''
+
     // Disable the button to prevent double submissions
     isButtonDisabled = true
 
@@ -43,9 +48,11 @@
           subdomain: instanceNameValidation,
         },
       })
-        .then(() => 'saved')
+        .then(() => {
+          successMessage = 'Instance renamed successfully'
+        })
         .catch((error) => {
-          errorMessage = error.message
+          errorMessage = client().parseError(error).join('\n')
         })
     }
 
@@ -54,42 +61,47 @@
   }
 </script>
 
-<CardHeader documentation={`/docs/rename-instance`}>Rename Instance</CardHeader>
-
-<p class="mb-8">
-  Renaming your instance will cause it to become <strong class="text-error"
-    >inaccessible</strong
-  > by the old instance name. You also may not be able to change it back if someone
-  else choose it.
-</p>
-
-<AlertBar message={errorMessage} type="error" />
-
-<form
-  class="flex rename-instance-form-container-query gap-4"
-  on:submit={onRename}
->
-  <input
-    title="Only letters and dashes are allowed"
-    required
-    type="text"
-    bind:value={formSubdomain}
-    class="input input-bordered w-full"
-  />
-
-  <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
-    >Rename Instance</button
+<div class="max-w-lg">
+  <CardHeader documentation={`/docs/rename-instance`}
+    >Rename Instance</CardHeader
   >
-</form>
 
-<style>
-  .rename-instance-form-container-query {
-    flex-direction: column;
-  }
+  <p class="mb-8">
+    Renaming your instance will cause it to become <strong class="text-error"
+      >inaccessible</strong
+    > by the old instance name. You also may not be able to change it back if someone
+    else choose it.
+  </p>
 
-  @container (min-width: 400px) {
+  <AlertBar message={successMessage} type="success" flash />
+  <AlertBar message={errorMessage} type="error" />
+
+  <form
+    class="flex rename-instance-form-container-query gap-4"
+    on:submit={onRename}
+  >
+    <input
+      title="Only letters and dashes are allowed"
+      required
+      type="text"
+      bind:value={formSubdomain}
+      class="input input-bordered w-full"
+    />
+
+    <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
+      >Rename Instance</button
+    >
+  </form>
+
+  <style>
     .rename-instance-form-container-query {
-      flex-direction: row;
+      flex-direction: column;
     }
-  }
-</style>
+
+    @container (min-width: 400px) {
+      .rename-instance-form-container-query {
+        flex-direction: row;
+      }
+    }
+  </style>
+</div>
diff --git a/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte b/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte
index 41015302..7f0526c2 100644
--- a/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte
+++ b/packages/dashboard/src/routes/(app)/instances/[instanceId]/version/+page.svelte
@@ -18,11 +18,15 @@
 
   // Controls visibility of an error message
   let errorMessage = ''
+  let successMessage = ''
 
   // Update the version number
   const handleSave = async (e: Event) => {
     e.preventDefault()
 
+    errorMessage = ''
+    successMessage = ''
+
     // Disable the button to prevent double submissions
     isButtonDisabled = true
 
@@ -41,7 +45,7 @@
           fields: { version: selectedVersion },
         })
         .then(() => {
-          return 'saved'
+          successMessage = 'Version updated successfully'
         })
         .catch((error) => {
           errorMessage = error.message
@@ -73,6 +77,7 @@
   > of PocketBase.
 </div>
 
+<AlertBar message={successMessage} type="success" flash />
 <AlertBar message={errorMessage} type="error" />
 
 <form
diff --git a/packages/pockethost/src/common/pocketbase-client-helpers/RestHelper.ts b/packages/pockethost/src/common/pocketbase-client-helpers/RestHelper.ts
index 731f4388..0ba089b2 100644
--- a/packages/pockethost/src/common/pocketbase-client-helpers/RestHelper.ts
+++ b/packages/pockethost/src/common/pocketbase-client-helpers/RestHelper.ts
@@ -1,12 +1,6 @@
 import Ajv, { JSONSchemaType } from 'ajv'
 import type { JsonObject } from 'type-fest'
-import {
-  ClientResponseError,
-  LoggerService,
-  PocketBase,
-  RestCommands,
-  RestMethods,
-} from '..'
+import { LoggerService, PocketBase, RestCommands, RestMethods } from '..'
 
 export type RestHelperConfig = {
   client: PocketBase
@@ -55,18 +49,9 @@ export const createRestHelper = (config: RestHelperConfig) => {
 
       dbg({ url, options })
 
-      try {
-        const res = await client.send(url, options)
-        dbg(res)
-        return res
-      } catch (e) {
-        if (e instanceof ClientResponseError) {
-          error(`REST error: ${e.originalError}`)
-          throw e.originalError
-        }
-        error(`REST error: ${e}`)
-        throw e
-      }
+      const res = await client.send(url, options)
+      dbg(res)
+      return res
     }
   }