From 24745203e130675fcb4fbb8ad090c8715b144c3c Mon Sep 17 00:00:00 2001
From: Mojca Lorber <mlorber@biosistemika.com>
Date: Thu, 3 Sep 2020 17:05:25 +0200
Subject: [PATCH] Fix buttons visability on protocols page according to new
 styleguide

---
 app/assets/javascripts/protocols/index.js | 163 +++++++++++-----------
 app/views/protocols/index.html.erb        |  24 ++--
 2 files changed, 92 insertions(+), 95 deletions(-)

diff --git a/app/assets/javascripts/protocols/index.js b/app/assets/javascripts/protocols/index.js
index 92653a5cd..349caefc6 100644
--- a/app/assets/javascripts/protocols/index.js
+++ b/app/assets/javascripts/protocols/index.js
@@ -439,79 +439,78 @@ function updateButtons() {
   var archiveBtn = $("[data-action='archive']");
   var restoreBtn = $("[data-action='restore']");
   var exportBtn = $("[data-action='export']");
+  var row = $("tr[data-row-id='" + rowsSelected[0] + "']");
+  var rows = [];
 
-  if (rowsSelected.length == 1) {
+  if (rowsSelected.length === 1) {
     // 1 ROW SELECTED
-    var row = $("tr[data-row-id='" + rowsSelected[0] + "']");
-
-    if (row.is("[data-can-edit]")) {
-      editBtn.removeAttr("disabled");
-      editBtn.off("click").on("click", function() { editSelectedProtocol(); });
+    if (row.is('[data-can-edit]')) {
+      editBtn.removeClass('disabled hidden');
+      editBtn.off('click').on('click', function() { editSelectedProtocol(); });
     } else {
-      editBtn.attr("disabled", "disabled");
-      editBtn.off("click");
+      editBtn.addClass('disabled hidden');
+      editBtn.off('click');
     }
-    if (row.is("[data-can-clone]")) {
-      cloneBtn.removeAttr("disabled");
-      cloneBtn.off("click").on("click", function() { cloneSelectedProtocol(); });
+    if (row.is('[data-can-clone]')) {
+      cloneBtn.removeClass('disabled hidden');
+      cloneBtn.off('click').on('click', function() { cloneSelectedProtocol(); });
     } else {
-      cloneBtn.attr("disabled", "disabled");
-      cloneBtn.off("click");
+      cloneBtn.addClass('disabled hidden');
+      cloneBtn.off('click');
     }
-    if (row.is("[data-can-make-private]")) {
-      makePrivateBtn.removeAttr("disabled");
-      makePrivateBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (row.is('[data-can-make-private]')) {
+      makePrivateBtn.removeClass('disabled hidden');
+      makePrivateBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      makePrivateBtn.attr("disabled", "disabled");
-      makePrivateBtn.off("click");
+      makePrivateBtn.addClass('disabled hidden');
+      makePrivateBtn.off('click');
     }
-    if (row.is("[data-can-publish]")) {
-      publishBtn.removeAttr("disabled");
-      publishBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (row.is('[data-can-publish]')) {
+      publishBtn.removeClass('disabled hidden');
+      publishBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      publishBtn.attr("disabled", "disabled");
-      publishBtn.off("click");
+      publishBtn.addClass('disabled hidden');
+      publishBtn.off('click');
     }
-    if (row.is("[data-can-archive]")) {
-      archiveBtn.removeAttr("disabled");
-      archiveBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (row.is('[data-can-archive]')) {
+      archiveBtn.removeClass('disabled hidden');
+      archiveBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      archiveBtn.attr("disabled", "disabled");
-      archiveBtn.off("click");
+      archiveBtn.addClass('disabled hidden');
+      archiveBtn.off('click');
     }
-    if (row.is("[data-can-restore]")) {
-      restoreBtn.removeAttr("disabled");
-      restoreBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (row.is('[data-can-restore]')) {
+      restoreBtn.removeClass('disabled hidden');
+      restoreBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      restoreBtn.attr("disabled", "disabled");
-      restoreBtn.off("click");
+      restoreBtn.addClass('disabled hidden');
+      restoreBtn.off('click');
     }
-    if (row.is("[data-can-export]")) {
-      exportBtn.removeAttr("disabled");
-      exportBtn.off("click").on("click", function() { exportProtocols(rowsSelected); });
+    if (row.is('[data-can-export]')) {
+      exportBtn.removeClass('disabled hidden');
+      exportBtn.off('click').on('click', function() { exportProtocols(rowsSelected); });
     } else {
-      exportBtn.attr("disabled", "disabled");
-      exportBtn.off("click");
+      exportBtn.addClass('disabled hidden');
+      exportBtn.off('click');
     }
   } else if (rowsSelected.length === 0) {
     // 0 ROWS SELECTED
-    editBtn.attr("disabled", "disabled");
-    editBtn.off("click");
-    cloneBtn.attr("disabled", "disabled");
-    cloneBtn.off("click");
-    makePrivateBtn.attr("disabled", "disabled");
-    makePrivateBtn.off("click");
-    publishBtn.attr("disabled", "disabled");
-    publishBtn.off("click");
-    archiveBtn.attr("disabled", "disabled");
-    archiveBtn.off("click");
-    restoreBtn.attr("disabled", "disabled");
-    restoreBtn.off("click");
-    exportBtn.attr("disabled", "disabled");
-    exportBtn.off("click");
+    editBtn.addClass('disabled hidden');
+    editBtn.off('click');
+    cloneBtn.addClass('disabled hidden');
+    cloneBtn.off('click');
+    makePrivateBtn.addClass('disabled hidden');
+    makePrivateBtn.off('click');
+    publishBtn.addClass('disabled hidden');
+    publishBtn.off('click');
+    archiveBtn.addClass('disabled hidden');
+    archiveBtn.off('click');
+    restoreBtn.addClass('disabled hidden');
+    restoreBtn.off('click');
+    exportBtn.addClass('disabled hidden');
+    exportBtn.off('click');
   } else {
     // > 1 ROWS SELECTED
-    var rows = [];
     _.each(rowsSelected, function(rowId) {
       rows.push($("tr[data-row-id='" + rowId + "']")[0]);
     });
@@ -519,44 +518,44 @@ function updateButtons() {
 
     // Only enable button if all selected rows can
     // be published/archived/restored/exported
-    editBtn.attr("disabled", "disabled");
-    editBtn.off("click");
-    cloneBtn.attr("disabled", "disabled");
-    cloneBtn.off("click");
-    if (!rows.is(":not([data-can-make-private])")) {
-      makePrivateBtn.removeAttr("disabled");
-      makePrivateBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    editBtn.removeClass('hidden').addClass('disabled');
+    editBtn.off('click');
+    cloneBtn.removeClass('hidden').addClass('disabled');
+    cloneBtn.off('click');
+    if (!rows.is(':not([data-can-make-private])')) {
+      makePrivateBtn.removeClass('disabled hidden');
+      makePrivateBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      makePrivateBtn.attr("disabled", "disabled");
-      makePrivateBtn.off("click");
+      makePrivateBtn.removeClass('hidden').addClass('disabled');
+      makePrivateBtn.off('click');
     }
-    if (!rows.is(":not([data-can-publish])")) {
-      publishBtn.removeAttr("disabled");
-      publishBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (!rows.is(':not([data-can-publish])')) {
+      publishBtn.removeClass('disabled hidden');
+      publishBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      publishBtn.attr("disabled", "disabled");
-      publishBtn.off("click");
+      publishBtn.removeClass('hidden').addClass('disabled');
+      publishBtn.off('click');
     }
-    if (!rows.is(":not([data-can-archive])")) {
-      archiveBtn.removeAttr("disabled");
-      archiveBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (!rows.is(':not([data-can-archive])')) {
+      archiveBtn.removeClass('disabled hidden');
+      archiveBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      archiveBtn.attr("disabled", "disabled");
-      archiveBtn.off("click");
+      archiveBtn.removeClass('hidden').addClass('disabled');
+      archiveBtn.off('click');
     }
-    if (!rows.is(":not([data-can-restore])")) {
-      restoreBtn.removeAttr("disabled");
-      restoreBtn.off("click").on("click", function() { processMoveButtonClick($(this)); });
+    if (!rows.is(':not([data-can-restore])')) {
+      restoreBtn.removeClass('disabled hidden');
+      restoreBtn.off('click').on('click', function() { processMoveButtonClick($(this)); });
     } else {
-      restoreBtn.attr("disabled", "disabled");
-      restoreBtn.off("click");
+      restoreBtn.removeClass('hidden').addClass('disabled');
+      restoreBtn.off('click');
     }
-    if (!rows.is(":not([data-can-export])")) {
-      exportBtn.removeAttr("disabled");
-      exportBtn.off("click").on("click", function() { exportProtocols(rowsSelected); });
+    if (!rows.is(':not([data-can-export])')) {
+      exportBtn.removeClass('disabled hidden');
+      exportBtn.off('click').on('click', function() { exportProtocols(rowsSelected); });
     } else {
-      exportBtn.attr("disabled", "disabled");
-      exportBtn.off("click");
+      exportBtn.removeClass('hidden').addClass('disabled');
+      exportBtn.off('click');
     }
   }
 }
diff --git a/app/views/protocols/index.html.erb b/app/views/protocols/index.html.erb
index f405e3d09..8b1a2aec2 100644
--- a/app/views/protocols/index.html.erb
+++ b/app/views/protocols/index.html.erb
@@ -33,32 +33,31 @@
               <span class="fas fa-plus"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.create_new") %></span>
             </button>
-            <button class="btn btn-secondary" data-action="edit" disabled>
+            <button class="btn btn-light disabled hidden" data-action="edit">
               <span class="fas fa-pencil-alt"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.edit") %></span>
             </button>
-            <button class="btn btn-secondary" data-action="clone" disabled>
+            <button class="btn btn-light disabled hidden" data-action="clone">
               <span class="fas fa-copy"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.clone_btn") %></span>
             </button>
             <% if @type == :public %>
-              <button class="btn btn-secondary" data-action="make-private" data-url="<%= make_private_protocols_path %>" disabled>
+              <button class="btn btn-light disabled hidden" data-action="make-private" data-url="<%= make_private_protocols_path %>">
                 <span class="fas fa-eye-slash"></span>
                 <span class="hidden-xs">&nbsp;<%= t("protocols.index.make_private") %></span>
               </button>
             <% elsif @type == :private %>
-              <button class="btn btn-secondary" data-action="publish" data-url="<%= publish_protocols_path %>" disabled>
+              <button class="btn btn-light disabled hidden" data-action="publish" data-url="<%= publish_protocols_path %>">
                 <span class="fas fa-eye"></span>
                 <span class="hidden-xs">&nbsp;<%= t("protocols.index.publish") %></span>
               </button>
             <% end %>
           </div>
           <div id="import-export-protocols" class="sci-btn-group" role="group">
-          <button class="btn btn-secondary btn-open-file"
-             data-toggle="dropdown"
-             aria-haspopup="true"
-             aria-expanded="false"
-             <%= 'disabled' unless can_create_protocols_in_repository?(@current_team) %>>
+          <button class="btn btn-light btn-open-file <%= 'disabled hidden' unless can_create_protocols_in_repository?(@current_team) %>"
+                  data-toggle="dropdown"
+                  aria-haspopup="true"
+                  aria-expanded="false">
             <span class="fas fa-download"></span><span class="hidden-xs">&nbsp;<%= t("protocols.index.import") %></span></button>
             <% if can_create_protocols_in_repository?(@current_team) %>
               <ul class="dropdown-menu">
@@ -80,14 +79,14 @@
                 </li>
               </ul>
             <% end %>
-            <button class="btn btn-secondary" data-action="export" data-export-url="<%= export_protocols_path() %>" disabled>
+            <button class="btn btn-light disabled hidden" data-action="export" data-export-url="<%= export_protocols_path() %>">
               <span class="fas fa-upload"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.export") %></span>
             </button>
           </div>
 
           <div class="sci-btn-group" role="group">
-            <button class="btn btn-secondary" data-action="archive" data-url="<%= archive_protocols_path %>" disabled>
+            <button class="btn btn-light disabled hidden" data-action="archive" data-url="<%= archive_protocols_path %>">
               <span class="fas fa-archive"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.archive_action") %></span>
             </button>
@@ -97,7 +96,7 @@
             <%= t("protocols.index.archive.description") %>
           </div>
           <div class="sci-btn-group" role="group">
-            <button class="btn btn-secondary" data-action="restore" data-url="<%= restore_protocols_path %>" disabled>
+            <button class="btn btn-light disabled hidden" data-action="restore" data-url="<%= restore_protocols_path %>">
               <span class="fas fa-sync-alt"></span>
               <span class="hidden-xs">&nbsp;<%= t("protocols.index.restore") %></span>
             </button>
@@ -140,4 +139,3 @@
 <%= javascript_include_tag "assets/wopi/create_wopi_file" %>
 <%= javascript_include_tag "protocols/index" %>
 <%= javascript_include_tag "protocols/steps" %>
-