Merge pull request #164 from Security-Tools-Alliance/11-fix-href-link

fix(ui): permit to link tab URL and history back into it

web/static/assets/js/app.min.js

@@ -493,4 +493,3 @@
   })(),
   Waves.init(),
   feather.replace();
-//# sourceMappingURL=app.min.js.map

web/static/custom/custom.js

@@ -3257,3 +3257,17 @@ function convertToCamelCase(inputString) {
 
 	return camelCaseString;
 }
+function handleHashInUrl(){
+	// this function handles hash in url used to tab navigation
+	const hash = window.location.hash;
+	if (hash) {
+		const targetId = hash.substring(1);
+		const tabLink = $(`a[href="#${targetId}"][data-bs-toggle="tab"]`);
+		if (tabLink.length) {
+			tabLink.tab('show');
+			setTimeout(() => {
+				tabLink.click();
+			}, 100);
+		}
+	}
+}

web/templates/base/base.html

@@ -109,6 +109,14 @@ <h4 class="page-title">{% block page_title %}{% endblock page_title %}</h4>
     <script src="https://cdn.datatables.net/rowgroup/1.4.0/js/dataTables.rowGroup.min.js"></script>
     <script type="text/javascript">
       $(document).ready(function(){
+        // for tabs with urls, we need to append the hash in the url
+        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
+          var href = $(e.target).attr('href');
+          if (href && href.startsWith('#')) {
+            history.pushState(null, null, href);
+          }
+        });
+        $(window).on('hashchange', handleHashInUrl);
         render_search_history('{{current_project.slug}}');
 
         // reNgine-ng will also check everyday if update exists for reNgine-ng
@@ -132,6 +140,7 @@ <h4 class="page-title">{% block page_title %}{% endblock page_title %}</h4>
         else{
           $('#dark-mode-check').prop("checked", false).change();
         }
+        handleHashInUrl();
       });
 
       function render_search_history(slug){