From 11a8628381bdb3a6a4d2256f81528d99e23ce5dd Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Thu, 12 Jan 2023 15:30:31 +0100
Subject: [PATCH] Alerting: Improve incident button (#61372)

---
 .../bridges/DeclareIncidentButton.tsx           | 17 ++++++++---------
 .../rules/RuleDetailsActionButtons.tsx          |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/public/app/features/alerting/unified/components/bridges/DeclareIncidentButton.tsx b/public/app/features/alerting/unified/components/bridges/DeclareIncidentButton.tsx
index 3c15e0f81a4..cd85c55dadc 100644
--- a/public/app/features/alerting/unified/components/bridges/DeclareIncidentButton.tsx
+++ b/public/app/features/alerting/unified/components/bridges/DeclareIncidentButton.tsx
@@ -1,39 +1,38 @@
 import React, { FC } from 'react';
-import { useHistory } from 'react-router-dom';
 
-import { Button, Tooltip } from '@grafana/ui';
+import { Button, LinkButton, Tooltip } from '@grafana/ui';
 
 import { createBridgeURL, usePluginBridge, SupportedPlugin } from '../PluginBridge';
 
 interface Props {
   title?: string;
   severity?: 'minor' | 'major' | 'critical';
+  url?: string;
 }
 
-export const DeclareIncident: FC<Props> = ({ title = '', severity = '' }) => {
-  const history = useHistory();
-  const bridgeURL = createBridgeURL(SupportedPlugin.Incident, '/incidents/declare', { title, severity });
+export const DeclareIncident: FC<Props> = ({ title = '', severity = '', url = '' }) => {
+  const bridgeURL = createBridgeURL(SupportedPlugin.Incident, '/incidents/declare', { title, severity, url });
 
   const { loading, installed, settings } = usePluginBridge(SupportedPlugin.Incident);
 
   return (
     <>
       {loading === true && (
-        <Button size="sm" type="button" disabled>
+        <Button icon="fire" size="sm" type="button" disabled>
           Declare Incident
         </Button>
       )}
       {installed === false && (
         <Tooltip content={'Grafana Incident is not installed or is not configured correctly'}>
-          <Button size="sm" type="button" disabled>
+          <Button icon="fire" size="sm" type="button" disabled>
             Declare Incident
           </Button>
         </Tooltip>
       )}
       {settings && (
-        <Button size="sm" type="button" onClick={() => history.push(bridgeURL)}>
+        <LinkButton icon="fire" size="sm" type="button" href={bridgeURL}>
           Declare Incident
-        </Button>
+        </LinkButton>
       )}
     </>
   );
diff --git a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
index 1d6aa31ca0a..1c1fdee3f13 100644
--- a/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
+++ b/public/app/features/alerting/unified/components/rules/RuleDetailsActionButtons.tsx
@@ -172,7 +172,7 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource, isViewM
   if (isFiringRule) {
     buttons.push(
       <Fragment key="declare-incident">
-        <DeclareIncident title={rule.name} />
+        <DeclareIncident title={rule.name} url={buildShareUrl()} />
       </Fragment>
     );
   }