Refactor Permalinks box

cypress/e2e/swhids.cy.js

@@ -259,4 +259,34 @@ describe('SWHIDs Tests', function() {
     });
   });
 
+  it('should update copy buttons after clicking on them', function() {
+    cy.get('.ui-slideouttab-handle')
+      .click();
+
+    for (const td of testsData) {
+      cy.get(`a[href="#swhid-tab-${td.objectType}"]`)
+        .click();
+
+      cy.get(`#swhid-tab-${td.objectType}`)
+        .should('be.visible');
+
+      cy.get(`#swhid-tab-${td.objectType} .btn-swhid-copy`)
+          .should('contain.text', 'Copy identifier')
+          .should('not.contain.text', 'Copied!')
+          .click()
+          .should('have.text', 'Copied!')
+          .wait(1001)
+          .should('not.contain.text', 'Copied!')
+          .should('contain.text', 'Copy identifier');
+
+      cy.get(`#swhid-tab-${td.objectType} .btn-swhid-url-copy`)
+          .should('contain.text', 'Copy permalink')
+          .should('not.contain.text', 'Copied!')
+          .click()
+          .should('have.text', 'Copied!')
+          .wait(1001)
+          .should('not.contain.text', 'Copied!')
+          .should('contain.text', 'Copy permalink');
+    }
+  });
 });

swh/web/browse/assets/browse/swhid-utils.js

@@ -96,11 +96,26 @@ function updateSWHIDsTabSize() {
 }
 
 $(document).ready(() => {
+  const toggleButtonText = (button, text) => {
+    const currentLabel = button.innerHTML;
+
+    if (currentLabel === text) {
+      return;
+    }
+
+    button.innerHTML = text;
+    setTimeout(function() {
+      button.innerHTML = currentLabel;
+    }, 1000);
+  };
+
   new ClipboardJS('.btn-swhid-copy', {
     text: trigger => {
       const swhId = $(trigger).closest('.swhid-ui').find('.swhid').text();
       return swhId.replace(/;\n/g, ';');
     }
+  }).on('success', function(e) {
+    toggleButtonText(e.trigger, 'Copied!');
   });
 
   new ClipboardJS('.btn-swhid-url-copy', {
@@ -108,6 +123,8 @@ $(document).ready(() => {
       const swhIdUrl = $(trigger).closest('.swhid-ui').find('.swhid').attr('href');
       return window.location.origin + swhIdUrl;
     }
+  }).on('success', function(e) {
+    toggleButtonText(e.trigger, 'Copied!');
   });
 
   // prevent automatic closing of SWHIDs tab during guided tour