feat(Collection Home): add export collection row option

refactored CommitDetails to work directly with VersionInfo props to make the entire Export modal
rely on only a VersionInfo for it's backing data.

Also added an export e2e test

Author: b5

app/components/CommitDetails.tsx

@@ -1,30 +1,27 @@
 import * as React from 'react'
 import numeral from 'numeral'
 
-import { Structure, Commit } from '../models/dataset'
+import { VersionInfo } from '../models/store'
 
 import Icon from './chrome/Icon'
 import RelativeTimestamp from './RelativeTimestamp'
 
-interface CommitDetailsProps {
-  structure: Structure
-  commit: Commit
-  path: string
-}
-
-const CommitDetails: React.FunctionComponent<CommitDetailsProps> = (props) => {
-  const { structure, commit, path } = props
-  return (
-    <>
-      <span className='dataset-details' style={{ marginBottom: '6px' }}><Icon icon='stickyNote' size='sm' color='medium' />{commit.title}</span>
-      <div className='dataset-details-container'>
-        <span className='dataset-details'><Icon icon='commit' size='sm' color='medium' /><span title={path}>{path.substring(path.length - 7)}</span></span>
-        <span className='dataset-details'><Icon icon='clock' size='sm' color='medium' /><RelativeTimestamp timestamp={commit.timestamp}/></span>
-        <span className='dataset-details'><Icon icon='hdd' size='sm' color='medium' />{numeral(structure.length).format('0.0b')}</span>
-        <span className='dataset-details'><Icon icon='bars' size='sm' color='medium' />{numeral(structure.entries).format('0,0')} rows</span>
-      </div>
-    </>
-  )
-}
+const CommitDetails: React.FunctionComponent<VersionInfo> = ({
+  commitTitle,
+  commitTime,
+  bodySize,
+  bodyRows,
+  path
+}) => (
+  <>
+    {commitTitle && <span className='dataset-details' style={{ marginBottom: '6px' }}><Icon icon='stickyNote' size='sm' color='medium' />{commitTitle}</span>}
+    <div className='dataset-details-container'>
+      <span className='dataset-details'><Icon icon='commit' size='sm' color='medium' /><span title={path}>{path.substring(path.length - 7)}</span></span>
+      <span className='dataset-details'><Icon icon='clock' size='sm' color='medium' /><RelativeTimestamp timestamp={commitTime}/></span>
+      <span className='dataset-details'><Icon icon='hdd' size='sm' color='medium' />{numeral(bodySize).format('0.0b')}</span>
+      <span className='dataset-details'><Icon icon='bars' size='sm' color='medium' />{numeral(bodyRows).format('0,0')} rows</span>
+    </div>
+  </>
+)
 
 export default CommitDetails

app/components/collection/DatasetHeader.tsx

@@ -10,16 +10,22 @@ interface DatasetHeaderProps {
   commit: Commit
 }
 
-const DatasetHeader: React.FunctionComponent<DatasetHeaderProps> = ({ path, structure, commit }) => {
-  return (
-    <div className='commit-details-header'>
-      {
-        structure && commit && (
-          <CommitDetails structure={structure} commit={commit} path={path} />
-        )
-      }
-    </div>
-  )
-}
+const DatasetHeader: React.FC<DatasetHeaderProps> = ({
+  path,
+  structure,
+  commit
+}) => (
+  <div className='commit-details-header'>
+    {structure && commit && (
+      <CommitDetails
+        bodyRows={structure.entries}
+        bodySize={structure.length}
+        commitTime={commit.timestamp}
+        commitTitle={commit.title}
+        path={path}
+      />
+    )}
+  </div>
+)
 
 export default DatasetHeader

app/components/collection/collectionHome/TableRowHamburger.tsx

