From bd150c87049e8f8b2d5b4978c73d62555422dd52 Mon Sep 17 00:00:00 2001
From: Jeremy Lecour <jlecour@evolix.fr>
Date: Thu, 4 Mar 2021 22:07:42 +0100
Subject: [PATCH] extraction d'un

---
 Gemfile                                       |  3 +++
 Gemfile.lock                                  |  3 +++
 .../flash_notice_component.html.erb           | 15 ++++++++++++
 app/components/flash_notice_component.rb      |  7 ++++++
 app/views/conditions/index.html.erb           |  2 +-
 app/views/conditions/show.html.erb            |  2 +-
 app/views/emails/index.html.erb               |  2 +-
 app/views/emails/show.html.erb                |  2 +-
 app/views/filters/index.html.erb              |  2 +-
 app/views/filters/show.html.erb               | 23 +++++++++++--------
 app/views/metadata_mappings/index.html.erb    |  2 +-
 app/views/metadata_mappings/show.html.erb     |  2 +-
 app/views/operations/index.html.erb           |  2 +-
 app/views/operations/show.html.erb            |  2 +-
 .../components/flash_notice_component_test.rb | 10 ++++++++
 15 files changed, 60 insertions(+), 19 deletions(-)
 create mode 100644 app/components/flash_notice_component.html.erb
 create mode 100644 app/components/flash_notice_component.rb
 create mode 100644 test/components/flash_notice_component_test.rb

diff --git a/Gemfile b/Gemfile
index 1fecd3a..3bc55bb 100644
--- a/Gemfile
+++ b/Gemfile
@@ -61,6 +61,9 @@ gem 'devise'
 # Use Kaminari for pagination
 gem "kaminari"
 
+# Use ViewComponents for … view components, duh!
+gem "view_component", require: "view_component/engine"
+
 # Reduces boot times through caching; required in config/boot.rb
 gem 'bootsnap', '>= 1.4.4', require: false
 
