Pass receiver name through components in order to still display name

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationPreviewByAlertManager.tsx

@@ -79,6 +79,7 @@ function NotificationPreviewByAlertManager({
               route={route}
               // If we can't find a receiver, it might just be because the user doesn't have access
               receiver={receiver ? receiver : undefined}
+              receiverName={route?.receiver ? route.receiver : undefined}
               key={routeId}
               routesByIdMap={routesByIdMap}
               alertManagerSourceName={alertManagerSource.name}

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRoute.tsx

@@ -24,6 +24,7 @@ import { RouteWithPath } from './route';
 function NotificationRouteHeader({
   route,
   receiver,
+  receiverName,
   routesByIdMap,
   instancesCount,
   alertManagerSourceName,
@@ -32,6 +33,7 @@ function NotificationRouteHeader({
 }: {
   route: RouteWithPath;
   receiver?: Receiver;
+  receiverName?: string;
   routesByIdMap: Map<string, RouteWithPath>;
   instancesCount: number;
   alertManagerSourceName: string;
@@ -77,7 +79,7 @@ function NotificationRouteHeader({
               <span className={styles.textMuted}>
                 <Trans i18nKey="alerting.notification-route-header.delivered-to">@ Delivered to</Trans>
               </span>{' '}
-              {receiver ? receiver.name : <UnknownContactPointDetails />}
+              {receiver ? receiver.name : <UnknownContactPointDetails receiverName={receiverName} />}
             </div>
 
             <div className={styles.verticalBar} />
@@ -93,6 +95,7 @@ function NotificationRouteHeader({
           onClose={() => setShowDetails(false)}
           route={route}
           receiver={receiver}
+          receiverName={receiverName}
           routesByIdMap={routesByIdMap}
           alertManagerSourceName={alertManagerSourceName}
         />
@@ -104,6 +107,7 @@ function NotificationRouteHeader({
 interface NotificationRouteProps {
   route: RouteWithPath;
   receiver?: Receiver;
+  receiverName?: string;
   instanceMatches: AlertInstanceMatch[];
   routesByIdMap: Map<string, RouteWithPath>;
   alertManagerSourceName: string;
@@ -113,6 +117,7 @@ export function NotificationRoute({
   route,
   instanceMatches,
   receiver,
+  receiverName,
   routesByIdMap,
   alertManagerSourceName,
 }: NotificationRouteProps) {
@@ -127,6 +132,7 @@ export function NotificationRoute({
       <NotificationRouteHeader
         route={route}
         receiver={receiver}
+        receiverName={receiverName}
         routesByIdMap={routesByIdMap}
         instancesCount={instanceMatches.length}
         alertManagerSourceName={alertManagerSourceName}

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/NotificationRouteDetailsModal.tsx

@@ -56,6 +56,7 @@ interface NotificationRouteDetailsModalProps {
   onClose: () => void;
   route: RouteWithPath;
   receiver?: Receiver;
+  receiverName?: string;
   routesByIdMap: Map<string, RouteWithPath>;
   alertManagerSourceName: string;
 }
@@ -64,6 +65,7 @@ export function NotificationRouteDetailsModal({
   onClose,
   route,
   receiver,
+  receiverName,
   routesByIdMap,
   alertManagerSourceName,
 }: NotificationRouteDetailsModalProps) {
@@ -108,7 +110,9 @@ export function NotificationRouteDetailsModal({
             <Stack gap={1} direction="column">
               <Trans i18nKey="alerting.notification-route-details-modal.contact-point">Contact point</Trans>
 
-              <span className={styles.textMuted}>{receiver ? receiver.name : <UnknownContactPointDetails />}</span>
+              <span className={styles.textMuted}>
+                {receiver ? receiver.name : <UnknownContactPointDetails receiverName={receiverName} />}
+              </span>
             </Stack>
             <Authorize actions={[AlertmanagerAction.UpdateContactPoint]}>
               <Stack gap={1} direction="row" alignItems="center">

public/app/features/alerting/unified/components/rule-editor/notificaton-preview/UnknownContactPointDetails.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
-const UnknownContactPointDetails = () => (
+const UnknownContactPointDetails = ({ receiverName }: { receiverName?: string }) => (
   <span style={{ cursor: 'help' }}>
     <Tooltip
       content={t(
@@ -10,7 +10,11 @@ const UnknownContactPointDetails = () => (
       )}
     >
       <span>
+        {receiverName ? (
+          receiverName
+        ) : (
           <Trans i18nKey="alerting.unknown-contact-point-details.unknown-contact-point">Unknown contact point</Trans>
+        )}
       </span>
     </Tooltip>
   </span>