Chore/229/js update javascript dependencies

CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## DMPTool Releases
 
+### v5.56
+- Updated dependencies in `package.json` and `yarn.lock` to address security vulnerabilities.
+- Fixed a bug with adding Research Outputs under `Upload Plan` section, because validation was always requiring a `url`
+- Updated Dockerfiles to skip the download of `chrome-headless-shell` since we already install `chromium` via `apt-get`
+- Updated webpack.config to add an alias to resolve jquery use the same instance to prevent multiple versions loading.
+- Made small updates to `javscript/src/utils/accordion.js` and `views/phases/_guidances_notes.html.erb` due to package updates.
+- Fixed existing bug in `controllers/contributors_controller.rb` because after editing contributor info, the panel didn't change back to the table view.
+
 ### v5.55
 - Fixed bug where users could not expand their template sections because the `remove_data` field in the `conditions` table was inadvertently set to `[null]`
 

Dockerfile

@@ -46,6 +46,8 @@ RUN apt-get -qqy update \
 
 # Always run Node in Production for the ECS hosted environments
 ENV NODE_ENV=production
+ENV PUPPETEER_SKIP_DOWNLOAD=true
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
 
 RUN echo Using RAILS_ENV: ${RAILS_ENV}, NODE_ENV: ${NODE_ENV}
 

Dockerfile.dev

@@ -46,6 +46,8 @@ WORKDIR $INSTALL_PATH
 
 # Cleanup from build
 ENV RAILS_ENV development
+ENV PUPPETEER_SKIP_DOWNLOAD=true
+ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
 RUN rm -rf node_modules vendor .cache
 
 # Make sure Git isn't going to try to use SSH (for klaro dependency)

app/controllers/contributors_controller.rb

@@ -67,8 +67,7 @@ def update
     args = process_orcid_for_update(hash: args)
 
     if @contributor.update(args)
-      redirect_to edit_plan_contributor_path(@plan, @contributor),
-                  notice: success_message(@contributor, _('saved'))
+      redirect_to plan_contributors_path(@plan), notice: success_message(@contributor, _('saved'))
     else
       flash.now[:alert] = failure_message(@contributor, _('save'))
       render :edit

app/javascript/src/utils/accordion.js

