Merge pull request #8069 from nextcloud/fix/noid/envelope-error

fix: handling of envelope fetch error messages

src/components/Error.vue

@@ -2,6 +2,7 @@
   - @copyright 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
   -
   - @author 2018 Christoph Wurst <christoph@winzerhof-wurst.at>
+  - @author 2023 Richard Steinmetz <richard@steinmetz.cloud>
   -
   - @license AGPL-3.0-or-later
   -
@@ -22,24 +23,32 @@
 <template>
 	<NcEmptyContent
 		:title="error"
-		:description="message">
-		<p v-if="data && data.debug">
-			<a class="button"
-				:href="reportUrl"
-				target="_blank"
-				rel="noopener">{{ t('mail', 'Report this bug') }}</a>
-		</p>
+		:description="message"
+		class="mail-error"
+		:class="{ 'mail-error--auto-margin': autoMargin }">
+		<template #icon>
+			<AlertCircleIcon :size="24" />
+		</template>
+		<template v-if="data && data.debug" #action>
+			<NcButton :href="reportUrl">
+				{{ t('mail', 'Report this bug') }}
+			</NcButton>
+		</template>
 	</NcEmptyContent>
 </template>
 
 <script>
 import { getReportUrl } from '../util/CrashReport'
 import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton'
+import AlertCircleIcon from 'vue-material-design-icons/AlertCircle.vue'
 
 export default {
 	name: 'Error',
 	components: {
 		NcEmptyContent,
+		NcButton,
+		AlertCircleIcon,
 	},
 	props: {
 		error: {
@@ -54,6 +63,10 @@ export default {
 			type: Object,
 			default: () => undefined,
 		},
+		autoMargin: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		reportUrl() {
@@ -62,3 +75,11 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.mail-error {
+	&--auto-margin {
+		margin: auto 0;
+	}
+}
+</style>

src/components/ThreadEnvelope.vue

@@ -167,9 +167,10 @@
 			:full-height="fullHeight"
 			@load="loading = LOADING_DONE" />
 		<Error v-else-if="error"
-			:error="error && error.message ? error.message : t('mail', 'Not found')"
+			:error="error.message || t('mail', 'Not found')"
 			message=""
 			:data="error"
+			:auto-margin="true"
 			role="alert" />
 	</div>
 </template>
@@ -416,6 +417,7 @@ export default {
 	methods: {
 		async fetchMessage() {
 			this.loading = LOADING_MESSAGE
+			this.error = undefined
 
 			logger.debug(`fetching thread message ${this.envelope.databaseId}`)
 
@@ -437,6 +439,8 @@ export default {
 					this.loading = LOADING_DONE
 				}
 			} catch (error) {
+				this.error = error
+				this.loading = LOADING_DONE
 				logger.error('Could not fetch message', { error })
 			}