From 70b5bd609c76335fd020213b423d83db10f55dc6 Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Fri, 13 Sep 2024 17:21:17 +0200
Subject: [PATCH] Alerting: Update rules empty state CTA (#93276)

---
 .../alerting/unified/RuleList.test.tsx        | 31 +------
 .../unified/components/rules/NoRulesCTA.tsx   | 88 ++++++++-----------
 public/locales/en-US/grafana.json             |  5 ++
 public/locales/pseudo-LOCALE/grafana.json     |  5 ++
 4 files changed, 51 insertions(+), 78 deletions(-)

diff --git a/public/app/features/alerting/unified/RuleList.test.tsx b/public/app/features/alerting/unified/RuleList.test.tsx
index 32879cf4425..5ed14c39266 100644
--- a/public/app/features/alerting/unified/RuleList.test.tsx
+++ b/public/app/features/alerting/unified/RuleList.test.tsx
@@ -812,6 +812,7 @@ describe('RuleList', () => {
         expect(ui.exportButton.get()).toBeInTheDocument();
       });
     });
+
     describe('Grafana Managed Alerts', () => {
       it('New alert button should be visible when the user has alert rule create and folder read permissions and no rules exists', async () => {
         grantUserPermissions([
@@ -828,6 +829,7 @@ describe('RuleList', () => {
         renderRuleList();
 
         await waitFor(() => expect(mocks.api.fetchRules).toHaveBeenCalledTimes(1));
+
         expect(ui.newRuleButton.get()).toBeInTheDocument();
       });
 
@@ -903,33 +905,4 @@ describe('RuleList', () => {
       });
     });
   });
-
-  describe('Analytics', () => {
-    it('Sends log info when creating an alert rule from a scratch', async () => {
-      grantUserPermissions([
-        AccessControlAction.FoldersRead,
-        AccessControlAction.AlertingRuleCreate,
-        AccessControlAction.AlertingRuleRead,
-      ]);
-
-      mocks.getAllDataSourcesMock.mockReturnValue([]);
-      setDataSourceSrv(new MockDataSourceSrv({}));
-      mocks.api.fetchRules.mockResolvedValue([]);
-      mocks.api.fetchRulerRules.mockResolvedValue({});
-
-      renderRuleList();
-
-      await waitFor(() => expect(mocks.api.fetchRules).toHaveBeenCalledTimes(1));
-
-      const button = screen.getByText('New alert rule');
-
-      button.addEventListener('click', (event) => event.preventDefault(), false);
-
-      expect(button).toBeEnabled();
-
-      await userEvent.click(button);
-
-      expect(analytics.logInfo).toHaveBeenCalledWith(analytics.LogMessages.alertRuleFromScratch);
-    });
-  });
 });
diff --git a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
index b9deb610400..38a4da4ce30 100644
--- a/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
+++ b/public/app/features/alerting/unified/components/rules/NoRulesCTA.tsx
@@ -1,56 +1,46 @@
-import { css } from '@emotion/css';
+import { EmptyState, LinkButton, Stack, TextLink } from '@grafana/ui';
+import { Trans } from 'app/core/internationalization';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { CallToActionCard, useStyles2, Stack } from '@grafana/ui';
-import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
-
-import { logInfo, LogMessages } from '../../Analytics';
 import { useRulesAccess } from '../../utils/accessControlHooks';
 
 export const NoRulesSplash = () => {
   const { canCreateGrafanaRules, canCreateCloudRules } = useRulesAccess();
-  const styles = useStyles2(getStyles);
-  if (canCreateGrafanaRules || canCreateCloudRules) {
-    return (
-      <div>
-        <p>{"You haven't created any alert rules yet"}</p>
-        <Stack gap={1}>
-          <div className={styles.newRuleCard}>
-            <EmptyListCTA
-              title=""
-              buttonIcon="bell"
-              buttonLink={'alerting/new/alerting'}
-              buttonTitle="New alert rule"
-              proTip="you can also create alert rules from existing panels and queries."
-              proTipLink="https://grafana.com/docs/"
-              proTipLinkTitle="Learn more"
-              proTipTarget="_blank"
-              onClick={() => logInfo(LogMessages.alertRuleFromScratch)}
-            />
-          </div>
+  const canCreateAnything = canCreateGrafanaRules || canCreateCloudRules;
 
-          <div className={styles.newRuleCard}>
-            <EmptyListCTA
-              title=""
-              buttonIcon="plus"
-              buttonLink={'alerting/new/recording'}
-              buttonTitle="New recording rule"
-              onClick={() => logInfo(LogMessages.recordingRuleFromScratch)}
-            />
-          </div>
-        </Stack>
-      </div>
-    );
-  }
-  return <CallToActionCard message="No rules exist yet." callToActionElement={<div />} />;
+  return (
+    <div>
+      <EmptyState
+        message="You haven't created any rules yet"
+        variant="call-to-action"
+        button={
+          canCreateAnything ? (
+            <Stack direction="row" alignItems="center" justifyContent="center">
+              {canCreateAnything && (
+                <LinkButton variant="primary" icon="plus" size="lg" href="alerting/new/alerting">
+                  <Trans i18nKey="alerting.list-view.empty.new-alert-rule">New alert rule</Trans>
+                </LinkButton>
+              )}
+              {canCreateCloudRules && (
+                <LinkButton variant="primary" icon="plus" size="lg" href="alerting/new/recording">
+                  <Trans i18nKey="alerting.list-view.empty.new-recording-rule">New recording rule</Trans>
+                </LinkButton>
+              )}
+            </Stack>
+          ) : null
+        }
+      >
+        <>
+          <Trans i18nKey="alerting.list-view.empty.provisioning">
+            You can also define rules through file provisioning or Terraform.{' '}
+            <TextLink
+              href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/"
+              external
+            >
+              Learn more
+            </TextLink>
+          </Trans>
+        </>
+      </EmptyState>
+    </div>
+  );
 };
-
-const getStyles = (theme: GrafanaTheme2) => ({
-  newRuleCard: css({
-    width: `calc(50% - ${theme.spacing(1)})`,
-
-    '> div': {
-      height: '100%',
-    },
-  }),
-});
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 2878db15790..ecec41eb388 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -125,6 +125,11 @@
       "label": "Contact point"
     },
     "list-view": {
+      "empty": {
+        "new-alert-rule": "New alert rule",
+        "new-recording-rule": "New recording rule",
+        "provisioning": "You can also define rules through file provisioning or Terraform. <2>Learn more</2>"
+      },
       "section": {
         "dataSourceManaged": {
           "title": "Data source-managed"
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 372edbc3414..5c79fdf73a2 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -125,6 +125,11 @@
       "label": "Cőʼnŧäčŧ pőįʼnŧ"
     },
     "list-view": {
+      "empty": {
+        "new-alert-rule": "Ńęŵ äľęřŧ řūľę",
+        "new-recording-rule": "Ńęŵ řęčőřđįʼnģ řūľę",
+        "provisioning": "Ÿőū čäʼn äľşő đęƒįʼnę řūľęş ŧĥřőūģĥ ƒįľę přővįşįőʼnįʼnģ őř Ŧęřřäƒőřm. <2>Ŀęäřʼn mőřę</2>"
+      },
       "section": {
         "dataSourceManaged": {
           "title": "Đäŧä şőūřčę-mäʼnäģęđ"