Started switching user data entry to use autocomplete (#1035)

* Started switching user data entry to use autocomplete

* Cleaning up...

* Include our local copy of the jQuery autocomplete plugin:

* Removed reference to deleted code

* Ignore rspec report

* Fixed test logic

* Tweaking the autocomplete validation

* Tweak validation code

* Fix errors in project_spec validation

* Found the magic incantation to trigger focusout and the validation. Still need to fix a few more broken test

* Fixed tests

* Rubocop nitpicking

* Adjusted the validation (since it got messed up during the branch merge)

* Fixed another test that I messed up in the branch merge

* Fixed another git merge issue

* Fixed broken tests

* Simplify a couple of tests

Author: hectorcorrea

.gitignore

@@ -65,11 +65,14 @@ node_modules
 # Do not check aterm.jar into the repo
 aterm.jar
 
-public 
+public
 doc
 
 # Ignore test created to not get accidentally added to commit
 project_create_8.txt
 
 # Ignore .yardoc
-.yardoc/
+.yardoc/
+
+# Ignore rspec report
+/spec/fixtures/failed_tests.txt

app/assets/stylesheets/_settings.scss

@@ -238,37 +238,14 @@
     margin-bottom: 10px;
   }
 
-  .custom_error {
-    display: none;
-
-    .error_message {
-      color: var(--Secondary-Red-Dark, #b00002);
-      margin-top: 2px;
-
-      /* Body XS */
-      font-family: "Libre Franklin";
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 21px; /* 150% */
-    }
-  }
-
-  input:valid {
+  input[type=text]:valid {
     background-color: rgb(255, 255, 255);
   }
 
-  input:invalid {
+  input[type=text]:invalid {
     outline-color: red;
   }
 
-  // write css so that the text displayed on invalid input is red and appears to the right of the div instead of below it
-  span {
-    color: red;
-    display: inline;
-    margin-left: 10px;
-  }
-
   h2 {
     // Headings for roles and description
     text-decoration: underline;

app/assets/stylesheets/application.scss

@@ -35,3 +35,51 @@ body {
     }
 }
 
+.hidden-element {
+  display: none;
+}
+
+/* These are the styles used by the jQuery autocomplete plug-in */
+.autocomplete-suggestions {
+  border: 1px solid #999;
+  background: #FFF;
+  overflow: auto;
+}
+
+.autocomplete-suggestion {
+  padding: 2px 5px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.autocomplete-selected {
+  background: #F0F0F0;
+}
+
+.autocomplete-suggestions strong {
+  font-weight: normal;
+  color: #3399FF;
+}
+
+.autocomplete-group {
+  padding: 2px 5px;
+}
+
+.autocomplete-group strong {
+  display: block;
+  border-bottom: 1px solid #000;
+}
+
+/*
+ * Adds the arrow to the autocomplete textbox.
+ * Notice that since CSS does not allow ::after on HTML <input> we apply this style to an HTML <span>.
+ * See https://stackoverflow.com/questions/2587669/can-i-use-a-before-or-after-pseudo-element-on-an-input-field
+ */
+.autocomplete-arrow::after {
+  content: "▾";
+  margin-left: -20px;
+}
+
+.autocomplete-error {
+  color: var(--Secondary-Red-Dark, #b00002);
+}

app/helpers/project_helper.rb

@@ -10,4 +10,28 @@ def pre_populate_data_sponsor
       @project.metadata[:data_sponsor]
     end
   end
+
+  # Returns a string with JSON representation of a list of users
+  # The JSON can be used to feed the jQuery Autocomplete plug-in
+  # rubocop:disable Rails/OutputSafety
+  def user_list_json(users)
+    json_elements = users.map do |user|
+      "{ data: '#{user.uid}', value: '#{user.display_name_safe} (#{user.uid})' }"
+    end
+
+    json_elements.join(",").html_safe
+  end
+  # rubocop:enable Rails/OutputSafety
+
+  def sponsor_list_json
+    user_list_json(User.sponsor_users)
+  end
+
+  def manager_list_json
+    user_list_json(User.manager_users)
+  end
+
+  def all_users_list_json
+    user_list_json(User.all)
+  end
 end

app/javascript/entrypoints/application.js

@@ -16,7 +16,6 @@ import * as bootstrap from 'bootstrap';
 import '../channels';
 
 import { setTargetHtml } from './helper';
-import UserDatalist from './user_datalist';
 import { displayMediafluxVersion } from './mediafluxVersion';
 import { showCreateScript } from './atermScripts';
 
@@ -245,8 +244,6 @@ function initPage() {
   $('#test-jquery').click((event) => {
     setTargetHtml(event, 'jQuery works!');
   });
-  const datalist = new UserDatalist();
-  datalist.setupDatalistValidity();
   initDataUsers();
   initListContentsModal();
   showMoreLessContent();

app/javascript/entrypoints/user_datalist.js

@@ -19,27 +19,22 @@ def self.from_cas(access_token)
     user
   end
 
-  def self.all_users
-    User.all.map(&:uid)
-  end
-
+  # Users that can be project sponsors
   def self.sponsor_users
-    users = if Rails.env.development? || Rails.env.staging?
-              User.where(eligible_sponsor: true).or(User.where(superuser: true))
-            else
-              User.where(eligible_sponsor: true)
-            end
-    users.map(&:uid)
+    if Rails.env.development? || Rails.env.staging?
+      User.where(eligible_sponsor: true).or(User.where(superuser: true))
+    else
+      User.where(eligible_sponsor: true)
+    end
   end
 
-  # All users who are eligible to be Data Managers
+  # Users that can be data managers
   def self.manager_users
-    users = if Rails.env.development? || Rails.env.staging?
-              User.where(eligible_manager: true).or(User.where(superuser: true))
-            else
-              User.where(eligible_manager: true)
-            end
-    users.map(&:uid)
+    if Rails.env.development? || Rails.env.staging?
+      User.where(eligible_manager: true).or(User.where(superuser: true))
+    else
+      User.where(eligible_manager: true)
+    end
   end
 
   def clear_mediaflux_session(session)

app/models/user.rb

@@ -16,15 +16,8 @@
     <%= vite_javascript_tag 'application' %>
     <script src="//code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
 
-    <!--
-      If using a TypeScript entrypoint file:
-        vite_typescript_tag 'application'
-
-      If using a .jsx or .tsx entrypoint, add the extension:
-        vite_javascript_tag 'application.jsx'
-
-      Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
-    -->
+    <!-- Load our local Autocomplete plug-in which is a copy of https://github.com/devbridge/jQuery-Autocomplete -->
+    <script src="<%= root_path + 'jquery.autocomplete.js' %>"></script>
 
     <% if Rails.env.development? || Rails.env.staging? %>
       <%= render 'shared/plausible_dev_staging' %>

app/views/layouts/application.html.erb

@@ -1,11 +1,10 @@
 <%= render 'form_errors' %>
-<%= render 'data_list' %>
 
 <div class="container">
   <div class="field">
     <label for="project_directory" class="form-label">Confirm Project Directory</label>
     <input class="form-directory" type="text" name="project_directory_prefix" required value="<%= @project.project_directory_parent_path %>"></input> /
-    <input class="form-directory-confirm" type="text" name="project_directory" required value=<%= "#{@project.project_directory_short}"%>></input>  
+    <input class="form-directory-confirm" type="text" name="project_directory" required value=<%= "#{@project.project_directory_short}"%>></input>
   </div>
   <div class="field">
     <label for="storage_capacity" class="form-label">Confirm Storage Capacity</label>