From 400fae3bd6964a3ed0ed0fae6c676a85594ed6ee Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Fri, 21 Apr 2023 09:37:31 +0200
Subject: [PATCH] Alerting: Change tooltip error text in collapsed contact
 point table (#67022)

Change tooltip error message in collapsed contact point table
---
 .../components/receivers/ReceiversTable.tsx      | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
index 4e344582c5e..9a2937f9286 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -3,10 +3,10 @@ import React, { useMemo, useState } from 'react';
 
 import { dateTime, dateTimeFormat } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Button, ConfirmModal, Modal, useStyles2, Badge, Icon } from '@grafana/ui';
+import { Badge, Button, ConfirmModal, Icon, Modal, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
-import { useDispatch, AccessControlAction, ContactPointsState, NotifiersState, ReceiversState } from 'app/types';
+import { AccessControlAction, ContactPointsState, NotifiersState, ReceiversState, useDispatch } from 'app/types';
 
 import { useGetContactPointsState } from '../../api/receiversApi';
 import { Authorize } from '../../components/Authorize';
@@ -84,11 +84,13 @@ interface ReceiverErrorProps {
   errorCount: number;
   errorDetail?: string;
   showErrorCount: boolean;
+  tooltip?: string;
 }
 
-function ReceiverError({ errorCount, errorDetail, showErrorCount }: ReceiverErrorProps) {
+function ReceiverError({ errorCount, errorDetail, showErrorCount, tooltip }: ReceiverErrorProps) {
   const text = showErrorCount ? `${errorCount} ${pluralize('error', errorCount)}` : 'Error';
-  return <Badge color="orange" icon="exclamation-triangle" text={text} tooltip={errorDetail ?? 'Error'} />;
+  const tooltipToRender = tooltip ?? errorDetail ?? 'Error';
+  return <Badge color="orange" icon="exclamation-triangle" text={text} tooltip={tooltipToRender} />;
 }
 interface NotifierHealthProps {
   errorsByNotifier: number;
@@ -115,7 +117,11 @@ function ReceiverHealth({ errorsByReceiver, someWithNoAttempt }: ReceiverHealthP
   const noErrorsColor = someWithNoAttempt ? 'orange' : 'green';
   const noErrorsText = someWithNoAttempt ? 'No attempts' : 'OK';
   return errorsByReceiver > 0 ? (
-    <ReceiverError errorCount={errorsByReceiver} showErrorCount={true} />
+    <ReceiverError
+      errorCount={errorsByReceiver}
+      showErrorCount={true}
+      tooltip="Expand the contact point to see error details."
+    />
   ) : (
     <Badge color={noErrorsColor} text={noErrorsText} tooltip="" />
   );