From 9ff4507fe2b91f0db0bef01a4a76be85f2018214 Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Sun, 26 Jul 2020 13:34:57 +0900
Subject: [PATCH] Fix system settings tab behavior (#2492)

---
 .../gitbucket/core/admin/settings.scala.html  | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/main/twirl/gitbucket/core/admin/settings.scala.html b/src/main/twirl/gitbucket/core/admin/settings.scala.html
index 22d945a97..5a10b9e09 100644
--- a/src/main/twirl/gitbucket/core/admin/settings.scala.html
+++ b/src/main/twirl/gitbucket/core/admin/settings.scala.html
@@ -5,19 +5,19 @@
   @gitbucket.core.admin.html.menu("system"){
     @gitbucket.core.helper.html.information(info)
     <form action="@context.path/admin/system" method="POST" validate="true" class="form-horizontal" autocomplete="off">
-      <ul class="nav nav-tabs fill-width" id="pullreq-tab">
+      <ul class="nav nav-tabs fill-width" id="settings-tab">
         <li><a href="#system">System settings</a></li>
         <li><a href="#integrations">Integrations</a></li>
         <li><a href="#authentication">Authentication</a></li>
       </ul>
       <div class="tab-content fill-width" style="padding-top: 20px;">
-        <div class="tab-pane" id="system">
+        <div class="tab-pane" id="tab-system">
           @settings_system(info)
         </div>
-        <div class="tab-pane" id="integrations">
+        <div class="tab-pane" id="tab-integrations">
           @settings_integrations(info)
         </div>
-        <div class="tab-pane" id="authentication">
+        <div class="tab-pane" id="tab-authentication">
           @settings_authentication(info)
         </div>
       </div>
@@ -30,25 +30,29 @@
 }
 <script>
 $(function(){
-  // Determine active tab from hash
-  if(location.hash == '#authentication'){
-    $('li:has(a[href="#authentication"])').addClass('active');
-    $('div#authentication').addClass('active');
-  } else if(location.hash == '#integrations'){
-    $('li:has(a[href="#integrations"])').addClass('active');
-    $('div#integrations').addClass('active');
-  } else {
-    $('li:has(a[href="#system"])').addClass('active');
-    $('div#system').addClass('active');
+  function updateTabs(){
+    $('ul.nav-tabs li').removeClass('active');
+    $('div.tab-pane').removeClass('active');
+
+    // Determine active tab from hash
+    if(location.hash == '#authentication'){
+      $('li:has(a[href="#authentication"])').addClass('active');
+      $('div#tab-authentication').addClass('active');
+    } else if(location.hash == '#integrations'){
+      $('li:has(a[href="#integrations"])').addClass('active');
+      $('div#tab-integrations').addClass('active');
+    } else {
+      $('li:has(a[href="#system"])').addClass('active');
+      $('div#tab-system').addClass('active');
+    }
   }
+
   // Set hash when tab is clicked
-  $('ul.nav-tabs li a').click(function(e){
+  $('#settings-tab li a').click(function(e){
     location.href = $(e.delegateTarget).attr("href");
+    updateTabs();
   });
 
-  $('#pullreq-tab a').click(function (e) {
-    e.preventDefault();
-    $(this).tab('show');
-  });
+  updateTabs();
 });
 </script>