From 320eb86dc2f3297b06ab5f017b7d5156a604e6ef Mon Sep 17 00:00:00 2001
From: Ridhwana <Ridhwana.Khan16@gmail.com>
Date: Fri, 30 Apr 2021 13:01:55 +0200
Subject: [PATCH] RFC 50: Interaction tweaks (take two) (#13576)

* feat: add the collapse style css + a script for the intercepting the bootstrap event

* chore: remove old code

* Add some guards for missing elements and simplify show/hide collapse interaction

* Update app/assets/stylesheets/admin.scss

Co-authored-by: rhymes <rhymes@hey.com>

Co-authored-by: rhymes <rhymes@hey.com>
---
 app/assets/stylesheets/admin.scss             |  6 ++++
 .../controllers/sidebar_controller.test.js    | 11 ++------
 .../admin/controllers/sidebar_controller.js   | 28 ++++++++-----------
 .../admin/shared/_nested_sidebar.html.erb     | 16 +++++++++--
 4 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index cdc1684d3..5978296e2 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -235,4 +235,10 @@ label {
     list-style: none;
     padding: 0;
   }
+  // override the Bootstrap collapse animation
+  .collapsing {
+    -webkit-transition: none;
+    transition: none;
+    display: none;
+  }
 }
diff --git a/app/javascript/admin/__tests__/controllers/sidebar_controller.test.js b/app/javascript/admin/__tests__/controllers/sidebar_controller.test.js
index 1c3aaeedc..785a837c3 100644
--- a/app/javascript/admin/__tests__/controllers/sidebar_controller.test.js
+++ b/app/javascript/admin/__tests__/controllers/sidebar_controller.test.js
@@ -23,7 +23,7 @@ describe('SidebarController', () => {
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="dropdown-icon crayons-icon" role="img"><path d="M13 9h8L11 24v-9H4l9-15v9zm-2 2V7.22L7.532 13H13v4.394L17.263 11H11z"></path></svg>
               Advanced
             </button>
-            <ul id="advanced" data-sidebar-target="submenu" class="collapse hide">
+            <ul id="advanced" data-sidebar-target="submenu" class="collapse">
               <li>
                 <a class="crayons-link crayons-link--block ml-7 " href="/admin/advanced/broadcasts">
                   Broadcasts
@@ -104,18 +104,11 @@ describe('SidebarController', () => {
       window.location = location;
     });
 
-    it('redirects to the first child navigation item', () => {
-      const button = document.getElementById('advanced_button');
-      button.click();
-
-      expect(window.location.href).toEqual('/admin/advanced/broadcasts');
-    });
-
     it('closes other menu items', () => {
       const button = document.getElementById('advanced_button');
       button.click();
 
-      expect(document.getElementById('apps').classList).toContain('hide');
+      expect(document.getElementById('apps').classList).not.toContain('show');
     });
   });
 });
diff --git a/app/javascript/admin/controllers/sidebar_controller.js b/app/javascript/admin/controllers/sidebar_controller.js
index c4502c5d2..73e8aecbb 100644
--- a/app/javascript/admin/controllers/sidebar_controller.js
+++ b/app/javascript/admin/controllers/sidebar_controller.js
@@ -5,30 +5,26 @@ export default class SidebarController extends Controller {
   static targets = ['submenu'];
 
   disableCurrentNavItem() {
-    const activeMenuId = this.submenuTargets.filter((item) =>
-      item.classList.contains('show'),
-    )[0].id;
-    const activeButton = document.getElementById(`${activeMenuId}_button`);
-    activeButton.setAttribute('disabled', true);
+    if (this.submenuTargets.length > 0) {
+      const activeMenuId = this.submenuTargets.filter((item) =>
+        item.classList.contains('show'),
+      )[0]?.id;
+
+      if (activeMenuId) {
+        const activeButton = document.getElementById(`${activeMenuId}_button`);
+        activeButton.setAttribute('disabled', true);
+      }
+    }
   }
 
-  expandDropdown(event) {
-    this.redirectToFirstChildNavItem(event);
+  expandDropdown() {
     this.closeOtherMenus();
   }
 
-  redirectToFirstChildNavItem(event) {
-    window.location.href = event.target.getAttribute('data-target-href');
-  }
-
   closeOtherMenus() {
-    const expandedList = ['expand', 'show'];
-    const collapsedList = ['collapse', 'hide'];
-
     this.submenuTargets.map((item) => {
       if (item.classList.contains('show')) {
-        item.classList.remove(...expandedList);
-        item.classList.add(...collapsedList);
+        item.classList.remove('show');
       }
     });
   }
diff --git a/app/views/admin/shared/_nested_sidebar.html.erb b/app/views/admin/shared/_nested_sidebar.html.erb
index 38512f4a0..84a44e9a3 100644
--- a/app/views/admin/shared/_nested_sidebar.html.erb
+++ b/app/views/admin/shared/_nested_sidebar.html.erb
@@ -15,7 +15,6 @@
         id="<%= group_name %>_button"
         data-toggle="collapse"
         data-target="#<%= group_name %>"
-        data-target-href="/admin/<%= group_name %>/<%= group[:children][0][:controller] %>"
         aria-expanded="<%= (deduced_scope(request) == group_name.to_s).to_s %>"
         aria-controls="<%= group_name %>"
         data-action="click->sidebar#expandDropdown">
@@ -24,7 +23,8 @@
       </button>
       <ul id="<%= group_name %>"
           data-sidebar-target="submenu"
-          class="<%= deduced_scope(request) == group_name.to_s ? "expand show" : "collapse hide" %>">
+          class="js-menu-activator <%= deduced_scope(request) == group_name.to_s ? "collapse show" : "collapse" %>"
+          data-target-href="/admin/<%= group_name %>/<%= group[:children][0][:controller] %>">
         <% group[:children].each do |item| %>
           <% if item[:visible] %>
             <li>
@@ -40,3 +40,15 @@
     <% end %>
   </li>
 <% end %>
+
+<script>
+  $('.js-menu-activator').on('show.bs.collapse', function (event) {
+    const destinationPath = event.target.getAttribute('data-target-href');
+    const subMenu = document.querySelector(`a[href='${destinationPath}']`);
+
+    if (destinationPath && subMenu) {
+      window.location.href = destinationPath;
+      subMenu.classList.add('fw-bold');
+    }
+  })
+</script>