fix: show error with html formatting for toasts

fix #1914
frappe · Nov 5, 2024 · 0752655 · 0752655
1 parent 0a71e20
commit 0752655
Show file tree

Hide file tree

Showing 27 changed files with 109 additions and 195 deletions.
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -47,7 +47,7 @@
 		"vue-echarts": "^6.6.1",
 		"vue-qrcode": "^2.2.2",
 		"vue-router": "^4.0.5",
-		"vue-sonner": "^0.4.4"
+		"vue-sonner": "^1.2.5"
 	},
 	"devDependencies": {
 		"@iconify/json": "^2.2.123",

diff --git a/dashboard/src2/components/MarketplaceAppListing.vue b/dashboard/src2/components/MarketplaceAppListing.vue
@@ -211,6 +211,7 @@
 import { TextEditor } from 'frappe-ui';
 import FileUploader from '@/components/FileUploader.vue';
 import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../utils/toast';
 
 export default {
 	name: 'MarketplaceAppOverview',
@@ -266,11 +267,7 @@ export default {
 					this.marketplaceApp = { ...this.marketplaceApp, ...response.message };
 				},
 				onError(e) {
-					toast.error(
-						e.messages?.length
-							? e.messages.join('\n')
-							: e.message || 'Failed to fetch listing data'
-					);
+					toast.error(getToastErrorMessage(e, 'Failed to fetch listing data'));
 				}
 			};
 		},

diff --git a/dashboard/src2/components/SiteActionCell.vue b/dashboard/src2/components/SiteActionCell.vue
@@ -25,6 +25,7 @@ import { getCachedDocumentResource } from 'frappe-ui';
 import { defineAsyncComponent, h } from 'vue';
 import { toast } from 'vue-sonner';
 import { confirmDialog, renderDialog } from '../utils/components';
+import { getToastErrorMessage } from '../utils/toast';
 import router from '../router';
 import { isLastSite } from '../data/team';
 
@@ -257,9 +258,7 @@ function onScheduleBackup() {
 						});
 						return 'Backup scheduled successfully';
 					},
-					error: e => {
-						return e.messages?.length ? e.messages.join('\n') : e.message;
-					}
+					error: e => getToastErrorMessage(e)
 				}
 			);
 		}

diff --git a/dashboard/src2/components/SiteOverview.vue b/dashboard/src2/components/SiteOverview.vue
@@ -212,6 +212,7 @@ import { h, defineAsyncComponent } from 'vue';
 import { toast } from 'vue-sonner';
 import InfoIcon from '~icons/lucide/info';
 import DismissableBanner from './DismissableBanner.vue';
+import { getToastErrorMessage } from '../utils/toast';
 import { renderDialog } from '../utils/components';
 import SiteDailyUsage from './SiteDailyUsage.vue';
 import AlertBanner from './AlertBanner.vue';
@@ -265,9 +266,7 @@ export default {
 				{
 					loading: 'Removing tag...',
 					success: `Tag ${tag.tag_name} removed`,
-					error: e => {
-						return e.messages.length ? e.messages.join('\n') : e.message;
-					}
+					error: e => getToastErrorMessage(e)
 				}
 			);
 		},

diff --git a/dashboard/src2/components/group/AddAppDialog.vue b/dashboard/src2/components/group/AddAppDialog.vue
@@ -146,6 +146,7 @@ import {
 } from 'frappe-ui';
 import { toast } from 'vue-sonner';
 import { h } from 'vue';
+import { getToastErrorMessage } from '../../utils/toast';
 import NewAppDialog from '../NewAppDialog.vue';
 
 export default {
@@ -183,7 +184,7 @@ export default {
 				this.$emit('appAdd');
 			},
 			onError(e) {
-				toast.error(e.messages.length ? e.messages.join('\n') : e.message);
+				toast.error(getToastErrorMessage(e));
 			}
 		},
 		installableApps() {

diff --git a/dashboard/src2/components/marketplace/ChangeAppBranchDialog.vue b/dashboard/src2/components/marketplace/ChangeAppBranchDialog.vue
@@ -37,6 +37,7 @@
 
 <script>
 import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../../utils/toast';
 import { DashboardError } from '../../utils/error';
 
 export default {
@@ -85,10 +86,7 @@ export default {
 					this.$emit('branch-changed');
 					return 'Branch changed successfully';
 				},
-				error: e => {
-					console.log(e);
-					return e.messages.length ? e.messages.join('\n') : e.message;
-				}
+				error: e => getToastErrorMessage(e)
 			});
 		},
 		branchList() {

diff --git a/dashboard/src2/components/marketplace/NewMarketplaceAppDialog.vue b/dashboard/src2/components/marketplace/NewMarketplaceAppDialog.vue
@@ -55,6 +55,7 @@
 import { toast } from 'vue-sonner';
 import GitHubAppSelector from '../GitHubAppSelector.vue';
 import LinkControl from '../LinkControl.vue';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export default {
 	components: {
@@ -123,9 +124,7 @@ export default {
 					});
 					return 'New app added';
 				},
-				error: e => {
-					return e.messages.length ? e.messages.join('\n') : e.message;
-				}
+				error: e => getToastErrorMessage(e)
 			});
 		},
 		validateApp(data) {

diff --git a/dashboard/src2/components/marketplace/PlansDialog.vue b/dashboard/src2/components/marketplace/PlansDialog.vue
@@ -97,6 +97,7 @@
 <script>
 import { toast } from 'vue-sonner';
 import { DashboardError } from '../../utils/error';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export default {
 	name: 'PlanDialog',
@@ -193,10 +194,7 @@ export default {
 							return 'Plan created successfully';
 						}
 					},
-					error: e => {
-						console.log(e);
-						return e.messages.length ? e.messages.join('\n') : e.message;
-					}
+					error: e => getToastErrorMessage(e)
 				}
 			);
 		},

