fix(workbench): viewing trasnform component shouldn't crash

some latent cleanup here. I ended up doing a bunch of refactoring at the same time. Damn that DatasetComponent needs to drop in size.
qri-io · Mar 3, 2020 · 804d7e1 · 804d7e1
1 parent 9e4a1b1
commit 804d7e1
Show file tree

Hide file tree

Showing 10 changed files with 124 additions and 131 deletions.
diff --git a/app/components/Code.tsx b/app/components/Code.tsx
@@ -6,13 +6,12 @@ interface CodeProps {
 
 const Code: React.FunctionComponent<CodeProps> = (props: CodeProps) => {
   const { data = '' } = props
-
   const lines = data.split('\n')
 
   return (
-    <div className="code">
+    <div style={{ overflowX: 'auto' }} className="code">
       <pre style={{ float: 'left', margin: '0 20px', color: '#bbb' }}>{lines.map((_, i) => (`${i}\n`))}</pre>
-      <pre style={{ float: 'left' }}>{data}</pre>
+      <pre>{data}</pre>
     </div>
   )
 }

diff --git a/app/components/DatasetComponent.tsx b/app/components/DatasetComponent.tsx
@@ -1,33 +1,37 @@
 import * as React from 'react'
+import { Action } from 'redux'
 import path from 'path'
-
-import MetadataContainer from '../containers/MetadataContainer'
-import MetadataEditor from '../components/MetadataEditor'
-import Structure from '../components/Structure'
-import ParseError from './ParseError'
-import Readme from '../components/Readme'
-import TransformContainer from '../containers/TransformContainer'
-import ReadmeHistoryContainer from '../containers/ReadmeHistoryContainer'
 import { CSSTransition } from 'react-transition-group'
-import SpinnerWithIcon from './chrome/SpinnerWithIcon'
-import CommitHistoryContainer from '../containers/CommitHistoryContainer'
-import CommitContainer from '../containers/CommitContainer'
-
-import { getComponentDisplayProps } from './ComponentList'
 
 import { StatusInfo, SelectedComponent, PageInfo, ToastType } from '../models/store'
-import Body from './Body'
 import { Details } from '../models/details'
-import { ApiActionThunk } from '../store/api'
-import { Action } from 'redux'
+import { QriRef } from '../models/qriRef'
 import Dataset from '../models/dataset'
+import { ApiActionThunk } from '../store/api'
+
+import MetadataEditor from './MetadataEditor'
+import Structure from './Structure'
+import ParseError from './ParseError'
+import Readme from './Readme'
+import Transform from './Transform'
+import { getComponentDisplayProps } from './ComponentList'
+import Body from './Body'
+import SpinnerWithIcon from './chrome/SpinnerWithIcon'
 import DropZone from './chrome/DropZone'
 import CalloutBlock from './chrome/CalloutBlock'
 import Icon from './chrome/Icon'
 import StatusDot from './chrome/StatusDot'
 import { ToastTypes } from './chrome/Toast'
 
+// TODO (b5) - refactor all of these, inlining container definitions into
+// component files
+import MetadataContainer from '../containers/MetadataContainer'
+import ReadmeHistoryContainer from '../containers/ReadmeHistoryContainer'
+import CommitHistoryContainer from '../containers/CommitHistoryContainer'
+import CommitContainer from '../containers/CommitContainer'
+
 interface DatasetComponentProps {
+  qriRef: QriRef
   data: Dataset
 
   // display details
@@ -37,7 +41,7 @@ interface DatasetComponentProps {
   peername: string
   name: string
 
-  // seting actions
+  // setting actions
   setDetailsBar: (details: Record<string, any>) => Action
   openToast: (type: ToastType, name: string, message: string) => Action
   closeToast: () => Action
@@ -55,6 +59,7 @@ interface DatasetComponentProps {
 
 const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props: DatasetComponentProps) => {
   const {
+    qriRef,
     component: selectedComponent,
     componentStatus,
     isLoading,
@@ -237,7 +242,10 @@ const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props:
           appear={true}
         >
           <div className='transition-wrap'>
-            <TransformContainer />
+            <Transform
+              data={data.transform}
+              qriRef={qriRef}
+            />
           </div>
         </CSSTransition>
         <CSSTransition

diff --git a/app/components/Transform.tsx b/app/components/Transform.tsx
@@ -1,25 +1,35 @@
 import * as React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
 
-import { WorkingDataset } from '../models/store'
-import { ApiActionThunk } from '../store/api'
-
+import { Transform } from '../models/dataset'
+import Store from '../models/store'
+import { QriRef } from '../models/qriRef'
+import { fsiWrite } from '../actions/api'
 import Code from './Code'
 
 export interface TransformProps {
-  peername: string
-  name: string
-  value: string
-  preview: string
-  history: boolean
-  workingDataset: WorkingDataset
-  write: (peername: string, name: string, dataset: any) => ApiActionThunk
+  data: Transform
+  qriRef: QriRef
+
+  // TODO (b5) - work in progress
+  dryRun?: () => void
+}
+
+export const TransformComponent: React.FunctionComponent<TransformProps> = ({ data }) => {
+  return <Code data={data.scriptBytes || ''} />
+}
+
+const mapStateToProps = (state: Store, ownProps: TransformProps) => {
+  return ownProps
+}
+
+const mergeProps = (props: any, actions: any): TransformProps => { //eslint-disable-line
+  return { ...props, ...actions }
 }
 
-// TODO (b5) - setting a default value here b/c we're getting null value from
-// somewhere when we click workbench/transform component. need to investigate
-// and not pass a nonexistent value, ever.
-const Transform: React.FunctionComponent<TransformProps> = ({ value = '' }) => {
-  return <Code data={value} />
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return bindActionCreators({ write: fsiWrite }, dispatch)
 }
 
-export default Transform
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(TransformComponent)
diff --git a/app/components/CommitDetails.tsx → app/components/workbench/CommitDetails.tsx b/app/components/CommitDetails.tsx → app/components/workbench/CommitDetails.tsx
@@ -1,47 +1,15 @@
 import * as React from 'react'
-import moment from 'moment'
 import { Action } from 'redux'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faClock } from '@fortawesome/free-regular-svg-icons'
 
-import HistoryComponentList from '../components/HistoryComponentList'
-import DatasetComponent from './DatasetComponent'
-import Layout from './Layout'
-import Dataset, { Structure, Commit } from '../models/dataset'
-import { CommitDetails as ICommitDetails, ComponentType, SelectedComponent, Selections } from '../models/Store'
-import fileSize from '../utils/fileSize'
-import { Details } from '../models/details'
-import { ApiActionThunk } from '../store/api'
+import { CommitDetails as ICommitDetails, ComponentType, SelectedComponent, Selections } from '../../models/Store'
+import Dataset from '../../models/dataset'
+import { Details } from '../../models/details'
+import { ApiActionThunk } from '../../store/api'
 
-interface CommitDetailsHeaderProps {
-  structure: Structure
-  commit: Commit
-}
-
-const CommitDetailsHeader: React.FunctionComponent<CommitDetailsHeaderProps> = ({ structure, commit }) => {
-  return (
-    <div className='commit-details-header'>
-      {structure && commit && <div className='details-flex'>
-        <div className='text-column'>
-          <div id='commit-title' className='text'>{commit.title}</div>
-          <div className='subtext'>
-            {/* <img className= 'user-image' src = {'https://avatars0.githubusercontent.com/u/1154390?s=60&v=4'} /> */}
-            <div className='time-message'>
-              <FontAwesomeIcon icon={faClock} size='sm'/>&nbsp;
-              {moment(commit.timestamp).format('MMMM Do YYYY, h:mm:ss a')}
-            </div>
-          </div>
-        </div>
-        <div className='details-column'>
-          {structure.length && <div className='detail' id='commit-details-header-file-size'>{fileSize(structure.length)}</div>}
-          {structure.format && <div className='detail' id='commit-details-header-format'>{structure.format.toUpperCase()}</div>}
-          {structure.entries && <div className='detail' id='commit-details-header-entries'>{structure.entries.toLocaleString()} {structure.entries !== 1 ? 'entries' : 'entry'}</div>}
-          {structure.errCount && <div className='detail' id='commit-details-header-errors'>{structure.errCount.toLocaleString()} {structure.errCount !== 1 ? 'errors' : 'error'}</div>}
-        </div>
-      </div>}
-    </div>
-  )
-}
+import HistoryComponentList from '../HistoryComponentList'
+import DatasetComponent from '../DatasetComponent'
+import Layout from '../Layout'
+import CommitDetailsHeader from './CommitDetailsHeader'
 
 export interface CommitDetailsProps {
   data: ICommitDetails
@@ -54,22 +22,15 @@ export interface CommitDetailsProps {
   fsiWrite: (peername: string, name: string, dataset: Dataset) => ApiActionThunk
 }
 
-const CommitDetails: React.FunctionComponent<CommitDetailsProps> = ({
-  data,
-  // display details
-  details,
-  selections,
-
-  // setting actions
-  setDetailsBar,
-  setComponent,
-
-  // fetching api actions
-  fetchCommitBody,
-
-  // other api actions
-  fsiWrite
-}) => {
+const CommitDetails: React.FunctionComponent<CommitDetailsProps> = (props) => {
+  const {
+    data,
+    details,
+    selections,
+    setDetailsBar,
+    setComponent,
+    fetchCommitBody
+  } = props
   // we have to guard against an odd case when we look at history
   // it is possible that we can get the history of a dataset, but
   // not have every version of that dataset in our repo
@@ -122,6 +83,7 @@ const CommitDetails: React.FunctionComponent<CommitDetailsProps> = ({
         sidebarWidth={150}
         mainContent={(
           <DatasetComponent
+            qriRef={{}}
             data={dataset}
             peername={peername}
             name={name}

diff --git a/app/components/workbench/CommitDetailsHeader.tsx b/app/components/workbench/CommitDetailsHeader.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import moment from 'moment'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faClock } from '@fortawesome/free-regular-svg-icons'
+
+import { Structure, Commit } from '../../models/dataset'
+import fileSize from '../../utils/fileSize'
+
+interface CommitDetailsHeaderProps {
+  structure: Structure
+  commit: Commit
+}
+
+const CommitDetailsHeader: React.FunctionComponent<CommitDetailsHeaderProps> = ({ structure, commit }) => {
+  return (
+    <div className='commit-details-header'>
+      {structure && commit && <div className='details-flex'>
+        <div className='text-column'>
+          <div id='commit-title' className='text'>{commit.title}</div>
+          <div className='subtext'>
+            {/* <img className= 'user-image' src = {'https://avatars0.githubusercontent.com/u/1154390?s=60&v=4'} /> */}
+            <div className='time-message'>
+              <FontAwesomeIcon icon={faClock} size='sm'/>&nbsp;
+              {moment(commit.timestamp).format('MMMM Do YYYY, h:mm:ss a')}
+            </div>
+          </div>
+        </div>
+        <div className='details-column'>
+          {structure.length && <div className='detail' id='commit-details-header-file-size'>{fileSize(structure.length)}</div>}
+          {structure.format && <div className='detail' id='commit-details-header-format'>{structure.format.toUpperCase()}</div>}
+          {structure.entries && <div className='detail' id='commit-details-header-entries'>{structure.entries.toLocaleString()} {structure.entries !== 1 ? 'entries' : 'entry'}</div>}
+          {structure.errCount && <div className='detail' id='commit-details-header-errors'>{structure.errCount.toLocaleString()} {structure.errCount !== 1 ? 'errors' : 'error'}</div>}
+        </div>
+      </div>}
+    </div>
+  )
+}
+
+export default CommitDetailsHeader
diff --git a/app/components/workbench/Workbench.tsx b/app/components/workbench/Workbench.tsx
@@ -35,7 +35,7 @@ import HeaderColumnButton from '../chrome/HeaderColumnButton'
 import Hamburger from '../chrome/Hamburger'
 import WorkbenchSidebar from './WorkbenchSidebar'
 import DetailsBarContainer from '../../containers/DetailsBarContainer'
-import CommitDetails from '../CommitDetails'
+import CommitDetails from './CommitDetails'
 import NoDatasets from '../NoDatasets'
 import NotInNamespace from './NotInNamespace'
 
@@ -469,13 +469,14 @@ class Workbench extends React.Component<WorkbenchProps, Status> {
             >
               { inNamespace
                 ? <DatasetComponent
-                  details={details}
+                  qriRef={{ location: data.location, username: peername, name: name }}
+                  peername={peername}
+                  name={name}
                   data={this.datasetFromMutations()}
+                  details={details}
                   stats={stats}
                   bodyPageInfo={workingDataset.components.body.pageInfo}
                   setDetailsBar={setDetailsBar}
-                  peername={peername}
-                  name={name}
                   fetchBody={fetchBody}
                   write={isLinked ? fsiWrite : this.handleSetDataset}
                   component={selectedComponent}

diff --git a/app/containers/TransformContainer.tsx b/app/containers/TransformContainer.tsx
diff --git a/app/containers/WorkbenchContainer.tsx b/app/containers/WorkbenchContainer.tsx
@@ -1,10 +1,9 @@
 import { connect } from 'react-redux'
+
 import Workbench, { WorkbenchProps, WorkbenchData } from '../components/workbench/Workbench'
 import { fetchWorkbench } from '../actions/workbench'
 import { setMutationsDataset, setMutationsStatus, resetMutationsDataset, resetMutationsStatus, discardMutationsChanges } from '../actions/mutations'
-
 import { Store, Selections, WorkingDataset, Status } from '../models/store'
-
 import { setSidebarWidth, setModal, setDetailsBar, openToast, closeToast } from '../actions/ui'
 import {
   fetchBody,

diff --git a/app/models/dataset.ts b/app/models/dataset.ts
@@ -79,13 +79,19 @@ export interface Structure {
 
 export type Schema = JSONSchema7
 
+export interface Transform {
+  format?: string
+  scriptBytes?: string
+}
+
 export interface Dataset {
   meta?: Meta
   structure?: Structure
   body?: Body
   bodyPath?: string
   commit?: Commit
   readme?: string
+  transform?: Transform
   [key: string]: any
 }
 

diff --git a/app/reducers/workingDataset.ts b/app/reducers/workingDataset.ts
@@ -102,7 +102,7 @@ const workingDatasetsReducer: Reducer = (state = initialState, action: AnyAction
             value: dataset && dataset.structure ? dataset.structure : undefined
           },
           transform: {
-            value: dataset && dataset.transform ? dataset.transform : undefined
+            value: dataset && dataset.transform ? { scriptBytes: atob(dataset.transform.scriptBytes) } : undefined
           }
         }
       }