From d78af187e049887a0faf2907fa84a139122c9704 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 6 Jul 2023 14:46:29 +0200
Subject: [PATCH 1/7] Allow dropdown controller to toggle more than one class

"It's a Surprise Tool That Will Help Us Later"
---
 app/webpacker/controllers/dropdown_controller.js | 16 ++++++++++++----
 .../stimulus/dropdown_controller_test.js         |  4 +++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
index f84dca2ec3..20b189398d 100644
--- a/app/webpacker/controllers/dropdown_controller.js
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -17,12 +17,20 @@ export default class extends Controller {
 
   #show() {
     this.menuTarget.classList.remove("hidden");
-    this.arrowTarget.classList.remove(this.arrowTarget.dataset.collapsedClass);
-    this.arrowTarget.classList.add(this.arrowTarget.dataset.expandedClass);
+    this.arrowTarget.dataset.collapsedClass.split(" ").forEach((className) => {
+      this.arrowTarget.classList.remove(className);
+    });
+    this.arrowTarget.dataset.expandedClass.split(" ").forEach((className) => {
+      this.arrowTarget.classList.add(className);
+    });
   }
   #hide() {
     this.menuTarget.classList.add("hidden");
-    this.arrowTarget.classList.remove(this.arrowTarget.dataset.expandedClass);
-    this.arrowTarget.classList.add(this.arrowTarget.dataset.collapsedClass);
+    this.arrowTarget.dataset.expandedClass.split(" ").forEach((className) => {
+      this.arrowTarget.classList.remove(className);
+    });
+    this.arrowTarget.dataset.collapsedClass.split(" ").forEach((className) => {
+      this.arrowTarget.classList.add(className);
+    });
   }
 }
diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
index c2e3079075..3e6738f4cd 100644
--- a/spec/javascripts/stimulus/dropdown_controller_test.js
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -15,7 +15,7 @@ describe("Dropdown controller", () => {
     beforeEach(() => {
       document.body.innerHTML = `<div data-controller="dropdown">
         <span id="dropdown" data-action="click->dropdown#toggle">
-          <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass" data-collapsed-class="collapsedClass" />
+          <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass expandedCLass2" data-collapsed-class="collapsedClass" />
         </span>
         <div id="menu" data-dropdown-target="menu" >
 
@@ -34,12 +34,14 @@ describe("Dropdown controller", () => {
       const menu = document.getElementById("menu");
       expect(menu.classList.contains("hidden")).toBe(true);
       expect(arrow.classList.contains("expandedClass")).toBe(false);
+      expect(arrow.classList.contains("expandedClass2")).toBe(false);
       expect(arrow.classList.contains("collapsedClass")).toBe(true);
 
       dropdown.click();
 
       expect(menu.classList.contains("hidden")).toBe(false);
       expect(arrow.classList.contains("expandedClass")).toBe(true);
+      expect(arrow.classList.contains("expandedCLass2")).toBe(true);
       expect(arrow.classList.contains("collapsedClass")).toBe(false);
     });
   });

From 02aea989be8cdc10506e9f9d98e692e13e4717fc Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 6 Jul 2023 15:00:29 +0200
Subject: [PATCH 2/7] Add on_click_outside behavior on dropdown_controller

"It's a Surprise Tool That Will Help Us Later"
---
 app/webpacker/controllers/dropdown_controller.js      | 11 +++++++++++
 spec/javascripts/stimulus/dropdown_controller_test.js | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
index 20b189398d..3160a77d24 100644
--- a/app/webpacker/controllers/dropdown_controller.js
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -5,6 +5,11 @@ export default class extends Controller {
 
   connect() {
     this.#hide();
+    document.addEventListener("click", this.#onBodyClick.bind(this));
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.#onBodyClick);
   }
 
   toggle() {
@@ -15,6 +20,12 @@ export default class extends Controller {
     }
   }
 
+  #onBodyClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.#hide();
+    }
+  }
+
   #show() {
     this.menuTarget.classList.remove("hidden");
     this.arrowTarget.dataset.collapsedClass.split(" ").forEach((className) => {
diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
index 3e6738f4cd..b72d449d0a 100644
--- a/spec/javascripts/stimulus/dropdown_controller_test.js
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -44,5 +44,16 @@ describe("Dropdown controller", () => {
       expect(arrow.classList.contains("expandedCLass2")).toBe(true);
       expect(arrow.classList.contains("collapsedClass")).toBe(false);
     });
+
+    it ("hide menu when click outside", () => {
+      const dropdown = document.getElementById("dropdown");
+      const menu = document.getElementById("menu");
+      dropdown.click();
+      expect(menu.classList.contains("hidden")).toBe(false);
+
+      document.body.click();
+
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
   });
 });

From 7084c53f38d0926beac1de6a98c9d70f748b0a49 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 6 Jul 2023 15:06:41 +0200
Subject: [PATCH 3/7] Do not display menu is the dropdown is 'disabled'

ie. classList contains `disabled`
---
 app/webpacker/controllers/dropdown_controller.js    |  3 +++
 .../stimulus/dropdown_controller_test.js            | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
index 3160a77d24..42d2eaa9c1 100644
--- a/app/webpacker/controllers/dropdown_controller.js
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -13,6 +13,9 @@ export default class extends Controller {
   }
 
   toggle() {
+    if (this.element.classList.contains("disabled")) {
+      return;
+    }
     if (this.menuTarget.classList.contains("hidden")) {
       this.#show();
     } else {
diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
index b72d449d0a..d60b311315 100644
--- a/spec/javascripts/stimulus/dropdown_controller_test.js
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -13,7 +13,7 @@ describe("Dropdown controller", () => {
 
   describe("Controller", () => {
     beforeEach(() => {
-      document.body.innerHTML = `<div data-controller="dropdown">
+      document.body.innerHTML = `<div data-controller="dropdown" id="container">
         <span id="dropdown" data-action="click->dropdown#toggle">
           <span id="arrow" data-dropdown-target="arrow" data-expanded-class="expandedClass expandedCLass2" data-collapsed-class="collapsedClass" />
         </span>
@@ -55,5 +55,16 @@ describe("Dropdown controller", () => {
 
       expect(menu.classList.contains("hidden")).toBe(true);
     });
+
+    it ("do not display menu when disabled", () => {
+      const dropdown = document.getElementById("dropdown");
+      const container = document.getElementById("container");
+      const menu = document.getElementById("menu");
+      container.classList.add("disabled");
+      
+      dropdown.click();
+
+      expect(menu.classList.contains("hidden")).toBe(true);
+    });
   });
 });

From 6143f4ce6fc8c1276d44249c67db825e9cd09d20 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 6 Jul 2023 15:10:25 +0200
Subject: [PATCH 4/7] Use `dropdown` controller to manager actions dropdown in
 orders page

---
 app/views/spree/admin/orders/_bulk_actions.html.haml | 8 ++++----
 app/webpacker/css/admin/dropdown.scss                | 8 --------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/app/views/spree/admin/orders/_bulk_actions.html.haml b/app/views/spree/admin/orders/_bulk_actions.html.haml
index 7351399aa7..7616334c1f 100644
--- a/app/views/spree/admin/orders/_bulk_actions.html.haml
+++ b/app/views/spree/admin/orders/_bulk_actions.html.haml
@@ -3,13 +3,13 @@
     %span{ "data-controller": "checked-feedback", "data-checked-feedback-translation-value": "spree.admin.orders.index.selected" }
       = t("spree.admin.orders.index.selected", count: 0)
 
-  %button.plain.ofn-drop-down.disabled{ "data-checked-target": "disable" }
+  %div.plain.ofn-drop-down.disabled{ "data-checked-target": "disable", "data-controller": "dropdown", "data-action": "click->dropdown#toggle" }
     %span{ class: 'icon-reorder' }
       ="#{t('admin.actions')}".html_safe
-    %span.toggle-off.icon-caret-up
-    %span.toggle-on.icon-caret-down
+    %span
+      %i{ "data-dropdown-target": "arrow", "data-expanded-class": "icon-caret-up", "data-collapsed-class": "icon-caret-down" }
 
-    %div.menu.dropdown-content
+    %div.menu{ "data-dropdown-target": "menu" }
       %div.menu_item
         %span.name{ "data-controller": "modal-link", "data-action": "click->modal-link#open", "data-modal-link-target-value": "resend_confirmation" }
           = t('spree.admin.orders.index.resend_confirmation')
diff --git a/app/webpacker/css/admin/dropdown.scss b/app/webpacker/css/admin/dropdown.scss
index d3eab51beb..64c98e7ddf 100644
--- a/app/webpacker/css/admin/dropdown.scss
+++ b/app/webpacker/css/admin/dropdown.scss
@@ -20,14 +20,6 @@
     .dropdown-content {
       display: inline-block;
     }
-
-    .toggle-off {
-      display: inline-block;
-    }
-
-    .toggle-on {
-      display: none;
-    }
   }
 }
 

From 4bcba86fc88d868e49d84f90ec366b3eeb0063d0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 6 Jul 2023 15:25:22 +0200
Subject: [PATCH 5/7] Avoid error when testing through jest about removing
 event listenner

Avoid:
```
  TypeError: Cannot read properties of null (reading 'removeEventListener')
        at extended.disconnect (/home/runner/work/openfoodnetwork/openfoodnetwork/app/webpacker/controllers/dropdown_controller.js:32:14)
        at Context.disconnect (/home/runner/work/openfoodnetwork/openfoodnetwork/node_modules/stimulus/dist/stimulus.umd.js:1441:25)
```
---
 spec/javascripts/stimulus/dropdown_controller_test.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/spec/javascripts/stimulus/dropdown_controller_test.js b/spec/javascripts/stimulus/dropdown_controller_test.js
index d60b311315..2f1bceaf4d 100644
--- a/spec/javascripts/stimulus/dropdown_controller_test.js
+++ b/spec/javascripts/stimulus/dropdown_controller_test.js
@@ -23,6 +23,10 @@ describe("Dropdown controller", () => {
       </div>`;
     });
 
+    afterEach(() => {
+      document.body.innerHTML = "";
+    });
+
     it("hide menu by default", () => {
       const menu = document.getElementById("menu");
       expect(menu.classList.contains("hidden")).toBe(true);

From 0fdf7876a607d897329ded5a90c4116aff8e5c7e Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 7 Jul 2023 09:27:43 +0200
Subject: [PATCH 6/7] Instanciate instance variable + use spread operator to be
 more concise

and efficient ;)
---
 .../controllers/dropdown_controller.js         | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
index 42d2eaa9c1..35d13511bb 100644
--- a/app/webpacker/controllers/dropdown_controller.js
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -4,6 +4,8 @@ export default class extends Controller {
   static targets = ["arrow", "menu"];
 
   connect() {
+    this.collapsedClass = this.arrowTarget.dataset.collapsedClass.split(" ");
+    this.expandedClass = this.arrowTarget.dataset.expandedClass.split(" ");
     this.#hide();
     document.addEventListener("click", this.#onBodyClick.bind(this));
   }
@@ -31,20 +33,12 @@ export default class extends Controller {
 
   #show() {
     this.menuTarget.classList.remove("hidden");
-    this.arrowTarget.dataset.collapsedClass.split(" ").forEach((className) => {
-      this.arrowTarget.classList.remove(className);
-    });
-    this.arrowTarget.dataset.expandedClass.split(" ").forEach((className) => {
-      this.arrowTarget.classList.add(className);
-    });
+    this.arrowTarget.classList.remove(...this.collapsedClass);
+    this.arrowTarget.classList.add(...this.expandedClass);
   }
   #hide() {
     this.menuTarget.classList.add("hidden");
-    this.arrowTarget.dataset.expandedClass.split(" ").forEach((className) => {
-      this.arrowTarget.classList.remove(className);
-    });
-    this.arrowTarget.dataset.collapsedClass.split(" ").forEach((className) => {
-      this.arrowTarget.classList.add(className);
-    });
+    this.arrowTarget.classList.remove(...this.expandedClass);
+    this.arrowTarget.classList.add(...this.collapsedClass);
   }
 }

From d03b88cf83939ad6ae0cb9a110ef1d688becace6 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Fri, 7 Jul 2023 17:34:10 +1000
Subject: [PATCH 7/7] Rename variables

To make it clear they are arrays
---
 app/webpacker/controllers/dropdown_controller.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/webpacker/controllers/dropdown_controller.js b/app/webpacker/controllers/dropdown_controller.js
index 35d13511bb..19a3dc8b7a 100644
--- a/app/webpacker/controllers/dropdown_controller.js
+++ b/app/webpacker/controllers/dropdown_controller.js
@@ -4,8 +4,8 @@ export default class extends Controller {
   static targets = ["arrow", "menu"];
 
   connect() {
-    this.collapsedClass = this.arrowTarget.dataset.collapsedClass.split(" ");
-    this.expandedClass = this.arrowTarget.dataset.expandedClass.split(" ");
+    this.collapsedClasses = this.arrowTarget.dataset.collapsedClass.split(" ");
+    this.expandedClasses = this.arrowTarget.dataset.expandedClass.split(" ");
     this.#hide();
     document.addEventListener("click", this.#onBodyClick.bind(this));
   }
@@ -33,12 +33,12 @@ export default class extends Controller {
 
   #show() {
     this.menuTarget.classList.remove("hidden");
-    this.arrowTarget.classList.remove(...this.collapsedClass);
-    this.arrowTarget.classList.add(...this.expandedClass);
+    this.arrowTarget.classList.remove(...this.collapsedClasses);
+    this.arrowTarget.classList.add(...this.expandedClasses);
   }
   #hide() {
     this.menuTarget.classList.add("hidden");
-    this.arrowTarget.classList.remove(...this.expandedClass);
-    this.arrowTarget.classList.add(...this.collapsedClass);
+    this.arrowTarget.classList.remove(...this.expandedClasses);
+    this.arrowTarget.classList.add(...this.collapsedClasses);
   }
 }