Minor updates

engine/apps/webhooks/backend.py

@@ -20,8 +20,8 @@ def serialize_user(self, user: "User"):
         try:
             personal_webhook = user.personal_webhook
         except ObjectDoesNotExist:
-            return {"name": None}
-        return {"name": personal_webhook.webhook.name}
+            return {"id": None, "name": None}
+        return {"id": personal_webhook.webhook.public_primary_key, "name": personal_webhook.webhook.name}
 
     def notify_user(
         self, user: "User", alert_group: "AlertGroup", notification_policy: typing.Optional["UserNotificationPolicy"]

engine/apps/webhooks/tests/test_backend.py

@@ -18,7 +18,7 @@ def test_serialize_user(
     backend = PersonalWebhookBackend()
 
     # by default, there is no personal webhook set
-    assert backend.serialize_user(user) == {"name": None}
+    assert backend.serialize_user(user) == {"id": None, "name": None}
 
     # set personal webhook
     webhook = make_custom_webhook(
@@ -27,7 +27,7 @@ def test_serialize_user(
     )
     make_personal_notification_webhook(user=user, webhook=webhook)
 
-    assert backend.serialize_user(user) == {"name": user.personal_webhook.webhook.name}
+    assert backend.serialize_user(user) == {"id": webhook.public_primary_key, "name": webhook.name}
 
 
 @pytest.mark.django_db

grafana-plugin/src/containers/UserSettings/UserSettings.tsx

@@ -106,13 +106,15 @@ export const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserIn
     showNotificationSettingsTab,
     showSlackConnectionTab,
     showTelegramConnectionTab,
+    showPersonalWebhookConnectionTab,
     showMobileAppConnectionTab,
     showMsTeamsConnectionTab,
     showGoogleCalendarTab,
   ] = [
     !isDesktopOrLaptop,
     isCurrent && organizationStore.currentOrganization?.slack_team_identity && !storeUser.slack_user_identity,
     isCurrent && store.hasFeature(AppFeature.Telegram) && !storeUser.telegram_configuration,
+    isCurrent && store.hasFeature(AppFeature.PersonalWebhook),
     isCurrent,
     store.hasFeature(AppFeature.MsTeams) && !storeUser.messaging_backends.MSTEAMS,
     isCurrent && store.hasFeature(AppFeature.GoogleOauth2),
@@ -141,6 +143,7 @@ export const UserSettings = observer(({ id, onHide, tab = UserSettingsTab.UserIn
             showNotificationSettingsTab={showNotificationSettingsTab}
             showSlackConnectionTab={showSlackConnectionTab}
             showTelegramConnectionTab={showTelegramConnectionTab}
+            showPersonalWebhookConnectionTab={showPersonalWebhookConnectionTab}
             showMobileAppConnectionTab={showMobileAppConnectionTab}
             showMsTeamsConnectionTab={showMsTeamsConnectionTab}
             showGoogleCalendarTab={showGoogleCalendarTab}

grafana-plugin/src/containers/UserSettings/UserSettings.types.ts

@@ -5,6 +5,7 @@ export enum UserSettingsTab {
   PhoneVerification,
   SlackInfo,
   TelegramInfo,
+  PersonalWebhookInfo,
   MSTeamsInfo,
   MobileAppConnection,
 }

grafana-plugin/src/containers/UserSettings/parts/UserSettingsParts.tsx

@@ -29,6 +29,7 @@ interface TabsProps {
   showGoogleCalendarTab: boolean;
   showSlackConnectionTab: boolean;
   showTelegramConnectionTab: boolean;
+  showPersonalWebhookConnectionTab: boolean;
   showMsTeamsConnectionTab: boolean;
 }
 
@@ -40,6 +41,7 @@ export const Tabs = ({
   showMobileAppConnectionTab,
   showSlackConnectionTab,
   showTelegramConnectionTab,
+  showPersonalWebhookConnectionTab,
   showMsTeamsConnectionTab,
 }: TabsProps) => {
   const getTabClickHandler = useCallback(
@@ -114,6 +116,15 @@ export const Tabs = ({
           data-testid="tab-telegram"
         />
       )}
+      {showPersonalWebhookConnectionTab && (
+        <Tab
+          active={activeTab === UserSettingsTab.PersonalWebhookInfo}
+          label="Personal Webhook"
+          key={UserSettingsTab.PersonalWebhookInfo}
+          onChangeTab={getTabClickHandler(UserSettingsTab.PersonalWebhookInfo)}
+          data-testid="tab-personalwebhook"
+        />
+      )}
       {showMsTeamsConnectionTab && (
         <Tab
           active={activeTab === UserSettingsTab.MSTeamsInfo}

grafana-plugin/src/containers/UserSettings/parts/tabs/PersonalWebhookInfo/PersonalWebhookInfo.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { css } from '@emotion/css';
+import { observer } from 'mobx-react';
+
+import { Text } from 'components/Text/Text';
+
+export const PersonalWebhookInfo = observer(() => {
+  return (
+    <>
+      <Text.Title
+        level={2}
+        className={css`
+          margin-bottom: 24px;
+        `}
+      >
+        Setup Personal Webhook
+      </Text.Title>
+      {/* allow selecting a personal webhook + setting additional metadata as context */}
+    </>
+  );
+});