Merge pull request #19 from dhis2/feat/DHIS2-11290

feat: add datasets navigation

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}
             />
+            <Navigation
+                dataSets={workflow.dataSets}
+                selected={selectedDataSet}
+                onChange={setSelectedDataSet}
+            />
         </>
     )
 }

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 }) => (
+    <TabBar scrollable>
+        {dataSets.map(dataSet => (
+            <Tab
+                key={dataSet.id}
+                onClick={() => onChange(dataSet.id)}
+                selected={dataSet.id === selected}
+            >
+                {dataSet.displayName}
+            </Tab>
+        ))}
+    </TabBar>
+)
+
+Navigation.propTypes = {
+    dataSets: PropTypes.array.isRequired,
+    onChange: PropTypes.func.isRequired,
+    selected: PropTypes.string,
+}
+
+export { Navigation }

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 {