From 9ef77d057a80eee3d999953e2d3e28bec5a9fdc0 Mon Sep 17 00:00:00 2001
From: Dzmitry Hramyka <grom.dima.grom@gmail.com>
Date: Wed, 20 Sep 2023 15:32:07 +0200
Subject: [PATCH] add sodar-pr-btn-submit-once class and usage (#1233)

---
 .../templates/filesfolders/file_form.html     |  2 +-
 .../templates/filesfolders/folder_form.html   |  2 +-
 .../filesfolders/hyperlink_form.html          |  2 +-
 .../static/projectroles/js/projectroles.js    | 15 ++++++++
 .../templates/projectroles/project_form.html  |  2 +-
 .../projectroles/projectinvite_form.html      |  2 +-
 .../projectroles/remotesite_form.html         |  2 +-
 .../projectroles/roleassignment_form.html     |  2 +-
 .../templates/projectroles/user_form.html     |  2 +-
 projectroles/tests/test_ui.py                 | 35 ++++++++++++++++++-
 tokens/templates/tokens/token_create.html     |  2 +-
 11 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/filesfolders/templates/filesfolders/file_form.html b/filesfolders/templates/filesfolders/file_form.html
index ba595751..da8526dc 100644
--- a/filesfolders/templates/filesfolders/file_form.html
+++ b/filesfolders/templates/filesfolders/file_form.html
@@ -73,7 +73,7 @@ <h3>
           >
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           {% if object.pk %}
             <i class="iconify" data-icon="mdi:lead-pencil"></i> Update
           {% else %}
diff --git a/filesfolders/templates/filesfolders/folder_form.html b/filesfolders/templates/filesfolders/folder_form.html
index 5861a611..826a4a23 100644
--- a/filesfolders/templates/filesfolders/folder_form.html
+++ b/filesfolders/templates/filesfolders/folder_form.html
@@ -60,7 +60,7 @@ <h3>
           >
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object.pk %}Update{% else %}Add{% endif %}
         </button>
diff --git a/filesfolders/templates/filesfolders/hyperlink_form.html b/filesfolders/templates/filesfolders/hyperlink_form.html
index 980c5286..fae41126 100644
--- a/filesfolders/templates/filesfolders/hyperlink_form.html
+++ b/filesfolders/templates/filesfolders/hyperlink_form.html
@@ -61,7 +61,7 @@ <h3>
           >
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object.pk %}
             Update
