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 {