feat: overhaul collection view

Merge pull request #609 from qri-io/feat_collection_view

app/components/Layout.tsx

@@ -9,6 +9,7 @@ interface LayoutProps {
  sidebarContent?: React.ReactElement
  mainContent: React.ReactElement
  headerContent?: React.ReactElement
+ topbarButtons: NavbarButtonProps[]
  onSidebarResize?: (width: number) => void
  maximumSidebarWidth?: number
  title?: string
@@ -31,12 +32,13 @@ const Layout: React.FunctionComponent<LayoutProps> = (props: LayoutProps) => {
  mainContent,
  headerContent,
  title = '',
+ topbarButtons,
  showNav = true
  } = props
 
  return (
  <div id={id} className='sidebar-layout'>
- {showNav && <NavTopbar title={title} />}
+ {showNav && <NavTopbar title={title} buttons={topbarButtons} />}
  {headerContent}
  <div className='columns'>
  {sidebarContent && <Resizable

app/components/chrome/BackArrow.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface ArrowProps {
+ disabled?: boolean
+}
+
+const BackArrow: React.FC<ArrowProps> = ({ disabled = false }) => (
+ <svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1">
+ <g id="chrome/back_button" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round">
+ <g id="Group" transform="translate(3.000000, 2.000000)" stroke={disabled ? '#c2c2c2' : '#4D4D4D'} strokeWidth="4">
+ <line x1="14.75" y1="7.04861111" x2="1.75" y2="7.04861111" id="Line-3"></line>
+ <polyline id="Path-3" points="6.125 0.243055556 0.125 7.04861111 6.125 13.8541667"></polyline>
+ </g>
+ </g>
+ </svg>
+)
+
+export default BackArrow

app/components/chrome/ForwardArrow.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+interface ArrowProps {
+ disabled?: boolean
+}
+
+const ForwardArrow: React.FC<ArrowProps> = ({ disabled = false }) => (
+ <svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1">
+ <g id="chrome/forward_button" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd" strokeLinecap="round">
+ <g id="Group-Copy" transform="translate(9.000000, 9.000000) rotate(-180.000000) translate(-9.000000, -9.000000) translate(1.000000, 2.000000)" stroke={disabled ? '#c2c2c2' : '#4D4D4D'} strokeWidth="4">
+ <line x1="14.75" y1="7.04861111" x2="1.75" y2="7.04861111" id="Line-3"></line>
+ <polyline id="Path-3" points="6.125 0.243055556 0.125 7.04861111 6.125 13.8541667"></polyline>
+ </g>
+ </g>
+ </svg>
+)
+
+export default ForwardArrow

app/components/chrome/HeaderColumnButton.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import classNames from 'classnames'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { IconDefinition } from '@fortawesome/free-regular-svg-icons'

app/components/collection/collectionHome/CollectionHome.tsx

@@ -1,10 +1,19 @@
-import * as React from 'react'
+import React from 'react'
 import { ipcRenderer } from 'electron'
+import { faDownload, faPlus } from '@fortawesome/free-solid-svg-icons'
+
+import { setModal } from '../../../actions/ui'
+import { connectComponentToProps } from '../../../utils/connectComponentToProps'
+import { Modal, ModalType } from '../../../models/modals'
 
 import Layout from '../../Layout'
-import CollectionHomeMainContent from './CollectionHomeMainContent'
+import DatasetCollection from './DatasetCollection'
+
+interface CollectionHomeProps {
+ setModal: (modal: Modal) => void
+}
 
-export const CollectionHome: React.FunctionComponent<any> = () => {
+export const CollectionHome: React.FC<CollectionHomeProps> = ({ setModal }) => {
  React.useEffect(() => {
  ipcRenderer.send('show-dataset-menu', false)
  }, [])
@@ -13,9 +22,33 @@ export const CollectionHome: React.FunctionComponent<any> = () => {
  <Layout
  id='collection-container'
  title='Collection'
- mainContent={<CollectionHomeMainContent />}
+ topbarButtons={
+ [
+ {
+ type: 'button',
+ id: 'create-dataset',
+ icon: faPlus,
+ label: 'New Dataset',
+ onClick: () => { setModal({ type: ModalType.CreateDataset }) }
+ },
+ {
+ type: 'button',
+ id: 'pull-dataset',
+ icon: faDownload,
+ label: 'Pull Dataset',
+ onClick: () => { setModal({ type: ModalType.PullDataset }) }
+ }
+ ]
+ }
+ mainContent={<DatasetCollection />}
  />
  )
 }
 
-export default CollectionHome
+export default connectComponentToProps(
+ CollectionHome,
+ {},
+ {
+ setModal
+ }
+)

app/components/collection/collectionHome/CollectionHomeMainContent.tsx → app/components/collection/collectionHome/DatasetCollection.tsx

@@ -1,30 +1,26 @@
 import React from 'react'
 import { Action } from 'redux'
 import path from 'path'
-import { faPlus, faDownload } from '@fortawesome/free-solid-svg-icons'
 
 import { ApiAction } from '../../../store/api'
-import { Modal, ModalType } from '../../../models/modals'
 import { ToastType } from '../../../models/store'
 import { QriRef } from '../../../models/qriRef'
 import { connectComponentToProps } from '../../../utils/connectComponentToProps'
 import { setModal, openToast, closeToast } from '../../../actions/ui'
 import { importFile } from '../../../actions/api'
 
-import HeaderColumnButton from '../../chrome/HeaderColumnButton'
 import DropZone from '../../chrome/DropZone'
 import DatasetList from './DatasetList'
 
-export interface CollectionHomeMainContentProps {
+export interface DatasetCollectionProps {
  qriRef: QriRef
- setModal: (modal: Modal) => void
  importFile: (filePath: string, fileName: string, fileSize: number) => Promise<ApiAction>
  openToast: (type: ToastType, name: string, message: string) => Action
  closeToast: () => Action
 }
 
-export const CollectionHomeMainContentComponent: React.FunctionComponent<CollectionHomeMainContentProps> = (props) => {
- const { setModal, importFile, openToast, closeToast } = props
+export const DatasetCollection: React.FunctionComponent<DatasetCollectionProps> = (props) => {
+ const { importFile, openToast, closeToast } = props
 
  const [dragging, setDragging] = React.useState(false)
 
@@ -63,29 +59,15 @@ export const CollectionHomeMainContentComponent: React.FunctionComponent<Collect
  setDragging={setDragging}
  onDrop={dropHandler}
  />}
- <div className='main-content-header'>
- <HeaderColumnButton
- id='create-dataset'
- icon={faPlus}
- label='Create new Dataset'
- onClick={() => { setModal({ type: ModalType.CreateDataset }) }}
- />
- <HeaderColumnButton
- icon={faDownload}
- id='pull-dataset'
- label='Add existing Dataset'
- onClick={() => { setModal({ type: ModalType.PullDataset }) }}
- />
- </div>
  <div className='main-content-flex'>
- <DatasetList />
+ <DatasetList showFSI />
  </div>
  </div>
  )
 }
 
 export default connectComponentToProps(
- CollectionHomeMainContentComponent,
+ DatasetCollection,
  {},
  {
  setModal,