diff --git a/projectroles/static/projectroles/js/projectroles.js b/projectroles/static/projectroles/js/projectroles.js
index 7c6fbdf2..e6189c09 100644
--- a/projectroles/static/projectroles/js/projectroles.js
+++ b/projectroles/static/projectroles/js/projectroles.js
@@ -317,3 +317,18 @@ $(document).ready(function () {
 $(window).on('resize', function () {
     toggleSidebar();
 });
+
+
+/* Disable submit button once clicked --------------------------------------- */
+
+
+$(document).ready(function () {
+    $('.sodar-pr-btn-submit-once').click(function () {
+        $(this).attr('disabled', true);
+        $(this).find('svg').remove();
+        $(this).prepend('<span class="spinner-border spinner-border-sm" ' +
+            'role="status" aria-hidden="true"></span>');
+        $("body").css("cursor", "progress");
+        $(this).closest('form').submit();
+    });
+});
diff --git a/projectroles/templates/projectroles/project_form.html b/projectroles/templates/projectroles/project_form.html
index dd462b8c..925a8675 100644
--- a/projectroles/templates/projectroles/project_form.html
+++ b/projectroles/templates/projectroles/project_form.html
@@ -75,7 +75,7 @@ <h2 id="sodar-pr-project-form-title" data-project-type="CATEGORY">
              href="{{ request.session.real_referer }}">
             <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
           </a>
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
             <i class="iconify" data-icon="mdi:check-bold"></i>
             {% if object.pk %}
               Update
diff --git a/projectroles/templates/projectroles/projectinvite_form.html b/projectroles/templates/projectroles/projectinvite_form.html
index 485b748d..69ab10d7 100644
--- a/projectroles/templates/projectroles/projectinvite_form.html
+++ b/projectroles/templates/projectroles/projectinvite_form.html
@@ -33,7 +33,7 @@ <h3>Send Invite</h3>
            data-toggle="modal" data-target="#sodar-modal">
           <i class="iconify" data-icon="mdi:eye"></i> Preview
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:send"></i> Send
         </button>
       </div>
diff --git a/projectroles/templates/projectroles/remotesite_form.html b/projectroles/templates/projectroles/remotesite_form.html
index 82636da6..4576fde6 100644
--- a/projectroles/templates/projectroles/remotesite_form.html
+++ b/projectroles/templates/projectroles/remotesite_form.html
@@ -25,7 +25,7 @@ <h2>{% if object.pk %}Update{% else %}Add{% endif %} {% if site_mode == 'TARGET'
            href="{{ request.session.real_referer }}">
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object.pk %}Update{% else %}Add{% endif %}
         </button>
diff --git a/projectroles/templates/projectroles/roleassignment_form.html b/projectroles/templates/projectroles/roleassignment_form.html
index 28988df2..172ab9c2 100644
--- a/projectroles/templates/projectroles/roleassignment_form.html
+++ b/projectroles/templates/projectroles/roleassignment_form.html
@@ -44,7 +44,7 @@ <h3>Add Member</h3>
            data-toggle="modal" data-target="#sodar-modal">
           <i class="iconify" data-icon="mdi:eye"></i> Preview
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           {% if object.pk %}
             <i class="iconify" data-icon="mdi:check-bold"></i> Update
           {% elif promote_as %}
diff --git a/projectroles/templates/projectroles/user_form.html b/projectroles/templates/projectroles/user_form.html
index 0f412dad..79d959a1 100644
--- a/projectroles/templates/projectroles/user_form.html
+++ b/projectroles/templates/projectroles/user_form.html
@@ -23,7 +23,7 @@ <h2>
     {{ form | crispy }}
     <div class="row">
       <div class="btn-group ml-auto" role="group">
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i>
           {% if object %}Update{% else %}Create{% endif %}
         </button>
diff --git a/projectroles/tests/test_ui.py b/projectroles/tests/test_ui.py
index 72f0166c..c262fe58 100644
--- a/projectroles/tests/test_ui.py
+++ b/projectroles/tests/test_ui.py
@@ -1,6 +1,8 @@
 """UI tests for the projectroles app"""
 
 import socket
+import time
+
 from urllib.parse import urlencode
 
 from django.conf import settings
@@ -15,7 +17,10 @@
 from django.urls import reverse
 
 from selenium import webdriver
-from selenium.common.exceptions import NoSuchElementException
+from selenium.common.exceptions import (
+    NoSuchElementException,
+    StaleElementReferenceException,
+)
 from selenium.webdriver.common.by import By
 from selenium.webdriver.support import expected_conditions as ec
 from selenium.webdriver.support.ui import WebDriverWait, Select
@@ -1688,6 +1693,34 @@ def test_settings_label_icon(self):
         ).find_element(By.TAG_NAME, 'svg')
         self.assertTrue(logo.is_displayed())
 
+    def test_submit_button(self):
+        """Test rendering of submit button"""
+        url = reverse(
+            'projectroles:create', kwargs={'project': self.category.sodar_uuid}
+        )
+        self.login_and_redirect(
+            self.superuser, url, wait_elem=None, wait_loc='ID'
+        )
+        element = self.selenium.find_element(
+            By.CLASS_NAME, 'sodar-pr-btn-submit-once'
+        )
+        self.assertEqual(element.text, 'Create')
+        self.assertTrue(element.is_enabled())
+        # Define maximum number of retries and retry interval
+        max_retries = 50
+        retry_interval = 0.2
+        element.click()
+        for i in range(max_retries):
+            try:
+                if element.is_enabled() and i < max_retries - 1:
+                    time.sleep(retry_interval)
+                else:
+                    self.fail(
+                        'Element did not become enabled within the timeout'
+                    )
+            except StaleElementReferenceException:
+                break
+
 
 class TestProjectUpdateView(TestUIBase):
     """Tests for ProjectUpdateView UI"""
diff --git a/tokens/templates/tokens/token_create.html b/tokens/templates/tokens/token_create.html
index 58a6679b..26f130f9 100644
--- a/tokens/templates/tokens/token_create.html
+++ b/tokens/templates/tokens/token_create.html
@@ -20,7 +20,7 @@ <h2>Create API Token</h2>
             href="{% url 'tokens:list' %}">
           <i class="iconify" data-icon="mdi:arrow-left-circle"></i> Cancel
         </a>
-        <button type="submit" class="btn btn-primary">
+        <button type="submit" class="btn btn-primary sodar-pr-btn-submit-once">
           <i class="iconify" data-icon="mdi:check-bold"></i> Create
         </button>
       </div>