Alerting: Add export drawer when exporting all Grafana managed alerts (#74846)

* Add export formats drawer when exporting contact points

* Add 'export by format' drawer in policies (root policy)

* Add test for showing export policies button

* Add tests for Policy.tsx

* Add tests for export functionality in receivers

* Add exporter drawer for receivers

* Fix prettier warnings

* Allow HCL only for alert rules exports

* Add tests for Policies

* Fix tests

* Refactor: Update ExportProviders types for limiting the avaliable export formats when using GrafanaExportDrawer

* Delete unused shouldShowExportOption method and tests

* Add exporter drawer when clicking export all Grafana managed alerts

* Fix test

* fix prettier

* lint

---------

Co-authored-by: Gilles De Mey <gilles.de.mey@gmail.com>

public/app/features/alerting/unified/MoreActionsRuleButtons.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
+import { useToggle } from 'react-use';
 
 import { urlUtil } from '@grafana/data';
 import { Button, Dropdown, Icon, LinkButton, Menu, MenuItem } from '@grafana/ui';
 
 import { logInfo, LogMessages } from './Analytics';
+import { GrafanaRulesExporter } from './components/export/GrafanaRulesExporter';
 import { useRulesAccess } from './utils/accessControlHooks';
-import { createUrl } from './utils/url';
 
 interface Props {}
 
 export function MoreActionsRuleButtons({}: Props) {
   const { canCreateGrafanaRules, canCreateCloudRules, canReadProvisioning } = useRulesAccess();
   const location = useLocation();
+  const [showExportDrawer, toggleShowExportDrawer] = useToggle(false);
   const newMenu = (
     <Menu>
       {(canCreateGrafanaRules || canCreateCloudRules) && (
@@ -23,16 +25,7 @@ export function MoreActionsRuleButtons({}: Props) {
           label="New recording rule"
         />
       )}
-      {canReadProvisioning && (
-        <MenuItem
-          url={createUrl('/api/v1/provisioning/alert-rules/export', {
-            download: 'true',
-            format: 'yaml',
-          })}
-          label="Export all Grafana-managed rules"
-          target="_blank"
-        />
-      )}
+      {canReadProvisioning && <MenuItem onClick={toggleShowExportDrawer} label="Export all Grafana-managed rules" />}
     </Menu>
   );
 
@@ -54,6 +47,7 @@ export function MoreActionsRuleButtons({}: Props) {
           <Icon name="angle-down" />
         </Button>
       </Dropdown>
+      {showExportDrawer && <GrafanaRulesExporter onClose={toggleShowExportDrawer} />}
     </>
   );
 }

public/app/features/alerting/unified/RuleList.test.tsx

@@ -117,7 +117,9 @@ const ui = {
   editCloudGroupIcon: byTestId('edit-group'),
   newRuleButton: byRole('link', { name: 'New alert rule' }),
   moreButton: byRole('button', { name: 'More' }),
-  exportButton: byRole('link', { name: /export/i }),
+  exportButton: byRole('menuitem', {
+    name: /export all grafana\-managed rules/i,
+  }),
   editGroupModal: {
     dialog: byRole('dialog'),
     namespaceInput: byRole('textbox', { name: /^Namespace/ }),

public/app/features/alerting/unified/api/alertRuleApi.ts

@@ -192,6 +192,13 @@ export const alertRuleApi = alertingApi.injectEndpoints({
         responseType: 'text',
       }),
     }),
+    exportRules: build.query<string, { format: ExportFormats }>({
+      query: ({ format }) => ({
+        url: `/api/v1/provisioning/alert-rules/export`,
+        params: { format: format },
+        responseType: 'text',
+      }),
+    }),
     exportReceiver: build.query<string, { receiverName: string; decrypt: boolean; format: ExportFormats }>({
       query: ({ receiverName, decrypt, format }) => ({
         url: `/api/v1/provisioning/contact-points/export/`,

public/app/features/alerting/unified/components/export/GrafanaRulesExporter.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+
+import { LoadingPlaceholder } from '@grafana/ui';
+
+import { alertRuleApi } from '../../api/alertRuleApi';
+
+import { FileExportPreview } from './FileExportPreview';
+import { GrafanaExportDrawer } from './GrafanaExportDrawer';
+import { allGrafanaExportProviders, ExportFormats } from './providers';
+
+interface GrafanaRulesExporterProps {
+  onClose: () => void;
+}
+
+export function GrafanaRulesExporter({ onClose }: GrafanaRulesExporterProps) {
+  const [activeTab, setActiveTab] = useState<ExportFormats>('yaml');
+
+  return (
+    <GrafanaExportDrawer
+      activeTab={activeTab}
+      onTabChange={setActiveTab}
+      onClose={onClose}
+      formatProviders={Object.values(allGrafanaExportProviders)}
+    >
+      <GrafanaRulesExportPreview exportFormat={activeTab} onClose={onClose} />
+    </GrafanaExportDrawer>
+  );
+}
+
+interface GrafanaRulesExportPreviewProps {
+  exportFormat: ExportFormats;
+  onClose: () => void;
+}
+
+function GrafanaRulesExportPreview({ exportFormat, onClose }: GrafanaRulesExportPreviewProps) {
+  const { currentData: rulesDefinition = '', isFetching } = alertRuleApi.useExportRulesQuery({
+    format: exportFormat,
+  });
+
+  const downloadFileName = `alert-rules-${new Date().getTime()}`;
+
+  if (isFetching) {
+    return <LoadingPlaceholder text="Loading...." />;
+  }
+
+  return (
+    <FileExportPreview
+      format={exportFormat}
+      textDefinition={rulesDefinition}
+      downloadFileName={downloadFileName}
+      onClose={onClose}
+    />
+  );
+}