feat: always show status tab

qri-io · Aug 29, 2019 · 9ae00fd · 9ae00fd
1 parent d1cfbbc
commit 9ae00fd
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 24 deletions.
diff --git a/app/components/ComponentList.tsx b/app/components/ComponentList.tsx
@@ -123,7 +123,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
  </div>
  {
  components.map(({ name, displayName, tooltip, icon }) => {
- if (status[name]) {
+ if (status[name] && isLinked) {
  const { filepath, status: fileStatus } = status[name]
  let filename
  if (filepath === 'repo') {
@@ -138,7 +138,7 @@ const ComponentList: React.FunctionComponent<ComponentListProps> = (props: Compo
  displayName={displayName}
  name={name}
  icon={icon}
- filename={isLinked ? filename : ''}
+ filename={filename}
  status={fileStatus}
  selected={selectedComponent === name}
  selectionType={selectionType}

diff --git a/app/components/Dataset.tsx b/app/components/Dataset.tsx
@@ -11,6 +11,7 @@ import { ApiAction, ApiActionThunk } from '../store/api'
 import ExternalLink from './ExternalLink'
 import { Resizable } from './Resizable'
 import DatasetSidebar from './DatasetSidebar'
+import UnlinkedDataset from './UnlinkedDataset'
 import DatasetComponent from './DatasetComponent'
 import DatasetListContainer from '../containers/DatasetListContainer'
 import CommitDetailsContainer from '../containers/CommitDetailsContainer'
@@ -82,14 +83,7 @@ export default class Dataset extends React.Component<DatasetProps> {
 
  componentDidMount () {
  // poll for status
- // setInterval(() => { this.props.fetchWorkingStatus() }, 5000)
- const { selections, workingDataset } = this.props
- const { activeTab, isLinked } = selections
- if (activeTab === 'status' && !isLinked) {
- this.props.setActiveTab('history')
- } else if (activeTab === 'history' && workingDataset.history.pageInfo.error && workingDataset.history.pageInfo.error.includes('no history')) {
- this.props.setActiveTab('status')
- }
+ setInterval(() => { this.props.fetchWorkingStatus() }, 5000)
 
  this.openWorkingDirectory = this.openWorkingDirectory.bind(this)
  this.publishUnpublishDataset = this.publishUnpublishDataset.bind(this)
@@ -116,13 +110,6 @@ export default class Dataset extends React.Component<DatasetProps> {
  // this "wires up" all of the tooltips, must be called on update, as tooltips
  // in descendents can come and go
  ReactTooltip.rebuild()
- const { selections, workingDataset } = this.props
- const { activeTab, isLinked } = selections
- if (activeTab === 'status' && !isLinked) {
- this.props.setActiveTab('history')
- } else if (activeTab === 'history' && workingDataset.history.pageInfo.error && workingDataset.history.pageInfo.error.includes('no history')) {
- this.props.setActiveTab('status')
- }
  }
 
  // using component state + getDerivedStateFromProps to determine when a new
@@ -318,16 +305,26 @@ export default class Dataset extends React.Component<DatasetProps> {
  />
  </Resizable>
  <div className='content-wrapper'>
+ {/* Show the overlay to dim the rest of the app when the sidebar is open */}
  {showDatasetList && <div className='overlay' onClick={toggleDatasetList}></div>}
  <div className='transition-group' >
  <CSSTransition
- in={activeTab === 'status'}
+ in={(activeTab === 'status') && !isLinked}
+ classNames='fade'
+ timeout={300}
+ mountOnEnter
+ unmountOnExit
+ >
+ <UnlinkedDataset />
+ </CSSTransition>
+ <CSSTransition
+ in={activeTab === 'status' && isLinked}
  classNames='fade'
  timeout={300}
  mountOnEnter
  unmountOnExit
  >
- <DatasetComponent component={selectedComponent} componentStatus={status[selectedComponent]} isLoading={workingDataset.isLoading}/>
+ <DatasetComponent component={selectedComponent} componentStatus={status[selectedComponent]} isLoading={workingDataset.isLoading} />
  </CSSTransition>
  <CSSTransition
  in={activeTab === 'history'}

diff --git a/app/components/DatasetSidebar.tsx b/app/components/DatasetSidebar.tsx
@@ -79,19 +79,19 @@ const DatasetSidebar: React.FunctionComponent<DatasetSidebarProps> = ({
  return (
  <div className='dataset-sidebar'>
  <div id='tabs' className='sidebar-list-item'>
- {isLinked && <div
+ <div
  className={classNames('tab', { 'active': activeTab === 'status' })}
  onClick={() => { onTabClick('status') }}
  data-tip='View the latest version or working changes<br/> to this dataset&apos;s components'
  >
-  Status
- </div>}
+ Status
+ </div>
  {!(history.pageInfo.error && history.pageInfo.error.includes('no history')) && <div
  className={classNames('tab', { 'active': activeTab === 'history' })}
  onClick={() => { onTabClick('history') }}
  data-tip={path ? 'Explore older versions of this dataset' : 'This dataset has no previous versions'}
  >
-  History
+ History
  </div>}
  </div>
  <div id='content'>

diff --git a/app/components/UnlinkedDataset.tsx b/app/components/UnlinkedDataset.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUnlink } from '@fortawesome/free-solid-svg-icons'
+
+const UnlinkedDataset: React.FunctionComponent = () => (
+ <div className={'unlinked-dataset'}>
+ <div className={'message-container'}>
+ <div>
+ <h4>This is an Unlinked Dataset</h4>
+ <p>To use the status tab, link the dataset to your filesystem.</p>
+ <a href='#'>Link this Dataset</a>
+ </div>
+ <FontAwesomeIcon icon={faUnlink} color='#777'/>
+ </div>
+ </div>
+)
+
+export default UnlinkedDataset
diff --git a/app/reducers/selections.ts b/app/reducers/selections.ts
@@ -50,7 +50,16 @@ export default (state = initialState, action: AnyAction) => {
  localStore().setItem('name', name)
  localStore().setItem('isLinked', isLinked)
  localStore().setItem('published', published)
- return Object.assign({}, state, { peername, name, isLinked, published })
+
+ const newActiveTab = isLinked ? 'status' : 'history'
+
+ return Object.assign({}, state, {
+ peername,
+ name,
+ isLinked,
+ published,
+ activeTab: newActiveTab
+ })
 
  case LIST_SUCC:
  // if there is no peername + name in selections, use the first one on the list

diff --git a/app/scss/_dataset.scss b/app/scss/_dataset.scss
@@ -436,3 +436,28 @@ $header-font-size: .9rem;
  border-bottom: $list-item-bottom-border;
  }
 }
+
+
+////////////////////////////
+// Unlinked Dataset //
+////////////////////////////
+
+.unlinked-dataset {
+ height: 100%;
+
+ .message-container {
+ h4 {
+ color: #777;
+ font-weight: 500;
+ }
+
+ color: #777;
+ display: flex;
+ flex-direction: row;
+ padding: 19px;
+ border: 2px solid #E9F0F7;
+ max-width: 475px;
+ margin: 150px auto;
+ border-radius: 5px;
+ }
+}