diff --git a/app/components/ComponentList.tsx b/app/components/ComponentList.tsx index fe96a943..d2d3b54d 100644 --- a/app/components/ComponentList.tsx +++ b/app/components/ComponentList.tsx @@ -123,7 +123,7 @@ const ComponentList: React.FunctionComponent = (props: Compo { 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 = (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 index 93944389..36abfffe 100644 --- 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 { 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 { // 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 { />
+ {/* Show the overlay to dim the rest of the app when the sidebar is open */} {showDatasetList &&
}
+ + + - + = ({ return (
- {isLinked &&
{ onTabClick('status') }} data-tip='View the latest version or working changes
to this dataset's components' > - Status -
} + Status +
{!(history.pageInfo.error && history.pageInfo.error.includes('no history')) &&
{ onTabClick('history') }} data-tip={path ? 'Explore older versions of this dataset' : 'This dataset has no previous versions'} > - History + History
}
diff --git a/app/components/UnlinkedDataset.tsx b/app/components/UnlinkedDataset.tsx new file mode 100644 index 00000000..93916593 --- /dev/null +++ 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 = () => ( +
+
+
+

This is an Unlinked Dataset

+

To use the status tab, link the dataset to your filesystem.

+ Link this Dataset +
+ +
+
+) + +export default UnlinkedDataset diff --git a/app/reducers/selections.ts b/app/reducers/selections.ts index 02ce5f56..06bd2390 100644 --- 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 index b7123082..f02e5de4 100644 --- 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; + } +}