From a61e044d006b3fdae5756302517f2e60025feb6f Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Thu, 20 Oct 2022 18:24:32 +0200
Subject: [PATCH] Contact points tab: Remove error count in integrations
 details and show only Error label (#57325)

---
 .../alerting/unified/Receivers.test.tsx         |  6 +++---
 .../components/receivers/ReceiversTable.tsx     | 17 ++++++-----------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/public/app/features/alerting/unified/Receivers.test.tsx b/public/app/features/alerting/unified/Receivers.test.tsx
index 5c7773f0c7e..f30833fc02b 100644
--- a/public/app/features/alerting/unified/Receivers.test.tsx
+++ b/public/app/features/alerting/unified/Receivers.test.tsx
@@ -564,12 +564,12 @@ describe('Receivers', () => {
       // expand contact point detail for default 2 emails - 2 errors
       await userEvent.click(ui.contactPointsCollapseToggle.get(receiverRows[0]));
       const defaultDetailTable = screen.getAllByTestId('dynamic-table')[1];
-      expect(byText('1 error').getAll(defaultDetailTable)).toHaveLength(1);
+      expect(byText('Error').getAll(defaultDetailTable)).toHaveLength(1);
 
       // expand contact point detail for slack and pagerduty - 0 errors
       await userEvent.click(ui.contactPointsCollapseToggle.get(receiverRows[1]));
       const criticalDetailTable = screen.getAllByTestId('dynamic-table')[2];
-      expect(byText('1 error').query(criticalDetailTable)).toBeNull();
+      expect(byText('Error').query(criticalDetailTable)).toBeNull();
       expect(byText('OK').getAll(criticalDetailTable)).toHaveLength(2);
     });
     it('Should render no attempt message when there are some points state with null lastNotifyAttempt, and "-" in null values', async () => {
@@ -635,7 +635,7 @@ describe('Receivers', () => {
       // expand contact point detail for default 2 emails - 2 errors
       await userEvent.click(ui.contactPointsCollapseToggle.get(receiverRows[0]));
       const defaultDetailTable = screen.getAllByTestId('dynamic-table')[1];
-      expect(byText('1 error').getAll(defaultDetailTable)).toHaveLength(1);
+      expect(byText('Error').getAll(defaultDetailTable)).toHaveLength(1);
 
       // expand contact point detail for slack and pagerduty - 0 errors
       await userEvent.click(ui.contactPointsCollapseToggle.get(receiverRows[1]));
diff --git a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
index becfd6e8bb9..8b596b92424 100644
--- a/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
+++ b/public/app/features/alerting/unified/components/receivers/ReceiversTable.tsx
@@ -79,17 +79,12 @@ function ViewAction({ permissions, alertManagerName, receiverName }: ActionProps
 interface ReceiverErrorProps {
   errorCount: number;
   errorDetail?: string;
+  showErrorCount: boolean;
 }
 
-function ReceiverError({ errorCount, errorDetail }: ReceiverErrorProps) {
-  return (
-    <Badge
-      color="orange"
-      icon="exclamation-triangle"
-      text={`${errorCount} ${pluralize('error', errorCount)}`}
-      tooltip={errorDetail ?? 'Error'}
-    />
-  );
+function ReceiverError({ errorCount, errorDetail, showErrorCount }: ReceiverErrorProps) {
+  const text = showErrorCount ? `${errorCount} ${pluralize('error', errorCount)}` : 'Error';
+  return <Badge color="orange" icon="exclamation-triangle" text={text} tooltip={errorDetail ?? 'Error'} />;
 }
 interface NotifierHealthProps {
   errorsByNotifier: number;
@@ -101,7 +96,7 @@ function NotifierHealth({ errorsByNotifier, errorDetail, lastNotify }: NotifierH
   const noErrorsColor = isLastNotifyNullDate(lastNotify) ? 'orange' : 'green';
   const noErrorsText = isLastNotifyNullDate(lastNotify) ? 'No attempts' : 'OK';
   return errorsByNotifier > 0 ? (
-    <ReceiverError errorCount={errorsByNotifier} errorDetail={errorDetail} />
+    <ReceiverError errorCount={errorsByNotifier} errorDetail={errorDetail} showErrorCount={false} />
   ) : (
     <Badge color={noErrorsColor} text={noErrorsText} tooltip="" />
   );
@@ -116,7 +111,7 @@ function ReceiverHealth({ errorsByReceiver, someWithNoAttempt }: ReceiverHealthP
   const noErrorsColor = someWithNoAttempt ? 'orange' : 'green';
   const noErrorsText = someWithNoAttempt ? 'No attempts' : 'OK';
   return errorsByReceiver > 0 ? (
-    <ReceiverError errorCount={errorsByReceiver} />
+    <ReceiverError errorCount={errorsByReceiver} showErrorCount={true} />
   ) : (
     <Badge color={noErrorsColor} text={noErrorsText} tooltip="" />
   );