From 64fc94ec6a68dd422651d99e04f09e025b34d6c6 Mon Sep 17 00:00:00 2001
From: Aida Zolic <aidazolic@google.com>
Date: Fri, 13 Oct 2023 14:47:41 +0200
Subject: [PATCH] Use tabs for create/load dataset steps

---
 wizard/cypress/e2e/loadCroissant.cy.js |  6 +++---
 wizard/cypress/e2e/uploadCsv.cy.js     | 10 +++++++---
 wizard/views/overview.py               |  2 ++
 wizard/views/wizard.py                 | 16 +++++++++++++---
 4 files changed, 25 insertions(+), 9 deletions(-)
 create mode 100644 wizard/views/overview.py

diff --git a/wizard/cypress/e2e/loadCroissant.cy.js b/wizard/cypress/e2e/loadCroissant.cy.js
index 24f963a2..d757b7e5 100644
--- a/wizard/cypress/e2e/loadCroissant.cy.js
+++ b/wizard/cypress/e2e/loadCroissant.cy.js
@@ -20,9 +20,9 @@ describe('Wizard loads Croissant without Error', () => {
         events: ["dragenter", "drop"],
       })
     })
-    cy.get('[data-testid="stExpander"]')
-      .contains('Titanic')
-      .should('exist')
+
+    cy.get('[data-testid="stMarkdownContainer"]').contains('Metadata').click()
+    cy.get('input[aria-label="Name:red[*]"]').should('have.value', 'Titanic')
     
     cy.get('[data-testid="stException"]').should('not.exist')
   })
diff --git a/wizard/cypress/e2e/uploadCsv.cy.js b/wizard/cypress/e2e/uploadCsv.cy.js
index 6ccf1f54..ee659875 100644
--- a/wizard/cypress/e2e/uploadCsv.cy.js
+++ b/wizard/cypress/e2e/uploadCsv.cy.js
@@ -3,14 +3,18 @@
 import 'cypress-file-upload';
 
 describe('Wizard from local CSV', () => {
-  it('should display the form: Metadata, Files, & Record Sets', () => {
+  it('should display the form: Overview, Metadata, Resources, & Record Sets', () => {
     // Streamlit starts on :8501.
     cy.visit('http://localhost:8501')
     cy.get('button').contains('Create').click()
 
+    cy.get('[data-testid="stMarkdownContainer"]')
+      .contains('Metadata')
+      .click()
     cy.get('input[aria-label="Name:red[*]"]').type('MyDataset').blur()
-    cy.get('input[aria-label="URL:red[*]"]').type('https://mydataset.com').blur()
-    cy.get('[data-testid="stMarkdownContainer"]').contains('Files').click()
+    cy.get('input[aria-label="URL:red[*]"]').type('https://mydataset.com', {force: true})
+
+    cy.get('[data-testid="stMarkdownContainer"]').contains('Resources').click()
     // Drag and drop mimicking: streamlit/e2e/specs/st_file_uploader.spec.js.
     cy.fixture('base.csv').then((fileContent) => {
       const file = {
diff --git a/wizard/views/overview.py b/wizard/views/overview.py
new file mode 100644
index 00000000..2100945e
--- /dev/null
+++ b/wizard/views/overview.py
@@ -0,0 +1,2 @@
+def render_overview():
+    pass
diff --git a/wizard/views/wizard.py b/wizard/views/wizard.py
index d5fc9531..89f0288c 100644
--- a/wizard/views/wizard.py
+++ b/wizard/views/wizard.py
@@ -3,13 +3,23 @@
 from core.state import CurrentStep
 from views.files import render_files
 from views.metadata import render_metadata
+from views.overview import render_overview
 from views.record_sets import render_record_sets
 
+OVERVIEW = "Overview"
+METADATA = "Metadata"
+RESOURCES = "Resources"
+RECORD_SETS = "Record sets"
+
 
 def render_wizard():
-    with st.expander("Metadata", expanded=True):
+    tab1, tab2, tab3, tab4 = st.tabs([OVERVIEW, METADATA, RESOURCES, RECORD_SETS])
+
+    with tab1:
+        render_overview()
+    with tab2:
         render_metadata()
-    with st.expander("Files"):
+    with tab3:
         render_files()
-    with st.expander("Record Sets"):
+    with tab4:
         render_record_sets()