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

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)
     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 = '.json',
   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,18 @@
+import {formatDownloadName} from './download'
+
+describe('formatDownloadName', () => [
+  it('formats name correctly', () => {
+    const name1 = 'My Dashboard '
+    const name2 = 'my_dash'
+
+    const expected1 = 'my_dashboard.json'
+    const expected2 = 'my_dash.json'
+
+    const extension = '.json'
+    const actual1 = formatDownloadName(name1, extension)
+    const actual2 = formatDownloadName(name2, extension)
+
+    expect(actual1).toEqual(expected1)
+    expect(actual2).toEqual(expected2)
+  }),
+])