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 @@
+
\ 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 @@
-<%= notice %>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
Conditions
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 @@
-<%= notice %>
+<%= 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 @@
Emails
<% end %>
-<%= notice %>
+<%= 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 @@
Email #
<% end %>
-<%= notice %>
+<%= 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 @@
Filters
<% end %>
-<%= notice %>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
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 @@
Filter #<%= @filter.id %>
<% end %>
-<%= notice %>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
<%= link_to '← Back to filters list', filters_path %>
@@ -12,18 +12,21 @@
Conditions
- <%= render(@filter.conditions) || "
No conditions yet" %>
+
+ <%= render(@filter.conditions) || "No conditions yet" %>
+ <%= turbo_frame_tag "new_condition" do %>
+ <%= link_to "Add a new condition", new_filter_condition_path(@filter) %>
+ <% end %>
+
-<%= turbo_frame_tag "new_condition" do %>
- <%= link_to "Add a new condition", new_filter_condition_path(@filter) %>
-<% end %>
Operations
- <%= render(@filter.operations) || "
No operations yet" %>
+
+ <%= render(@filter.operations) || "No operations yet" %>
+ <%= turbo_frame_tag "new_operation" do %>
+ <%= link_to "Add a new operation", new_filter_operation_path(@filter) %>
+ <% end %>
+
-
-<%= 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 @@
-<%= notice %>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
Metadata Mappings
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 @@
-<%= notice %>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
Input:
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 @@
-
<%= notice %>
+<%= render(FlashNoticeComponent.new) { notice } if notice.present? %>
Operations
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 @@
-<%= notice %>
+<%= 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(
+ # %(Hello, components!),
+ # render_inline(FlashNoticeComponent.new(message: "Hello, components!")).css("span").to_html
+ # )
+ end
+end