Panel Inspect: Allow CSV download for Excel (#27284)

* fix: Use locale to find delimiter for CSV export

* Add sep= Excel header to CSV exporter

* Add modal for Excel export

* Move Excel download to 'Data options' as toggle

* Add 'Download for Excel' documentation

public/app/features/dashboard/components/Inspector/InspectDataTab.tsx

@@ -12,6 +12,7 @@ import {
   transformDataFrame,
 } from '@grafana/data';
 import { Button, Container, Field, HorizontalGroup, Icon, Select, Switch, Table, VerticalGroup } from '@grafana/ui';
+import { CSVConfig } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { getPanelInspectorStyles } from './styles';
@@ -39,6 +40,7 @@ interface State {
   dataFrameIndex: number;
   transformationOptions: Array<SelectableValue<DataTransformerID>>;
   transformedData: DataFrame[];
+  downloadForExcel: boolean;
 }
 
 export class InspectDataTab extends PureComponent<Props, State> {
@@ -51,6 +53,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
       transformId: DataTransformerID.noop,
       transformationOptions: buildTransformationOptions(),
       transformedData: props.data ?? [],
+      downloadForExcel: false,
     };
   }
 
@@ -82,11 +85,11 @@ export class InspectDataTab extends PureComponent<Props, State> {
     }
   }
 
-  exportCsv = (dataFrame: DataFrame) => {
+  exportCsv = (dataFrame: DataFrame, csvConfig: CSVConfig = {}) => {
     const { panel } = this.props;
     const { transformId } = this.state;
 
-    const dataFrameCsv = toCSV([dataFrame]);
+    const dataFrameCsv = toCSV([dataFrame], csvConfig);
 
     const blob = new Blob([String.fromCharCode(0xfeff), dataFrameCsv], {
       type: 'text/csv;charset=utf-8',
@@ -156,6 +159,10 @@ export class InspectDataTab extends PureComponent<Props, State> {
       }
     }
 
+    if (this.state.downloadForExcel) {
+      parts.push('Excel header');
+    }
+
     return parts.join(', ');
   }
 
@@ -233,6 +240,12 @@ export class InspectDataTab extends PureComponent<Props, State> {
                   />
                 </Field>
               )}
+              <Field label="Download for Excel" description="Adds header to CSV for use with Excel">
+                <Switch
+                  value={this.state.downloadForExcel}
+                  onChange={() => this.setState({ downloadForExcel: !this.state.downloadForExcel })}
+                />
+              </Field>
             </HorizontalGroup>
           </VerticalGroup>
         </div>
@@ -269,7 +282,7 @@ export class InspectDataTab extends PureComponent<Props, State> {
           <div className={styles.dataDisplayOptions}>{this.renderDataOptions(dataFrames)}</div>
           <Button
             variant="primary"
-            onClick={() => this.exportCsv(dataFrames[dataFrameIndex])}
+            onClick={() => this.exportCsv(dataFrames[dataFrameIndex], { useExcelHeader: this.state.downloadForExcel })}
             className={css`
               margin-bottom: 10px;
             `}