Copy/paste functionality established (#2257)

Closes #2254

Author: kelynch

app/assets/images/checkbox.svg

@@ -162,6 +162,81 @@
   line-height: 1.5rem; /* 150% */
 }
 
+#copy-project-path-button {
+  width: 1.5rem;
+  height: 1.5rem;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.copy-paste-frames {
+  background-image: asset_url("copy.svg");
+}
+
+.copy-paste-check {
+  background-image: asset_url("green-checkmark.svg");
+}
+
+copy-paste-error {
+  background-image: asset_url("custom_error.svg");
+}
+
+.pul-copy-paste-tooltip {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+  width: 1.5rem;
+  height: 1.5rem;
+  aspect-ratio: 1/1;
+  font-weight: normal;
+}
+
+/* Tooltip text */
+.pul-copy-paste-tooltiptext::after {
+  content: " ";
+  position: absolute;
+  top: 50%;
+  right: 100%; /* To the left of the tooltip */
+  margin-top: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: transparent #333 transparent transparent;
+}
+
+.pul-copy-paste-tooltiptext {
+  visibility: hidden; /* Hidden by default */
+  background-color: #333;
+  color: #fff;
+  font-size: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  position: absolute;
+  z-index: 1; /* Ensure tooltip is displayed above content */
+  top: -50%;
+  left: 95%;
+  @supports (-webkit-line-clamp: 4) {
+    white-space: initial;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+}
+
+copy-project-path-label-normal {
+  width: 3rem;
+}
+
+.copy-project-path-label-copied {
+  width: 5rem;
+}
+
+/* Show the tooltip text on hover */
+.pul-copy-paste-tooltip:hover .pul-copy-paste-tooltiptext {
+  visibility: visible;
+}
+
 .basic-details-fields {
   padding-top: 30px;
   list-style-type: none;

app/assets/images/copy.svg

@@ -32,6 +32,7 @@ import { userRolesAutocomplete } from './userRolesAutocomplete.js';
 import { storageInputs } from './storageInputs.js';
 import { validationClear } from './validation.js';
 import { titleCopySaveExit } from './titleCopySaveExit.js';
+import { copyPastePath } from './copyPastePath.js';
 
 const app = createApp({});
 
@@ -247,6 +248,7 @@ function initPage() {
   validationClear();
   titleCopySaveExit();
   userRolesAutocomplete();
+  copyPastePath();
 }
 
 window.addEventListener('load', () => initPage());

app/assets/images/green-checkmark.svg

@@ -0,0 +1,58 @@
+// eslint-disable-next-line import/prefer-default-export
+export function copyPastePath() {
+  // Sets the elements to the proper CSS classes once a value has been copied to the clipboard.
+  function setCopiedToClipboard(iconEl, labelEl, normalClass, copiedClass) {
+    $(iconEl).removeClass('copy-paste-frames');
+    $(iconEl).addClass('copy-paste-check');
+    $(labelEl).text('Copied!');
+    $(labelEl).removeClass(normalClass);
+    $(labelEl).addClass(copiedClass);
+  }
+
+  // Resets the elements to the proper CSS classes (e.g. displays as if the copy has not happened)
+  function resetCopyToClipboard(iconEl, labelEl, normalClass, copiedClass) {
+    $(labelEl).text('Copy');
+    $(labelEl).removeClass(copiedClass);
+    $(labelEl).addClass(normalClass);
+    $(iconEl).addClass('copy-paste-frames');
+    $(iconEl).removeClass('copy-paste-check');
+  }
+
+  // Sets icon and label to indicate that an error happened when copying a value to the clipboard
+  function errorCopyToClipboard(iconEl, errorMsg) {
+    $(iconEl).removeClass('copy-paste-frames');
+    $(iconEl).addClass('copy-paste-error');
+    console.error(errorMsg);
+  }
+
+  function copyPath(value, iconEl, labelEl, normalClass, copiedClass) {
+    // Copy value to the clipboard....
+    navigator.clipboard.writeText(value).then(
+      () => {
+        // ...and notify the user
+        setCopiedToClipboard(iconEl, labelEl, normalClass, copiedClass);
+        setTimeout(() => {
+          resetCopyToClipboard(iconEl, labelEl, normalClass, copiedClass);
+        }, 20000);
+      },
+      () => {
+        errorCopyToClipboard(iconEl, 'Copy to clipboard failed');
+      },
+    );
+  }
+
+  $('#copy-project-path-button').on('click', () => {
+    const projectPath = $('#copy-project-path-button').data('url');
+    copyPath(
+      projectPath,
+      '#copy-project-path-button',
+      '#copy-project-path-label',
+      'copy-project-path-label-normal',
+      'copy-project-path-label-copied',
+    );
+  });
+
+  $(() => {
+    $('#copy-project-path-button').addClass('copy-paste-frames');
+  });
+}

app/assets/stylesheets/_project.scss

@@ -26,7 +26,13 @@
         <div class="col-12">
           <div class="date-and-data-info-single">
             <ul>
-              <li><span class="label" id="project-path-copy">Project Directory:</span> <%= @presenter.project_directory %></li>
+              <li><span class="label" id="project-path-copy">Project Directory:</span> <%= @presenter.project_directory %>
+                <button id="copy-project-path-button" class="btn" data-url="<%= @presenter.project_directory %>" title="Copy project path to the clipboard">
+                <div class="pul-copy-paste-tooltip">
+                  <span id="copy-project-path-label" class="copy-project-path-label-normal pul-copy-paste-tooltiptext">Copy</span>
+                </div>
+                </button>
+              </li>
             </ul>
           </div>
         </div>

app/javascript/entrypoints/application.js

@@ -85,6 +85,30 @@
         expect(page).to have_content("RDSS-Research Data and Scholarship Services")
         expect(page).to have_content("Research")
       end
+      it "copies DOI to the clipboard" do
+        sign_in sponsor_user
+        project_in_mediaflux.metadata_model.status = Project::APPROVED_STATUS
+        project_in_mediaflux.metadata_model.storage_capacity["size"]["approved"] = 1
+        project_in_mediaflux.metadata_model.storage_capacity["unit"]["approved"] = "TB"
+        project_in_mediaflux.metadata_model.storage_performance_expectations["approved"] = "slow"
+        project_in_mediaflux.save!
+        visit "/projects/#{project_in_mediaflux.id}/details"
+        
+        expect(page.html.include?('<button id="copy-project-path-button"')).to be true
+
+        # A test as follows would be preferrable
+        #
+        # ```
+        #   expect(page).to have_content "COPY"
+        #   click_on "#copy-project-path-button"
+        #   expect(page).to have_css ".copy-paste-check"
+        # ```
+        #
+        # but unfortunately this kind of test only works when we run RSpec like this:
+        #
+        #   RUN_IN_BROWSER=true bundle exec rspec spec/system/project_details_spec.rb
+        #
+      end
     end
 
     context "Empty Project Purpose field" do