From 43c81ddd23f574ab2bba8c23e008a6cc003028f3 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Tue, 28 Dec 2021 20:56:43 +0100
Subject: [PATCH] Alerting: persist error dismissal to localstorage (#43406)

---
 .../components/rules/RuleListErrors.tsx       | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx
index 12517fb42bc..3de03a47ca4 100644
--- a/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleListErrors.tsx
@@ -1,16 +1,17 @@
 import { css } from '@emotion/css';
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
-import { Alert, Button, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Tooltip, useStyles2 } from '@grafana/ui';
 import { SerializedError } from '@reduxjs/toolkit';
 import pluralize from 'pluralize';
-import React, { useMemo, ReactElement, useState } from 'react';
+import React, { useMemo, ReactElement, useState, FC } from 'react';
+import { useLocalStorage } from 'react-use';
 import { useUnifiedAlertingSelector } from '../../hooks/useUnifiedAlertingSelector';
 import { getRulesDataSources, GRAFANA_RULES_SOURCE_NAME } from '../../utils/datasource';
 import { isRulerNotSupportedResponse } from '../../utils/rules';
 
 export function RuleListErrors(): ReactElement {
   const [expanded, setExpanded] = useState(false);
-  const [closed, setClosed] = useState(false);
+  const [closed, setClosed] = useLocalStorage('grafana.unifiedalerting.hideErrors', false);
   const promRuleRequests = useUnifiedAlertingSelector((state) => state.promRules);
   const rulerRuleRequests = useUnifiedAlertingSelector((state) => state.rulerRules);
   const styles = useStyles2(getStyles);
@@ -63,6 +64,9 @@ export function RuleListErrors(): ReactElement {
 
   return (
     <>
+      {!!errors.length && closed && (
+        <ErrorSummaryButton count={errors.length} onClick={() => setClosed((closed) => !closed)} />
+      )}
       {!!errors.length && !closed && (
         <Alert
           data-testid="cloud-rulessource-errors"
@@ -93,8 +97,31 @@ export function RuleListErrors(): ReactElement {
   );
 }
 
+interface ErrorSummaryProps {
+  count: number;
+  onClick: () => void;
+}
+
+const ErrorSummaryButton: FC<ErrorSummaryProps> = ({ count, onClick }) => {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.floatRight}>
+      <Tooltip content="Show all errors">
+        <Button fill="text" variant="destructive" icon="exclamation-triangle" onClick={onClick}>
+          {count > 1 ? <>{count} errors</> : <>1 error</>}
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
 const getStyles = (theme: GrafanaTheme2) => ({
   moreButton: css`
     padding: 0;
   `,
+  floatRight: css`
+    display: flex;
+    justify-content: flex-end;
+  `,
 });