From 264cb7c82e9f4c52048b8e97fe2b7c76d2d78b58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9di-R=C3=A9mi=20Hashim?= <mediremi@gmail.com>
Date: Wed, 7 Jul 2021 10:50:46 +0100
Subject: [PATCH 1/2] feat: add datasets navigation

---
 src/data-workspace/data-workspace.js    | 11 ++++++++++-
 src/data-workspace/navigation.js        | 25 +++++++++++++++++++++++++
 src/data-workspace/title-bar.module.css |  1 +
 3 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 src/data-workspace/navigation.js

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}
             />
+            <Navigation
+                dataSets={workflow.dataSets}
+                selected={selectedDataSet}
+                onChange={setSelectedDataSet}
+            />
         </>
     )
 }
diff --git a/src/data-workspace/navigation.js b/src/data-workspace/navigation.js
new file mode 100644
index 00000000..676c29a3
--- /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 }) => (
+    <TabBar>
+        {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 }
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 {

From d6d290e6da51a83991bc297c8f540d8c83b59e71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9di-R=C3=A9mi=20Hashim?= <mediremi@gmail.com>
Date: Wed, 7 Jul 2021 11:08:25 +0100
Subject: [PATCH 2/2] fix: add scrollable prop to TabBar

---
 src/data-workspace/navigation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/data-workspace/navigation.js b/src/data-workspace/navigation.js
index 676c29a3..9b2d28fc 100644
--- a/src/data-workspace/navigation.js
+++ b/src/data-workspace/navigation.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const Navigation = ({ dataSets, selected, onChange }) => (
-    <TabBar>
+    <TabBar scrollable>
         {dataSets.map(dataSet => (
             <Tab
                 key={dataSet.id}