Alerting: Add Copy link to Alert on View rule page (#37967)

* add button to page

* add url to getText

* reorder imports

* build url function

* remove log

* encode

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.story.internal.tsx

@@ -14,7 +14,7 @@ export default {
       page: mdx,
     },
     controls: {
-      exclude: ['size', 'variant', 'icon', 'className', 'fullWidth', 'getText', 'onClipboardCopy', 'onClipboardError'],
+      exclude: ['variant', 'icon', 'className', 'fullWidth', 'getText', 'onClipboardCopy', 'onClipboardError'],
     },
   },
 } as Meta;
@@ -32,6 +32,7 @@ const Wrapper: Story<StoryProps> = (args) => {
       <div style={{ display: 'flex', width: '100%', marginBottom: '1em' }}>
         <ClipboardButton
           variant="secondary"
+          size={args.size}
           getText={() => args.inputText}
           onClipboardCopy={() => setCopyMessage(clipboardCopyMessage)}
         >
@@ -47,4 +48,5 @@ export const CopyToClipboard = Wrapper.bind({});
 CopyToClipboard.args = {
   inputText: 'go run build.go -goos linux -pkg-arch amd64 ${OPT} package-only',
   buttonText: 'Copy to clipboard',
+  size: 'md',
 };

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

@@ -1,17 +1,19 @@
-import { css } from '@emotion/css';
-import { GrafanaTheme2, urlUtil } from '@grafana/data';
-import { Button, ConfirmModal, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
-import { contextSrv } from 'app/core/services/context_srv';
-import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
 import React, { FC, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
+import { css } from '@emotion/css';
+import { AppEvents, GrafanaTheme2, urlUtil } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { Button, ConfirmModal, ClipboardButton, HorizontalGroup, LinkButton, useStyles2 } from '@grafana/ui';
+import { contextSrv } from 'app/core/services/context_srv';
+import { appEvents } from 'app/core/core';
 import { useIsRuleEditable } from '../../hooks/useIsRuleEditable';
-import { deleteRuleAction } from '../../state/actions';
 import { Annotation } from '../../utils/constants';
 import { getRulesSourceName, isCloudRulesSource } from '../../utils/datasource';
 import { createExploreLink, createViewLink } from '../../utils/misc';
 import * as ruleId from '../../utils/rule-id';
+import { deleteRuleAction } from '../../state/actions';
+import { CombinedRule, RulesSource } from 'app/types/unified-alerting';
 
 interface Props {
   rule: CombinedRule;
@@ -46,6 +48,15 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
     }
   };
 
+  const buildShareUrl = () => {
+    if (isCloudRulesSource(rulesSource)) {
+      const ruleUrl = `${encodeURIComponent(rulesSource.name)}/${encodeURIComponent(rule.name)}`;
+      return `${config.appUrl}${config.appSubUrl ? '/' + config.appSubUrl : ''}alerting/${ruleUrl}/find`;
+    }
+
+    return window.location.href.split('?')[0];
+  };
+
   // explore does not support grafana rule queries atm
   if (isCloudRulesSource(rulesSource) && contextSrv.isEditor) {
     leftButtons.push(
@@ -135,6 +146,24 @@ export const RuleDetailsActionButtons: FC<Props> = ({ rule, rulesSource }) => {
       returnTo,
     });
 
+    if (isViewMode) {
+      rightButtons.push(
+        <ClipboardButton
+          onClipboardCopy={() => {
+            appEvents.emit(AppEvents.alertSuccess, ['URL copied!']);
+          }}
+          onClipboardError={(e) => {
+            appEvents.emit(AppEvents.alertError, ['Error while copying URL', e.text]);
+          }}
+          className={style.button}
+          size="sm"
+          getText={buildShareUrl}
+        >
+          Copy link to rule
+        </ClipboardButton>
+      );
+    }
+
     rightButtons.push(
       <LinkButton className={style.button} size="xs" key="edit" variant="secondary" icon="pen" href={editURL}>
         Edit