Alerting: Fix silence drawer being re-rendered when the alert list is refreshed (#99468)

* Fix silence drawer being re-rendered when the alert list is refreshed

* remove unnecessary formValues usage as prop

* remove AlertmanagerProvider in RuleActionsButtonsV2

public/app/features/alerting/unified/components/rules/RuleActionsButtons.tsx

@@ -7,7 +7,6 @@ import { useDeleteModal } from 'app/features/alerting/unified/components/rule-vi
 import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails';
 import SilenceGrafanaRuleDrawer from 'app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer';
 import { useRulesFilter } from 'app/features/alerting/unified/hooks/useFilteredRules';
-import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';
 import { useDispatch } from 'app/types';
 import { CombinedRule, RuleIdentifier, RulesSource } from 'app/types/unified-alerting';
 
@@ -126,9 +125,7 @@ export const RuleActionsButtons = ({ compact, showViewButton, rule, rulesSource
       />
       {deleteModal}
       {isGrafanaAlertingRule(rule.rulerRule) && showSilenceDrawer && (
-        <AlertmanagerProvider accessType="instance">
-          <SilenceGrafanaRuleDrawer rulerRule={rule.rulerRule} onClose={() => setShowSilenceDrawer(false)} />
-        </AlertmanagerProvider>
+        <SilenceGrafanaRuleDrawer rulerRule={rule.rulerRule} onClose={() => setShowSilenceDrawer(false)} />
       )}
       {redirectToClone?.identifier && (
         <RedirectToCloneRule

public/app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer.tsx

@@ -1,9 +1,12 @@
+import React from 'react';
+
 import { Drawer, Stack } from '@grafana/ui';
 import { SilencesEditor } from 'app/features/alerting/unified/components/silences/SilencesEditor';
-import { getDefaultSilenceFormValues } from 'app/features/alerting/unified/components/silences/utils';
 import { GRAFANA_RULES_SOURCE_NAME } from 'app/features/alerting/unified/utils/datasource';
 import { RulerGrafanaRuleDTO } from 'app/types/unified-alerting-dto';
 
+import { AlertmanagerProvider } from '../../state/AlertmanagerContext';
+
 type Props = {
   rulerRule: RulerGrafanaRuleDTO;
   onClose: () => void;
@@ -12,29 +15,33 @@ type Props = {
 /**
  * For a given Grafana managed rule, renders a drawer containing silences editor and Alertmanager selection
  */
-const SilenceGrafanaRuleDrawer = ({ rulerRule, onClose }: Props) => {
-  const { uid } = rulerRule.grafana_alert;
+const SilenceGrafanaRuleDrawer = React.memo(
+  ({ rulerRule, onClose }: Props) => {
+    const { uid } = rulerRule.grafana_alert;
 
-  const formValues = getDefaultSilenceFormValues();
-
-  return (
-    <Drawer
-      title="Silence alert rule"
-      subtitle="Configure silences to stop notifications from a particular alert rule."
-      onClose={onClose}
-      size="md"
-    >
-      <Stack direction={'column'}>
-        <SilencesEditor
-          ruleUid={uid}
-          formValues={formValues}
-          alertManagerSourceName={GRAFANA_RULES_SOURCE_NAME}
-          onSilenceCreated={onClose}
-          onCancel={onClose}
-        />
-      </Stack>
-    </Drawer>
-  );
-};
+    return (
+      <Drawer
+        title="Silence alert rule"
+        subtitle="Configure silences to stop notifications from a particular alert rule."
+        onClose={onClose}
+        size="md"
+      >
+        <Stack direction={'column'}>
+          <AlertmanagerProvider accessType="instance">
+            <SilencesEditor
+              ruleUid={uid}
+              alertManagerSourceName={GRAFANA_RULES_SOURCE_NAME}
+              onSilenceCreated={onClose}
+              onCancel={onClose}
+            />
+          </AlertmanagerProvider>
+        </Stack>
+      </Drawer>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.rulerRule.grafana_alert.uid === nextProps.rulerRule.grafana_alert.uid;
+  }
+);
 
 export default SilenceGrafanaRuleDrawer;

public/app/features/alerting/unified/rule-list/components/RuleActionsButtons.V2.tsx

@@ -9,7 +9,6 @@ import { RedirectToCloneRule } from 'app/features/alerting/unified/components/ru
 import { INSTANCES_DISPLAY_LIMIT } from 'app/features/alerting/unified/components/rules/RuleDetails';
 import SilenceGrafanaRuleDrawer from 'app/features/alerting/unified/components/silences/SilenceGrafanaRuleDrawer';
 import { useRulesFilter } from 'app/features/alerting/unified/hooks/useFilteredRules';
-import { AlertmanagerProvider } from 'app/features/alerting/unified/state/AlertmanagerContext';
 import { useDispatch } from 'app/types';
 import { Rule, RuleGroupIdentifierV2, RuleIdentifier } from 'app/types/unified-alerting';
 import { RulerRuleDTO } from 'app/types/unified-alerting-dto';
@@ -93,9 +92,7 @@ export function RuleActionsButtons({ compact, rule, promRule, groupIdentifier }:
       />
       {deleteModal}
       {isGrafanaAlertingRule(rule) && showSilenceDrawer && (
-        <AlertmanagerProvider accessType="instance">
-          <SilenceGrafanaRuleDrawer rulerRule={rule} onClose={() => setShowSilenceDrawer(false)} />
-        </AlertmanagerProvider>
+        <SilenceGrafanaRuleDrawer rulerRule={rule} onClose={() => setShowSilenceDrawer(false)} />
       )}
       {redirectToClone?.identifier && (
         <RedirectToCloneRule