From 04f46847cd47085f577b1e5fa7c79da14a99c457 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Thu, 11 Jun 2020 13:53:04 -0400
Subject: [PATCH] Show name in webhooks header

---
 src/composables/use-item/use-item.ts                  |  2 +-
 src/lang/en-US/index.json                             |  3 ++-
 .../settings/routes/webhooks/detail/detail.vue        | 11 +++++++++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/composables/use-item/use-item.ts b/src/composables/use-item/use-item.ts
index b9fbabc77a..2d67f123a6 100644
--- a/src/composables/use-item/use-item.ts
+++ b/src/composables/use-item/use-item.ts
@@ -9,7 +9,7 @@ import { AxiosResponse } from 'axios';
 export function useItem(collection: Ref<string>, primaryKey: Ref<string | number>) {
 	const { primaryKeyField, softDeleteStatus, statusField } = useCollection(collection);
 
-	const item = ref(null);
+	const item = ref<any>(null);
 	const error = ref(null);
 	const loading = ref(false);
 	const saving = ref(false);
diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json
index 3cb1896846..775f355d66 100644
--- a/src/lang/en-US/index.json
+++ b/src/lang/en-US/index.json
@@ -74,7 +74,7 @@
 	"confirm_revert_body": "This will revert the item to the selected state.",
 
 	"editing_role": "{role} Role",
-	"editing_webhook": "Editing Webhook",
+	"adding_webhook": "Adding Webhook",
 
 	"code": "Code",
 	"loc": "No lines of {lang} | One line of {lang} | {count} lines of {lang}",
@@ -790,6 +790,7 @@
   "editing_items": "Batch Editing {count} Items",
   "editing_my_profile": "Editing My Profile",
   "editing_single": "Editing {collection}",
+  "editing_name": "Editing {name}",
   "email": "Email",
   "email_address": "Email Address",
   "embed": "Embed",
diff --git a/src/modules/settings/routes/webhooks/detail/detail.vue b/src/modules/settings/routes/webhooks/detail/detail.vue
index e7914f0c2e..3f828daa46 100644
--- a/src/modules/settings/routes/webhooks/detail/detail.vue
+++ b/src/modules/settings/routes/webhooks/detail/detail.vue
@@ -1,5 +1,5 @@
 <template>
-	<private-view :title="$t('editing_webhook')">
+	<private-view :title="title">
 		<template #title-outer:prepend>
 			<v-button class="header-icon" rounded icon exact :to="`/${currentProjectKey}/settings/webhooks/`">
 				<v-icon name="arrow_back" />
@@ -76,6 +76,7 @@ import RevisionsDrawerDetail from '@/views/private/components/revisions-drawer-d
 import useItem from '@/composables/use-item';
 import SaveOptions from '@/views/private/components/save-options';
 import marked from 'marked';
+import i18n from '@/lang';
 
 type Values = {
 	[field: string]: any;
@@ -101,9 +102,14 @@ export default defineComponent({
 		);
 
 		const hasEdits = computed<boolean>(() => Object.keys(edits.value).length > 0);
-
 		const confirmDelete = ref(false);
 
+		const title = computed(() => {
+			if (loading.value) return i18n.t('loading');
+			if (isNew.value) return i18n.t('adding_webhook');
+			return item.value.name;
+		});
+
 		return {
 			item,
 			loading,
@@ -122,6 +128,7 @@ export default defineComponent({
 			isBatch,
 			currentProjectKey,
 			marked,
+			title,
 		};
 
 		async function saveAndQuit() {