feat(compare): style & wire up compare section

app/components/compare/Compare.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react'
+import { Action } from 'redux'
+import { connect } from 'react-redux'
 
 import { BACKEND_URL } from '../../constants'
+import Store from '../../models/store'
+import { setSidebarWidth } from '../../actions/ui'
 
 import Spinner from '../chrome/Spinner'
 import CompareSidebar, { CompareParams } from './CompareSidebar'
@@ -9,14 +13,19 @@ import TableDiff from './TableDiff'
 
 export interface CompareProps {
  compact?: boolean
+
+ sidebarWidth: number
+ setSidebarWidth: (type: string, sidebarWidth: number) => Action
 }
 
 const initialCompareParams: CompareParams = {
  left: '',
  right: ''
 }
 
-const Compare: React.FunctionComponent<CompareProps> = (props: CompareProps) => {
+export const CompareComponent: React.FC<CompareProps> = (props) => {
+ const { sidebarWidth, setSidebarWidth } = props
+
  const [loading, setLoading] = React.useState(false)
  const [params, setParams] = React.useState(initialCompareParams)
  const [data, setData] = React.useState(null)
@@ -58,15 +67,13 @@ const Compare: React.FunctionComponent<CompareProps> = (props: CompareProps) =>
  <Layout
  id='compare-container'
  sidebarContent={<CompareSidebar data={params} onChange={setParams} />}
- sidebarWidth={360}
- // onSidebarResize={(width) => { setSidebarWidth('collection', width) }}
+ sidebarWidth={sidebarWidth}
+ onSidebarResize={(width) => { setSidebarWidth('dataset', width) }}
  mainContent={mainContent()}
  />
  )
 }
 
-export default Compare
-
 async function diff (left: string, right: string): Promise<any[]> {
  const options: FetchOptions = {
  method: 'GET'
@@ -81,3 +88,13 @@ async function diff (left: string, right: string): Promise<any[]> {
 
  return res.data as any[]
 }
+
+const mapStateToProps = (state: Store) => {
+ return {
+ sidebarWidth: state.ui.datasetSidebarWidth
+ }
+}
+
+export default connect(mapStateToProps, {
+ setSidebarWidth
+})(CompareComponent)

app/components/compare/CompareSidebar.tsx

@@ -4,6 +4,7 @@ import { remote } from 'electron'
 import TextInput from '../form/TextInput'
 import ButtonInput from '../form/ButtonInput'
 import Icon from '../chrome/Icon'
+import ExternalLink from '../ExternalLink'
 
 export interface CompareParams {
  left: string
@@ -19,6 +20,11 @@ const CompareSidebar: React.FC<CompareSidebarProps> = ({ data, onChange }) => {
  const pathPicker = (side: string) => {
  const window = remote.getCurrentWindow()
  const filePaths: string[] | undefined = remote.dialog.showOpenDialogSync(window, {
+ title: 'Choose a CSV file',
+ buttonLabel: 'Load',
+ filters: [
+ { name: 'Structured Data', extensions: ['csv'] }
+ ],
  properties: ['openFile']
  })
 
@@ -47,11 +53,11 @@ const CompareSidebar: React.FC<CompareSidebarProps> = ({ data, onChange }) => {
  }
 
  return (
- <div className='dataset-sidebar compare-sidebar'>
- <div className='dataset-sidebar-header sidebar-padded-container'>
- <div className='right'>
- </div>
+ <div className='compare-sidebar sidebar'>
+ <div className='sidebar-header sidebar-padded-container'>
  <p className='pane-title'>Compare</p>
+ </div>
+ <div className='sidebar-padded-container'>
  <div className='picker'>
  <div className='indicator'>
  <Icon icon='minus' size='md' color='red' />
@@ -69,13 +75,11 @@ const CompareSidebar: React.FC<CompareSidebarProps> = ({ data, onChange }) => {
  </ButtonInput>
  </div>
  </div>
- {(data.left && data.right) &&
- <div className='picker swap'>
- <ButtonInput onClick={handleSwap}>
- <Icon icon='sort' size='md' color='light' />
- </ButtonInput>
- </div>
- }
+ <div className='picker swap'>
+ <ButtonInput disabled={!(data.left && data.right)} onClick={handleSwap}>
+ <Icon icon='sort' size='md' color='light' />
+ </ButtonInput>
+ </div>
  <div className='picker'>
  <div className='indicator'>
  <Icon icon='plus' size='md' color='green' />
@@ -94,6 +98,9 @@ const CompareSidebar: React.FC<CompareSidebarProps> = ({ data, onChange }) => {
  </div>
  </div>
  </div>
+ <div className='sidebar-padded-container note'>
+ <p>Compare view is under active development. Comparing is limited to CSV files under 10Mb. If you have any feeback, please <ExternalLink id='file-compare-issue' href='https://github.com/qri-io/desktop/issues/new'>file an issue</ExternalLink>.</p>
+ </div>
  </div>
  )
 }

app/components/form/ButtonInput.tsx

@@ -1,6 +1,20 @@
-import * as React from 'react'
+import React from 'react'
+import classNames from 'classnames'
 
-const ButtonInput: React.FunctionComponent<any> = ({ id = '', onClick, children }) =>
- <button id={id} onClick={onClick} className='input button'>{children}</button>
+export interface ButtonInputProps {
+ id?: string
+ disabled?: boolean
+ onClick: (e: React.SyntheticEvent) => void
+ children: React.ReactElement
+}
+
+const ButtonInput: React.FC<any> = ({ id = '', disabled = false, onClick, children }) => (
+ <button
+ id={id}
+ onClick={onClick}
+ disabled={disabled}
+ className={classNames('input button', { disabled })}
+ >{children}</button>
+)
 
 export default ButtonInput

app/scss/0.4.0/compare.scss

@@ -1,22 +1,37 @@
-.compare-sidebar .picker {
- display: flex;
-
- .input-label {
- color: white;
+.compare-sidebar {
+ background: #123459;
+ height: 100%;
+
+ .picker {
+ display: flex;
+
+ .input-label{
+ color: white;
+ }
+
+ .input {
+ color: white;
+ background: #00000025;
+ }
+
+ .indicator {
+ margin: 10px 10px 0 5px;
+ }
+
+ .input.button {
+ margin-top: 5px;
+
+ &.disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+ }
  }
 
- .input {
+ h3 {
  color: white;
- background: #00000025;
- }
-
- .indicator {
- margin: 10px 10px 0 5px;
- }
-
- .input.button {
- margin-top: 5px;
  }
+
 }
 
 .picker.swap {