From 55fd4307a1e91d81df0f60497dfc75c4e388dd7d Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Mon, 19 Sep 2022 16:13:41 +0200
Subject: [PATCH] refactor(header/notice): convert JS to stimulus

---
 .../notice_component/notice_component.html.haml  |  4 ++--
 .../controllers/dsfr_header_controller.ts        | 13 +++++++++++++
 app/javascript/entrypoints/application.js        |  5 +----
 app/javascript/new_design/header.js              | 16 ----------------
 app/views/layouts/_header.haml                   |  4 ++--
 5 files changed, 18 insertions(+), 24 deletions(-)
 create mode 100644 app/javascript/controllers/dsfr_header_controller.ts
 delete mode 100644 app/javascript/new_design/header.js

diff --git a/app/components/dsfr/notice_component/notice_component.html.haml b/app/components/dsfr/notice_component/notice_component.html.haml
index 30bbae4ad..3ff0e4642 100644
--- a/app/components/dsfr/notice_component/notice_component.html.haml
+++ b/app/components/dsfr/notice_component/notice_component.html.haml
@@ -1,9 +1,9 @@
-.fr-notice.fr-notice--info
+.fr-notice.fr-notice--info{ "data-dsfr-header-target": "notice" }
   .fr-container
     .fr-notice__body
       %p.fr-notice__title
         = title
 
       - if closable?
-        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), onclick: 'javascript:DS.closeNoticeInfo(event)' }
+        %button.fr-btn--close.fr-btn{ title: t('.close_notice'), data: { action: "dsfr-header#closeNotice" } }
           = t('.close_notice')
diff --git a/app/javascript/controllers/dsfr_header_controller.ts b/app/javascript/controllers/dsfr_header_controller.ts
new file mode 100644
index 000000000..7015ef29a
--- /dev/null
+++ b/app/javascript/controllers/dsfr_header_controller.ts
@@ -0,0 +1,13 @@
+import { ApplicationController } from './application_controller';
+
+export class DSFRHeaderController extends ApplicationController {
+  static targets = ['notice'];
+
+  declare readonly noticeTarget: HTMLElement;
+
+  closeNotice() {
+    this.noticeTarget.parentNode?.removeChild(this.noticeTarget);
+
+    this.element.classList.remove('fr-header__with-notice-info');
+  }
+}
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index 9af25b61e..6e3ec2bc6 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -37,8 +37,6 @@ import {
   showNewAccountPasswordConfirmation
 } from '../new_design/fc-fusion';
 
-import { closeNoticeInfo } from '../new_design/header';
-
 const application = Application.start();
 registerControllers(application);
 
@@ -54,8 +52,7 @@ const DS = {
   showNewAccountPasswordConfirmation,
   replaceSemicolonByComma,
   acceptEmailSuggestion,
-  discardEmailSuggestionBox,
-  closeNoticeInfo
+  discardEmailSuggestionBox
 };
 
 // Start Rails helpers
diff --git a/app/javascript/new_design/header.js b/app/javascript/new_design/header.js
deleted file mode 100644
index 248a130c6..000000000
--- a/app/javascript/new_design/header.js
+++ /dev/null
@@ -1,16 +0,0 @@
-export function closeNoticeInfo(event) {
-  // DSFR usptream code
-  const notice = event.target.parentNode.parentNode.parentNode;
-  notice.parentNode.removeChild(notice);
-
-  // Update class accordingly because
-  // header style is slightly different with or without notice
-  if (document.querySelector) {
-    const klass = 'fr-header__with-notice-info';
-    const header = document.querySelector('.' + klass);
-
-    if (header) {
-      header.classList.remove(klass);
-    }
-  }
-}
diff --git a/app/views/layouts/_header.haml b/app/views/layouts/_header.haml
index 72768047b..a452923d1 100644
--- a/app/views/layouts/_header.haml
+++ b/app/views/layouts/_header.haml
@@ -6,7 +6,7 @@
 - is_expert_context = nav_bar_profile == :expert && expert_signed_in?
 - is_user_context = nav_bar_profile == :user
 - is_search_enabled = [params[:controller] == 'recherche', is_instructeur_context, is_expert_context, is_user_context && current_user.dossiers.count].any?
-%header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner" }
+%header{ class: ["fr-header", content_for?(:notice_info) && "fr-header__with-notice-info"], role: "banner", "data-controller": "dsfr-header" }
   .fr-header__body
     .fr-container
       .fr-header__body-row
@@ -101,5 +101,5 @@
             - if current_user.expert && current_expert.avis_summary[:total] > 0
               = render partial: 'layouts/header/avis_tab', locals: { current_expert: current_expert }
 
-= yield(:notice_info)
+  = yield(:notice_info)