From a1d5bd34f8b8181960eb6e86818a4dd16e6083d8 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Thu, 27 Jun 2024 12:48:59 +0200
Subject: [PATCH 01/15] swap screen order

---
 .../stash_datacite/resources/_review.html.erb      |  3 +--
 .../shared/_dataset_steps_bottom_nav.html.erb      | 12 ++++++------
 .../shared/_dataset_steps_nav.html.erb             | 14 ++++++++------
 spec/features/stash_engine/upload_files_spec.rb    |  6 +++---
 4 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/app/views/stash_datacite/resources/_review.html.erb b/app/views/stash_datacite/resources/_review.html.erb
index 0c028b7fa9..ca8e9f8ba2 100644
--- a/app/views/stash_datacite/resources/_review.html.erb
+++ b/app/views/stash_datacite/resources/_review.html.erb
@@ -125,8 +125,7 @@
   <% if @resource&.resource_type&.resource_type == 'collection' %>
   <%= link_to 'Back to Describe collection', stash_url_helpers.metadata_entry_pages_find_or_create_path(resource_id: @resource.id), class: 'o-button__icon-left', role: 'button', id: 'describe_back' %>
   <% else %>
-  <%= link_to 'Back to Upload', stash_url_helpers.up_code_resource_path(@resource), id: 'dashboard_path',
-          class: 'o-button__icon-left', role: 'button' %>
+  <%= link_to 'Back to README', stash_url_helpers.prepare_readme_resource_path(@resource), id: 'readme_path', class: 'o-button__icon-left js-nav-out', role: 'button' %>
   <% end %>
 
   <% if @resource.previous_curated_resource && @resource.changed_from_previous_curated.empty? %>
diff --git a/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb b/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb
index c91034effa..5bf408aaf2 100644
--- a/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb
+++ b/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb
@@ -9,13 +9,13 @@
   <% if @resource&.resource_type&.resource_type == 'collection' %> 
     <%= link_to 'Proceed to Review', stash_url_helpers.review_resource_path(@resource.id), class: 'o-button__icon-right js-nav-out', role: 'button', id: 'proceed_review' %>
   <% else %>
-    <%= link_to 'Proceed to README', stash_url_helpers.prepare_readme_resource_path(@resource), id: 'readme_path', class: 'o-button__icon-right js-nav-out', role: 'button' %>
+    <%= link_to 'Proceed to Upload', stash_url_helpers.upload_resource_path(@resource), id: 'upload_path', class: 'o-button__icon-right js-nav-out', role: 'button' %>
   <% end %>
-  <%when 2%>
-  <%= link_to 'Back to Describe dataset', stash_url_helpers.metadata_entry_pages_find_or_create_path(resource_id: @resource.id), class: 'o-button__icon-left js-nav-out', role: 'button', id: 'describe_back' %>
-  <%= link_to 'Proceed to Upload', stash_url_helpers.upload_resource_path(@resource), id: 'upload_path', class: 'o-button__icon-right js-nav-out', role: 'button' %>
-  <%when 3%>  
-  <%= link_to 'Back to README', stash_url_helpers.prepare_readme_resource_path(@resource), id: 'readme_path', class: 'o-button__icon-left js-nav-out', role: 'button' %>
+  <%when 2%>  
+  <%= link_to 'Back to Upload', stash_url_helpers.upload_resource_path(@resource), id: 'upload_path',class: 'o-button__icon-left js-nav-out', role: 'button' %>
   <%= link_to 'Proceed to Review', stash_url_helpers.review_resource_path(@resource.id), class: 'o-button__icon-right js-nav-out', role: 'button', id: 'proceed_review' %>
+  <%when 3%>
+  <%= link_to 'Back to Describe dataset', stash_url_helpers.metadata_entry_pages_find_or_create_path(resource_id: @resource.id), class: 'o-button__icon-left js-nav-out', role: 'button', id: 'describe_back' %>
+  <%= link_to 'Proceed to README', stash_url_helpers.prepare_readme_resource_path(@resource), id: 'readme_path', class: 'o-button__icon-right js-nav-out', role: 'button' %>
   <%end%>
 </div>
diff --git a/app/views/stash_engine/shared/_dataset_steps_nav.html.erb b/app/views/stash_engine/shared/_dataset_steps_nav.html.erb
index 0d8e35789c..fc4dce5717 100644
--- a/app/views/stash_engine/shared/_dataset_steps_nav.html.erb
+++ b/app/views/stash_engine/shared/_dataset_steps_nav.html.erb
@@ -1,16 +1,18 @@
 <div class="c-progress">
-  <%= link_to "Describe #{@resource&.resource_type&.resource_type || 'dataset'}", stash_url_helpers.metadata_entry_pages_find_or_create_path(resource_id: @resource.id),
-           class: "c-progress__tab1#{ (params[:controller]&.end_with?('metadata_entry_pages') && params[:action] == 'find_or_create' ? '--active' : '' )} js-nav-out" %>
+  <%= link_to "Describe #{@resource&.resource_type&.resource_type || 'dataset'}",
+      stash_url_helpers.metadata_entry_pages_find_or_create_path(resource_id: @resource.id),
+      class: "c-progress__tab1#{ (params[:controller]&.end_with?('metadata_entry_pages') && params[:action] == 'find_or_create' ? '--active' : '' )} js-nav-out" %>
 
   <% unless @resource&.resource_type&.resource_type == 'collection' %>
 
+  <%= link_to 'Upload files', stash_url_helpers.upload_resource_path(@resource.id),
+      class: "c-progress__tab#{ (params[:controller]&.end_with?('resources') && params[:action].include?('upload') ? '--active' : '') } js-nav-out" %>
+
   <%= link_to 'Prepare README', stash_url_helpers.prepare_readme_resource_path(@resource.id),
-                    class: "c-progress__tab#{ (params[:controller]&.end_with?('resources') && params[:action].include?('readme') ? '--active' : '') } js-nav-out" %>
+      class: "c-progress__tab#{ (params[:controller]&.end_with?('resources') && params[:action].include?('readme') ? '--active' : '') } js-nav-out" %>
 
-  <%= link_to 'Upload files', stash_url_helpers.upload_resource_path(@resource.id),
-                    class: "c-progress__tab#{ (params[:controller]&.end_with?('resources') && params[:action].include?('upload') ? '--active' : '') } js-nav-out" %>
   <% end %>
 
   <%= link_to 'Review and submit', stash_url_helpers.review_resource_path(@resource.id),
-            class: "c-progress__tab#{ (params[:controller]&.end_with?('resources') && params[:action] == 'review' ? '--active' : '') } js-nav-out" %>
+      class: "c-progress__tab#{ (params[:controller]&.end_with?('resources') && params[:action] == 'review' ? '--active' : '') } js-nav-out" %>
 </div>
diff --git a/spec/features/stash_engine/upload_files_spec.rb b/spec/features/stash_engine/upload_files_spec.rb
index 068c22afe7..64f79246f8 100644
--- a/spec/features/stash_engine/upload_files_spec.rb
+++ b/spec/features/stash_engine/upload_files_spec.rb
@@ -79,8 +79,8 @@
     end
 
     it 'shows the right navigation buttons at the bottom' do
-      expect(page). to have_content('Back to README')
-      expect(page). to have_content('Proceed to Review')
+      expect(page). to have_content('Back to Describe dataset')
+      expect(page). to have_content('Proceed to README')
     end
 
     it 'shows only files with status different of "deleted"' do
@@ -356,7 +356,7 @@
     end
 
     it 'disallows navigation away with pending uploads' do
-      click_on('Proceed to Review')
+      click_on('Proceed to README')
       sleep 0.5
       expect(page).to have_text('please click "Upload pending files"')
     end

From a9c73abfbc799f4dffdd3cf8a7ff4f132c824c48 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Thu, 27 Jun 2024 18:40:33 +0200
Subject: [PATCH 02/15] rename file

---
 .../react/containers/{ReadMe.jsx => ReadMeWizard.jsx}           | 0
 app/views/stash_engine/resources/prepare_readme.html.erb        | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename app/javascript/react/containers/{ReadMe.jsx => ReadMeWizard.jsx} (100%)

diff --git a/app/javascript/react/containers/ReadMe.jsx b/app/javascript/react/containers/ReadMeWizard.jsx
similarity index 100%
rename from app/javascript/react/containers/ReadMe.jsx
rename to app/javascript/react/containers/ReadMeWizard.jsx
diff --git a/app/views/stash_engine/resources/prepare_readme.html.erb b/app/views/stash_engine/resources/prepare_readme.html.erb
index e289b4703c..9703db5296 100644
--- a/app/views/stash_engine/resources/prepare_readme.html.erb
+++ b/app/views/stash_engine/resources/prepare_readme.html.erb
@@ -20,7 +20,7 @@
 <% end %>
 
 <!-- map(&:attributes) one way for translating ActiveRecord field type to json at React side adequately -->
-<%= react_component('containers/ReadMe', {
+<%= react_component('containers/ReadMeWizard', {
   dcsDescription: @metadata_entry.technical_info,
   updatePath: descriptions_update_path,
   fileContent: @file_content,

From 68a8b1d1a319eaded9d0aa4dd63e09b09f6de0c3 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Thu, 27 Jun 2024 20:55:45 +0200
Subject: [PATCH 03/15] update style

---
 app/assets/stylesheets/scss/_footer.scss           | 14 +++++++++++---
 .../metadata_entry_pages/_find_or_create.html.erb  |  2 ++
 .../stash_engine/resources/prepare_readme.html.erb |  5 +++--
 app/views/stash_engine/resources/upload.html.erb   |  4 ++--
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/scss/_footer.scss b/app/assets/stylesheets/scss/_footer.scss
index 0e08ae9b47..aacbd07769 100644
--- a/app/assets/stylesheets/scss/_footer.scss
+++ b/app/assets/stylesheets/scss/_footer.scss
@@ -1,9 +1,17 @@
 // ##### Footer Component ##### //
 
 #maincontent {
-  min-height: 79vh;
-  @media (max-width: 1060px) { min-height: 75vh; } 
-  @media (max-width: 900px) { min-height: 70vh; } 
+  min-height: calc(100vh - 240px);
+  @media (max-width: 968px) { min-height: calc(100vh - 280px); } 
+  @media (max-width: 870px) { min-height: calc(100vh - 306px); } 
+  @media (max-width: 640px) { min-height: calc(100vh - 346px); } 
+
+  #submission-wizard {
+    min-height: calc(100vh - 320px);
+    @media (max-width: 968px) { min-height: calc(100vh - 360px); } 
+    @media (max-width: 870px) { min-height: calc(100vh - 386px); } 
+    @media (max-width: 640px) { min-height: calc(100vh - 426px); } 
+  }
 }
 
 .c-footer {
diff --git a/app/views/stash_datacite/metadata_entry_pages/_find_or_create.html.erb b/app/views/stash_datacite/metadata_entry_pages/_find_or_create.html.erb
index ceedd56622..db4a7949b6 100644
--- a/app/views/stash_datacite/metadata_entry_pages/_find_or_create.html.erb
+++ b/app/views/stash_datacite/metadata_entry_pages/_find_or_create.html.erb
@@ -1,3 +1,5 @@
+<div id="submission-wizard">
 <%= render partial: 'stash_engine/shared/dataset_steps_nav' %>
 <%= render partial: 'stash_datacite/metadata_entry_pages/metadata_entry_form' %>
+</div>
 <%= render partial: 'stash_engine/shared/dataset_steps_bottom_nav', locals: {page: 1} %>
diff --git a/app/views/stash_engine/resources/prepare_readme.html.erb b/app/views/stash_engine/resources/prepare_readme.html.erb
index 9703db5296..30adfcd4ee 100644
--- a/app/views/stash_engine/resources/prepare_readme.html.erb
+++ b/app/views/stash_engine/resources/prepare_readme.html.erb
@@ -1,4 +1,5 @@
- <% @page_title = "Prepare your README – publish and preserve your data" %>
+<% @page_title = "Prepare your README – publish and preserve your data" %>
+<div id="submission-wizard">
 <%= render partial: 'stash_engine/shared/dataset_non_user_editor', locals: {resource: @resource} %>
 <%= render partial: 'stash_engine/shared/dataset_steps_nav' %>
 
@@ -27,5 +28,5 @@
   title: @resource.title || 'Title of Dataset',
   doi: @resource.identifier_uri
 }) %>
-
+</div>
 <%= render partial: 'stash_engine/shared/dataset_steps_bottom_nav', locals: {page: 2} %>
diff --git a/app/views/stash_engine/resources/upload.html.erb b/app/views/stash_engine/resources/upload.html.erb
index 4a7ef58431..0f79278e87 100644
--- a/app/views/stash_engine/resources/upload.html.erb
+++ b/app/views/stash_engine/resources/upload.html.erb
@@ -1,4 +1,5 @@
 <% @page_title = "Upload your files — publish and preserve your data" %>
+<div id="submission-wizard">
 <%= render partial: 'stash_engine/shared/dataset_non_user_editor', locals: {resource: @resource} %>
 <%= render partial: 'stash_engine/shared/dataset_steps_nav' %>
 
@@ -25,9 +26,8 @@
 }) %>
 
 <!-- display messages to let arias know what's happening -->
