Redesign import flows #1660 (#1662)

* Redesign of first page of add publication wizard (with buttons instead of radio's) #1660 * Redesign of first page of add dataset wizard (with buttons instead of radio's) #1660 * Fixed add manual publication button in step 1 #1660 * Fixed add dataset wizard forms #1338 * Redesign of manual publication type selection page (with buttons instead of radio's) #1660 * Added VS Code Go debugging configuration * Redesign of add publication by wos and bibtex pages #1660 * Redesign of import publication/dataset via identifier pages #1660 * Fixed page width on large screens
ugent-library · Aug 8, 2024 · 89b665d · 89b665d
1 parent 106468c
commit 89b665d
Show file tree

Hide file tree

Showing 26 changed files with 837 additions and 464 deletions.
diff --git a/assets/ugent/scss/components/_c-button-toolbar.scss b/assets/ugent/scss/components/_c-button-toolbar.scss
@@ -9,7 +9,7 @@
   display: flex;
 
   .btn {
-    margin: 0.4rem 0.8rem 0.4rem 0;
+    margin: 0.4rem 1.2rem 0.4rem 0;
   }
 
   .btn:last-child {

diff --git a/cypress/e2e/datasets/add/import-by-identifier.cy.ts b/cypress/e2e/datasets/add/import-by-identifier.cy.ts
@@ -19,8 +19,9 @@ describe("Dataset import", () => {
     cy.get("@steps").eq(2).should("not.have.class", "c-stepper__step--active");
     cy.get("@steps").eq(3).should("not.have.class", "c-stepper__step--active");
 
-    cy.contains("Register your dataset via a DOI").click();
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".card", "Register your dataset via a DOI")
+      .contains(".btn", "Add")
+      .click();
 
     // Step 1b
     cy.contains("Step 1")
@@ -36,7 +37,7 @@ describe("Dataset import", () => {
     testFormAccessibility({ "input[name=identifier]": "DOI" });
 
     cy.get("input[name=identifier]").type("10.6084/M9.FIGSHARE.22067864.V1");
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".btn", "Preview & import dataset").click();
 
     // Step 2
     cy.contains("Step 2")
@@ -80,11 +81,12 @@ describe("Dataset import", () => {
 
     cy.visit("/add-dataset");
 
-    cy.contains("Register your dataset via a DOI").click();
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".card", "Register your dataset via a DOI")
+      .contains(".btn", "Add")
+      .click();
 
     cy.get("input[name=identifier]").type("SOME/random/DOI.123");
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".btn", "Preview & import dataset").click();
 
     cy.ensureToast("Sorry, something went wrong. Could not import the dataset");
   });
@@ -134,11 +136,12 @@ describe("Dataset import", () => {
     // Make the second dataset (via DOI import)
     cy.visit("/add-dataset");
 
-    cy.contains("Register your dataset via a DOI").click();
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".card", "Register your dataset via a DOI")
+      .contains(".btn", "Add")
+      .click();
 
     cy.get("input[name=identifier]").type(DOI);
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".btn", "Preview & import dataset").click();
 
     cy.ensureModal("Are you sure you want to import this dataset?").within(
       () => {

diff --git a/cypress/e2e/issues/issue-1123.cy.ts b/cypress/e2e/issues/issue-1123.cy.ts
@@ -6,8 +6,9 @@ describe("Issue #1123:  WoS import cuts keywords up because of newlines in impor
 
     cy.visit("/add-publication");
 
-    cy.contains("Import from Web of Science").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import from Web of Science")
+      .contains(".btn", "Add")
+      .click();
 
     cy.get("input[name=file]").selectFile(
       "cypress/fixtures/wos-000963572100001.txt",

diff --git a/cypress/e2e/issues/issue-1247.cy.ts b/cypress/e2e/issues/issue-1247.cy.ts
@@ -37,8 +37,7 @@ describe("Issue #1247: User menu popup hidden behind publication details", () =>
 
     assertUserMenuWorks();
 
-    cy.contains("Miscellaneous").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Miscellaneous").contains(".btn", "Add").click();
 
     cy.location("pathname").should(
       "eq",
@@ -101,8 +100,9 @@ describe("Issue #1247: User menu popup hidden behind publication details", () =>
 
     assertUserMenuWorks();
 
-    cy.contains("Register a dataset manually").click("left");
-    cy.contains(".btn", "Add dataset").click();
+    cy.contains(".card", "Register a dataset manually")
+      .contains(".btn", "Add")
+      .click();
 
     cy.location("pathname").should("eq", "/add-dataset");
 

diff --git a/cypress/e2e/publications/add/import-by-identifier.cy.ts b/cypress/e2e/publications/add/import-by-identifier.cy.ts
@@ -18,8 +18,9 @@ describe("Publication import", () => {
     cy.get("@steps").eq(1).should("not.have.class", "c-stepper__step--active");
     cy.get("@steps").eq(2).should("not.have.class", "c-stepper__step--active");
 
-    cy.contains("Import your publication via an identifier").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import your publication via an identifier")
+      .contains(".btn", "Add")
+      .click();
 
     // Step 1b
     cy.contains(".bc-toolbar-title", "Add publication(s)")
@@ -34,7 +35,7 @@ describe("Publication import", () => {
 
     cy.get("select[name=source]").should("have.value", "crossref"); // crossref = DOI
     cy.get("input[name=identifier]").type("10.1016/j.ese.2024.100396");
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".btn", "Preview & import publication").click();
 
     // Step 2
     cy.contains(".bc-toolbar-title", "Complete Description")
@@ -78,11 +79,12 @@ describe("Publication import", () => {
 
     cy.visit("/add-publication");
 
-    cy.contains("Import your publication via an identifier").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import your publication via an identifier")
+      .contains(".btn", "Add")
+      .click();
 
     cy.get("input[name=identifier]").type("SOME/random/DOI.123");
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".btn", "Preview & import publication").click();
 
     cy.ensureToast(
       "Sorry, something went wrong. Could not import the publication",
@@ -133,11 +135,12 @@ describe("Publication import", () => {
     // Make the second publication
     cy.visit("/add-publication");
 
-    cy.contains("Import your publication via an identifier").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import your publication via an identifier")
+      .contains(".btn", "Add")
+      .click();
 
     cy.get("input[name=identifier]").type(DOI);
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".btn", "Preview & import publication").click();
 
     cy.ensureModal("Are you sure you want to import this publication?").within(
       () => {

diff --git a/cypress/e2e/publications/add/import-from-bibtex.cy.ts b/cypress/e2e/publications/add/import-from-bibtex.cy.ts
@@ -18,8 +18,9 @@ describe("Publication import", () => {
     cy.get("@steps").eq(1).should("not.have.class", "c-stepper__step--active");
     cy.get("@steps").eq(2).should("not.have.class", "c-stepper__step--active");
 
-    cy.contains("Import via BibTeX file").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import via BibTeX file")
+      .contains(".btn", "Add")
+      .click();
 
     // Upload BibTeX file
     cy.get(".c-file-upload").should(
@@ -157,8 +158,9 @@ describe("Publication import", () => {
 
     cy.visit("/add-publication");
 
-    cy.contains("Import via BibTeX file").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import via BibTeX file")
+      .contains(".btn", "Add")
+      .click();
 
     cy.get("input[name=file]").selectFile(
       "cypress/fixtures/import-from-bibtex-error.bib",

diff --git a/cypress/e2e/publications/add/import-from-web-of-science.cy.ts b/cypress/e2e/publications/add/import-from-web-of-science.cy.ts
@@ -18,8 +18,9 @@ describe("Publication import", () => {
     cy.get("@steps").eq(1).should("not.have.class", "c-stepper__step--active");
     cy.get("@steps").eq(2).should("not.have.class", "c-stepper__step--active");
 
-    cy.contains("Import from Web of Science").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import from Web of Science")
+      .contains(".btn", "Add")
+      .click();
 
     // Upload WoS file
     cy.get(".c-file-upload").should(
@@ -87,8 +88,9 @@ describe("Publication import", () => {
     cy.get("@steps").eq(1).should("not.have.class", "c-stepper__step--active");
     cy.get("@steps").eq(2).should("not.have.class", "c-stepper__step--active");
 
-    cy.contains("Import from Web of Science").click();
-    cy.contains(".btn", "Add publication(s)").click();
+    cy.contains(".card", "Import from Web of Science")
+      .contains(".btn", "Add")
+      .click();
 
     // Upload WoS file
     cy.get(".c-file-upload").should(

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "build": "go build -o app -v",
     "build:assets": "node esbuild.mjs",
     "build:assets:watch": "node esbuild.mjs --watch",
+    "build:templ": "templ generate --path views",
     "start": "./app server start",
     "test": "cypress run --config-file cypress/cypress.config.ts --config retries=2",
     "test:bibliodev": "env-cmd --file ./cypress/.env npm test --",

diff --git a/static/css/app-MYWSA4HP.css → static/css/app-N4CE7ZHS.css b/static/css/app-MYWSA4HP.css → static/css/app-N4CE7ZHS.css
diff --git a/static/css/app-MYWSA4HP.css.LEGAL.txt → static/css/app-N4CE7ZHS.css.LEGAL.txt b/static/css/app-MYWSA4HP.css.LEGAL.txt → static/css/app-N4CE7ZHS.css.LEGAL.txt
diff --git a/static/css/app-MYWSA4HP.css.map → static/css/app-N4CE7ZHS.css.map b/static/css/app-MYWSA4HP.css.map → static/css/app-N4CE7ZHS.css.map
diff --git a/static/manifest.json b/static/manifest.json
@@ -2,7 +2,7 @@
   "/js/app.js": "/static/js/app-7OMXMPJB.js",
   "/fonts/icon-font.woff2": "/static/fonts/icon-font-MKUEJCPC.woff2",
   "/fonts/icon-font.woff": "/static/fonts/icon-font-4S7CKSGJ.woff",
-  "/css/app.css": "/static/css/app-MYWSA4HP.css",
+  "/css/app.css": "/static/css/app-N4CE7ZHS.css",
   "/images/plato-logo.svg": "/static/images/plato-logo-EKBIWHHI.svg",
   "/images/book-illustration.svg": "/static/images/book-illustration-XEGTEPBW.svg",
   "/images/universiteitsbibliotheek.svg": "/static/images/universiteitsbibliotheek-G2PUY5IZ.svg",

diff --git a/views/dataset/pages/add.templ b/views/dataset/pages/add.templ
@@ -9,89 +9,106 @@ import (
 templ Add(c *ctx.Ctx) {
 	@views.PageLayout(c, "Add - Datasets - Biblio", nil) {
 		@datasetviews.AddSidebar(c, 1)
-		<form class="w-100" action={ templ.URL(c.PathTo("dataset_add").String()) } method="POST">
-			@views.CSRFTag(c)
-			<div class="u-scroll-wrapper">
-				<div class="bc-navbar bc-navbar--large bc-navbar-bordered bc-navbar--white bc-navbar--bordered-bottom">
-					<div class="bc-toolbar">
-						<div class="bc-toolbar-left">
-							<div class="bc-toolbar-item">
-								<div class="d-flex flex-column">
-									<span class="text-muted">Step 1</span>
-									<h4 class="bc-toolbar-title">Add dataset</h4>
-								</div>
+		<div class="w-100 u-scroll-wrapper">
+			<div class="bc-navbar bc-navbar--large bc-navbar-bordered bc-navbar--white bc-navbar--bordered-bottom">
+				<div class="bc-toolbar">
+					<div class="bc-toolbar-left">
+						<div class="bc-toolbar-item">
+							<div class="d-flex flex-column">
+								<span class="text-muted">Step 1</span>
+								<h4 class="bc-toolbar-title">Add dataset</h4>
 							</div>
 						</div>
-						<div class="bc-toolbar-right">
-							<div class="bc-toolbar-item">
-								<button type="submit" class="btn btn-primary">
-									<div class="btn-text">Add dataset</div>
-									<i class="if if-arrow-right"></i>
-								</button>
-							</div>
+					</div>
+					<div class="bc-toolbar-right">
+						<div class="bc-toolbar-item">
+							<a class="btn btn-tertiary" href={ templ.URL(c.PathTo("datasets").String()) }>Cancel</a>
 						</div>
 					</div>
 				</div>
-				<div class="p-6 u-scroll-wrapper__body">
-					<div class="card mb-6">
-						<div class="card-header">
-							<div class="bc-toolbar">
-								<div class="bc-toolbar-left">
-									<h5>Add a dataset</h5>
-								</div>
-							</div>
-						</div>
-						<div class="card-body radio-card-group">
-							<label class="c-radio-card" aria-selected="false">
-								<div class="c-radio-card__radio">
-									<div class="form-check">
-										<input class="form-check-input" id="add-method-identifier" type="radio" name="method" value="identifier"/>
-										<label class="form-check-label" for="add-method-identifier"></label>
+			</div>
+			<div class="p-6 u-scroll-wrapper__body">
+				<div class="row">
+					<div class="col-xl-8 mb-6">
+						<div class="card mb-4">
+							<div class="card-body">
+								<div class="bc-toolbar h-auto">
+									<div class="bc-toolbar-left">
+										<div>
+											<div class="d-flex align-items-center flex-wrap">
+												<h3 class="me-3">Register your dataset via a DOI</h3>
+												<span class="badge badge-success-light">Recommended</span>
+											</div>
+											<p class="text-muted">Automated retrieval of metadata. For datasets that have a <a class="c-link" href="https://onderzoektips.ugent.be/en/tips/00001743/#WhatisaDigitalObjectIdentifier(DOI)?" target="_blank">DOI (Digital Object Identifier)</a>, created by the external data repository during data deposit.</p>
+										</div>
 									</div>
-								</div>
-								<div class="c-radio-card__content">
-									<h6>Register your dataset via a DOI <span class="badge rounded-pill badge-success-light ms-3">Recommended</span></h6>
-									<p class="text-muted">Automated retrieval of metadata. For datasets that have a <a href="https://onderzoektips.ugent.be/en/tips/00001743/#WhatisaDigitalObjectIdentifier(DOI)?" target="_blank">DOI (Digital Object Identifier)</a>, created by the external data repository during data deposit.</p>
-								</div>
-							</label>
-							<label class="c-radio-card">
-								<div class="c-radio-card__radio" aria-selected="false">
-									<div class="form-check">
-										<input class="form-check-input" id="add-method-manual" type="radio" name="method" value="manual"/>
-										<label class="form-check-label" for="add-method-manual"></label>
+									<div class="bc-toolbar-right">
+										<form action={ templ.URL(c.PathTo("dataset_add").String()) } method="POST">
+											@views.CSRFTag(c)
+											<input type="hidden" name="method" value="identifier"/>
+											<button type="submit" class="btn btn-primary ms-6">
+												<i class="if if-add"></i>
+												<span class="btn-text">Add</span>
+											</button>
+										</form>
 									</div>
 								</div>
-								<div class="c-radio-card__content">
-									<h6>Register a dataset manually <span class="badge rounded-pill badge-default ms-3">Beta</span></h6>
-									<p class="text-muted">Manual input of metadata. Recommended for <a href="https://onderzoektips.ugent.be/en/tips/00001743/" target="_blank">datasets with identifiers</a> such as ENA BioProject, BioStudies, ENA, Ensembl or Handle. The identifiers are created by external data repositories during data deposit.</p>
-								</div>
-							</label>
+							</div>
 						</div>
-					</div>
-					<div class="card mb-6">
-						<div class="card-header">
-							<div class="bc-toolbar">
-								<div class="bc-toolbar-left">
-									<div class="bc-toolbar-item">
-										<h5 class="h6">Tips for depositing and registering your data</h5>
+						<div class="card mb-4">
+							<div class="card-body">
+								<div class="bc-toolbar h-auto">
+									<div class="bc-toolbar-left">
+										<div>
+											<div class="d-flex align-items-center flex-wrap">
+												<h3 class="me-3">Register a dataset manually</h3>
+												<span class="badge badge-default">Beta</span>
+											</div>
+											<p class="text-muted">Manual input of metadata. Recommended for <a class="c-link" href="https://onderzoektips.ugent.be/en/tips/00001743/" target="_blank">datasets with identifiers</a> such as ENA BioProject, BioStudies, ENA, Ensembl or Handle. The identifiers are created by external data repositories during data deposit.</p>
+										</div>
+									</div>
+									<div class="bc-toolbar-right">
+										<form action={ templ.URL(c.PathTo("dataset_add").String()) } method="POST">
+											@views.CSRFTag(c)
+											<input type="hidden" name="method" value="manual"/>
+											<button type="submit" class="btn btn-primary ms-6">
+												<i class="if if-add"></i>
+												<span class="btn-text">Add</span>
+											</button>
+										</form>
 									</div>
 								</div>
 							</div>
 						</div>
-						<div class="card-body">
-							<ol>
-								<li class="mb-2">
-									<a href="https://onderzoektips.ugent.be/en/tips/00002071/" target="_blank">Share your data in a repository</a> <em>before</em> registering it in Biblio.
-									<br/>
-									<span class="text-muted">This step will provide you with an identifier.</span>
-								</li>
-								<li class="mb-2">Get more information about <a href="https://onderzoektips.ugent.be/en/tips/00002054/" target="_blank">dataset registration in Biblio</a>.</li>
-								<li class="mb-2"><a href="https://onderzoektips.ugent.be/en/tips/00002055/" target="_blank">Follow a simple illustrated guide to register your dataset in Biblio</a>.</li>
-							</ol>
-						</div>
+					</div>
+					<div class="col-xl-4">
+						@tips()
 					</div>
 				</div>
 			</div>
-		</form>
+		</div>
 	}
 }
+
+templ tips() {
+	<div class="card bg-light">
+		<div class="card-header bg-transparent">
+			<div class="card-title">
+				Tips for depositing and registering your data
+			</div>
+		</div>
+		<div class="card-body">
+			<div class="c-content">
+				<ol>
+					<li class="mb-4">
+						<a class="c-link" href="https://onderzoektips.ugent.be/en/tips/00002071/" target="_blank">Share your data in a repository</a> <em>before</em> registering it in Biblio.
+						<br/>
+						<span class="text-muted">This step will provide you with an identifier.</span>
+					</li>
+					<li class="mb-4">Get more information about <a class="c-link" href="https://onderzoektips.ugent.be/en/tips/00002054/" target="_blank">dataset registration in Biblio</a>.</li>
+					<li><a class="c-link" href="https://onderzoektips.ugent.be/en/tips/00002055/" target="_blank">Follow a simple illustrated guide to register your dataset in Biblio</a>.</li>
+				</ol>
+			</div>
+		</div>
+	</div>
+}