diff --git a/src/data-workspace/data-workspace.js b/src/data-workspace/data-workspace.js index 6a8f4452..e22f1d95 100644 --- a/src/data-workspace/data-workspace.js +++ b/src/data-workspace/data-workspace.js @@ -1,9 +1,13 @@ -import React from 'react' +import React, { useState } from 'react' import { useWorkflowContext } from '../workflow-context/index.js' +import { Navigation } from './navigation.js' import { TitleBar } from './title-bar.js' const DataWorkspace = () => { const workflow = useWorkflowContext() + const [selectedDataSet, setSelectedDataSet] = useState( + workflow.dataSets.length === 1 ? workflow.dataSets[0].id : null + ) return ( <> @@ -12,6 +16,11 @@ const DataWorkspace = () => { dataSetsCount={workflow.dataSets.length} approvalState={workflow.approvalStatus.state} /> + ) } diff --git a/src/data-workspace/navigation.js b/src/data-workspace/navigation.js new file mode 100644 index 00000000..9b2d28fc --- /dev/null +++ b/src/data-workspace/navigation.js @@ -0,0 +1,25 @@ +import { TabBar, Tab } from '@dhis2/ui' +import PropTypes from 'prop-types' +import React from 'react' + +const Navigation = ({ dataSets, selected, onChange }) => ( + + {dataSets.map(dataSet => ( + onChange(dataSet.id)} + selected={dataSet.id === selected} + > + {dataSet.displayName} + + ))} + +) + +Navigation.propTypes = { + dataSets: PropTypes.array.isRequired, + onChange: PropTypes.func.isRequired, + selected: PropTypes.string, +} + +export { Navigation } diff --git a/src/data-workspace/title-bar.module.css b/src/data-workspace/title-bar.module.css index efccea81..7f575ce1 100644 --- a/src/data-workspace/title-bar.module.css +++ b/src/data-workspace/title-bar.module.css @@ -3,6 +3,7 @@ grid-template-columns: max-content max-content max-content; align-items: center; grid-gap: var(--spacers-dp12); + margin-bottom: var(--spacers-dp12); } .workflowName {