extraction d'un

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
 

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)

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>

app/components/flash_notice_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class FlashNoticeComponent < ViewComponent::Base
+  def initialize
+  end
+
+end

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>
 

app/views/conditions/show.html.erb

@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= render @condition %>
 

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 %>

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 %>
 

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">

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 %>

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>
 

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>

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>
 

app/views/operations/show.html.erb

@@ -1,4 +1,4 @@
-<p id="notice"><%= notice %></p>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
 
 <%= render @operation %>
 

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