From 9cb2b339cf89344626002ab831cdc7f3b14183c3 Mon Sep 17 00:00:00 2001
From: Iris Scholten <ischolten.is@gmail.com>
Date: Tue, 14 May 2019 13:18:20 -0700
Subject: [PATCH] feat(ui): Export and download resource with formatted
 resource name

---
 CHANGELOG.md                                  |  1 +
 ui/src/shared/components/CSVExportButton.tsx  |  4 ++--
 ui/src/shared/components/ExportOverlay.tsx    |  4 ++--
 ui/src/shared/utils/download.ts               | 12 +++++++++-
 ui/src/shared/utils/downloads.test.ts         | 23 +++++++++++++++++++
 .../components/TelegrafConfigOverlay.tsx      |  2 +-
 6 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 ui/src/shared/utils/downloads.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 60c668cd822..36970cfc41e 100644
--- a/CHANGELOG.md
+++ b/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]
 
diff --git a/ui/src/shared/components/CSVExportButton.tsx b/ui/src/shared/components/CSVExportButton.tsx
index 1b34e9e046a..8da0d7ccbe2 100644
--- a/ui/src/shared/components/CSVExportButton.tsx
+++ b/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')
   }
 }
 
diff --git a/ui/src/shared/components/ExportOverlay.tsx b/ui/src/shared/components/ExportOverlay.tsx
index 67770d4b6e9..e0b90edeb95 100644
--- a/ui/src/shared/components/ExportOverlay.tsx
+++ b/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()
   }
 
diff --git a/ui/src/shared/utils/download.ts b/ui/src/shared/utils/download.ts
index d9757430176..00f1d238c34 100644
--- a/ui/src/shared/utils/download.ts
+++ b/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()
diff --git a/ui/src/shared/utils/downloads.test.ts b/ui/src/shared/utils/downloads.test.ts
new file mode 100644
index 00000000000..e3ad5e8f0fe
--- /dev/null
+++ b/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)
+  }),
+])
diff --git a/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx b/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
index 1736eecdd1a..a277f605a55 100644
--- a/ui/src/telegrafs/components/TelegrafConfigOverlay.tsx
+++ b/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')
   }
 }