diff --git a/dashboard/src2/components/server/ServerOverview.vue b/dashboard/src2/components/server/ServerOverview.vue
@@ -92,6 +92,7 @@ import { toast } from 'vue-sonner';
 import { h, defineAsyncComponent } from 'vue';
 import { getCachedDocumentResource } from 'frappe-ui';
 import { confirmDialog, renderDialog } from '../../utils/components';
+import { getToastErrorMessage } from '../../utils/toast';
 import ServerPlansDialog from './ServerPlansDialog.vue';
 import ServerLoadAverage from './ServerLoadAverage.vue';
 import { getDocResource } from '../../utils/resource';
@@ -274,9 +275,10 @@ export default {
 												loading: 'Increasing disk size...',
 												success: 'Disk size is scheduled to increase',
 												error: e =>
-													e.messages.length
-														? e.messages.join('\n')
-														: e.message || 'Failed to increase disk size'
+													getToastErrorMessage(
+														e,
+														'Failed to increase disk size'
+													)
 											}
 										);
 									}

diff --git a/dashboard/src2/components/settings/EditWebhookDialog.vue b/dashboard/src2/components/settings/EditWebhookDialog.vue
@@ -41,7 +41,10 @@
 					</FormControl>
 					<p class="mt-1.5 text-sm text-gray-700">
 						<secret>Note:</secret> Secret is optional. Check
-						<a href="https://frappecloud.com/docs/webhook-introduction" class="underline" target="_blank"
+						<a
+							href="https://frappecloud.com/docs/webhook-introduction"
+							class="underline"
+							target="_blank"
 							>the documentation</a
 						>
 						to learn more
@@ -77,6 +80,7 @@
 
 <script>
 import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export default {
 	emits: ['success'],
@@ -140,9 +144,10 @@ export default {
 				},
 				onError: e => {
 					toast.error(
-						e.messages.length
-							? e.messages.join('\n')
-							: e.message || 'Failed to update webhook'
+						getToastErrorMessage(
+							e,
+							'Failed to update webhook. Please try again'
+						)
 					);
 				}
 			};

diff --git a/dashboard/src2/components/settings/InviteTeamMemberDialog.vue b/dashboard/src2/components/settings/InviteTeamMemberDialog.vue
@@ -55,6 +55,7 @@
 <script>
 import { toast } from 'vue-sonner';
 import { DashboardError } from '../../utils/error';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export default {
 	data() {
@@ -123,7 +124,7 @@ export default {
 						this.show = false;
 						return 'Invite Sent!';
 					},
-					error: e => (e.messages?.length ? e.messages.join('\n') : e.message)
+					error: e => getToastErrorMessage(e)
 				}
 			);
 		}

diff --git a/dashboard/src2/components/settings/RoleConfigureDialog.vue b/dashboard/src2/components/settings/RoleConfigureDialog.vue
@@ -122,6 +122,7 @@
 import { Switch, Tabs } from 'frappe-ui';
 import { toast } from 'vue-sonner';
 import UserWithAvatarCell from '../UserWithAvatarCell.vue';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export default {
 	props: {
@@ -280,14 +281,14 @@ export default {
 					this.member = {};
 					return `${user} added to ${this.role.title}`;
 				},
-				error: e => (e.messages.length ? e.messages.join('\n') : e.message)
+				error: e => getToastErrorMessage(e)
 			});
 		},
 		removeUser(user) {
 			return toast.promise(this.$resources.role.removeUser.submit({ user }), {
 				loading: `Removing ${user} from ${this.role.title}`,
 				success: () => `${user} removed from ${this.role.title}`,
-				error: e => (e.messages.length ? e.messages.join('\n') : e.message)
+				error: e => getToastErrorMessage(e)
 			});
 		}
 	}

diff --git a/dashboard/src2/components/settings/RoleList.vue b/dashboard/src2/components/settings/RoleList.vue
@@ -10,6 +10,7 @@ import ObjectList from '../ObjectList.vue';
 import RoleConfigureDialog from './RoleConfigureDialog.vue';
 import router from '../../router';
 import UserAvatarGroup from '../AvatarGroup.vue';
