Alerting: Improve clarity of recording rule creation (#100700)

* Add description below group and namespace fields to make creation clearer

* Make DS managed recording rules clearer

* Change link for recording rule on empty state to Grafana managed

* Tweak empty state

* Tidy up logic for display of recording rule buttons

* Update .betterer.results

.betterer.results

@@ -2387,10 +2387,8 @@ exports[`better eslint`] = {
     ],
     "public/app/features/alerting/unified/components/rules/CloudRules.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],
-      [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/alerting/unified/components/rules/EditRuleGroupModal.tsx:5381": [
       [0, 0, 0, "No untranslated strings in text props. Wrap text with <Trans /> or use t()", "0"],

public/app/features/alerting/unified/components/rule-editor/GroupAndNamespaceFields.tsx

@@ -45,6 +45,10 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
       <Field
         data-testid="namespace-picker"
         label="Namespace"
+        // Disable translations as we don't intend to use this dropdown longterm,
+        // so avoiding us adding translations for the sake of it
+        // eslint-disable-next-line @grafana/no-untranslated-strings
+        description="Type to search for an existing namespace or create a new one"
         error={errors.namespace?.message}
         invalid={!!errors.namespace?.message}
       >
@@ -71,7 +75,16 @@ export const GroupAndNamespaceFields = ({ rulesSourceName }: Props) => {
           }}
         />
       </Field>
-      <Field data-testid="group-picker" label="Group" error={errors.group?.message} invalid={!!errors.group?.message}>
+      <Field
+        data-testid="group-picker"
+        label="Group"
+        // Disable translations as we don't intend to use this dropdown longterm,
+        // so avoiding us adding translations for the sake of it
+        // eslint-disable-next-line @grafana/no-untranslated-strings
+        description="Type to search for an existing group or create a new one"
+        error={errors.group?.message}
+        invalid={!!errors.group?.message}
+      >
         <Controller
           render={({ field: { ref, ...field } }) => (
             <VirtualizedSelect

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

@@ -133,11 +133,12 @@ export function CreateRecordingRuleButton() {
         href={urlUtil.renderUrl(`alerting/new/recording`, {
           returnTo: location.pathname + location.search,
         })}
-        tooltip="Create new Data source-managed recording rule"
         icon="plus"
         variant="secondary"
       >
-        New recording rule
+        <Trans i18nKey="alerting.list-view.empty.new-ds-managed-recording-rule">
+          New data source-managed recording rule
+        </Trans>
       </LinkButton>
     );
   }

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

@@ -1,8 +1,65 @@
-import { EmptyState, LinkButton, Stack, TextLink } from '@grafana/ui';
-import { Trans } from 'app/core/internationalization';
+import { config } from '@grafana/runtime';
+import { Dropdown, EmptyState, LinkButton, Menu, MenuItem, Stack, TextLink } from '@grafana/ui';
+import { Trans, t } from 'app/core/internationalization';
 
 import { useRulesAccess } from '../../utils/accessControlHooks';
 
+const RecordingRulesButtons = () => {
+  const { canCreateGrafanaRules, canCreateCloudRules } = useRulesAccess();
+  const grafanaRecordingRulesEnabled = config.featureToggles.grafanaManagedRecordingRules;
+  const canCreateAll = canCreateGrafanaRules && canCreateCloudRules && grafanaRecordingRulesEnabled;
+
+  // User can create Grafana and DS-managed recording rules, show a dropdown
+  if (canCreateAll) {
+    return (
+      <Dropdown
+        overlay={
+          <Menu>
+            <MenuItem
+              url="alerting/new/grafana-recording"
+              icon="plus"
+              label={t('alerting.list-view.empty.new-grafana-recording-rule', 'New Grafana-managed recording rule')}
+            />
+            <MenuItem
+              url="alerting/new/recording"
+              icon="plus"
+              label={t(
+                'alerting.list-view.empty.new-ds-managed-recording-rule',
+                'New data source-managed recording rule'
+              )}
+            />
+          </Menu>
+        }
+      >
+        <LinkButton variant="primary" icon="plus" size="lg">
+          <Trans i18nKey="alerting.list-view.empty.new-recording-rule">New recording rule</Trans>
+        </LinkButton>
+      </Dropdown>
+    );
+  }
+
+  // ...Otherwise, just show the buttons for each type of recording rule
+  // (this will just be one or the other)
+  return (
+    <>
+      {canCreateGrafanaRules && grafanaRecordingRulesEnabled && (
+        <LinkButton variant="primary" icon="plus" size="lg" href="alerting/new/grafana-recording">
+          <Trans i18nKey="alerting.list-view.empty.new-grafana-recording-rule">
+            New Grafana-managed recording rule
+          </Trans>
+        </LinkButton>
+      )}
+      {canCreateCloudRules && (
+        <LinkButton variant="primary" icon="plus" size="lg" href="alerting/new/recording">
+          <Trans i18nKey="alerting.list-view.empty.new-ds-managed-recording-rule">
+            New data source-managed recording rule
+          </Trans>
+        </LinkButton>
+      )}
+    </>
+  );
+};
+
 export const NoRulesSplash = () => {
   const { canCreateGrafanaRules, canCreateCloudRules } = useRulesAccess();
   const canCreateAnything = canCreateGrafanaRules || canCreateCloudRules;
@@ -14,17 +71,13 @@ export const NoRulesSplash = () => {
         variant="call-to-action"
         button={
           canCreateAnything ? (
-            <Stack direction="row" alignItems="center" justifyContent="center">
+            <Stack direction="column" 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>
-              )}
+              <RecordingRulesButtons />
             </Stack>
           ) : null
         }

public/locales/en-US/grafana.json

@@ -379,6 +379,8 @@
     "list-view": {
       "empty": {
         "new-alert-rule": "New alert rule",
+        "new-ds-managed-recording-rule": "New data source-managed recording rule",
+        "new-grafana-recording-rule": "New Grafana-managed recording rule",
         "new-recording-rule": "New recording rule",
         "provisioning": "You can also define rules through file provisioning or Terraform. <2>Learn more</2>"
       },