@@ -46,7 +46,8 @@ $(() => {
         // Expands or collapses the panel according to the
         // direction passed (e.g. show --> expands, hide --> collapses)
         if (direction === 'show') {
-          if (!panelCollapse.find('.panel-body').attr('data-loaded') || !panelCollapse.hasClass('in')) {
+          if (!panelCollapse.find('.panel-body').attr('data-loaded')
+            || (!panelCollapse.hasClass('in') && !panelCollapse.hasClass('show'))) {
             panelCollapse.prev()[0].click();
           }
         } else {

app/views/phases/_guidances_notes.html.erb

@@ -1,19 +1,19 @@
 <%# locals: { plan, template, question, answer, guidance_presenter } %>
 <% guidances_active = guidance_presenter.any?(question: question) %>
 <% active_nav = nil %>
-<div id="plan-guidance-tab">
+<div id="plan-guidance-tab-<%= question.id %>">
   <!-- Nav tabs -->
   <ul class="nav nav-pills nav-justified mb-10" role="tablist">
       <% if guidances_active %>
           <li role="presentation" class="active">
-              <a href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-toggle="pill">
+              <a class="nav-link active" href="#guidances-<%= question.id %>" aria-controls="guidances-<%= question.id %>" role="tab" data-toggle="pill">
                   <%= _('Guidance') %>
               </a>
           </li>
       <% end %>
       <% if plan.present? %>
           <li role="presentation" class="<%= 'active' if !guidances_active %>">
-              <a href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-toggle="pill">
+              <a class="nav-link <%= 'active' if !guidances_active %>" href="#notes-<%= question.id %>" aria-controls="notes-<%= question.id %>" role="tab" data-toggle="pill">
                   <span id="notes-title-<%= question.id %>">
                       <%= render partial: '/notes/title', locals: { answer: answer } %>
                   </span>
@@ -24,26 +24,27 @@
   <div class="tab-content">
     <% if guidances_active %>
       <% tablist = guidance_presenter.tablist(question) %>
-      <div id="guidances-<%= question.id %>" role="tabpanel" class="tab-pane active">
+      <div id="guidances-<%= question.id %>" role="tabpanel" class="tab-pane <%= guidances_active ? 'show active' : '' %>">
         <ul class="nav nav-tabs" role="tablist">
           <% tablist.each_with_index do |tab, i| %>
             <% active_nav ||= tab[:name] %>
             <li role="presentation" <%= active_nav == tab[:name] ? "class=active" : "" %>>
               <a
+                href="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 data-target="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 aria-controls="<%= "#guidance_per_question_#{question.id}_#{i}" %>"
                 role="tab"
                 data-toggle="tab"
                 tabindex="0"
-                class="view-plan-guidance">
+                class="view-plan-guidance nav-link <%= active_nav == tab[:name] ? 'active' : '' %>">
                 <%= tab[:name] %>
               </a>
             </li>
           <% end %>
         </ul>
         <div class="tab-content">
           <% tablist.each_with_index do |tab, i| %>
-            <div id="<%= "guidance_per_question_#{question.id}_#{i}" %>" role="tabpanel" class="tab-pane <%= active_nav == tab[:name] ? 'active' : '' %>">
+            <div id="<%= "guidance_per_question_#{question.id}_#{i}" %>" role="tabpanel" class="tab-pane <%= active_nav == tab[:name] ? 'show active' : '' %>">
                 <div class="panel panel-default">
                   <div class="panel-body">
                     <% if tab[:annotations].present? %>
@@ -73,7 +74,7 @@
     <% end %>
 
     <% if plan.present? %>
-      <div id="notes-<%= question.id %>" role="tabpanel" class="tab-pane <%= 'active' if !guidances_active %> notes">
+      <div id="notes-<%= question.id %>" role="tabpanel" class="tab-pane <%= 'show active' if !guidances_active %> notes">
         <%= render partial: '/notes/layout', locals: { plan: plan, question: question, answer: answer } %>
       </div>
     <% end %>

config/webpack/webpack.config.js

@@ -54,6 +54,12 @@ module.exports = {
     sourceMapFilename: '[file].map',
     path: path.resolve(__dirname, '..', '..', 'app/assets/builds'),
   },
+  resolve: {
+    // Ensure jquery-ui and app code share the same jQuery instance.
+    alias: {
+      jquery: path.resolve(__dirname, '..', '..', 'node_modules', 'jquery'),
+    },
+  },
   plugins: [
     new webpack.optimize.LimitChunkCountPlugin({
       maxChunks: 1,

package.json

@@ -30,56 +30,53 @@
   },
   "homepage": "https://github.com/DMPRoadmap/roadmap#readme",
   "dependencies": {
-    "@babel/core": "7.28.4",
+    "@babel/core": "7.29.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-class-properties": "7.27.1",
-    "@babel/plugin-transform-object-rest-spread": "7.28.4",
-    "@babel/plugin-transform-private-methods": "7.27.1",
-    "@babel/plugin-transform-private-property-in-object": "7.27.1",
-    "@babel/plugin-transform-runtime": "7.28.3",
-    "@babel/preset-env": "7.28.3",
-    "@babel/preset-react": "7.27.1",
-    "@fortawesome/fontawesome-free": "6.7.2",
+    "@babel/plugin-transform-class-properties": "7.28.6",
+    "@babel/plugin-transform-object-rest-spread": "7.28.6",
+    "@babel/plugin-transform-private-methods": "7.28.6",
+    "@babel/plugin-transform-private-property-in-object": "7.28.6",
+    "@babel/plugin-transform-runtime": "7.29.0",
+    "@babel/preset-env": "7.29.5",
+    "@babel/preset-react": "7.28.5",
+    "@fortawesome/fontawesome-free": "7.2.0",
     "@hotwired/stimulus": "3.2.2",
-    "@hotwired/turbo-rails": "8.0.16",
-    "@rails/actioncable": "7.2",
-    "@rails/activestorage": "7.2",
+    "@hotwired/turbo-rails": "8.0.23",
+    "@popperjs/core": "2.11.8",
+    "@rails/actioncable": "8.1.300",
+    "@rails/activestorage": "8.1.300",
     "@rails/ujs": "7.1",
-    "babel-loader": "9.2.1",
+    "babel-loader": "10.1.1",
     "babel-plugin-macros": "3.1.0",
     "bootstrap": "3.4.1",
     "bootstrap-3-typeahead": "4.0.2",
     "bootstrap-sass": "3.4.3",
     "bootstrap-select": "1.13.18",
-    "chart.js": "4.5.0",
-    "core-js": "3.45.1",
-    "css-loader": "7.1.2",
+    "chart.js": "4.5.1",
+    "core-js": "3.49.0",
+    "css-loader": "7.1.4",
     "jquery": "3.7.1",
     "jquery-ui": "1.14.1",
     "jquery-ui-sass": "0.0.1",
-    "js-cookie": "3.0.5",
+    "js-cookie": "3.0.7",
     "klaro-ui": "https://github.com/cdlib/klaro-ui#v1.2.1",
     "moment": "2.30.1",
-    "number-to-text": "0.3.9",
-    "puppeteer": "22.15.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-router-dom": "6.30.1",
+    "number-to-text": "0.4.1",
+    "puppeteer": "25.0.4",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-router-dom": "7.15.1",
     "regenerator-runtime": "0.14.1",
-    "sass": "1.92.1",
-    "sass-loader": "14.2.1",
+    "sass": "1.99.0",
+    "sass-loader": "17.0.0",
     "style-loader": "4.0.0",
     "timeago.js": "4.0.2",
     "tinymce": "7.9.1",
-    "web-vitals": "4.2.4",
-    "webpack": "5.101.3",
-    "webpack-cli": "5.1.4"
+    "web-vitals": "5.2.0",
+    "webpack": "5.107.1",
+    "webpack-cli": "7.0.2"
   },
   "devDependencies": {
-    "@parcel/watcher": "^2.4.1"
-  },
-  "optionalDependencies": {
-    "@parcel/watcher-darwin-arm64": "^2.4.2-alpha.0",
-    "@parcel/watcher-linux-arm64-glibc": "^2.4.2-alpha.0"
+    "@parcel/watcher": "^2.5.6"
   }
-}
+}

react-client/src/models.js

@@ -291,12 +291,12 @@ export class DataObject extends Model {
   set sensitive(val) { this.setData("sensitive_data", val); }
   get isSensitive() { return (this.sensitive === "yes"); }
 
-  validateFields() {
+  // Only require repository url if 'Other' is selected
+  validateFields(otherField = false) {
     if (!this.title) this.errors.set("title", "Title is required");
     if (!this.type || this.type.toLowerCase() == "select one")
       this.errors.set("type", "Type is required");
-
-    if (!this.repository.url)
+    if (otherField && !this.repository.url)
       this.errors.set("repo", "Repository url is required");
   }
 

react-client/src/pages/plan/research-outputs/researchoutputs.js

@@ -161,7 +161,7 @@ function ResearchOutputs() {
     // NOTE: Repository should already be set, because it's handled in the
     // handleChange() function.
 
-    if (newObj.isValid()) {
+    if (newObj.isValid(otherField)) {
       if (editIndex === null) {
         dmp.dataset.add(newObj);
       } else {
@@ -335,8 +335,16 @@ function ResearchOutputs() {
                       name="size"
                       id="id_size"
                       unitOptions={sizeUnits}
-                      initialValue={dataObj.repository.size.value}
-                      initialUnit={dataObj.repository.size.unit}
+                      initialValue={
+                        dataObj.repository.size?.value !== undefined && dataObj.repository.size?.value !== null && !isNaN(dataObj.repository.size.value)
+                          ? String(dataObj.repository.size.value)
+                          : ""
+                      }
+                      initialUnit={
+                        dataObj.repository.size?.unit && typeof dataObj.repository.size.unit === 'string'
+                          ? dataObj.repository.size.unit
+                          : Object.keys(sizeUnits)[0]
+                      }
                       onChange={handleSizeChanged}
                     />
                   </div>