-<div id="aria-info" class="screen-reader-only" aria-live="polite" aria-atomic="true" aria-relevant="additions text">
+<div id="aria-info" class="screen-reader-only" aria-live="polite" aria-atomic="true" aria-relevant="additions text"></div>
 </div>
-
 <%= render partial: 'stash_engine/shared/dataset_steps_bottom_nav', locals: {page: 3} %>
 
 <script>

From 2c5d2657ad52cf1531c36390d5e5eb1b803b2a57 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 2 Jul 2024 01:05:51 +0200
Subject: [PATCH 04/15] new README creation wizard

---
 app/assets/stylesheets/application.scss       |   1 +
 app/assets/stylesheets/scss/_buttons.scss     |   6 +
 app/assets/stylesheets/scss/_steps.scss       |  60 +++++
 .../MarkdownEditor/MarkdownEditor.jsx         |  18 +-
 .../MarkdownEditor/milkdown_editor.css        |  19 +-
 .../components/ReadMeWizard/ReadMeImport.jsx  |  60 +++++
 .../components/ReadMeWizard/ReadMeSteps.jsx   |  69 ++++++
 .../ReadMeWizard}/textorbinary.jsx            |   0
 .../react/containers/ReadMeWizard.jsx         | 210 ++++++++++--------
 .../resources/prepare_readme.html.erb         |   1 +
 .../shared/_dataset_steps_bottom_nav.html.erb |   4 +-
 .../{ReadMe.test.js => ReadMeWizard.test.js}  |   2 +-
 12 files changed, 337 insertions(+), 113 deletions(-)
 create mode 100644 app/assets/stylesheets/scss/_steps.scss
 create mode 100644 app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
 create mode 100644 app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
 rename app/javascript/react/{containers => components/ReadMeWizard}/textorbinary.jsx (100%)
 rename spec/javascript/react/containers/{ReadMe.test.js => ReadMeWizard.test.js} (99%)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 138f8cc8e5..684bcd7927 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -75,6 +75,7 @@ a[role='button']:focus-visible, a[class*='button']:focus-visible {
 @import 'scss/select';
 @import 'scss/showhide';
 @import 'scss/table';
+@import 'scss/steps';
 
 // ***** Components ***** //
 
diff --git a/app/assets/stylesheets/scss/_buttons.scss b/app/assets/stylesheets/scss/_buttons.scss
index 26e4745344..08d259f131 100644
--- a/app/assets/stylesheets/scss/_buttons.scss
+++ b/app/assets/stylesheets/scss/_buttons.scss
@@ -29,6 +29,12 @@ input[type=file]::file-selector-button {
   background-color: $design-lighter-blue-color;
 }
 
+.o-button__plain-text {
+  @extend %o-button__plain-text;
+  padding: 8px 12px;
+  background-color: $design-lightest-blue-color
+}
+
 .o-button__plain-text3 {
   @extend %o-button__plain-text;
   padding: 8px 12px;
diff --git a/app/assets/stylesheets/scss/_steps.scss b/app/assets/stylesheets/scss/_steps.scss
new file mode 100644
index 0000000000..5dc7eeab62
--- /dev/null
+++ b/app/assets/stylesheets/scss/_steps.scss
@@ -0,0 +1,60 @@
+.steps-wrapper {
+  margin: 1.5rem auto 2rem;
+  display: flex;
+  justify-content: space-between;
+
+  .step {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex: 1;
+
+    &::after {
+      position: absolute;
+      content: "";
+      border-bottom: 4px solid $design-extra-light-gray-color;
+      width: 100%;
+      top: .9rem;
+      left: 50%;
+      z-index: 2;
+    }
+
+    &:last-child::after {
+      content: none;
+    }
+
+    .step-counter {
+      font-size: .85rem;
+      line-height: 0;
+      position: relative;
+      z-index: 3;
+      width: 1.8rem;
+      height: 1.8rem;
+      border-radius: 50%;
+      background-color: $design-extra-light-gray-color;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      margin-bottom: .5rem;
+    }
+
+    &.completed {
+      &::after {
+        border-color: $design-medium-blue-color;
+      }
+      .step-counter {
+        background-color: $design-medium-blue-color;
+        color: $design-white-color;
+      }
+    }
+    &.current {
+      .step-counter {
+        background-color: $design-lighter-blue-color;
+      }
+      .step-name {
+        font-weight: bold;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/app/javascript/react/components/MarkdownEditor/MarkdownEditor.jsx b/app/javascript/react/components/MarkdownEditor/MarkdownEditor.jsx
index bf1b7e9c91..62662df83b 100644
--- a/app/javascript/react/components/MarkdownEditor/MarkdownEditor.jsx
+++ b/app/javascript/react/components/MarkdownEditor/MarkdownEditor.jsx
@@ -153,7 +153,7 @@ function MilkdownEditor({
   }, [initialCode]);
 
   useEffect(() => {
-    if (defaultVal && saveVal && saveVal !== defaultVal) onChange(saveVal);
+    if (saveVal !== defaultVal) onChange(saveVal);
   }, [saveVal]);
 
   useEffect(() => {
@@ -236,13 +236,15 @@ function MilkdownEditor({
 
 // <p className="screen-reader-only" role="status" aria-live="polite" id="menu-status">{status}</p>
 
-const MarkdownEditor = React.forwardRef((props, ref) => (
-  <div ref={ref} id={props.id} className="markdown_editor">
-    <MilkdownProvider>
-      <MilkdownEditor {...props} />
-    </MilkdownProvider>
-  </div>
-));
+function MarkdownEditor(props) {
+  return (
+    <div id={props.id} className="markdown_editor">
+      <MilkdownProvider>
+        <MilkdownEditor {...props} />
+      </MilkdownProvider>
+    </div>
+  );
+}
 
 MarkdownEditor.propTypes = {
   id: PropTypes.string.isRequired,
diff --git a/app/javascript/react/components/MarkdownEditor/milkdown_editor.css b/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
index 96759cc2e9..28dbc11a77 100644
--- a/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
+++ b/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
@@ -17,6 +17,11 @@
   overflow: auto;
 }
 
+#readme_step_editor .md_editor_textarea {
+  height: 400px;
+  max-height: 65vh;
+}
+
 .md_editor_textarea > div:not(.c-alert--error) {
   overflow: auto;
   position: absolute;
@@ -310,11 +315,6 @@
   height: 100%;
 }
 
-.ProseMirror p {
-  white-space: normal;
-  white-space-collapse: preserve-spaces;
-}
-
 .markdown_editor .milkdown .ProseMirror.editor,
 .markdown_editor .cm-editor {
   padding: 1.5rem 1rem;
@@ -322,6 +322,15 @@
   min-height: 100%;
 }
 
+.ProseMirror.editor *:first-child {
+  margin-top: 0;
+}
+
+.ProseMirror.editor p {
+  white-space: normal;
+  white-space-collapse: preserve-spaces;
+}
+
 .milkdown, .headingMenu li {
   font-family: 'Noto Sans', 'Helvetica Neue', 'Helvetica', 'Arial', '나눔바른고딕', 'Nanum Barun Gothic', '맑은고딕', 'Malgun Gothic', sans-serif;
   margin: 0 !important;
diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
new file mode 100644
index 0000000000..0f3a097484
--- /dev/null
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import {Buffer} from 'buffer';
+import {isText} from './textorbinary';
+
+export default function ReadMeImport({title, setValue}) {
+  const importFile = (e) => {
+    const [file] = e.target.files;
+    const reader = new FileReader();
+    const readerX = new FileReader();
+    reader.addEventListener('load', () => {
+      const {result} = reader;
+      // Test markdown
+      const buffer = Buffer.from(new Uint8Array(result));
+      if (isText(buffer)) {
+        readerX.readAsText(file);
+      } else {
+        document.getElementById('bad-readme-modal').showModal();
+      }
+    });
+    readerX.addEventListener('load', () => {
+      const {result} = readerX;
+      // Set markdown
+      setValue(result);
+    });
+    if (file) reader.readAsArrayBuffer(file);
+    // allow replacement uploads
+    e.target.value = null;
+  };
+
+  return (
+    <>
+      <div style={{textAlign: 'center'}}>
+        <input
+          id="readme_upload"
+          className="c-choose__input-file"
+          type="file"
+          accept="text/x-markdown,text/markdown,.md"
+          onChange={importFile}
+        />
+        <label
+          style={{display: 'inline-block'}}
+          htmlFor="readme_upload"
+          aria-label="Upload README file"
+          className="o-button__plain-text2"
+        >{title || 'Import README'}
+        </label>
+      </div>
+      <dialog id="bad-readme-modal" className="modalDialog">
+        <div className="modalClose">
+          <button aria-label="Close" type="button" onClick={() => document.getElementById('bad-readme-modal').close()} />
+        </div>
+        <div>
+          <h1>File not accepted</h1>
+          <p>Only <a href="https://www.markdownguide.org/">Markdown format</a> README imports are accepted.</p>
+          <p>Have a different file type? Try copying and pasting the contents of your file into the editor!</p>
+        </div>
+      </dialog>
+    </>
+  );
+}
diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
new file mode 100644
index 0000000000..5492db10df
--- /dev/null
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
@@ -0,0 +1,69 @@
+/* eslint-disable max-len */
+import React from 'react';
+import MarkdownEditor from '../MarkdownEditor';
+
+export const secTitles = ['File list', 'Variable list', 'Code/software', 'Usage notes', 'Access information'];
+
+export default function ReadMeSteps({
+  step, setStep, content, fileList, save,
+}) {
+  const saveContent = (markdown) => {
+    if (markdown.trim()) {
+      content[`step${step}`] = markdown;
+    } else {
+      delete content[`step${step}`];
+    }
+    save(JSON.stringify(content));
+  };
+
+  const sections = {
+    1: {
+      desc: 'Provide a comprehensive list of file names and folders. Check that the following is accurate, and add any folders and files inside compressed archive files (.zip, .gz).',
+      content: content.step1 || fileList.map((f) => `* ${f}`).join('\n'),
+    },
+    2: {
+      desc: 'Define all variables and abbreviations in your data files, including missing values (empty cells, NA, null, etc.) if present.',
+      content: content.step2 || '',
+    },
+    3: {
+      desc: 'What free or open software is needed to view your data? Describe the code software, including versions and loaded packages that you used to run files, and the workflow that you used if the relationship of files to software is not clear. If code or scripts are included with your submission, describe them here.',
+      content: content.step3 || '',
+    },
+    4: {
+      desc: 'List any other necessary instructions for opening and viewing data types.',
+      content: content.step4 || '',
+    },
+    5: {
+      desc: 'If applicable, provide links to other publicly accessible locations of the data. If your data was derived from another source(s), list the source(s) and include license information.',
+      content: content.step5 || 'Links to other publicly accessible locations of the data:\n\n* \n\nData was derived from the following sources:\n\n* ',
+    },
+  };
+
+  return (
+    <>
+      <div className="steps-wrapper">
+        {Object.keys(sections).map((i) => (
+          /* eslint-disable-next-line eqeqeq */
+          <div key={`step${i}`} className={`step${i < step ? ' completed' : ''}${i == step ? ' current' : ''}`} aria-current={step == i}>
+            <span className="step-counter">{i}</span><span className="step-name">{secTitles[i - 1]}</span>
+          </div>
+        ))}
+      </div>
+      <h2><label htmlFor="readme_step_editor">{secTitles[step - 1]}</label></h2>
+      <p>{sections[step].desc}</p>
+      <MarkdownEditor
+        id="readme_step_editor"
+        {...(step === 1 ? {initialValue: '', replaceValue: sections[step].content} : {initialValue: sections[step].content})}
+        onChange={saveContent}
+      />
+      <div className="o-dataset-nav" style={{marginBottom: '4rem'}}>
+        <button type="button" className="o-button__plain-text" onClick={() => setStep(step - 1)}>
+          <i className="fa fa-caret-left" aria-hidden="true" /> Previous
+        </button>
+        <button type="button" className="o-button__plain-text2" onClick={() => setStep(step + 1)}>
+          Next <i className="fa fa-caret-right" aria-hidden="true" />
+        </button>
+      </div>
+    </>
+  );
+}
diff --git a/app/javascript/react/containers/textorbinary.jsx b/app/javascript/react/components/ReadMeWizard/textorbinary.jsx
similarity index 100%
rename from app/javascript/react/containers/textorbinary.jsx
rename to app/javascript/react/components/ReadMeWizard/textorbinary.jsx
diff --git a/app/javascript/react/containers/ReadMeWizard.jsx b/app/javascript/react/containers/ReadMeWizard.jsx
index 37090a688a..32d46271ad 100644
--- a/app/javascript/react/containers/ReadMeWizard.jsx
+++ b/app/javascript/react/containers/ReadMeWizard.jsx
@@ -1,20 +1,20 @@
-import React, {
-  useRef, useState, useEffect, useCallback,
-} from 'react';
-import {Buffer} from 'buffer';
+/* eslint-disable no-nested-ternary */
+import React, {useState, useEffect, useCallback} from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
 import {debounce} from 'lodash';
-import {isText} from './textorbinary';
+import ReadMeImport from '../components/ReadMeWizard/ReadMeImport';
+import ReadMeSteps, {secTitles} from '../components/ReadMeWizard/ReadMeSteps';
 import MarkdownEditor from '../components/MarkdownEditor';
 import {showSavedMsg, showSavingMsg} from '../../lib/utils';
 
 export default function ReadMe({
-  dcsDescription, title, doi, updatePath, fileContent,
+  dcsDescription, title, doi, fileList, updatePath, fileContent,
 }) {
-  const editorRef = useRef();
   const [initialValue, setInitialValue] = useState(null);
-  const [replaceValue, setReplaceValue] = useState('');
+  const [replaceValue, setReplaceValue] = useState(null);
+  const [wizardContent, setWizardContent] = useState(null);
+  const [wizardStep, setWizardStep] = useState(0);
 
   const saveDescription = (markdown) => {
     const authenticity_token = document.querySelector("meta[name='csrf-token']")?.getAttribute('content');
@@ -35,45 +35,52 @@ export default function ReadMe({
 
   const checkDescription = useCallback(debounce(saveDescription, 900), []);
 
-  const importFile = (e) => {
-    const [file] = e.target.files;
-    const reader = new FileReader();
-    const readerX = new FileReader();
-    reader.addEventListener('load', () => {
-      const {result} = reader;
-      // Test markdown
-      const buffer = Buffer.from(new Uint8Array(result));
-      if (isText(buffer)) {
-        readerX.readAsText(file);
-      } else {
-        document.getElementById('bad-readme-modal').showModal();
+  const assembleValue = () => {
+    let v = `# ${wizardContent.title}\n\n[${wizardContent.doi}](${wizardContent.doi})\n\n## Description of the data and file structure\n\n`;
+    [1, 2, 4].forEach((s) => {
+      if (wizardContent[`step${s}`]) {
+        v += `### ${secTitles[s - 1]}\n\n${wizardContent[`step${s}`]}`;
       }
     });
-    readerX.addEventListener('load', () => {
-      const {result} = readerX;
-      // Set markdown
-      setReplaceValue(result);
+    [3, 5].forEach((s) => {
+      if (wizardContent[`step${s}`]) {
+        v += `## ${secTitles[s - 1]}\n\n${wizardContent[`step${s}`]}`;
+      }
     });
-    if (file) reader.readAsArrayBuffer(file);
-    // allow replacement uploads
-    e.target.value = null;
+    return v;
   };
 
-  const fetchTemplate = async () => {
-    const response = await fetch('/docs/README.md');
-    const text = await response.text();
-    const template = text.split('\n').slice(3).join('\n');
-    const value = `# ${title}\n\n[${doi}](${doi})\n\n${template}`;
-    setInitialValue(value);
-  };
+  useEffect(() => {
+    if (initialValue) {
+      document.getElementById('proceed_review').removeAttribute('hidden');
+      document.querySelector('.c-autosave-footer').removeAttribute('hidden');
+    }
+  }, [initialValue]);
+
+  useEffect(() => {
+    if (wizardStep > secTitles.length) {
+      const complete = assembleValue();
+      saveDescription(complete);
+      setInitialValue(complete);
+    } else if (wizardStep > 0) {
+      wizardContent.step = wizardStep;
+      saveDescription(JSON.stringify(wizardContent));
+    }
+  }, [wizardStep]);
 
   useEffect(() => {
     if (dcsDescription.description) {
-      setInitialValue(dcsDescription.description);
+      try {
+        const template = JSON.parse(dcsDescription.description);
+        setWizardContent(template);
+        setWizardStep(template.step);
+      } catch {
+        setInitialValue(dcsDescription.description);
+      }
     } else if (fileContent) {
       setInitialValue(fileContent);
     } else {
-      fetchTemplate();
+      setWizardContent({title, doi, step: 0});
     }
   }, []);
 
@@ -84,70 +91,79 @@ export default function ReadMe({
         <div className="c-autosave__text saving_text" hidden>Saving&hellip;</div>
         <div className="c-autosave__text saved_text" hidden>All progress saved</div>
       </div>
-      <div className="o-admin-columns">
-        <div className="o-admin-left" style={{minWidth: '400px', flexGrow: 2}}>
-          <p style={{marginTop: 0}}>
-          Your Dryad submission must be accompanied by a README file, to help others use and understand your dataset.
-          It should contain the details needed to interpret and reuse your data, including abbreviations and codes,
-          file descriptions, and information about any necessary software.
-          </p>
-          <p>
-            {!(dcsDescription.description || fileContent) && 'The editor below is pre-filled with a template for you to replace with your content. '}
-            You can copy and paste formatted text into the editor, or enter markdown by clicking the &apos;Markdown&apos; tab.
-          </p>
-          <p style={{textAlign: 'center', marginBottom: 0}}>
-            <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
-              <i className="fa fa-file-text-o" aria-hidden="true" style={{marginRight: '1ch'}} />Learn about README files
-              <span className="screen-reader-only"> (opens in new window)</span>
-            </a>
-          </p>
-        </div>
-        <div className="o-admin-right cedar-container" style={{minWidth: '400px', flexShrink: 2}}>
-          <h2 className="o-heading__level2">Already have a README file?</h2>
-          <p>If you already have a README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a> for your dataset, you can import it here.
-          This will replace our template in the editor.
-          </p>
-          <div style={{textAlign: 'center'}}>
-            <input
-              id="readme_upload"
-              className="c-choose__input-file"
-              type="file"
-              accept="text/x-markdown,text/markdown,.md"
-              onChange={importFile}
-            />
-            <label
-              style={{display: 'inline-block'}}
-              htmlFor="readme_upload"
-              aria-label="Upload README file"
-              className="o-button__plain-text2"
-            >Import README
-            </label>
-          </div>
-          <dialog id="bad-readme-modal" className="modalDialog">
-            <div className="modalClose">
-              <button aria-label="Close" type="button" onClick={() => document.getElementById('bad-readme-modal').close()} />
+      {initialValue ? (
+        <>
+          <div className="o-admin-columns">
+            <div className="o-admin-left" style={{minWidth: '400px', flexGrow: 2}}>
+              <p style={{marginTop: 0}}>
+                To help others interpret and reuse your dataset, a README file must be included, containing
+                abbreviations and codes, file descriptions, and information about any necessary software.{' '}
+                <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
+                  <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
+                  <span className="screen-reader-only"> (opens in new window)</span>
+                </a>
+              </p>
+              <p>
+                You can copy and paste formatted text into the editor, or enter markdown by clicking the &apos;Markdown&apos; tab.
+              </p>
             </div>
-            <div>
-              <h1>File not accepted</h1>
-              <p>Only <a href="https://www.markdownguide.org/">Markdown format</a> README imports are accepted.</p>
-              <p>Have a different file type? Try copying and pasting the contents of your file into the editor!</p>
+            <div className="o-admin-right cedar-container" style={{minWidth: '500px', flexShrink: 2}}>
+              <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>.</p>
+              <ReadMeImport title="Replace README" setValue={setReplaceValue} />
             </div>
-          </dialog>
-        </div>
-      </div>
-      {initialValue ? (
-        <MarkdownEditor
-          ref={editorRef}
-          id="readme_editor"
-          initialValue={initialValue}
-          replaceValue={replaceValue}
-          onChange={checkDescription}
-        />
+          </div>
+          <MarkdownEditor
+            id="readme_editor"
+            initialValue={initialValue}
+            replaceValue={replaceValue}
+            onChange={checkDescription}
+          />
+        </>
       ) : (
-        <p style={{display: 'flex', alignItems: 'center'}}>
-          <img src="../../../images/spinner.gif" alt="Loading spinner" style={{height: '1.5rem', marginRight: '.5ch'}} />
-          Loading README template
-        </p>
+        wizardContent && wizardStep <= secTitles.length ? (
+          wizardStep === 0 ? (
+            <div style={{maxWidth: '90ch', height: '100%'}}>
+              <p style={{marginTop: 0}}>
+                Your Dryad submission must be accompanied by a README file, to help others use and understand your
+                dataset. It should contain the details needed to interpret and reuse your data, including abbreviations
+                and codes, file descriptions, and information about any necessary software.
+              </p>
+              <p style={{textAlign: 'center'}}>
+                <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
+                  <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
+                  <span className="screen-reader-only"> (opens in new window)</span>
+                </a>
+              </p>
+              <div className="o-admin-columns">
+                <div className="cedar-container o-admin-left">
+                  <h2 className="o-heading__level2">Already have a README file?</h2>
+                  <p>If you already have a README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a> for your dataset, you can import it here. </p>
+                  <ReadMeImport setValue={setInitialValue} />
+                </div>
+                <div className="o-admin-right" style={{alignContent: 'center', marginBottom: '20px', textAlign: 'center'}}>
+                    Otherwise, please
+                  <button type="button" className="o-button__plain-text1" onClick={() => setWizardStep(1)}>
+                      Create a README using our tool <i className="fa fa-caret-right" aria-hidden="true" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ) : (
+            <ReadMeSteps
+              key={wizardStep}
+              content={wizardContent}
+              step={wizardStep}
+              setStep={setWizardStep}
+              fileList={fileList}
+              save={checkDescription}
+            />
+          )
+        ) : (
+          <p style={{display: 'flex', alignItems: 'center'}}>
+            <img src="../../../images/spinner.gif" alt="Loading spinner" style={{height: '1.5rem', marginRight: '.5ch'}} />
+              Loading README generator
+          </p>
+        )
       )}
     </>
   );
diff --git a/app/views/stash_engine/resources/prepare_readme.html.erb b/app/views/stash_engine/resources/prepare_readme.html.erb
index 30adfcd4ee..e3568fd228 100644
--- a/app/views/stash_engine/resources/prepare_readme.html.erb
+++ b/app/views/stash_engine/resources/prepare_readme.html.erb
@@ -25,6 +25,7 @@
   dcsDescription: @metadata_entry.technical_info,
   updatePath: descriptions_update_path,
   fileContent: @file_content,
+  fileList: @resource.data_files.map(&:upload_file_name),
   title: @resource.title || 'Title of Dataset',
   doi: @resource.identifier_uri
 }) %>
diff --git a/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb b/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb
index 5bf408aaf2..60f112af67 100644
--- a/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb
+++ b/app/views/stash_engine/shared/_dataset_steps_bottom_nav.html.erb
@@ -1,4 +1,4 @@
-<div class="c-autosave-footer">
+<div class="c-autosave-footer" <% if page == 2 %>hidden<% end %>>
   <div class="c-autosave__text saving_text" hidden>Saving&hellip;</div>
   <div class="c-autosave__text saved_text" hidden>All progress saved</div>
 </div>
@@ -13,7 +13,7 @@
   <% end %>
   <%when 2%>  
   <%= link_to 'Back to Upload', stash_url_helpers.upload_resource_path(@resource), id: 'upload_path',class: 'o-button__icon-left js-nav-out', role: 'button' %>
-  <%= link_to 'Proceed to Review', stash_url_helpers.review_resource_path(@resource.id), class: 'o-button__icon-right js-nav-out', role: 'button', id: 'proceed_review' %>
+  <%= link_to 'Proceed to Review', stash_url_helpers.review_resource_path(@resource.id), class: 'o-button__icon-right js-nav-out', role: 'button', id: 'proceed_review', hidden: true %>
   <%when 3%>
   <%= link_to 'Back to Describe dataset', stash_url_helpers.metadata_entry_pages_find_or_create_path(resource_id: @resource.id), class: 'o-button__icon-left js-nav-out', role: 'button', id: 'describe_back' %>
   <%= link_to 'Proceed to README', stash_url_helpers.prepare_readme_resource_path(@resource), id: 'readme_path', class: 'o-button__icon-right js-nav-out', role: 'button' %>
diff --git a/spec/javascript/react/containers/ReadMe.test.js b/spec/javascript/react/containers/ReadMeWizard.test.js
similarity index 99%
rename from spec/javascript/react/containers/ReadMe.test.js
rename to spec/javascript/react/containers/ReadMeWizard.test.js
index 5dbc5bef60..b6be6722d7 100644
--- a/spec/javascript/react/containers/ReadMe.test.js
+++ b/spec/javascript/react/containers/ReadMeWizard.test.js
@@ -9,7 +9,7 @@ import {faker} from '@faker-js/faker';
 import axios from 'axios';
 import fs from 'fs';
 import path from 'path';
-import ReadMe from '../../../../app/javascript/react/containers/ReadMe';
+import ReadMe from '../../../../app/javascript/react/containers/ReadMeWizard';
 
 jest.mock('axios');
 

From 00f5c41e4178f42b2b6404263cabbec1f6dac9e0 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 2 Jul 2024 01:06:05 +0200
Subject: [PATCH 05/15] updated validations

---
 .../stash_datacite/resource/dataset_validations.rb     | 10 +++++++++-
 app/models/stash_datacite/resource/review.rb           |  7 ++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/models/stash_datacite/resource/dataset_validations.rb b/app/models/stash_datacite/resource/dataset_validations.rb
index 5849e89873..1bd7d12f6c 100644
--- a/app/models/stash_datacite/resource/dataset_validations.rb
+++ b/app/models/stash_datacite/resource/dataset_validations.rb
@@ -302,7 +302,15 @@ def data_required
         readme_md_require_date = '2022-09-28'
         readme_require_date = '2021-12-20'
 
-        no_techinfo = @resource.descriptions.where(description_type: 'technicalinfo').where.not(description: [nil, '']).count.zero?
+        techinfo = @resource.descriptions.where(description_type: 'technicalinfo').where.not(description: [nil, ''])
+
+        no_techinfo = techinfo.empty?
+        no_techinfo ||= begin
+          JSON.parse(techinfo.first.description)
+          true
+        rescue StandardError
+          false
+        end
 
         no_md = @resource.identifier.created_at > readme_md_require_date && readme_md_files.count.zero?
 
diff --git a/app/models/stash_datacite/resource/review.rb b/app/models/stash_datacite/resource/review.rb
index 7154f4d4bf..74a8600f87 100644
--- a/app/models/stash_datacite/resource/review.rb
+++ b/app/models/stash_datacite/resource/review.rb
@@ -83,7 +83,12 @@ def readme_content
           content = readme_file&.file_content || ''
           @readme_content ||= content.encoding == Encoding::UTF_8 ? content : ''
         else
-          @readme_content ||= technical_info.try(:description)
+          begin
+            JSON.parse(technical_info.try(:description))
+            @readme_content ||= nil
+          rescue StandardError
+            @readme_content ||= technical_info.try(:description)
+          end
         end
       end
 

From b68ab065d1cd6d4bd3ec6fb6e6c98916cf4cc7ff Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 2 Jul 2024 16:49:42 +0200
Subject: [PATCH 06/15] modifications based on feedback

---
 .../react/components/ReadMeWizard/ReadMeSteps.jsx         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
index 5492db10df..e5588daed8 100644
--- a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
@@ -22,7 +22,7 @@ export default function ReadMeSteps({
       content: content.step1 || fileList.map((f) => `* ${f}`).join('\n'),
     },
     2: {
-      desc: 'Define all variables and abbreviations in your data files, including missing values (empty cells, NA, null, etc.) if present.',
+      desc: 'Define all variables and abbreviations in your data files, including units of measurement. List how you indicate missing values (blank cells, "NA", etc.) if applicable.',
       content: content.step2 || '',
     },
     3: {
@@ -61,7 +61,11 @@ export default function ReadMeSteps({
           <i className="fa fa-caret-left" aria-hidden="true" /> Previous
         </button>
         <button type="button" className="o-button__plain-text2" onClick={() => setStep(step + 1)}>
-          Next <i className="fa fa-caret-right" aria-hidden="true" />
+          {step === secTitles.length ? (
+            <>Complete &amp; generate README</>
+          ) : (
+            <>Next <i className="fa fa-caret-right" aria-hidden="true" /></>
+          )}
         </button>
       </div>
     </>

From d164568b378962ef112e86adca12e6ea071567f3 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Wed, 10 Jul 2024 01:27:13 +0200
Subject: [PATCH 07/15] style merge edits

---
 app/assets/stylesheets/scss/_buttons.scss |  2 +-
 app/assets/stylesheets/scss/_steps.scss   | 12 ++++++------
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/scss/_buttons.scss b/app/assets/stylesheets/scss/_buttons.scss
index 4052a84ec4..74f3d14ba1 100644
--- a/app/assets/stylesheets/scss/_buttons.scss
+++ b/app/assets/stylesheets/scss/_buttons.scss
@@ -32,7 +32,7 @@ input[type=file]::file-selector-button {
 .o-button__plain-text {
   @extend %o-button__plain-text;
   padding: 8px 12px;
-  background-color: $design-lightest-blue-color
+  background-color: $lightest-blue;
 }
 
 .o-button__plain-text3 {
diff --git a/app/assets/stylesheets/scss/_steps.scss b/app/assets/stylesheets/scss/_steps.scss
index 5dc7eeab62..c617fec30c 100644
--- a/app/assets/stylesheets/scss/_steps.scss
+++ b/app/assets/stylesheets/scss/_steps.scss
@@ -13,7 +13,7 @@
     &::after {
       position: absolute;
       content: "";
-      border-bottom: 4px solid $design-extra-light-gray-color;
+      border-bottom: 4px solid $lighter-gray;
       width: 100%;
       top: .9rem;
       left: 50%;
@@ -32,7 +32,7 @@
       width: 1.8rem;
       height: 1.8rem;
       border-radius: 50%;
-      background-color: $design-extra-light-gray-color;
+      background-color: $lighter-gray;
       display: flex;
       align-items: center;
       justify-content: space-around;
@@ -41,16 +41,16 @@
 
     &.completed {
       &::after {
-        border-color: $design-medium-blue-color;
+        border-color: $medium-blue;
       }
       .step-counter {
-        background-color: $design-medium-blue-color;
-        color: $design-white-color;
+        background-color: $medium-blue;
+        color: white;
       }
     }
     &.current {
       .step-counter {
-        background-color: $design-lighter-blue-color;
+        background-color: $lighter-blue;
       }
       .step-name {
         font-weight: bold;

From e2a05b8e6c5a71f6410c2e58c874ffadc9eab361 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Fri, 26 Jul 2024 20:11:01 +0200
Subject: [PATCH 08/15] readme wizard edits discussed with curators

---
 app/assets/stylesheets/scss/_buttons.scss     | 19 +++--
 app/assets/stylesheets/scss/_headings.scss    |  2 +
 app/assets/stylesheets/scss/_list.scss        | 11 +++
 app/assets/stylesheets/scss/_text-styles.scss |  7 --
 app/assets/stylesheets/scss/_upload.scss      | 34 ++++++++
 .../MarkdownEditor/milkdown_editor.css        |  4 +-
 .../components/ReadMeWizard/ReadMeImport.jsx  |  5 +-
 .../components/ReadMeWizard/ReadMeSteps.jsx   | 18 ++---
 .../react/containers/ReadMeWizard.jsx         | 77 +++++++++++--------
 app/models/stash_engine/data_file.rb          |  2 +-
 .../resources/prepare_readme.html.erb         |  4 +-
 11 files changed, 122 insertions(+), 61 deletions(-)

diff --git a/app/assets/stylesheets/scss/_buttons.scss b/app/assets/stylesheets/scss/_buttons.scss
index 74f3d14ba1..670c514e03 100644
--- a/app/assets/stylesheets/scss/_buttons.scss
+++ b/app/assets/stylesheets/scss/_buttons.scss
@@ -15,6 +15,19 @@
   }
 }
 
+.o-button__plain-text {
+  @extend %o-button__plain-text;
+  padding: 8px 12px;
+  background-color: $lightest-blue;
+}
+
+.o-button__plain-text0 {
+  @extend %o-button__plain-text;
+  padding: 8px 12px;
+  background-color: $green;
+  color: white;
+}
+
 .o-button__plain-text1,
 input[type=file]::file-selector-button {
   @extend %o-button__plain-text;
@@ -29,12 +42,6 @@ input[type=file]::file-selector-button {
   background-color: $lighter-blue;
 }
 
-.o-button__plain-text {
-  @extend %o-button__plain-text;
-  padding: 8px 12px;
-  background-color: $lightest-blue;
-}
-
 .o-button__plain-text3 {
   @extend %o-button__plain-text;
   padding: 8px 12px;
diff --git a/app/assets/stylesheets/scss/_headings.scss b/app/assets/stylesheets/scss/_headings.scss
index e89cd2a7f9..2813322402 100644
--- a/app/assets/stylesheets/scss/_headings.scss
+++ b/app/assets/stylesheets/scss/_headings.scss
@@ -83,6 +83,7 @@ h4, *[class^="o-heading__level4"]  {
 }
 
 h5, h6 {
+  color: $dark-blue;
   margin-top: $spacing-sm;
   margin-bottom: $spacing-base;
   font-size: 1.125rem;
@@ -91,6 +92,7 @@ h5, h6 {
 }
 
 h6 {
+  color: $dark-navy;
   font-style: italic;
 }
 
diff --git a/app/assets/stylesheets/scss/_list.scss b/app/assets/stylesheets/scss/_list.scss
index a7e4903eb2..52d4fab98a 100644
--- a/app/assets/stylesheets/scss/_list.scss
+++ b/app/assets/stylesheets/scss/_list.scss
@@ -1,10 +1,21 @@
 // ##### List Object ##### //
 
+ul, ol {
+	margin: .5rem auto;
+}
+
 li {
 	margin-top: $spacing-base;
 	margin-bottom: $spacing-base;
 }
 
+ul.c-text_styles {
+  li {
+    margin: 1.2ex 0;
+    padding: 0;
+  }
+}
+
 .o-list {
 	margin: 0 0 10px;
 	padding: 0;
diff --git a/app/assets/stylesheets/scss/_text-styles.scss b/app/assets/stylesheets/scss/_text-styles.scss
index 5dfc318a84..26bdb6b6e6 100644
--- a/app/assets/stylesheets/scss/_text-styles.scss
+++ b/app/assets/stylesheets/scss/_text-styles.scss
@@ -6,13 +6,6 @@ blockquote.c-text_styles {
   line-height: 150%;
 }
 
-ul.c-text_styles {
-  li {
-    margin: 1.2ex 0;
-    padding: 0;
-  }
-}
-
 code,
 kbd,
 samp {
diff --git a/app/assets/stylesheets/scss/_upload.scss b/app/assets/stylesheets/scss/_upload.scss
index 58b155b9dd..09c24b1412 100644
--- a/app/assets/stylesheets/scss/_upload.scss
+++ b/app/assets/stylesheets/scss/_upload.scss
@@ -41,3 +41,37 @@
 .t-uploads__method-input {
   margin: 0 1ex 0 0;
 }
+
+.readme-columns, .readme-columns-final, .readme-buttons {
+  display: flex;
+  gap: 2ch;
+}
+.readme-columns {
+  flex-wrap: wrap;
+  & > div {
+    flex-basis: calc(50% - 2ch);
+    flex-shrink: 1;
+    flex-grow: 1;
+    
+    padding: 1.5rem 2rem;
+    background-color: $lightest-blue;
+    &:nth-child(odd) {
+      background-color: $lightest-green;
+    }
+  }
+}
+.readme-columns-final {
+  & > div:first-child {
+    min-width: 400px;
+    flex-grow: 2;
+  }
+  & > div:last-child {
+    padding: 0 1rem 1rem;
+    min-width: 500px;
+    background-color: $lightest-blue;
+    flex-shrink: 2;
+  }
+}
+.readme-buttons {
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/app/javascript/react/components/MarkdownEditor/milkdown_editor.css b/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
index 28dbc11a77..db5e165b78 100644
--- a/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
+++ b/app/javascript/react/components/MarkdownEditor/milkdown_editor.css
@@ -388,8 +388,8 @@
   margin-bottom: .75rem;
 }
 
-.milkdown h4, .headingMenu .h4, .cm-editor .md_h4, {
-  font-size: 1.125rem;
+.milkdown h4, .headingMenu .h4, .cm-editor .md_h4 {
+  font-size: 1.12rem !important;
   line-height: 1.5rem;
   margin-top: 1.15rem;
   margin-bottom: .75rem;
diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
index 0f3a097484..197d5bab65 100644
--- a/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
@@ -41,8 +41,9 @@ export default function ReadMeImport({title, setValue}) {
           style={{display: 'inline-block'}}
           htmlFor="readme_upload"
           aria-label="Upload README file"
-          className="o-button__plain-text2"
-        >{title || 'Import README'}
+          className="o-button__plain-text1"
+        >
+          <i className="fa fa-upload" aria-hidden="true" />{' '}{title || 'Import README'}
         </label>
       </div>
       <dialog id="bad-readme-modal" className="modalDialog">
diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
index e5588daed8..afd775de04 100644
--- a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
@@ -2,7 +2,9 @@
 import React from 'react';
 import MarkdownEditor from '../MarkdownEditor';
 
-export const secTitles = ['File list', 'Variable list', 'Code/software', 'Usage notes', 'Access information'];
+const formatList = (fileList) => fileList.map((f) => `#### File: ${f.name}\n**Description:**&nbsp;\n\n##### Variables\n${f.variables.map((v) => `* ${v}: `).join('\n')}`).join('\n\n');
+
+export const secTitles = ['Data description', 'Files and variables', 'Code/software', 'Access information'];
 
 export default function ReadMeSteps({
   step, setStep, content, fileList, save,
@@ -18,24 +20,20 @@ export default function ReadMeSteps({
 
   const sections = {
     1: {
-      desc: 'Provide a comprehensive list of file names and folders. Check that the following is accurate, and add any folders and files inside compressed archive files (.zip, .gz).',
-      content: content.step1 || fileList.map((f) => `* ${f}`).join('\n'),
+      desc: 'Provide a short description of the experimental efforts for which the data was collected.',
+      content: content.step1 || '',
     },
     2: {
-      desc: 'Define all variables and abbreviations in your data files, including units of measurement. List how you indicate missing values (blank cells, "NA", etc.) if applicable.',
-      content: content.step2 || '',
+      desc: 'Provide a comprehensive list of data files, and define all variables and abbreviations used, including units of measurement. List how you indicate missing values (blank cells, "NA", etc.) if applicable. Please add descriptions below, and add any folders and files inside compressed archives (.zip, .gz) to the list. ',
+      content: content.step2 || formatList(fileList),
     },
     3: {
       desc: 'What free or open software is needed to view your data? Describe the code software, including versions and loaded packages that you used to run files, and the workflow that you used if the relationship of files to software is not clear. If code or scripts are included with your submission, describe them here.',
       content: content.step3 || '',
     },
     4: {
-      desc: 'List any other necessary instructions for opening and viewing data types.',
-      content: content.step4 || '',
-    },
-    5: {
       desc: 'If applicable, provide links to other publicly accessible locations of the data. If your data was derived from another source(s), list the source(s) and include license information.',
-      content: content.step5 || 'Links to other publicly accessible locations of the data:\n\n* \n\nData was derived from the following sources:\n\n* ',
+      content: content.step5 || 'Other publicly accessible locations of the data:\n\n* \n\nData was derived from the following sources:\n\n* ',
     },
   };
 
diff --git a/app/javascript/react/containers/ReadMeWizard.jsx b/app/javascript/react/containers/ReadMeWizard.jsx
index 32d46271ad..2986789805 100644
--- a/app/javascript/react/containers/ReadMeWizard.jsx
+++ b/app/javascript/react/containers/ReadMeWizard.jsx
@@ -37,12 +37,9 @@ export default function ReadMe({
 
   const assembleValue = () => {
     let v = `# ${wizardContent.title}\n\n[${wizardContent.doi}](${wizardContent.doi})\n\n## Description of the data and file structure\n\n`;
-    [1, 2, 4].forEach((s) => {
-      if (wizardContent[`step${s}`]) {
-        v += `### ${secTitles[s - 1]}\n\n${wizardContent[`step${s}`]}`;
-      }
-    });
-    [3, 5].forEach((s) => {
+    if (wizardContent.step1) v += wizardContent.step1;
+    if (wizardContent.step2) v += `### ${secTitles[1]}\n\n${wizardContent.step2}`;
+    [3, 4].forEach((s) => {
       if (wizardContent[`step${s}`]) {
         v += `## ${secTitles[s - 1]}\n\n${wizardContent[`step${s}`]}`;
       }
@@ -50,6 +47,13 @@ export default function ReadMe({
     return v;
   };
 
+  const restartWizard = () => {
+    setInitialValue(null);
+    setWizardContent({title, doi, step: 0});
+    setWizardStep(0);
+    saveDescription(null);
+  };
+
   useEffect(() => {
     if (initialValue) {
       document.getElementById('proceed_review').removeAttribute('hidden');
@@ -93,8 +97,8 @@ export default function ReadMe({
       </div>
       {initialValue ? (
         <>
-          <div className="o-admin-columns">
-            <div className="o-admin-left" style={{minWidth: '400px', flexGrow: 2}}>
+          <div className="readme-columns-final">
+            <div>
               <p style={{marginTop: 0}}>
                 To help others interpret and reuse your dataset, a README file must be included, containing
                 abbreviations and codes, file descriptions, and information about any necessary software.{' '}
@@ -107,9 +111,14 @@ export default function ReadMe({
                 You can copy and paste formatted text into the editor, or enter markdown by clicking the &apos;Markdown&apos; tab.
               </p>
             </div>
-            <div className="o-admin-right cedar-container" style={{minWidth: '500px', flexShrink: 2}}>
-              <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>.</p>
-              <ReadMeImport title="Replace README" setValue={setReplaceValue} />
+            <div>
+              <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>, or by deleting the content and generating a new README using our tool.</p>
+              <div className="readme-buttons">
+                <ReadMeImport title="Import new README" setValue={setReplaceValue} />
+                <button type="button" className="o-button__plain-text0" onClick={restartWizard}>
+                  <i className="fa fa-trowel-bricks" aria-hidden="true" /> Generate new README
+                </button>
+              </div>
             </div>
           </div>
           <MarkdownEditor
@@ -122,30 +131,35 @@ export default function ReadMe({
       ) : (
         wizardContent && wizardStep <= secTitles.length ? (
           wizardStep === 0 ? (
-            <div style={{maxWidth: '90ch', height: '100%'}}>
-              <p style={{marginTop: 0}}>
-                Your Dryad submission must be accompanied by a README file, to help others use and understand your
-                dataset. It should contain the details needed to interpret and reuse your data, including abbreviations
-                and codes, file descriptions, and information about any necessary software.
-              </p>
-              <p style={{textAlign: 'center'}}>
-                <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
-                  <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
-                  <span className="screen-reader-only"> (opens in new window)</span>
-                </a>
-              </p>
-              <div className="o-admin-columns">
-                <div className="cedar-container o-admin-left">
+            <div style={{height: '100%'}}>
+              <div style={{maxWidth: '90ch'}}>
+                <p style={{marginTop: 0}}>
+                  Your Dryad submission must be accompanied by a README file, to help others use and understand your
+                  dataset. It should contain the details needed to interpret and reuse your data, including abbreviations
+                  and codes, file descriptions, and information about any necessary software.
+                </p>
+                <p style={{textAlign: 'center'}}>
+                  <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
+                    <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
+                    <span className="screen-reader-only"> (opens in new window)</span>
+                  </a>
+                </p>
+              </div>
+              <div className="readme-columns">
+                <div>
+                  <h2 className="o-heading__level2">Need to create a README?</h2>
+                  <p>Use our step-by-step tool to generate a README file. After completion your generated README can be added to and revised.</p>
+                  <p style={{textAlign: 'center'}}>
+                    <button type="button" className="o-button__plain-text1" onClick={() => setWizardStep(1)}>
+                      Build a README <i className="fa fa-trowel-bricks fa-flip-horizontal" aria-hidden="true" />
+                    </button>
+                  </p>
+                </div>
+                <div>
                   <h2 className="o-heading__level2">Already have a README file?</h2>
                   <p>If you already have a README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a> for your dataset, you can import it here. </p>
                   <ReadMeImport setValue={setInitialValue} />
                 </div>
-                <div className="o-admin-right" style={{alignContent: 'center', marginBottom: '20px', textAlign: 'center'}}>
-                    Otherwise, please
-                  <button type="button" className="o-button__plain-text1" onClick={() => setWizardStep(1)}>
-                      Create a README using our tool <i className="fa fa-caret-right" aria-hidden="true" />
-                  </button>
-                </div>
               </div>
             </div>
           ) : (
@@ -175,4 +189,5 @@ ReadMe.propTypes = {
   title: PropTypes.string.isRequired,
   doi: PropTypes.string.isRequired,
   fileContent: PropTypes.string,
+  fileList: PropTypes.array,
 };
diff --git a/app/models/stash_engine/data_file.rb b/app/models/stash_engine/data_file.rb
index 0500769606..16c63a4075 100644
--- a/app/models/stash_engine/data_file.rb
+++ b/app/models/stash_engine/data_file.rb
@@ -208,7 +208,7 @@ def preview_file
       # get the presigned URL
       s3_url = nil
       begin
-        s3_url = s3_permanent_presigned_url
+        s3_url = digest.present? ? s3_permanent_presigned_url : s3_staged_presigned_url
       rescue HTTP::Error, Stash::Download::S3CustomError => e
         logger.info("Couldn't get presigned for #{inspect}\nwith error #{e}")
       end
diff --git a/app/views/stash_engine/resources/prepare_readme.html.erb b/app/views/stash_engine/resources/prepare_readme.html.erb
index e3568fd228..2fb8c95ff4 100644
--- a/app/views/stash_engine/resources/prepare_readme.html.erb
+++ b/app/views/stash_engine/resources/prepare_readme.html.erb
@@ -14,7 +14,7 @@
 <% if @loading_error == true %>
   <div class="js-alert c-alert--error" role="alert">
     <div class="c-alert__text">
-      Your previous README file cannot be loaded due to its encoding. Enter the file contents below to make edits.
+      Your previous README file cannot be loaded due to its encoding.
     </div>
     <button aria-label="close" class="js-alert__close o-button__close c-alert__close flash_button"></button>
   </div>
@@ -25,7 +25,7 @@
   dcsDescription: @metadata_entry.technical_info,
   updatePath: descriptions_update_path,
   fileContent: @file_content,
-  fileList: @resource.data_files.map(&:upload_file_name),
+  fileList: @resource.data_files.map {|f| {name: f.upload_file_name, variables: f.upload_file_name.end_with?('csv', 'tsv') ? f.preview_file.lines.first.chomp.delete_prefix('"').delete_suffix('"').split(Regexp.union([/"?,"?/, /"?\t"?/])) : []}},
   title: @resource.title || 'Title of Dataset',
   doi: @resource.identifier_uri
 }) %>

From b82692904b65eecff917814db035775964792fae Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Fri, 26 Jul 2024 20:24:33 +0200
Subject: [PATCH 09/15] rspec fix

---
 spec/models/stash_engine/data_file_spec.rb | 1 +
 1 file changed, 1 insertion(+)

diff --git a/spec/models/stash_engine/data_file_spec.rb b/spec/models/stash_engine/data_file_spec.rb
index 4b3d67b890..05fec10b2d 100644
--- a/spec/models/stash_engine/data_file_spec.rb
+++ b/spec/models/stash_engine/data_file_spec.rb
@@ -279,6 +279,7 @@ module StashEngine
     describe '#preview_file' do
       before(:each) do
         @upload2 = create(:data_file,
+                          digest: 'fake_digest',
                           resource: @resource,
                           file_state: 'created',
                           upload_file_name: 'mytest.csv')

From dbc68fbe402833b259a6463b89882f8cb6123e1f Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Fri, 26 Jul 2024 20:35:46 +0200
Subject: [PATCH 10/15] move header out of README component

---
 .../react/containers/ReadMeWizard.jsx         | 168 +++++++++---------
 .../resources/prepare_readme.html.erb         |   8 +
 2 files changed, 89 insertions(+), 87 deletions(-)

diff --git a/app/javascript/react/containers/ReadMeWizard.jsx b/app/javascript/react/containers/ReadMeWizard.jsx
index 2986789805..62ce53e248 100644
--- a/app/javascript/react/containers/ReadMeWizard.jsx
+++ b/app/javascript/react/containers/ReadMeWizard.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 import React, {useState, useEffect, useCallback} from 'react';
 import axios from 'axios';
 import PropTypes from 'prop-types';
@@ -88,98 +87,93 @@ export default function ReadMe({
     }
   }, []);
 
-  return (
-    <>
-      <div className="c-autosave-header">
-        <h1 className="o-heading__level1" style={{marginBottom: '1rem'}} id="readme-label">Prepare README file</h1>
-        <div className="c-autosave__text saving_text" hidden>Saving&hellip;</div>
-        <div className="c-autosave__text saved_text" hidden>All progress saved</div>
-      </div>
-      {initialValue ? (
-        <>
-          <div className="readme-columns-final">
+  if (initialValue) {
+    return (
+      <>
+        <div className="readme-columns-final">
+          <div>
+            <p style={{marginTop: 0}}>
+              To help others interpret and reuse your dataset, a README file must be included, containing
+              abbreviations and codes, file descriptions, and information about any necessary software.{' '}
+              <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
+                <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
+                <span className="screen-reader-only"> (opens in new window)</span>
+              </a>
+            </p>
+            <p>
+              You can copy and paste formatted text into the editor, or enter markdown by clicking the &apos;Markdown&apos; tab.
+            </p>
+          </div>
+          <div>
+            <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>, or by deleting the content and generating a new README using our tool.</p>
+            <div className="readme-buttons">
+              <ReadMeImport title="Import new README" setValue={setReplaceValue} />
+              <button type="button" className="o-button__plain-text0" onClick={restartWizard}>
+                <i className="fa fa-trowel-bricks" aria-hidden="true" /> Generate new README
+              </button>
+            </div>
+          </div>
+        </div>
+        <MarkdownEditor
+          id="readme_editor"
+          initialValue={initialValue}
+          replaceValue={replaceValue}
+          onChange={checkDescription}
+        />
+      </>
+    );
+  } if (wizardContent && wizardStep <= secTitles.length) {
+    if (wizardStep === 0) {
+      return (
+        <div style={{height: '100%'}}>
+          <div style={{maxWidth: '90ch'}}>
+            <p style={{marginTop: 0}}>
+              Your Dryad submission must be accompanied by a README file, to help others use and understand your
+              dataset. It should contain the details needed to interpret and reuse your data, including abbreviations
+              and codes, file descriptions, and information about any necessary software.
+            </p>
+            <p style={{textAlign: 'center'}}>
+              <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
+                <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
+                <span className="screen-reader-only"> (opens in new window)</span>
+              </a>
+            </p>
+          </div>
+          <div className="readme-columns">
             <div>
-              <p style={{marginTop: 0}}>
-                To help others interpret and reuse your dataset, a README file must be included, containing
-                abbreviations and codes, file descriptions, and information about any necessary software.{' '}
-                <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
-                  <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
-                  <span className="screen-reader-only"> (opens in new window)</span>
-                </a>
-              </p>
-              <p>
-                You can copy and paste formatted text into the editor, or enter markdown by clicking the &apos;Markdown&apos; tab.
+              <h2 className="o-heading__level2">Need to create a README?</h2>
+              <p>Use our step-by-step tool to generate a README file. After completion your generated README can be added to and revised.</p>
+              <p style={{textAlign: 'center'}}>
+                <button type="button" className="o-button__plain-text1" onClick={() => setWizardStep(1)}>
+                  Build a README <i className="fa fa-trowel-bricks fa-flip-horizontal" aria-hidden="true" />
+                </button>
               </p>
             </div>
             <div>
-              <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>, or by deleting the content and generating a new README using our tool.</p>
-              <div className="readme-buttons">
-                <ReadMeImport title="Import new README" setValue={setReplaceValue} />
-                <button type="button" className="o-button__plain-text0" onClick={restartWizard}>
-                  <i className="fa fa-trowel-bricks" aria-hidden="true" /> Generate new README
-                </button>
-              </div>
+              <h2 className="o-heading__level2">Already have a README file?</h2>
+              <p>If you already have a README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a> for your dataset, you can import it here. </p>
+              <ReadMeImport setValue={setInitialValue} />
             </div>
           </div>
-          <MarkdownEditor
-            id="readme_editor"
-            initialValue={initialValue}
-            replaceValue={replaceValue}
-            onChange={checkDescription}
-          />
-        </>
-      ) : (
-        wizardContent && wizardStep <= secTitles.length ? (
-          wizardStep === 0 ? (
-            <div style={{height: '100%'}}>
-              <div style={{maxWidth: '90ch'}}>
-                <p style={{marginTop: 0}}>
-                  Your Dryad submission must be accompanied by a README file, to help others use and understand your
-                  dataset. It should contain the details needed to interpret and reuse your data, including abbreviations
-                  and codes, file descriptions, and information about any necessary software.
-                </p>
-                <p style={{textAlign: 'center'}}>
-                  <a href="/stash/best_practices#describe-your-dataset-in-a-readme-file" target="_blank">
-                    <i className="far fa-file-lines" aria-hidden="true" style={{marginRight: '.5ch'}} />Learn about README files
-                    <span className="screen-reader-only"> (opens in new window)</span>
-                  </a>
-                </p>
-              </div>
-              <div className="readme-columns">
-                <div>
-                  <h2 className="o-heading__level2">Need to create a README?</h2>
-                  <p>Use our step-by-step tool to generate a README file. After completion your generated README can be added to and revised.</p>
-                  <p style={{textAlign: 'center'}}>
-                    <button type="button" className="o-button__plain-text1" onClick={() => setWizardStep(1)}>
-                      Build a README <i className="fa fa-trowel-bricks fa-flip-horizontal" aria-hidden="true" />
-                    </button>
-                  </p>
-                </div>
-                <div>
-                  <h2 className="o-heading__level2">Already have a README file?</h2>
-                  <p>If you already have a README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a> for your dataset, you can import it here. </p>
-                  <ReadMeImport setValue={setInitialValue} />
-                </div>
-              </div>
-            </div>
-          ) : (
-            <ReadMeSteps
-              key={wizardStep}
-              content={wizardContent}
-              step={wizardStep}
-              setStep={setWizardStep}
-              fileList={fileList}
-              save={checkDescription}
-            />
-          )
-        ) : (
-          <p style={{display: 'flex', alignItems: 'center'}}>
-            <img src="../../../images/spinner.gif" alt="Loading spinner" style={{height: '1.5rem', marginRight: '.5ch'}} />
-              Loading README generator
-          </p>
-        )
-      )}
-    </>
+        </div>
+      );
+    }
+    return (
+      <ReadMeSteps
+        key={wizardStep}
+        content={wizardContent}
+        step={wizardStep}
+        setStep={setWizardStep}
+        fileList={fileList}
+        save={checkDescription}
+      />
+    );
+  }
+  return (
+    <p style={{display: 'flex', alignItems: 'center'}}>
+      <img src="../../../images/spinner.gif" alt="Loading spinner" style={{height: '1.5rem', marginRight: '.5ch'}} />
+          Loading README generator
+    </p>
   );
 }
 
diff --git a/app/views/stash_engine/resources/prepare_readme.html.erb b/app/views/stash_engine/resources/prepare_readme.html.erb
index 2fb8c95ff4..be710551cb 100644
--- a/app/views/stash_engine/resources/prepare_readme.html.erb
+++ b/app/views/stash_engine/resources/prepare_readme.html.erb
@@ -20,6 +20,12 @@
   </div>
 <% end %>
 
+<div className="c-autosave-header">
+  <h1 className="o-heading__level1" style="margin-bottom: 1rem" id="readme-label">Prepare README file</h1>
+  <div className="c-autosave__text saving_text" hidden>Saving&hellip;</div>
+  <div className="c-autosave__text saved_text" hidden>All progress saved</div>
+</div>
+
 <!-- map(&:attributes) one way for translating ActiveRecord field type to json at React side adequately -->
 <%= react_component('containers/ReadMeWizard', {
   dcsDescription: @metadata_entry.technical_info,
@@ -29,5 +35,7 @@
   title: @resource.title || 'Title of Dataset',
   doi: @resource.identifier_uri
 }) %>
+
 </div>
+
 <%= render partial: 'stash_engine/shared/dataset_steps_bottom_nav', locals: {page: 2} %>

From 7e771f32d9f7249fc0128c9f64b095e9d1b1c968 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Fri, 26 Jul 2024 20:53:54 +0200
Subject: [PATCH 11/15] add delete certainty dialog

---
 .../react/containers/ReadMeWizard.jsx         | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/javascript/react/containers/ReadMeWizard.jsx b/app/javascript/react/containers/ReadMeWizard.jsx
index 62ce53e248..34207198cd 100644
--- a/app/javascript/react/containers/ReadMeWizard.jsx
+++ b/app/javascript/react/containers/ReadMeWizard.jsx
@@ -108,7 +108,7 @@ export default function ReadMe({
             <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>, or by deleting the content and generating a new README using our tool.</p>
             <div className="readme-buttons">
               <ReadMeImport title="Import new README" setValue={setReplaceValue} />
-              <button type="button" className="o-button__plain-text0" onClick={restartWizard}>
+              <button type="button" className="o-button__plain-text0" onClick={() => document.getElementById('restart-wizard-dialog').showModal()}>
                 <i className="fa fa-trowel-bricks" aria-hidden="true" /> Generate new README
               </button>
             </div>
@@ -120,6 +120,29 @@ export default function ReadMe({
           replaceValue={replaceValue}
           onChange={checkDescription}
         />
+        <dialog id="restart-wizard-dialog" className="modalDialog">
+          <div className="modalClose">
+            <button aria-label="Close" type="button" onClick={() => document.getElementById('restart-wizard-dialog').close()} />
+          </div>
+          <div>
+            <h1>Are you sure?</h1>
+            <p>Are you sure you want to delete this README and use our tool to generate a new one? This action may not be reversible.</p>
+            <div className="c-modal__buttons-right">
+              <button
+                type="button"
+                className="o-button__plain-text2"
+                onClick={() => {
+                  document.getElementById('restart-wizard-dialog').close();
+                  restartWizard();
+                }}
+              >Delete &amp; restart
+              </button>
+              <button type="button" className="o-button__plain-text7" onClick={() => document.getElementById('restart-wizard-dialog').close()}>
+                Cancel
+              </button>
+            </div>
+          </div>
+        </dialog>
       </>
     );
   } if (wizardContent && wizardStep <= secTitles.length) {

From a1eeea9b9ded564fe80287238f17d3a41c241ba4 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 29 Jul 2024 13:59:18 +0200
Subject: [PATCH 12/15] dialog accessibility improvements

---
 .../components/FileUpload/FileList/File.jsx   |  1 +
 .../react/components/FileUpload/ModalUrl.jsx  |  1 +
 .../ModalValidationReport.jsx                 |  1 +
 .../FileUpload/UploadSelect/UploadType.jsx    |  1 +
 .../react/components/MetadataEntry/Cedar.jsx  | 33 +++++++++++++++----
 .../components/ReadMeWizard/ReadMeImport.jsx  | 14 ++++++--
 .../react/containers/ReadMeWizard.jsx         | 22 ++++++++++---
 .../shared/_dialog_confirm.html.erb           |  3 +-
 .../shared/_dialog_modal.html.erb             |  2 +-
 .../_dependency_list.html.erb                 |  2 +-
 .../cedar_tester/cedar_tester.html            |  2 +-
 11 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/app/javascript/react/components/FileUpload/FileList/File.jsx b/app/javascript/react/components/FileUpload/FileList/File.jsx
index 52652b5ff8..d702610bfe 100644
--- a/app/javascript/react/components/FileUpload/FileList/File.jsx
+++ b/app/javascript/react/components/FileUpload/FileList/File.jsx
@@ -56,6 +56,7 @@ export default function File({file, clickRemove, clickValidationReport}) {
             <button
               className="o-button__plain-text5"
               onClick={clickValidationReport}
+              aria-haspopup="dialog"
               type="button"
               style={{padding: '10px'}}
             >
diff --git a/app/javascript/react/components/FileUpload/ModalUrl.jsx b/app/javascript/react/components/FileUpload/ModalUrl.jsx
index 73ff1b202e..f5c87e4f2c 100644
--- a/app/javascript/react/components/FileUpload/ModalUrl.jsx
+++ b/app/javascript/react/components/FileUpload/ModalUrl.jsx
@@ -5,6 +5,7 @@ const modal_url = React.forwardRef(({changedUrls, submitted, clickedClose}, ref)
   <dialog
     id="js-uploadmodal"
     className="modalDialog"
+    aria-modal="true"
     ref={ref}
   >
     <form method="dialog" onSubmit={submitted}>
diff --git a/app/javascript/react/components/FileUpload/ModalValidationReport/ModalValidationReport.jsx b/app/javascript/react/components/FileUpload/ModalValidationReport/ModalValidationReport.jsx
index 325b5a5c69..2139eed9b2 100644
--- a/app/javascript/react/components/FileUpload/ModalValidationReport/ModalValidationReport.jsx
+++ b/app/javascript/react/components/FileUpload/ModalValidationReport/ModalValidationReport.jsx
@@ -88,6 +88,7 @@ const ModalValidationReport = React.forwardRef(({file, clickedClose}, ref) => {
   return (
     <dialog
       className="modalDialog extra-wide"
+      aria-modal="true"
       ref={ref}
     >
       <div className="c-uploadmodal__header">
diff --git a/app/javascript/react/components/FileUpload/UploadSelect/UploadType.jsx b/app/javascript/react/components/FileUpload/UploadSelect/UploadType.jsx
index c33b08548f..8cf42d7a40 100644
--- a/app/javascript/react/components/FileUpload/UploadSelect/UploadType.jsx
+++ b/app/javascript/react/components/FileUpload/UploadSelect/UploadType.jsx
@@ -39,6 +39,7 @@ function UploadType(
         id={`${type}_manifest`}
         className="js-uploadmodal__button-show-modal"
         onClick={clickedModal}
+        aria-haspopup="dialog"
       >
         {buttonURLs}
       </button>
diff --git a/app/javascript/react/components/MetadataEntry/Cedar.jsx b/app/javascript/react/components/MetadataEntry/Cedar.jsx
index 5cdfec6192..1f2be32b8c 100644
--- a/app/javascript/react/components/MetadataEntry/Cedar.jsx
+++ b/app/javascript/react/components/MetadataEntry/Cedar.jsx
@@ -186,10 +186,23 @@ export default function Cedar({
                   <strong>{template.title}</strong><br />
                   {updated && `Last modified ${moment(updated).local().format('H:mmA, MM/DD/YYYY')}`}
                 </p>
-                <button disabled={!template} type="submit" className="o-button__plain-text2" style={{margin: '0 1rem'}}>
+                <button
+                  aria-haspopup="dialog"
+                  aria-controls="cedarDialog"
+                  disabled={!template}
+                  type="submit"
+                  className="o-button__plain-text2"
+                  style={{margin: '0 1rem'}}
+                >
                   Edit form
                 </button>
-                <button type="button" className="o-button__remove" onClick={() => del.current.showModal()}>
+                <button
+                  type="button"
+                  className="o-button__remove"
+                  aria-haspopup="dialog"
+                  aria-controls="deleteCedarDialog"
+                  onClick={() => del.current.showModal()}
+                >
                   Delete form
                 </button>
               </div>
@@ -224,7 +237,7 @@ export default function Cedar({
           </Form>
         )}
       </Formik>
-      <dialog className="modalDialog" id="cedarDialog" ref={setRef}>
+      <dialog className="modalDialog" id="cedarDialog" aria-modal="true" ref={setRef}>
         <div className="modalClose">
           <button aria-label="Close" type="button" onClick={() => dialog.current.close()} />
         </div>
@@ -232,13 +245,21 @@ export default function Cedar({
           <cedar-embeddable-editor id="cedarEditor" ref={setRef} />
         </div>
       </dialog>
-      <dialog className="modalDialog" id="deleteCedarDialog" ref={setRef}>
+      <dialog
+        className="modalDialog"
+        id="deleteCedarDialog"
+        role="alertdialog"
+        aria-labelledby="cedar-alert-title"
+        aria-describedby="cedar-alert-desc"
+        aria-modal="true"
+        ref={setRef}
+      >
         <div className="modalClose">
           <button aria-label="Close" type="button" onClick={() => del.current.close()} />
         </div>
         <div className="c-modal-content__normal">
-          <h1 className="mat-card-title">Confirm Deletion</h1>
-          <p>Are you sure you want to delete this form? All answers will be lost.</p>
+          <h1 id="cedar-alert-title" className="mat-card-title">Confirm Deletion</h1>
+          <p id="cedar-alert-desc">Are you sure you want to delete this form? All answers will be lost.</p>
           <button
             type="button"
             className="o-button__plain-text2"
diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
index 197d5bab65..4f78f9a7e7 100644
--- a/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeImport.jsx
@@ -14,6 +14,7 @@ export default function ReadMeImport({title, setValue}) {
       if (isText(buffer)) {
         readerX.readAsText(file);
       } else {
+        document.getElementById('readme_upload').setAttribute('aria-invalid', true);
         document.getElementById('bad-readme-modal').showModal();
       }
     });
@@ -35,6 +36,8 @@ export default function ReadMeImport({title, setValue}) {
           className="c-choose__input-file"
           type="file"
           accept="text/x-markdown,text/markdown,.md"
+          aria-errormessage="bad-readme-modal"
+          aria-invalid="false"
           onChange={importFile}
         />
         <label
@@ -46,9 +49,16 @@ export default function ReadMeImport({title, setValue}) {
           <i className="fa fa-upload" aria-hidden="true" />{' '}{title || 'Import README'}
         </label>
       </div>
-      <dialog id="bad-readme-modal" className="modalDialog">
+      <dialog id="bad-readme-modal" className="modalDialog" aria-modal="true">
         <div className="modalClose">
-          <button aria-label="Close" type="button" onClick={() => document.getElementById('bad-readme-modal').close()} />
+          <button
+            aria-label="Close"
+            type="button"
+            onClick={() => {
+              document.getElementById('bad-readme-modal').close();
+              document.getElementById('readme_upload').setAttribute('aria-invalid', false);
+            }}
+          />
         </div>
         <div>
           <h1>File not accepted</h1>
diff --git a/app/javascript/react/containers/ReadMeWizard.jsx b/app/javascript/react/containers/ReadMeWizard.jsx
index 34207198cd..681488f1d6 100644
--- a/app/javascript/react/containers/ReadMeWizard.jsx
+++ b/app/javascript/react/containers/ReadMeWizard.jsx
@@ -108,7 +108,12 @@ export default function ReadMe({
             <p>You can replace the content below with a local README file in <a href="https://www.markdownguide.org/" target="_blank" rel="noreferrer">markdown format<span className="screen-reader-only"> (opens in new window)</span></a>, or by deleting the content and generating a new README using our tool.</p>
             <div className="readme-buttons">
               <ReadMeImport title="Import new README" setValue={setReplaceValue} />
-              <button type="button" className="o-button__plain-text0" onClick={() => document.getElementById('restart-wizard-dialog').showModal()}>
+              <button
+                type="button"
+                className="o-button__plain-text0"
+                aria-controls="restart-wizard-dialog"
+                onClick={() => document.getElementById('restart-wizard-dialog').showModal()}
+              >
                 <i className="fa fa-trowel-bricks" aria-hidden="true" /> Generate new README
               </button>
             </div>
@@ -120,13 +125,22 @@ export default function ReadMe({
           replaceValue={replaceValue}
           onChange={checkDescription}
         />
-        <dialog id="restart-wizard-dialog" className="modalDialog">
+        <dialog
+          id="restart-wizard-dialog"
+          className="modalDialog"
+          role="alertdialog"
+          aria-labelledby="readme-alert-title"
+          aria-describedby="readme-alert-desc"
+          aria-modal="true"
+        >
           <div className="modalClose">
             <button aria-label="Close" type="button" onClick={() => document.getElementById('restart-wizard-dialog').close()} />
           </div>
           <div>
-            <h1>Are you sure?</h1>
-            <p>Are you sure you want to delete this README and use our tool to generate a new one? This action may not be reversible.</p>
+            <h1 id="readme-alert-title">Are you sure?</h1>
+            <p id="readme-alert-desc">
+              Are you sure you want to delete this README and use our tool to generate a new one? This action may not be reversible.
+            </p>
             <div className="c-modal__buttons-right">
               <button
                 type="button"
diff --git a/app/views/stash_engine/shared/_dialog_confirm.html.erb b/app/views/stash_engine/shared/_dialog_confirm.html.erb
index a1ae0b3a61..5652e65bf3 100644
--- a/app/views/stash_engine/shared/_dialog_confirm.html.erb
+++ b/app/views/stash_engine/shared/_dialog_confirm.html.erb
@@ -1,4 +1,5 @@
-<dialog id="railsConfirmDialog" class="modalDialog">
+<dialog id="railsConfirmDialog" class="modalDialog" role="alertdialog" aria-labelledby="railsConfMsg"
+  aria-describedby="railsConfMsg" aria-modal="true">
   <div>
     <h1 id="railsConfMsg" class="o-heading__level2" style="width: 25rem; float: left;"></h1>
     <button id="railsConfirmDialogClose" class="button-close-modal" style="float: right;" aria-label="close" type="button"></button>
diff --git a/app/views/stash_engine/shared/_dialog_modal.html.erb b/app/views/stash_engine/shared/_dialog_modal.html.erb
index d3e08782be..4f49c7099c 100644
--- a/app/views/stash_engine/shared/_dialog_modal.html.erb
+++ b/app/views/stash_engine/shared/_dialog_modal.html.erb
@@ -1,4 +1,4 @@
-<dialog id="genericModalDialog" class="modalDialog">
+<dialog id="genericModalDialog" class="modalDialog" aria-modal="true">
   <div>
     <div class="modalClose">
       <button id="genericModalClose" aria-label="close" type="button"></button>
diff --git a/app/views/stash_engine/status_dashboard/_dependency_list.html.erb b/app/views/stash_engine/status_dashboard/_dependency_list.html.erb
index 833e2eb4d8..eaa6af1671 100644
--- a/app/views/stash_engine/status_dashboard/_dependency_list.html.erb
+++ b/app/views/stash_engine/status_dashboard/_dependency_list.html.erb
@@ -13,7 +13,7 @@
     <li title="<%= dependency.description %>" class="o-dependency-group__list__item">
       <button <%= 'disabled' if dependency.status == 1 %> onclick="document.getElementById('<%= dependency.abbreviation %>-dialog').showModal()" title="<%= dependency.status != 1 ? 'Offline - Click for troubleshooting information' : 'Online' %>"><span class="dependency-name"><%= dependency.name %></span> <i class="fa <%= status_class %>"></i></button>
       <% if dependency.documentation.present? %>
-        <dialog class="modalDialog extra-wide" id="<%= dependency.abbreviation %>-dialog">
+        <dialog class="modalDialog extra-wide" id="<%= dependency.abbreviation %>-dialog" aria-modal="true">
           <div class="c-uploadmodal__header">
             <h1 class="o-heading__level1"><%= dependency.name %> troubleshooting information:</h1>
             <button
diff --git a/documentation/external_services/cedar_tester/cedar_tester.html b/documentation/external_services/cedar_tester/cedar_tester.html
index c9cfd19eec..89c377d53e 100644
--- a/documentation/external_services/cedar_tester/cedar_tester.html
+++ b/documentation/external_services/cedar_tester/cedar_tester.html
@@ -14,7 +14,7 @@ <h1>CEDAR Standalone Modal Tester</h1>
 <button id="cedarOpen" type="submit" onClick="openModal()">Open CEDAR editor</button>
 
 <!-- modal dialog -->
-<dialog id="genericModalDialog" class="modalDialog">
+<dialog id="genericModalDialog" class="modalDialog" aria-modal="true">
   <div>
 
     <button id="genericModalClose" onClick="closeModal()" class="" style="float: right;" aria-label="close" type="button">

From 28e49bcf858733471e040bf6a36ce69bae623d70 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 29 Jul 2024 20:28:39 +0200
Subject: [PATCH 13/15] adjust auto variable lists and prompt text

---
 app/assets/stylesheets/scss/_upload.scss      |  1 +
 .../components/ReadMeWizard/ReadMeSteps.jsx   | 26 ++++++++++++++-----
 .../resources/prepare_readme.html.erb         |  8 +++++-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/scss/_upload.scss b/app/assets/stylesheets/scss/_upload.scss
index 09c24b1412..290069fa37 100644
--- a/app/assets/stylesheets/scss/_upload.scss
+++ b/app/assets/stylesheets/scss/_upload.scss
@@ -48,6 +48,7 @@
 }
 .readme-columns {
   flex-wrap: wrap;
+  margin: 2rem auto;
   & > div {
     flex-basis: calc(50% - 2ch);
     flex-shrink: 1;
diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
index afd775de04..b175b1d854 100644
--- a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
@@ -2,7 +2,13 @@
 import React from 'react';
 import MarkdownEditor from '../MarkdownEditor';
 
-const formatList = (fileList) => fileList.map((f) => `#### File: ${f.name}\n**Description:**&nbsp;\n\n##### Variables\n${f.variables.map((v) => `* ${v}: `).join('\n')}`).join('\n\n');
+const formatList = (fileList) => fileList.map((f) => {
+  let l = `#### File: ${f.name}\n**Description:**&nbsp;\n\n`;
+  if (Object.hasOwn(f, 'variables')) {
+    l += `##### Variables\n${f.variables.length === 0 ? '* \n' : f.variables.map((v) => `* ${v}: `).join('\n')}`;
+  }
+  return l;
+}).join('\n\n');
 
 export const secTitles = ['Data description', 'Files and variables', 'Code/software', 'Access information'];
 
@@ -20,19 +26,27 @@ export default function ReadMeSteps({
 
   const sections = {
     1: {
-      desc: 'Provide a short description of the experimental efforts for which the data was collected.',
+      desc: <p>Provide a short description of the experimental efforts for which the data was collected.</p>,
       content: content.step1 || '',
     },
     2: {
-      desc: 'Provide a comprehensive list of data files, and define all variables and abbreviations used, including units of measurement. List how you indicate missing values (blank cells, "NA", etc.) if applicable. Please add descriptions below, and add any folders and files inside compressed archives (.zip, .gz) to the list. ',
+      desc:
+      <>
+        <p>Provide a comprehensive list of data files and variables. Starting information has been imported from your uploaded files.</p>
+        <ul>
+          <li>Add any folders and data files inside compressed archives (.zip, .gz), and any missing variables</li>
+          <li>Describe files and define all variables and abbreviations used, including units of measurement</li>
+          <li>List how you indicate missing values (blank cells, &quot;NA&quot;, etc.) if applicable</li>
+        </ul>
+      </>,
       content: content.step2 || formatList(fileList),
     },
     3: {
-      desc: 'What free or open software is needed to view your data? Describe the code software, including versions and loaded packages that you used to run files, and the workflow that you used if the relationship of files to software is not clear. If code or scripts are included with your submission, describe them here.',
+      desc: <p>What free or open software is needed to view your data? Describe the code software, including versions and loaded packages that you used to run files, and the workflow that you used if the relationship of files to software is not clear. If code or scripts are included with your submission, describe them here.</p>,
       content: content.step3 || '',
     },
     4: {
-      desc: 'If applicable, provide links to other publicly accessible locations of the data. If your data was derived from another source(s), list the source(s) and include license information.',
+      desc: <p>If applicable, provide links to other publicly accessible locations of the data. If your data was derived from another source(s), list the source(s) and include license information.</p>,
       content: content.step5 || 'Other publicly accessible locations of the data:\n\n* \n\nData was derived from the following sources:\n\n* ',
     },
   };
@@ -48,7 +62,7 @@ export default function ReadMeSteps({
         ))}
       </div>
       <h2><label htmlFor="readme_step_editor">{secTitles[step - 1]}</label></h2>
-      <p>{sections[step].desc}</p>
+      <div>{sections[step].desc}</div>
       <MarkdownEditor
         id="readme_step_editor"
         {...(step === 1 ? {initialValue: '', replaceValue: sections[step].content} : {initialValue: sections[step].content})}
diff --git a/app/views/stash_engine/resources/prepare_readme.html.erb b/app/views/stash_engine/resources/prepare_readme.html.erb
index be710551cb..0e91bb0dff 100644
--- a/app/views/stash_engine/resources/prepare_readme.html.erb
+++ b/app/views/stash_engine/resources/prepare_readme.html.erb
@@ -31,7 +31,13 @@
   dcsDescription: @metadata_entry.technical_info,
   updatePath: descriptions_update_path,
   fileContent: @file_content,
-  fileList: @resource.data_files.map {|f| {name: f.upload_file_name, variables: f.upload_file_name.end_with?('csv', 'tsv') ? f.preview_file.lines.first.chomp.delete_prefix('"').delete_suffix('"').split(Regexp.union([/"?,"?/, /"?\t"?/])) : []}},
+  fileList: @resource.data_files.map do |f| 
+    h = { name: f.upload_file_name }
+    if f.upload_file_name.end_with?('.csv', '.tsv', '.xlsx', '.xls', '.rdata', '.rda', '.mat', '.txt')
+      h[:variables] = f.upload_file_name.end_with?('.csv', '.tsv') ? f.preview_file.lines.first.chomp.delete_prefix('"').delete_suffix('"').split(Regexp.union([/"?,"?/, /"?\t"?/])) : []
+    end
+    h
+  end,
   title: @resource.title || 'Title of Dataset',
   doi: @resource.identifier_uri
 }) %>

From 94e968c4c961c55f3c6d73a83509727e3c338333 Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Mon, 29 Jul 2024 21:12:30 +0200
Subject: [PATCH 14/15] new validation for edited readme

---
 .../resource/dataset_validations.rb           | 36 ++++++++++++-------
 .../dataset_validations_spec.rb               | 22 ++++++------
 2 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/app/models/stash_datacite/resource/dataset_validations.rb b/app/models/stash_datacite/resource/dataset_validations.rb
index 1bd7d12f6c..f1c3c7b321 100644
--- a/app/models/stash_datacite/resource/dataset_validations.rb
+++ b/app/models/stash_datacite/resource/dataset_validations.rb
@@ -80,6 +80,7 @@ def errors
           err << url_error_validating
           err << over_file_count
           err << over_files_size
+          err << readme_required
           err << data_required
 
         end
@@ -296,9 +297,7 @@ def over_files_size
         errors
       end
 
-      def data_required
-        errors = []
-
+      def readme_required
         readme_md_require_date = '2022-09-28'
         readme_require_date = '2021-12-20'
 
@@ -317,19 +316,30 @@ def data_required
         no_readme = @resource.identifier.created_at > readme_require_date && readme_files.count.zero?
 
         if no_techinfo && (no_md || no_readme)
-          errors << ErrorItem.new(message: '{Include a README} to describe your dataset.',
-                                  page: readme_page(@resource),
-                                  ids: ['readme_editor'])
+          return ErrorItem.new(message: '{Include a README} to describe your dataset.',
+                               page: readme_page(@resource),
+                               ids: ['readme_editor'])
         end
-
-        unless contains_data?
-          errors << ErrorItem.new(message: 'Include at least one data file in your submission. ' \
-                                           '{Add some data files to proceed}.',
-                                  page: files_page(@resource),
-                                  ids: ['filelist_id'])
+        # rubocop:disable Layout/LineLength
+        unless no_techinfo
+          unedited = %r{\A#\s.+\n\n\[https://doi\.org/.+\]\(https://doi\.org/.+\)\n\n##\sDescription of the data and file structure\n\n\Z}.match? techinfo.first.description
+          if unedited
+            return ErrorItem.new(message: 'Include required content {in your README} to describe your dataset.',
+                                 page: readme_page(@resource),
+                                 ids: ['readme_editor'])
+          end
         end
+        # rubocop:enable Layout/LineLength
+        []
+      end
 
-        errors
+      def data_required
+        return [] if contains_data?
+
+        ErrorItem.new(message: 'Include at least one data file in your submission. ' \
+                               '{Add some data files to proceed}.',
+                      page: files_page(@resource),
+                      ids: ['filelist_id'])
       end
 
       private
diff --git a/spec/models/stash_datacite/dataset_validations_spec.rb b/spec/models/stash_datacite/dataset_validations_spec.rb
index f6bde0855e..b9c5f774f0 100644
--- a/spec/models/stash_datacite/dataset_validations_spec.rb
+++ b/spec/models/stash_datacite/dataset_validations_spec.rb
@@ -328,28 +328,30 @@ module Resource
 
       end
 
-      describe :required_data_files do
-        before(:each) do
-          @resource.generic_files.each { |f| f.update(url: 'http://example.com') }
-        end
-
-        it 'requires a README file, in addition to at least one data file' do
+      describe :required_readme do
+        it 'requires a README file' do
           @readme.update(upload_file_name: 'some-bogus-filename.txt')
           validations = DatasetValidations.new(resource: @resource)
-          error = validations.data_required
-          expect(error[0].message).to include('README')
+          error = validations.readme_required
+          expect(error.message).to include('README')
 
           @readme.update(upload_file_name: 'README.md')
-          error = validations.data_required
+          error = validations.readme_required
           expect(error).to be_empty
         end
+      end
+
+      describe :required_data_files do
+        before(:each) do
+          @resource.generic_files.each { |f| f.update(url: 'http://example.com') }
+        end
 
         it 'requires at least one data file' do
           @resource.data_files.destroy_all
           create(:data_file, resource: @resource, upload_file_name: 'README.md')
           validations = DatasetValidations.new(resource: @resource)
           error = validations.data_required
-          expect(error[0].message).to include('one data file')
+          expect(error.message).to include('one data file')
         end
       end
 

From 6a6865eb5c9311182ecca1fb4300a8f87f5d743d Mon Sep 17 00:00:00 2001
From: Audrey Hamelers <audrey@datadryad.org>
Date: Tue, 30 Jul 2024 17:18:28 +0200
Subject: [PATCH 15/15] typo fix

---
 app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
index b175b1d854..df24c5fd71 100644
--- a/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
+++ b/app/javascript/react/components/ReadMeWizard/ReadMeSteps.jsx
@@ -42,7 +42,7 @@ export default function ReadMeSteps({
       content: content.step2 || formatList(fileList),
     },
     3: {
-      desc: <p>What free or open software is needed to view your data? Describe the code software, including versions and loaded packages that you used to run files, and the workflow that you used if the relationship of files to software is not clear. If code or scripts are included with your submission, describe them here.</p>,
+      desc: <p>What free or open software is needed to view your data? Describe the software, including versions and loaded packages that you used to run files, and the workflow that you used if the relationship of files to software is not clear. If code or scripts are included with your submission, describe them here.</p>,
       content: content.step3 || '',
     },
     4: {