@@ -13,18 +13,30 @@ interface TableRowHamburgerProps {
 
 const TableRowHamburger: React.FC<TableRowHamburgerProps> = ({ data, setModal }) => {
   const { username, name, fsiPath } = data
-  const actions = [{
-    icon: 'trash',
-    text: 'Remove',
-    onClick: () => {
-      setModal({
-        type: ModalType.RemoveDataset,
-        username,
-        name,
-        fsiPath
-      })
+  const actions = [
+    {
+      icon: 'download',
+      text: 'Export',
+      onClick: () => {
+        setModal({
+          type: ModalType.ExportDataset,
+          version: data
+        })
+      }
+    },
+    {
+      icon: 'trash',
+      text: 'Remove',
+      onClick: () => {
+        setModal({
+          type: ModalType.RemoveDataset,
+          username,
+          name,
+          fsiPath
+        })
+      }
     }
-  }]
+  ]
 
   return (
     <Hamburger id={`${data.username}/${data.name}`} data={actions} />

app/components/modals/ExportDataset.tsx

@@ -2,14 +2,8 @@ import React, { useState } from 'react'
 import classNames from 'classnames'
 
 import { dismissModal } from '../../actions/ui'
-import { Dataset } from '../../../app/models/dataset'
 import { ExportDatasetModal } from '../../../app/models/modals'
-import { QriRef } from '../../models/qriRef'
-import {
-  selectModal,
-  selectDatasetRef,
-  selectDataset
-} from '../../selections'
+import { selectModal } from '../../selections'
 import { connectComponentToProps } from '../../utils/connectComponentToProps'
 import exportDatasetVersion from '../../actions/platformSpecific/export.TARGET_PLATFORM'
 
@@ -21,13 +15,11 @@ import RadioInput from '../form/RadioInput'
 
 interface ExportDatasetProps {
   modal: ExportDatasetModal
-  qriRef: QriRef
-  dataset: Dataset
   onDismissed: () => void
 }
 
 export const ExportDatasetComponent: React.FC<ExportDatasetProps> = (props: ExportDatasetProps) => {
-  const { onDismissed, qriRef, dataset: { structure, commit } } = props
+  const { onDismissed } = props
   const { version } = props.modal
 
   const [dismissable, setDismissable] = useState(true)
@@ -75,10 +67,8 @@ export const ExportDatasetComponent: React.FC<ExportDatasetProps> = (props: Expo
         <div className='content'>
           <div className='export-dataset-info'>
             <div className='dialog-text-small'>
-              <code style={{ marginBottom: '15px' }}>{qriRef.username}/{qriRef.name}</code><br/>
-              {structure && commit && (
-                <CommitDetails commit={commit} structure={structure} path={qriRef.path} />
-              )}
+              <code style={{ marginBottom: '15px' }}>{version.username}/{version.name}</code><br/>
+              <CommitDetails {...version} />
             </div>
           </div>
           <div className='mode-picker'>
@@ -117,9 +107,7 @@ export default connectComponentToProps(
   (state: any, ownProps: ExportDatasetProps) => {
     return {
       ...ownProps,
-      modal: selectModal(state),
-      qriRef: selectDatasetRef(state),
-      dataset: selectDataset(state)
+      modal: selectModal(state)
     }
   },
   {

app/main.development.js

@@ -516,7 +516,11 @@ app.on('ready', () =>
           exportUrl = `${BACKEND_URL}/get/${refString}/body.csv`
         }
         const win = BrowserWindow.getFocusedWindow()
-        await download(win, exportUrl, { filename, directory })
+        await download(win, exportUrl, {
+          filename,
+          directory,
+          openFolderWhenDone: true
+        })
       })
 
       ipcMain.on('block-menus', (e, blockMenus) => {

test/e2e/e2e.spec.ts

@@ -478,6 +478,18 @@ describe('Qri End to End tests', function spec () {
     await sendKeys('#dataset-name-input', "Enter")
   })
 
+  it('export CSV version', async () => {
+    const { click, delay } = utils
+
+    const savePath = path.join(backend.dir, 'body.csv')
+    await fakeDialog.mock([ { method: 'showSaveDialogSync', value: savePath } ])
+
+    await click('#export-dataset')
+    await click('#submit')
+    await delay(200) // wait to ensure file has time to write
+    expect(fs.existsSync(savePath)).toEqual(true)
+  })
+
   // switch between commits
   it('switch between commits', async () => {
     const {

test/e2e/e2e_test_flows.md

@@ -113,6 +113,12 @@ The following flows deal with launching the app for the first time, signing out
 - set a good name
 - click away to submit
 
+### export a CSV version
+- click the header export dataset button: #export-button
+- mock the electron save dialog to send to `TEST_TMP_DIR/body.csv`
+- click #submit
+- check that a file at `TEST_TMP_DIR/body.csv` exists
+
 ### switch between commits
 - ensure you are at the correct dataset
 - click on each commit #HEAD-3 #HEAD-2 #HEAD-1 #HEAD-0