+import { getToastErrorMessage } from '../../utils/toast';
 
 const listOptions = ref({
 	doctype: 'Press Role',
@@ -74,8 +75,7 @@ const listOptions = ref({
 									hide();
 									return `Role ${row.title} deleted`;
 								},
-								error: e =>
-									e.messages.length ? e.messages.join('\n') : e.message
+								error: e => getToastErrorMessage(e)
 							});
 						}
 					});

diff --git a/dashboard/src2/components/settings/RolePermissions.vue b/dashboard/src2/components/settings/RolePermissions.vue
@@ -215,10 +215,7 @@ const rolePermissions = ref({
 											permissions.reload();
 											return 'Permission added successfully';
 										},
-										error: e =>
-											e.messages.length
-												? e.messages.join('\n')
-												: 'An error occurred'
+										error: e => getToastErrorMessage(e)
 									}
 								);
 							}

diff --git a/dashboard/src2/components/settings/TeamSettings.vue b/dashboard/src2/components/settings/TeamSettings.vue
@@ -11,6 +11,7 @@ import { getTeam } from '../../data/team';
 import { confirmDialog, renderDialog } from '../../utils/components';
 import ObjectList from '../ObjectList.vue';
 import UserWithAvatarCell from '../UserWithAvatarCell.vue';
+import { getToastErrorMessage } from '../../utils/toast';
 
 const team = getTeam();
 team.getTeamMembers.submit();
@@ -56,8 +57,7 @@ const teamMembersListOptions = ref({
 										hide();
 										return 'Member Removed';
 									},
-									error: e =>
-										e.messages.length ? e.messages.join('\n') : e.message
+									error: e => getToastErrorMessage(e)
 								}
 							);
 						}

diff --git a/dashboard/src2/components/site/InstallAppDialog.vue b/dashboard/src2/components/site/InstallAppDialog.vue
@@ -19,6 +19,7 @@ import { toast } from 'vue-sonner';
 import { renderDialog } from '../../utils/components';
 import router from '../../router';
 import ObjectList from '../ObjectList.vue';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export default {
 	props: {
@@ -75,11 +76,7 @@ export default {
 											this.show = false;
 											return 'App will be installed shortly';
 										},
-										error: e => {
-											return e.messages?.length
-												? e.messages.join('\n')
-												: e.message;
-										}
+										error: e => getToastErrorMessage(e)
 									}
 								);
 							}
@@ -104,9 +101,7 @@ export default {
 								this.show = false;
 								return 'App will be installed shortly';
 							},
-							error: e => {
-								return e.messages?.length ? e.messages.join('\n') : e.message;
-							}
+							error: e => getToastErrorMessage(e)
 						}
 					);
 				}

diff --git a/dashboard/src2/components/site/SiteAppPlanSelectDialog.vue b/dashboard/src2/components/site/SiteAppPlanSelectDialog.vue
@@ -8,6 +8,7 @@
 </template>
 
 <script>
+import { getToastErrorMessage } from '../../utils/toast';
 import SiteAppPlanSelectorDialog from './SiteAppPlanSelectorDialog.vue';
 import { toast } from 'vue-sonner';
 
@@ -43,9 +44,7 @@ export default {
 							this.$emit('plan-changed', plan);
 							return 'Plan changed successfully';
 						},
-						error: e => {
-							return e.messages.length ? e.messages.join('\n') : e.message;
-						}
+						error: e => getToastErrorMessage(e)
 					}
 				);
 			else this.$emit('plan-selected', plan);

diff --git a/dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue b/dashboard/src2/components/site/performance/SiteSlowQueryDialog.vue
@@ -92,6 +92,7 @@
 import { getCachedDocumentResource } from 'frappe-ui';
 import AlertBanner from '../../AlertBanner.vue';
 import { toast } from 'vue-sonner';
+import { getToastErrorMessage } from '../../../utils/toast';
 
 export default {
 	props: [
@@ -131,9 +132,7 @@ export default {
 					});
 					return 'The job to add a database index has been sucessfully created.';
 				},
-				error: e => {
-					return e.messages.length ? e.messages.join('\n') : e.message;
-				}
+				error: e => getToastErrorMessage(e)
 			});
 		},
 		shouldShowAnalyzeQueryButton() {

diff --git a/dashboard/src2/objects/common/apps.ts b/dashboard/src2/objects/common/apps.ts
@@ -13,6 +13,7 @@ import type {
 } from './types';
 import { getUpsellBanner } from '.';
 import { isMobile } from '../../utils/device';
+import { getToastErrorMessage } from '../../utils/toast';
 
 export function getAppsTab(forSite: boolean) {
 	return {
@@ -214,7 +215,7 @@ const siteAppListOptions: Partial<TabList> = {
 								}),
 								{
 									loading: 'Scheduling app uninstall...',
-									success: jobId => {
+									success: (jobId: string) => {
 										hide();
 										router.push({
 											name: 'Site Job',
@@ -225,11 +226,7 @@ const siteAppListOptions: Partial<TabList> = {
 										});
 										return 'App uninstall scheduled';
 									},
-									error: e => {
-										return e.messages?.length
-											? e.messages.join('\n')
-											: e.message;
-									}
+									error: (e: Error) => getToastErrorMessage(e)
 								}
 							);
 						}