DATA-2023 Create insights using markdown body (#36)

* DATA-2023 Create insights using markdown body

* Remove unused functions

* Fix some small grammer mistakes

cypress/integration/spec.js

@@ -28,7 +28,7 @@ describe('Chart Builder', function() {
           }
         )
         fetch.put(
-          'https://api.data.world/v0/uploads/data-society/iris-species/files/test-title.vl.json',
+          'begin:https://api.data.world/v0/uploads/data-society/iris-species/files/test-title',
           { message: 'File uploaded.' }
         )
         fetch.get('glob:*/static/media/licenses*', 'cypress license text')
@@ -157,7 +157,6 @@ describe('Chart Builder', function() {
     cy.get('[data-test=share-insight]').click()
     cy.get('.modal')
 
-    cy.get('[data-test=insight-save-vega-lite-checkbox]').uncheck()
     cy.get('.btn-primary').click()
 
     cy.get('.alert-link').should(

src/components/SaveAsInsightModal.js

@@ -9,8 +9,7 @@ import {
   Alert,
   Col,
   Row,
-  Grid,
-  Checkbox
+  Grid
 } from 'react-bootstrap'
 import { decorate, observable } from 'mobx'
 import { observer, inject } from 'mobx-react'
@@ -21,6 +20,7 @@ import LoadingAnimation from './LoadingAnimation'
 import { getDownloadName } from '../util/util'
 import VegaLiteImage from './VegaLiteImage'
 import classes from './Modals.module.css'
+import { getStateUrl } from '../util/urlState'
 import type { StoreType } from '../util/Store'
 
 type Props = {
@@ -31,33 +31,16 @@ type Props = {
   store: StoreType
 }
 
-function storeBlob(blob: Blob): Promise<{ url: string }> {
-  const filepicker = require('filepicker-js')
-  return new Promise((resolve, reject) => {
-    filepicker.setKey('Al0jca1QpS4iGpimTNsAqz')
-    filepicker.store(blob, resolve, reject)
-  })
-}
-
 class SaveAsInsightModal extends Component<Props> {
   id: string = ''
   title: string = this.props.store.config.title || ''
-  comment: string = ''
-  saveAsFile: boolean = true
+  description: string = ''
 
   response: ?{ message: string, uri: string } = null
   saving: boolean = false
 
   img: ?Blob = null
 
-  getFileCreateUrl() {
-    const slugname = kebabCase(this.title)
-    return `${API_HOST}/v0/uploads/${this.id}/files/${getDownloadName(
-      slugname,
-      'vl.json'
-    )}`
-  }
-
   getInsightCreateUrl() {
     return `${API_HOST}/v0/insights/${this.id}`
   }
@@ -68,34 +51,31 @@ class SaveAsInsightModal extends Component<Props> {
     const specWithData = store.config.getSpecWithMinimumAmountOfData(data)
     this.saving = true
 
-    let sourceLink = `https://chart-builder.data.world/${
-      window.location.search
-    }`
-
-    if (this.saveAsFile) {
-      const filename = getDownloadName(kebabCase(this.title), 'vl.json')
-      const fileCreateUrl = `${API_HOST}/v0/uploads/${
-        this.id
-      }/files/${filename}`
-      await fetch(fileCreateUrl, {
-        method: 'PUT',
-        headers: {
-          Accept: 'application/json',
-          Authorization: `Bearer ${store.token}`,
-          'Content-Type': 'application/octet-stream'
-        },
-        body: JSON.stringify(specWithData)
-      })
-      sourceLink = `https://data.world/${
-        this.id
-      }/workspace/file?filename=${filename}`
-    }
+    const filename = getDownloadName(kebabCase(this.title), 'vl.json')
+    const linkToVLFile = `https://data.world/${
+      this.id
+    }/workspace/file?filename=${filename}`
+
+    const fileCreateUrl = `${API_HOST}/v0/uploads/${this.id}/files/${filename}`
+    await fetch(fileCreateUrl, {
+      method: 'PUT',
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${store.token}`,
+        'Content-Type': 'application/octet-stream'
+      },
+      body: JSON.stringify(specWithData)
+    })
 
     // shouldn't really happen
     if (!this.img) return
 
-    // upload image
-    const uploadRes = await storeBlob(this.img)
+    const chartURL = getStateUrl(store)
+    const queryResults =
+      store.savedQueryId &&
+      `https://data.world/${this.id}/workspace/query?queryid=${
+        store.savedQueryId
+      }`
 
     // create insight
     const d = await fetch(this.getInsightCreateUrl(), {
@@ -107,11 +87,16 @@ class SaveAsInsightModal extends Component<Props> {
       },
       body: JSON.stringify({
         title: this.title,
-        description: this.comment,
         body: {
-          imageUrl: uploadRes.url
+          markdownBody:
+            `\`\`\`vega-lite\n ${JSON.stringify(specWithData)} \n\`\`\`\n` +
+            this.description +
+            `\n\n Click [here](${chartURL}) to edit this chart.` +
+            (queryResults
+              ? `\n\n Here is the query that generated this chart: \n @(${queryResults})`
+              : '')
         },
-        sourceLink
+        sourceLink: linkToVLFile
       })
     }).then(r => r.json())
 
@@ -174,26 +159,20 @@ class SaveAsInsightModal extends Component<Props> {
                     onChange={e => (this.title = e.target.value)}
                   />
                 </FormGroup>
-                <FormGroup controlId="insight-comment">
+                <FormGroup controlId="insight-description">
                   <ControlLabel>
-                    Add comment <small className="text-muted">(optional)</small>
+                    Add description
+                    <small className="text-muted">(optional)</small>
                   </ControlLabel>
                   <FormControl
                     componentClass="textarea"
                     type="textarea"
-                    value={this.comment}
+                    value={this.description}
                     placeholder="Enter text"
-                    onChange={e => (this.comment = e.target.value)}
+                    onChange={e => (this.description = e.target.value)}
                     rows={3}
                   />
                 </FormGroup>
-                <Checkbox
-                  data-test="insight-save-vega-lite-checkbox"
-                  checked={this.saveAsFile}
-                  onChange={e => (this.saveAsFile = e.target.checked)}
-                >
-                  <strong>Also save as Vega-Lite source file</strong>
-                </Checkbox>
               </Col>
             </Row>
           </Grid>
@@ -221,8 +200,7 @@ class SaveAsInsightModal extends Component<Props> {
 decorate(SaveAsInsightModal, {
   id: observable,
   title: observable,
-  comment: observable,
-  saveAsFile: observable,
+  description: observable,
   img: observable,
   response: observable,
   saving: observable

src/util/Store.js

@@ -388,7 +388,7 @@ const Store: ModelType<StoreType> = types
     },
     get savedQueryId() {
       const providedSavedQueryId = self.parsedUrlQuery.saved_query
-      if (!providedSavedQueryId) {
+      if (!providedSavedQueryId || providedSavedQueryId.includes('sample')) {
         return null
       }
       return providedSavedQueryId

src/views/App.js

@@ -86,7 +86,7 @@ class App extends Component<AppP> {
     })
 
     let res
-    if (store.savedQueryId && !store.savedQueryId.includes('sample')) {
+    if (store.savedQueryId) {
       const savedQueryURL = `${API_HOST}/v0/queries/${
         store.savedQueryId
       }/results?includeTableSchema=true`