diff --git a/Gemfile.lock b/Gemfile.lock
index f8372b0..c999d43 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -249,6 +249,8 @@ GEM
       rails (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
+    view_component (2.26.1)
+      activesupport (>= 5.0.0, < 7.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.1.0)
@@ -303,6 +305,7 @@ DEPENDENCIES
   sqlite3 (~> 1.4)
   tailwindcss-rails
   tzinfo-data
+  view_component
   web-console (>= 4.1.0)
   webdrivers
   webpacker (~> 5.0)
diff --git a/app/components/flash_notice_component.html.erb b/app/components/flash_notice_component.html.erb
new file mode 100644
index 0000000..e46e50b
--- /dev/null
+++ b/app/components/flash_notice_component.html.erb
@@ -0,0 +1,15 @@
+<div class="rounded-md bg-green-50 p-4">
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <!-- Heroicon name: solid/information-circle -->
+      <svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+      </svg>
+    </div>
+    <div class="ml-3 flex-1 md:flex md:justify-between">
+      <p class="text-sm text-green-700">
+        <%= content %>
+      </p>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/app/components/flash_notice_component.rb b/app/components/flash_notice_component.rb
new file mode 100644
index 0000000..f24c1b6
--- /dev/null
+++ b/app/components/flash_notice_component.rb
@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class FlashNoticeComponent < ViewComponent::Base
+  def initialize
+  end
+
+end
diff --git a/app/views/conditions/index.html.erb b/app/views/conditions/index.html.erb
index a4ddc2d..bbe1fd2 100644
--- a/app/views/conditions/index.html.erb
+++ b/app/views/conditions/index.html.erb
@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <h1>Conditions</h1>
 
diff --git a/app/views/conditions/show.html.erb b/app/views/conditions/show.html.erb
index de41125..00d03e7 100644
--- a/app/views/conditions/show.html.erb
+++ b/app/views/conditions/show.html.erb
@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= render @condition %>
 
diff --git a/app/views/emails/index.html.erb b/app/views/emails/index.html.erb
index 73a8f72..28244ce 100644
--- a/app/views/emails/index.html.erb
+++ b/app/views/emails/index.html.erb
@@ -2,7 +2,7 @@
   <h1>Emails</h1>
 <% end %>
 
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= turbo_frame_tag "emails" do %>
   <%= render partial: "list", object: @emails, as: :emails %>
diff --git a/app/views/emails/show.html.erb b/app/views/emails/show.html.erb
index ed368b9..4840afc 100644
--- a/app/views/emails/show.html.erb
+++ b/app/views/emails/show.html.erb
@@ -2,7 +2,7 @@
   <h1>Email #</h1>
 <% end %>
 
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= turbo_stream_from @email %>
 
diff --git a/app/views/filters/index.html.erb b/app/views/filters/index.html.erb
index e880396..aec9233 100644
--- a/app/views/filters/index.html.erb
+++ b/app/views/filters/index.html.erb
@@ -2,7 +2,7 @@
   <h1>Filters</h1>
 <% end %>
 
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <div class="shadow overflow-hidden border-b border-gray-200 rounded-lg">
   <table class="min-w-full divide-y divide-gray-200">
diff --git a/app/views/filters/show.html.erb b/app/views/filters/show.html.erb
index 182e5b0..5cbe308 100644
--- a/app/views/filters/show.html.erb
+++ b/app/views/filters/show.html.erb
@@ -2,7 +2,7 @@
   <h1>Filter #<%= @filter.id %></h1>
 <% end %>
 
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= link_to '← Back to filters list', filters_path %>
 
@@ -12,18 +12,21 @@
 
 <div id="conditions">
   <h2 class="text-xl py-1 font-semibold">Conditions</h2>
-  <%= render(@filter.conditions) || "<i class='italic'>No conditions yet</i>" %>
+  <div class="ml-6">
+    <%= render(@filter.conditions) || "<i class='italic'>No conditions yet</i>" %>
+    <%= turbo_frame_tag "new_condition" do %>
+      <%= link_to "Add a new condition", new_filter_condition_path(@filter) %>
+    <% end %>
+  </div>
 </div>
 
-<%= turbo_frame_tag "new_condition" do %>
-  <%= link_to "Add a new condition", new_filter_condition_path(@filter) %>
-<% end %>
 
 <div id="operations">
   <h2 class="text-xl py-1 font-semibold">Operations</h2>
-  <%= render(@filter.operations) || "<i class='italic'>No operations yet</i>" %>
+  <div class="ml-6">
+    <%= render(@filter.operations) || "<i class='italic'>No operations yet</i>" %>
+    <%= turbo_frame_tag "new_operation" do %>
+      <%= link_to "Add a new operation", new_filter_operation_path(@filter) %>
+    <% end %>
+  </div>
 </div>
-
-<%= turbo_frame_tag "new_operation" do %>
-  <%= link_to "Add a new operation", new_filter_operation_path(@filter) %>
-<% end %>
\ No newline at end of file
diff --git a/app/views/metadata_mappings/index.html.erb b/app/views/metadata_mappings/index.html.erb
index 9098c93..341d6ca 100644
--- a/app/views/metadata_mappings/index.html.erb
+++ b/app/views/metadata_mappings/index.html.erb
@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <h1>Metadata Mappings</h1>
 
diff --git a/app/views/metadata_mappings/show.html.erb b/app/views/metadata_mappings/show.html.erb
index bbf33b0..de7c673 100644
--- a/app/views/metadata_mappings/show.html.erb
+++ b/app/views/metadata_mappings/show.html.erb
@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <p>
   <strong>Input:</strong>
diff --git a/app/views/operations/index.html.erb b/app/views/operations/index.html.erb
index cf5877a..30e5517 100644
--- a/app/views/operations/index.html.erb
+++ b/app/views/operations/index.html.erb
@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <h1>Operations</h1>
 
diff --git a/app/views/operations/show.html.erb b/app/views/operations/show.html.erb
index ff812b1..068b3e8 100644
--- a/app/views/operations/show.html.erb
+++ b/app/views/operations/show.html.erb
@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= render @operation %>
 
diff --git a/test/components/flash_notice_component_test.rb b/test/components/flash_notice_component_test.rb
new file mode 100644
index 0000000..146c247
--- /dev/null
+++ b/test/components/flash_notice_component_test.rb
@@ -0,0 +1,10 @@
+require "test_helper"
+
+class FlashNoticeComponentTest < ViewComponent::TestCase
+  def test_component_renders_something_useful
+    # assert_equal(
+    #   %(<span>Hello, components!</span>),
+    #   render_inline(FlashNoticeComponent.new(message: "Hello, components!")).css("span").to_html
+    # )
+  end
+end