Alerting: Clarify provisioning export types (#82420)

Add provisioning type export Alert

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

@@ -4,9 +4,9 @@ import React, { useCallback, useMemo } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Button, ClipboardButton, CodeEditor, useStyles2 } from '@grafana/ui';
+import { Alert, Button, ClipboardButton, CodeEditor, TextLink, useStyles2 } from '@grafana/ui';
 
-import { allGrafanaExportProviders, ExportFormats } from './providers';
+import { allGrafanaExportProviders, ExportFormats, ExportProvider, ProvisioningType } from './providers';
 
 interface FileExportPreviewProps {
   format: ExportFormats;
@@ -19,6 +19,7 @@ interface FileExportPreviewProps {
 
 export function FileExportPreview({ format, textDefinition, downloadFileName, onClose }: FileExportPreviewProps) {
   const styles = useStyles2(fileExportPreviewStyles);
+  const provider = allGrafanaExportProviders[format];
 
   const onDownload = useCallback(() => {
     const blob = new Blob([textDefinition], {
@@ -28,13 +29,13 @@ export function FileExportPreview({ format, textDefinition, downloadFileName, on
   }, [textDefinition, downloadFileName, format]);
 
   const formattedTextDefinition = useMemo(() => {
-    const provider = allGrafanaExportProviders[format];
     return provider.formatter ? provider.formatter(textDefinition) : textDefinition;
-  }, [format, textDefinition]);
+  }, [provider, textDefinition]);
 
   return (
     // TODO Handle empty content
     <div className={styles.container}>
+      <FileExportInlineDocumentation exportProvider={provider} />
       <div className={styles.content}>
         <AutoSizer disableWidth>
           {({ height }) => (
@@ -87,3 +88,60 @@ const fileExportPreviewStyles = (theme: GrafanaTheme2) => ({
     gap: ${theme.spacing(1)};
   `,
 });
+
+function FileExportInlineDocumentation({ exportProvider }: { exportProvider: ExportProvider<unknown> }) {
+  const { name, type } = exportProvider;
+
+  const exportInlineDoc: Record<ProvisioningType, { title: string; component: React.ReactNode }> = {
+    file: {
+      title: 'File-provisioning format',
+      component: (
+        <>
+          {name} format is only valid for File Provisioning.{' '}
+          <TextLink
+            href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/file-provisioning/"
+            external
+          >
+            Read more in the docs.
+          </TextLink>
+        </>
+      ),
+    },
+    api: {
+      title: 'API-provisioning format',
+      component: (
+        <>
+          {name} format is only valid for API Provisioning.{' '}
+          <TextLink
+            href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/http-api-provisioning/"
+            external
+          >
+            Read more in the docs.
+          </TextLink>
+        </>
+      ),
+    },
+    terraform: {
+      title: 'Terraform-provisioning format',
+      component: (
+        <>
+          {name} format is only valid for Terraform Provisioning.{' '}
+          <TextLink
+            href="https://grafana.com/docs/grafana/latest/alerting/set-up/provision-alerting-resources/terraform-provisioning/"
+            external
+          >
+            Read more in the docs.
+          </TextLink>
+        </>
+      ),
+    },
+  };
+
+  const { title, component } = exportInlineDoc[type];
+
+  return (
+    <Alert title={title} severity="info" bottomSpacing={0} topSpacing={0}>
+      {component}
+    </Alert>
+  );
+}

public/app/features/alerting/unified/components/export/providers.ts

@@ -1,12 +1,16 @@
+export type ProvisioningType = 'file' | 'api' | 'terraform';
+
 export interface ExportProvider<TFormat> {
   name: string;
   exportFormat: TFormat;
+  type: ProvisioningType;
   formatter?: (raw: string) => string;
 }
 
 export const JsonExportProvider: ExportProvider<'json'> = {
   name: 'JSON',
   exportFormat: 'json',
+  type: 'file',
   formatter: (raw: string) => {
     try {
       return JSON.stringify(JSON.parse(raw), null, 4);
@@ -19,11 +23,13 @@ export const JsonExportProvider: ExportProvider<'json'> = {
 export const YamlExportProvider: ExportProvider<'yaml'> = {
   name: 'YAML',
   exportFormat: 'yaml',
+  type: 'file',
 };
 
 export const HclExportProvider: ExportProvider<'hcl'> = {
   name: 'Terraform (HCL)',
   exportFormat: 'hcl',
+  type: 'terraform',
 };
 
 export const allGrafanaExportProviders = {