From fc4940ccb699fe2b581b2c4a3e0dd2876e8fce20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Sun, 31 Mar 2024 18:45:50 +0200
Subject: [PATCH] Move edit page and new page views to components

This way we can simplify setting the title and styling the link in the
header. We're also fixing the unnecessary padding introduced by the
`column` classes, which caused the header not to be aligned with the
rest of the elements surrounding it. We're still keeping it the margin
used in the `row` classes so it's aligned with the rest of the form;
ideally, we would remove the `row` classes in the rest of the form and
in the whole admin section, but this isn't something we can tackle right
now.

Note that, in the CSS, the `margin-left: auto` property needs to be
included after `@include regular-button` because that mixin overwrites
the `margin-left` property. Since we're modifying this code, we're
making it compatible with RTL text, using `$global-left` instead of
`left`.
---
 app/assets/stylesheets/admin.scss               | 17 +++++++++++++++--
 .../pages/edit_component.html.erb               |  8 ++++++++
 .../site_customization/pages/edit_component.rb  | 12 ++++++++++++
 .../pages/new_component.html.erb                |  6 ++++++
 .../site_customization/pages/new_component.rb   | 12 ++++++++++++
 .../site_customization/pages/edit.html.erb      | 15 +--------------
 .../admin/site_customization/pages/new.html.erb | 13 +------------
 7 files changed, 55 insertions(+), 28 deletions(-)
 create mode 100644 app/components/admin/site_customization/pages/edit_component.html.erb
 create mode 100644 app/components/admin/site_customization/pages/edit_component.rb
 create mode 100644 app/components/admin/site_customization/pages/new_component.html.erb
 create mode 100644 app/components/admin/site_customization/pages/new_component.rb

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index b19590a97..ed3f0dda5 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -31,6 +31,15 @@ $table-header:   #ecf1f6;
 .admin {
   @include admin-layout;
 
+  main {
+    &.admin-site-customization-pages-new,
+    &.admin-site-customization-pages-edit {
+      > header {
+        @include grid-row;
+      }
+    }
+  }
+
   h2 {
     font-weight: 100;
     margin-bottom: $line-height;
@@ -503,8 +512,12 @@ code {
 
   a,
   button {
-    @include regular-button;
-    margin-left: auto;
+    margin-#{$global-left}: auto;
+
+    &:not(.delete) {
+      @include regular-button;
+      margin-#{$global-left}: auto;
+    }
   }
 }
 
diff --git a/app/components/admin/site_customization/pages/edit_component.html.erb b/app/components/admin/site_customization/pages/edit_component.html.erb
new file mode 100644
index 000000000..327bbcbc7
--- /dev/null
+++ b/app/components/admin/site_customization/pages/edit_component.html.erb
@@ -0,0 +1,8 @@
+<% provide :main_class, "admin-site-customization-pages-edit" %>
+<%= back_link_to admin_site_customization_pages_path %>
+
+<%= header do %>
+  <%= link_to t("admin.site_customization.pages.index.delete"), admin_site_customization_page_path(page), method: :delete, class: "delete" %>
+<% end %>
+
+<%= render "form" %>
diff --git a/app/components/admin/site_customization/pages/edit_component.rb b/app/components/admin/site_customization/pages/edit_component.rb
new file mode 100644
index 000000000..0e1cf20f4
--- /dev/null
+++ b/app/components/admin/site_customization/pages/edit_component.rb
@@ -0,0 +1,12 @@
+class Admin::SiteCustomization::Pages::EditComponent < ApplicationComponent
+  include Header
+  attr_reader :page
+
+  def initialize(page)
+    @page = page
+  end
+
+  def title
+    t("admin.site_customization.pages.edit.title", page_title: page.title)
+  end
+end
diff --git a/app/components/admin/site_customization/pages/new_component.html.erb b/app/components/admin/site_customization/pages/new_component.html.erb
new file mode 100644
index 000000000..aee470c74
--- /dev/null
+++ b/app/components/admin/site_customization/pages/new_component.html.erb
@@ -0,0 +1,6 @@
+<% provide :main_class, "admin-site-customization-pages-new" %>
+<%= back_link_to admin_site_customization_pages_path %>
+
+<%= header %>
+
+<%= render "form" %>
diff --git a/app/components/admin/site_customization/pages/new_component.rb b/app/components/admin/site_customization/pages/new_component.rb
new file mode 100644
index 000000000..74c90de79
--- /dev/null
+++ b/app/components/admin/site_customization/pages/new_component.rb
@@ -0,0 +1,12 @@
+class Admin::SiteCustomization::Pages::NewComponent < ApplicationComponent
+  include Header
+  attr_reader :page
+
+  def initialize(page)
+    @page = page
+  end
+
+  def title
+    t("admin.site_customization.pages.new.title")
+  end
+end
diff --git a/app/views/admin/site_customization/pages/edit.html.erb b/app/views/admin/site_customization/pages/edit.html.erb
index 1965b636f..9484633df 100644
--- a/app/views/admin/site_customization/pages/edit.html.erb
+++ b/app/views/admin/site_customization/pages/edit.html.erb
@@ -1,14 +1 @@
-<% provide :title do %>
-  <%= t("admin.header.title") %> - <%= t("admin.menu.site_customization.pages") %> - <%= @page.title %>
-<% end %>
-
-<%= back_link_to admin_site_customization_pages_path %>
-<div class="row">
-  <div class="small-12 column">
-    <h2 class="inline-block"><%= t("admin.site_customization.pages.edit.title", page_title: @page.title) %></h2>
-
-    <%= link_to t("admin.site_customization.pages.index.delete"), admin_site_customization_page_path(@page), method: :delete, class: "delete float-right" %>
-  </div>
-</div>
-
-<%= render "form" %>
+<%= render Admin::SiteCustomization::Pages::EditComponent.new(@page) %>
diff --git a/app/views/admin/site_customization/pages/new.html.erb b/app/views/admin/site_customization/pages/new.html.erb
index dd6fdddd6..bb45bfb51 100644
--- a/app/views/admin/site_customization/pages/new.html.erb
+++ b/app/views/admin/site_customization/pages/new.html.erb
@@ -1,12 +1 @@
-<% provide :title do %>
-  <%= t("admin.header.title") %> - <%= t("admin.menu.site_customization.pages") %> - <%= t("admin.site_customization.pages.new.title") %>
-<% end %>
-
-<%= back_link_to admin_site_customization_pages_path %>
-<div class="row">
-  <div class="small-12 column">
-    <h2><%= t("admin.site_customization.pages.new.title") %></h2>
-  </div>
-</div>
-
-<%= render "form" %>
+<%= render Admin::SiteCustomization::Pages::NewComponent.new(@page) %>