feat: add component content header with status

app/components/Body.tsx

@@ -43,7 +43,7 @@ export default class Body extends React.Component<BodyProps> {
 
   render () {
     return (
-      <div>
+      <div className='body-container'>
         {
           this.props.value && (
             <HandsonTable

app/components/CommitDetails.tsx

@@ -3,9 +3,7 @@ import moment from 'moment'
 import { Resizable } from '../components/resizable'
 import { Action } from 'redux'
 import ComponentList from '../components/ComponentList'
-import MetadataContainer from '../containers/MetadataContainer'
-import BodyContainer from '../containers/BodyContainer'
-import SchemaContainer from '../containers/SchemaContainer'
+import DatasetComponent from './DatasetComponent'
 
 import { ApiAction } from '../store/api'
 import { Commit } from '../models/dataset'
@@ -60,25 +58,15 @@ export default class CommitDetails extends React.Component<CommitDetailsProps> {
   render () {
     const { selectedComponent } = this.props
 
-    let mainContent
-
-    switch (selectedComponent) {
-      case 'meta':
-        mainContent = <MetadataContainer history />
-        break
-      case 'body':
-        mainContent = <BodyContainer history />
-        break
-      case 'schema':
-        mainContent = <SchemaContainer history />
-        break
-    }
-
     if (this.props.commit && !isEmpty(this.props.commitDetails.status)) {
       const { commit, sidebarWidth, setSidebarWidth, setSelectedListItem, commitDetails } = this.props
       const { status } = commitDetails
       const { title, timestamp } = commit
       const timeMessage = moment(timestamp).fromNow()
+
+      const componentStatus = status[selectedComponent]
+      let mainContent = <DatasetComponent component={selectedComponent} componentStatus={componentStatus} history />
+
       return (
         <div id='commit-details' className='dataset-content'>
           <div className='commit-details-header text-column'>

app/components/ComponentList.tsx

@@ -3,18 +3,11 @@ import { Action } from 'redux'
 import classNames from 'classnames'
 import { DatasetStatus, ComponentType } from '../models/store'
 
-interface FileRowProps {
-  name: string
-  displayName: string
-  filename?: string
-  selected?: boolean
-  status?: string
-  selectionType?: ComponentType
-  disabled?: boolean
-  onClick?: (type: ComponentType, activeTab: string) => Action
+interface StatusDotProps {
+  status: string | undefined
 }
 
-export const FileRow: React.FunctionComponent<FileRowProps> = (props) => {
+export const StatusDot: React.FunctionComponent<StatusDotProps> = (props) => {
   let statusColor
   switch (props.status) {
     case 'modified':
@@ -29,30 +22,44 @@ export const FileRow: React.FunctionComponent<FileRowProps> = (props) => {
     default:
       statusColor = 'transparent'
   }
-
   return (
-    <div
-      className={classNames('sidebar-list-item', 'sidebar-list-item-text', {
-        'selected': props.selected,
-        'disabled': props.disabled
-      })}
-      onClick={() => {
-        if (props.onClick && props.selectionType && props.name) {
-          props.onClick(props.selectionType, props.name)
-        }
-      }}
-    >
-      <div className='text-column'>
-        <div className='text'>{props.displayName}</div>
-        <div className='subtext'>{props.filename}</div>
-      </div>
-      <div className='status-column'>
-        <span className='dot' style={{ backgroundColor: statusColor }}></span>
-      </div>
-    </div>
+    <div className='status-dot' style={{ backgroundColor: statusColor }}></div>
   )
 }
 
+interface FileRowProps {
+  name: string
+  displayName: string
+  filename?: string
+  selected?: boolean
+  status?: string
+  selectionType?: ComponentType
+  disabled?: boolean
+  onClick?: (type: ComponentType, activeTab: string) => Action
+}
+
+export const FileRow: React.FunctionComponent<FileRowProps> = (props) => (
+  <div
+    className={classNames('sidebar-list-item', 'sidebar-list-item-text', {
+      'selected': props.selected,
+      'disabled': props.disabled
+    })}
+    onClick={() => {
+      if (props.onClick && props.selectionType && props.name) {
+        props.onClick(props.selectionType, props.name)
+      }
+    }}
+  >
+    <div className='text-column'>
+      <div className='text'>{props.displayName}</div>
+      <div className='subtext'>{props.filename}</div>
+    </div>
+    <div className='status-column'>
+      <StatusDot status={props.status} />
+    </div>
+  </div>
+)
+
 FileRow.displayName = 'FileRow'
 
 interface ComponentListProps {
@@ -78,6 +85,11 @@ const components = [
   }
 ]
 
+export const getComponentDisplayName = (name: string) => {
+  const match = components.find(d => d.name === name)
+  return match && match.displayName
+}
+
 const ComponentList: React.FunctionComponent<ComponentListProps> = (props: ComponentListProps) => {
   const {
     status,

app/components/Dataset.tsx

@@ -3,13 +3,11 @@ import classNames from 'classnames'
 import { Action } from 'redux'
 import { shell } from 'electron'
 import { ApiAction, ApiActionThunk } from '../store/api'
-import { Resizable } from '../components/resizable'
-import DatasetSidebar from '../components/DatasetSidebar'
+import { Resizable } from './Resizable'
+import DatasetSidebar from './DatasetSidebar'
+import DatasetComponent from './DatasetComponent'
 import DatasetListContainer from '../containers/DatasetListContainer'
 import CommitDetailsContainer from '../containers/CommitDetailsContainer'
-import MetadataContainer from '../containers/MetadataContainer'
-import BodyContainer from '../containers/BodyContainer'
-import SchemaContainer from '../containers/SchemaContainer'
 
 import { defaultSidebarWidth } from '../reducers/ui'
 
@@ -125,19 +123,8 @@ export default class Dataset extends React.Component<DatasetProps> {
       mainContent = <div>Loading</div>
     } else {
       if (activeTab === 'status') {
-        switch (selectedComponent) {
-          case 'meta':
-            mainContent = <MetadataContainer />
-            break
-          case 'body':
-            mainContent = <BodyContainer />
-            break
-          case 'schema':
-            mainContent = <SchemaContainer />
-            break
-          default:
-            mainContent = <MetadataContainer />
-        }
+        const componentStatus = status[selectedComponent]
+        mainContent = <DatasetComponent component={selectedComponent} componentStatus={componentStatus}/>
       } else {
         if (workingDataset.history) {
           mainContent = <CommitDetailsContainer />

app/components/DatasetComponent.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react'
+import MetadataContainer from '../containers/MetadataContainer'
+import BodyContainer from '../containers/BodyContainer'
+import SchemaContainer from '../containers/SchemaContainer'
+
+import { getComponentDisplayName, StatusDot } from './ComponentList'
+
+import { ComponentStatus } from '../models/store'
+
+interface DatasetComponentProps {
+  component: string
+  componentStatus: ComponentStatus
+  history?: boolean
+}
+
+const DatasetComponent: React.FunctionComponent<DatasetComponentProps> = (props: DatasetComponentProps) => {
+  const { component, componentStatus, history } = props
+  let mainContent
+  switch (component) {
+    case 'meta':
+      mainContent = <MetadataContainer history={history} />
+      break
+    case 'body':
+      mainContent = <BodyContainer history={history} />
+      break
+    case 'schema':
+      mainContent = <SchemaContainer history={history} />
+      break
+    default:
+      mainContent = <MetadataContainer history={history} />
+  }
+
+  return (
+    <div className='component-container'>
+      <div className='component-header'>
+        <div className='component-display-name-container'>
+          {getComponentDisplayName(component)}
+        </div>
+        <div className='status-dot-container'>
+          {componentStatus && <StatusDot status={componentStatus.status} />}
+        </div>
+      </div>
+      <div className='component-content'>
+        {mainContent}
+      </div>
+    </div>
+  )
+}
+
+export default DatasetComponent

app/scss/_dataset.scss

@@ -2,9 +2,11 @@
 //    Dataset Container   //
 ////////////////////////////
 
-$list-item-bottom-border: 1px solid #979797;
+$list-item-bottom-border: 1px solid $border-color;
 $sidebar-item-padding:  6px 10px;
 $hover-highlight-color: #F6F8FA;
+$header-height: 30px;
+$header-font-size: .9rem;
 
 #dataset-container {
   display: flex;
@@ -23,7 +25,7 @@ $hover-highlight-color: #F6F8FA;
 
   .header-column {
     height: 100%;
-    border-right: 1px solid #484d65;
+    border-right: 1px solid #66737b;
     padding: 0 9px;
     display: inline-flex;
     flex-direction: row;
@@ -87,6 +89,7 @@ $hover-highlight-color: #F6F8FA;
     #sidebar {
       position: relative;
       flex: 0 0 auto;
+      border-right: 1px solid $border-color;
 
       .resize-handle {
         position: absolute;
@@ -113,9 +116,42 @@ $hover-highlight-color: #F6F8FA;
         z-index: 110;
       }
 
+      .component-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .component-header {
+          line-height: 1.9rem;
+          height: $header-height;
+          border-bottom: $list-item-bottom-border;
+          font-size: $header-font-size;
+          padding: 0px 10px;
+          flex-direction: row;
+          display: flex;
+
+          .component-display-name-container {
+            flex: 1;
+          }
+
+          .status-dot-container {
+            display: flex;
+            align-items: center;
+          }
+        }
+
+        .component-content {
+          flex: 1;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+        }
+      }
+
       .content {
         padding: 15px;
         overflow-x: scroll;
+        height: 100%;
       }
     }
   }
@@ -197,28 +233,28 @@ $hover-highlight-color: #F6F8FA;
 
 .dataset-sidebar {
   height: 100%;
-  font-size: .9rem;
+  font-size: $header-font-size;
   cursor: default;
   display: flex;
   flex-direction: column;
   background: $appBackground;
-  border-right-style: solid 1px $border-color;
+  border-right: 1px solid $border-color;
 
   #list {
     overflow-y: auto;
   }
 
   #tabs {
-    height: 30px;
-    display: flex; 
+    height: $header-height;
+    display: flex;
 
     .tab {
       width: 50%;
       height: 100%;
       flex: 1;
       text-align: center;
       line-height: 1.9rem;
-      border-right: 1px solid #979797;
+      border-right: 1px solid $border-color;
 
       &:last-child {
         border-right: 0;
@@ -235,10 +271,10 @@ $hover-highlight-color: #F6F8FA;
   }
 
   #content {
-    flex-grow: 1;
+    flex: 1;
     height: 100%;
     position: relative;
-    
+
     .sidebar-content {
       overflow: auto;
       position: absolute;
@@ -260,6 +296,7 @@ $hover-highlight-color: #F6F8FA;
 }
 
 .sidebar-list-header  {
+  height: $header-height;
   font-weight: 500;
   font-size: .9rem;
 }
@@ -280,21 +317,21 @@ $hover-highlight-color: #F6F8FA;
     text-align: center;
     line-height: 2.9rem;
     width: 30px;
-
-      .dot {
-        height: 10px;
-        width: 10px;
-        background-color: transparent;
-        border-radius: 50%;
-        display: inline-block;
-      }
   }
 
   &.disabled {
     color: #ccc;
   }
 }
 
+.status-dot {
+  height: 10px;
+  width: 10px;
+  background-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+}
+
 
 ////////////////////////////
 //     Commit Details     //