From 8fabc66bd2e03d2aa60814319f04560f9b8e8dc6 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Fri, 17 Jan 2025 22:02:10 +0100
Subject: [PATCH] Alerting: Fix not showing metadata in contact point when
 rendering an existing alert rule (#98956)

show metadata in contact point when loading an existing alert rule
---
 .../simplifiedRouting/AlertManagerRouting.tsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
index 1d6b7c0b3f3..de3cb8bfcc8 100644
--- a/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/AlertManagerRouting.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
@@ -7,6 +7,7 @@ import { CollapsableSection, Stack, useStyles2 } from '@grafana/ui';
 import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
 import { AlertManagerDataSource } from 'app/features/alerting/unified/utils/datasource';
 
+import { useContactPointsWithStatus } from '../../../contact-points/useContactPoints';
 import { ContactPointWithMetadata } from '../../../contact-points/utils';
 
 import { ContactPointDetails } from './contactPoint/ContactPointDetails';
@@ -26,12 +27,26 @@ export function AlertManagerManualRouting({ alertManager }: AlertManagerManualRo
   const [selectedContactPointWithMetadata, setSelectedContactPointWithMetadata] = useState<
     ContactPointWithMetadata | undefined
   >();
+  const { watch } = useFormContext<RuleFormValues>();
+
+  const contactPointInForm = watch(`contactPoints.${alertManagerName}.selectedContactPoint`);
+  const { contactPoints } = useContactPointsWithStatus({
+    // we only fetch the contact points with metadata for the first time we render an existing alert rule
+    alertmanager: alertManagerName,
+    skip: Boolean(selectedContactPointWithMetadata),
+  });
+  const contactPointWithMetadata = contactPoints.find((cp) => cp.name === contactPointInForm);
+
+  useEffect(() => {
+    if (contactPointWithMetadata && !selectedContactPointWithMetadata) {
+      onSelectContactPoint(contactPointWithMetadata);
+    }
+  }, [contactPointWithMetadata, selectedContactPointWithMetadata]);
 
   const onSelectContactPoint = (contactPoint?: ContactPointWithMetadata) => {
     setSelectedContactPointWithMetadata(contactPoint);
   };
 
-  const { watch } = useFormContext<RuleFormValues>();
   const hasRouteSettings =
     watch(`contactPoints.${alertManagerName}.overrideGrouping`) ||
     watch(`contactPoints.${alertManagerName}.overrideTimings`) ||