feat(transform): initial support for transform display

app/components/Code.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+interface CodeProps {
+  data: string | undefined
+}
+
+const Code: React.FunctionComponent<CodeProps> = (props: CodeProps) => {
+  const { data } = props
+
+  const lines = data.split('\n')
+
+  return (
+    <div className="code">
+      <pre style={{ float: 'left', margin: '0 20px', color: '#bbb' }}>{lines.map((_, i) => (`${i}\n`))}</pre>
+      <pre style={{ float: 'left' }}>{data}</pre>
+    </div>
+  )
+}
+
+export default Code

app/components/ComponentList.tsx

@@ -6,7 +6,7 @@ import { clipboard, shell, MenuItemConstructorOptions } from 'electron'
 import ContextMenuArea from 'react-electron-contextmenu'
 import { ApiActionThunk } from '../store/api'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faTags, faArchive, faTh, IconDefinition, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { faTags, faArchive, faTh, IconDefinition, faExclamation, faRobot } from '@fortawesome/free-solid-svg-icons'
 import { faReadme } from '@fortawesome/free-brands-svg-icons'
 
 import { DatasetStatus, SelectedComponent, ComponentType } from '../models/store'
@@ -111,9 +111,26 @@ const components = [
     displayName: 'Structure',
     tooltip: 'the structure of the dataset',
     icon: faTh
+  },
+  {
+    name: 'transform',
+    displayName: 'Transform',
+    tooltip: 'commit automation',
+    icon: faRobot
   }
 ]
 
+function removeHiddenComponents (status: DatasetStatus) {
+  const hideWhenMissing = {
+    'transform': true
+  }
+
+  return (component): boolean => {
+    console.log(status[component.name])
+    return status[component.name] || !hideWhenMissing[component.name]
+  }
+}
+
 export const getComponentDisplayProps = (name: string) => {
   return components.filter(d => d.name === name)[0]
 }
@@ -130,7 +147,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
   } = props
 
   const isEnabled = (name: string): boolean => {
-    return (datasetSelected && selectionType === 'component' && (name === 'meta' || name === 'structure' || name === 'readme'))
+    return (datasetSelected && selectionType === 'component' && (name === 'meta' || name === 'structure' || name === 'readme' || name === 'transform'))
   }
 
   return (
@@ -145,7 +162,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
           Dataset Components
       </div>
       {
-        components.map(({ name, displayName, tooltip, icon }) => {
+        components.filter(removeHiddenComponents(status)).map(({ name, displayName, tooltip, icon }) => {
           if (status[name] && !!fsiPath) {
             const { filepath, status: fileStatus } = status[name]
 

app/components/Dataset.tsx

@@ -179,7 +179,8 @@ export default class Dataset extends React.Component<DatasetProps> {
       if (
         componentsToReset.includes('structure') ||
         componentsToReset.includes('meta') ||
-        componentsToReset.includes('readme')
+        componentsToReset.includes('readme') ||
+        componentsToReset.includes('transform')
       ) fetchWorkingDataset()
     }
 

app/components/DatasetComponent.tsx

@@ -7,6 +7,7 @@ import BodyContainer from '../containers/BodyContainer'
 import StructureContainer from '../containers/StructureContainer'
 import ParseError from './ParseError'
 import ReadmeContainer from '../containers/ReadmeContainer'
+import TransformContainer from '../containers/TransformContainer'
 import ReadmeHistoryContainer from '../containers/ReadmeHistoryContainer'
 import { CSSTransition } from 'react-transition-group'
 import SpinnerWithIcon from './chrome/SpinnerWithIcon'
@@ -114,6 +115,19 @@ const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props:
             <StructureContainer history={history}/>
           </div>
         </CSSTransition>
+        <CSSTransition
+          in={(component === 'transform') && !isLoading && !hasParseError}
+          classNames='fade'
+          component='div'
+          timeout={300}
+          mountOnEnter
+          unmountOnExit
+          appear={true}
+        >
+          <div className='transition-wrap'>
+            <TransformContainer />
+          </div>
+        </CSSTransition>
         <SpinnerWithIcon loading={isLoading}/>
       </div>
     </div>

app/components/Transform.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import { WorkingDataset } from '../models/store'
+import { ApiActionThunk } from '../store/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
+}
+
+const Transform: React.FunctionComponent<TransformProps> = (props) => {
+  const { value } = props
+
+  return (
+    <Code data={value} />
+  )
+}
+
+export default Transform

app/containers/TransformContainer.tsx

@@ -0,0 +1,31 @@
+import { connect } from 'react-redux'
+import { bindActionCreators, Dispatch } from 'redux'
+import Transform, { TransformProps } from '../components/Transform'
+import Store from '../models/store'
+import { fsiWriteAndFetch } from '../actions/api'
+
+const mapStateToProps = (state: Store) => {
+  const { workingDataset, selections } = state
+  const { value } = workingDataset.components.transform
+
+  const { peername, name } = selections
+
+  // get data for the currently selected component
+  return {
+    peername,
+    name,
+    value,
+    history,
+    workingDataset
+  }
+}
+
+const mergeProps = (props: any, actions: any): TransformProps => { //eslint-disable-line
+  return { ...props, ...actions }
+}
+
+const mapDispatchToProps = (dispatch: Dispatch) => {
+  return bindActionCreators({ write: fsiWriteAndFetch }, dispatch)
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Transform)

app/models/store.ts

@@ -68,7 +68,7 @@ export interface UI {
   detailsBar: Details
 }
 
-export type SelectedComponent = 'readme' | 'meta' | 'body' | 'structure' | ''
+export type SelectedComponent = 'readme' | 'meta' | 'body' | 'structure' | 'transform' | ''
 
 // currently selected dataset, tab, dataset component, commit, etc
 export interface Selections {
@@ -148,6 +148,9 @@ export interface CommitDetails {
     structure: {
       value: Structure
     }
+    transform: {
+      value: string | undefined
+    }
   }
   stats: Array<{[key: string]: any}>
 }

app/reducers/workingDataset.ts

@@ -33,6 +33,9 @@ const initialState: WorkingDataset = {
     },
     structure: {
       value: {}
+    },
+    transform: {
+      value: ''
     }
   },
   history: {
@@ -97,6 +100,9 @@ const workingDatasetsReducer: Reducer = (state = initialState, action: AnyAction
           },
           structure: {
             value: dataset && dataset.structure ? dataset.structure : {}
+          },
+          transform: {
+            value: dataset && dataset.transform ? atob(dataset.transform.scriptBytes) : ''
           }
         }
       }

stories/1-CodeViewer.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import Code from '../app/components/Code'
+
+export default {
+  title: 'Code'
+}
+
+const wrap = (component) => {
+  return (
+    <div style={{ maxWidth: 650, margin: '0 auto' }}>
+      {component}
+    </div>
+  )
+}
+
+const basicTransformText = `
+def transform(ds,ctx):
+  ds.set_body([[1,2,3,4],[5,6,7,8]])
+`
+
+export const basicTransform = () => wrap(<Code data={basicTransformText} />)
+
+basicTransform.story = {
+  name: 'Transform: Basic Starlark',
+  parameters: {
+    notes: `short code viewer`
+  }
+}