feat(ui): Export and download resource with formatted resource name

CHANGELOG.md

@@ -17,6 +17,7 @@
 1. [#13835](https://github.com/influxdata/influxdb/pull/13835): Render checkboxes in query builder tag selection lists
 1. [#13856](https://github.com/influxdata/influxdb/pull/13856): Fix jumbled card text in Telegraf configuration wizard
 1. [#13888](https://github.com/influxdata/influxdb/pull/13888): Change scrapers in scrapers list to be resource cards
+1. [#13925](https://github.com/influxdata/influxdb/pull/13925): Export and download resource with formatted resource name with no spaces
 
 ## v2.0.0-alpha.9 [2019-05-01]
 

ui/src/shared/components/CSVExportButton.tsx

@@ -54,9 +54,9 @@ class CSVExportButton extends PureComponent<StateProps, {}> {
     const {files} = this.props
     const csv = files.join('\n\n')
     const now = moment().format('YYYY-MM-DD-HH-mm')
-    const filename = `${now} Chronograf Data.csv`
+    const filename = `${now} Chronograf Data`
 
-    downloadTextFile(csv, filename, 'text/csv')
+    downloadTextFile(csv, filename, '.csv', 'text/csv')
   }
 }
 

ui/src/shared/components/ExportOverlay.tsx

@@ -136,8 +136,8 @@ class ExportOverlay extends PureComponent<Props> {
 
   private handleExport = (): void => {
     const {resource, resourceName, onDismissOverlay} = this.props
-    const name = get(resource, 'name', resourceName)
-    downloadTextFile(JSON.stringify(resource, null, 1), `${name}.json`)
+    const name = get(resource, 'content.data.attributes.name', resourceName)
+    downloadTextFile(JSON.stringify(resource, null, 1), name, '.json')
     onDismissOverlay()
   }
 

ui/src/shared/utils/download.ts

@@ -1,14 +1,24 @@
+export const formatDownloadName = (filename: string, extension: string) => {
+  return `${filename
+    .trim()
+    .toLowerCase()
+    .replace(/\s/g, '_')}${extension}`
+}
+
 export const downloadTextFile = (
   text: string,
   filename: string,
+  extension: string,
   mimeType: string = 'text/plain'
 ) => {
+  const formattedName = formatDownloadName(filename, extension)
+
   const blob = new Blob([text], {type: mimeType})
   const a = document.createElement('a')
 
   a.href = window.URL.createObjectURL(blob)
   a.target = '_blank'
-  a.download = filename
+  a.download = formattedName
 
   document.body.appendChild(a)
   a.click()

ui/src/shared/utils/downloads.test.ts

@@ -0,0 +1,23 @@
+import {formatDownloadName} from './download'
+
+describe('formatDownloadName', () => [
+  it('formats name correctly', () => {
+    const name1 = 'My Dashboard '
+    const name2 = 'my_dash'
+    const name3 = 'SystemConfig'
+
+    const expected1 = 'my_dashboard.json'
+    const expected2 = 'my_dash.json'
+    const expected3 = 'systemconfig.toml'
+
+    const extension = '.json'
+    const extension2 = '.toml'
+    const actual1 = formatDownloadName(name1, extension)
+    const actual2 = formatDownloadName(name2, extension)
+    const actual3 = formatDownloadName(name3, extension2)
+
+    expect(actual1).toEqual(expected1)
+    expect(actual2).toEqual(expected2)
+    expect(actual3).toEqual(expected3)
+  }),
+])

ui/src/telegrafs/components/TelegrafConfigOverlay.tsx

@@ -93,7 +93,7 @@ class TelegrafConfigOverlay extends PureComponent<Props> {
       telegrafConfig,
       telegraf: {name},
     } = this.props
-    downloadTextFile(telegrafConfig, `${name || 'config'}.toml`)
+    downloadTextFile(telegrafConfig, name || 'config', '.toml')
   }
 }