Update self host settings page styles (#677)

* Update page styles

* Add new styles to self host settings page

* Update self hosting page title

app/assets/stylesheets/application.tailwind.css

@@ -48,6 +48,10 @@
     @apply disabled:opacity-50;
   }
 
+  .form-field__radio {
+    @apply text-gray-900;
+  }
+
   .form-field__submit {
     @apply w-full p-3 text-center text-white bg-black rounded-lg hover:bg-gray-700;
   }

app/controllers/settings/hostings_controller.rb

@@ -13,7 +13,7 @@ class Settings::HostingsController < ApplicationController
       redirect_to settings_hosting_path, notice: t(".success")
     else
       flash.now[:error] = @errors.first.message
-      render :edit, status: :unprocessable_entity
+      render :show, status: :unprocessable_entity
     end
   end
 
@@ -29,7 +29,7 @@ class Settings::HostingsController < ApplicationController
         end
       end
 
-      if hosting_params[:upgrades_mode] == "auto" && hosting_params[:render_deploy_hook].blank?
+      if hosting_params[:upgrades_mode] != "manual" && hosting_params[:render_deploy_hook].blank?
         @errors.add(:render_deploy_hook, t("settings.hostings.update.render_deploy_hook_error"))
       end
 
@@ -37,7 +37,13 @@ class Settings::HostingsController < ApplicationController
     end
 
     def hosting_params
-      params.require(:setting).permit(:render_deploy_hook, :upgrades_mode, :upgrades_target)
+      permitted_params = params.require(:setting).permit(:render_deploy_hook, :upgrades_mode)
+
+      result = {}
+      result[:upgrades_mode] = permitted_params[:upgrades_mode] == "manual" ? "manual" : "auto" if permitted_params.key?(:upgrades_mode)
+      result[:render_deploy_hook] = permitted_params[:render_deploy_hook] if permitted_params.key?(:render_deploy_hook)
+      result[:upgrades_target] = permitted_params[:upgrades_mode] unless permitted_params[:upgrades_mode] == "manual" if permitted_params.key?(:upgrades_mode)
+      result
     end
 
     def verify_hosting_mode

app/helpers/application_form_builder.rb

@@ -56,6 +56,11 @@ class ApplicationFormBuilder < ActionView::Helpers::FormBuilder
     end
   end
 
+  def radio_button(method, tag_value, options = {})
+    default_options = { class: "form-field__radio" }
+    merged_options = default_options.merge(options)
+    super(method, tag_value, merged_options)
+  end
 
   def grouped_select(method, grouped_choices, options = {}, html_options = {})
     default_options = { class: "form-field__input" }

app/javascript/controllers/auto_submit_form_controller.js

@@ -10,13 +10,17 @@ export default class extends Controller {
 
   connect() {
     this.autoTargets.forEach((element) => {
-      element.addEventListener(this.triggerEventValue, this.handleInput);
+      const event =
+        element.dataset.autosubmitTriggerEvent || this.triggerEventValue;
+      element.addEventListener(event, this.handleInput);
     });
   }
 
   disconnect() {
     this.autoTargets.forEach((element) => {
-      element.removeEventListener(this.triggerEventValue, this.handleInput);
+      const event =
+        element.dataset.autosubmitTriggerEvent || this.triggerEventValue;
+      element.removeEventListener(event, this.handleInput);
     });
   }
 

app/views/accounts/index.html.erb

@@ -59,7 +59,7 @@
   <% end %>
   <div class="flex justify-between gap-4">
     <% if self_hosted? %>
-      <%= previous_setting("Self Hosting", settings_hosting_path) %>
+      <%= previous_setting("Self-Hosting", settings_hosting_path) %>
     <% else %>
       <%= previous_setting("Billing", settings_billing_path) %>
     <% end %>

app/views/settings/billings/show.html.erb

@@ -11,7 +11,7 @@
   <div class="flex justify-between gap-4">
     <%= previous_setting("Security", settings_security_path) %>
     <% if self_hosted? %>
-      <%= next_setting("Self Hosting", settings_hosting_path) %>
+      <%= next_setting("Self-Hosting", settings_hosting_path) %>
     <% else %>
       <%= next_setting("Accounts", accounts_path) %>
     <% end %>

app/views/settings/hostings/show.html.erb

@@ -2,43 +2,78 @@
   <%= render "settings/nav" %>
 <% end %>
 <div class="space-y-4">
-  <h1 class="text-3xl font-semibold font-display">Self Hosting</h1>
-  <hr>
-  <%= form_with model: Setting.new, url: settings_hosting_path, method: :patch, local: true, html: { class: "space-y-4" } do |form| %>
-    <section class="space-y-3">
-      <h2 class="text-2xl font-semibold">Render Deploy Hook</h2>
-      <p class="text-gray-500">You must fill this in so your app can trigger upgrades when Maybe releases upgrades.  Learn more about deploy hooks and how they work in the <%= link_to "Render documentation", "https://docs.render.com/docs/deploy-hooks", target: "_blank", rel: "noopener noreferrer", class: "text-blue-500 hover:underline" %>.</p>
-      <%= form.url_field :render_deploy_hook, label: "Render Deploy Hook", placeholder: "https://api.render.com/deploy/srv-xyz...", value: Setting.render_deploy_hook %>
-    </section>
-    <section class="space-y-3">
-      <h2 class="text-2xl font-semibold">Auto Upgrades Setting</h2>
-      <p class="text-gray-500">This setting controls how often your self hosted app will update and what method it uses to do so.</p>
-      <div class="space-y-2">
-        <div class="flex items-center gap-2">
-          <%= form.check_box :upgrades_mode, { checked: Setting.upgrades_mode == "auto", unchecked_value: "manual" }, "auto", "manual" %>
-          <%= form.label :upgrades_mode, "Enable auto upgrades", class: "text-gray-900" %>
+  <h1 class="text-gray-900 text-xl font-medium mb-4"><%= t(".page_title") %></h1>
+  <%= settings_section title: t(".general_settings_title") do %>
+    <%= form_with model: Setting.new, url: settings_hosting_path, method: :patch, local: true, html: { class: "space-y-6", data: { controller: "auto-submit-form", "auto-submit-form-trigger-event-value" => "blur" } } do |form| %>
+      <div>
+        <h2 class="font-medium mb-1"><%= t(".upgrades.title") %></h2>
+        <p class="text-gray-500 text-sm mb-4"><%= t(".upgrades.description") %></p>
+        <div class="space-y-4">
+          <div class="flex items-center gap-4">
+            <%= form.radio_button :upgrades_mode, "manual", checked: Setting.upgrades_mode == "manual", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
+            <%= form.label :upgrades_mode_manual, t(".upgrades.manual.title"), class: "text-gray-900 text-sm" do %>
+              <span class="font-medium"><%= t(".upgrades.manual.title") %></span>
+              <br>
+              <span class="text-gray-500">
+                <%= t(".upgrades.manual.description") %>
+              </span>
+            <% end %>
+          </div>
+          <div class="flex items-center gap-4">
+            <%= form.radio_button :upgrades_mode, "release", checked: Setting.upgrades_mode == "auto" && Setting.upgrades_target == "release", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
+            <%= form.label :upgrades_mode_release, t(".upgrades.latest_release.title"), class: "text-gray-900 text-sm" do %>
+              <span class="font-medium"><%= t(".upgrades.latest_release.title") %></span>
+              <br>
+              <span class="text-gray-500">
+                <%= t(".upgrades.latest_release.description") %>
+              </span>
+            <% end %>
+          </div>
+          <div class="flex items-center gap-4">
+            <%= form.radio_button :upgrades_mode, "commit", checked: Setting.upgrades_mode == "auto" && Setting.upgrades_target == "commit", data: { "auto-submit-form-target" => "auto", "autosubmit-trigger-event": "input" } %>
+            <%= form.label :upgrades_mode_commit, t(".upgrades.latest_commit.title"), class: "text-gray-900 text-sm" do %>
+              <span class="font-medium"><%= t(".upgrades.latest_commit.title") %></span>
+              <br>
+              <span class="text-gray-500">
+                <%= t(".upgrades.latest_commit.description") %>
+              </span>
+            <% end %>
+          </div>
         </div>
-        <% if Setting.upgrades_mode == "auto" %>
-          <div class="flex items-center gap-2">
-            <%= form.radio_button :upgrades_target, "release", checked: Setting.upgrades_target == "release" %>
-            <%= form.label :upgrades_target_release, class: Setting.upgrades_target == "release" ? "text-gray-900" : "text-gray-500" do %>
-              <span class="font-semibold">Latest Release (suggested)</span> - you will automatically be upgraded to the latest stable release of Maybe
-            <% end %>
-          </div>
-          <div class="flex items-center gap-2">
-            <%= form.radio_button :upgrades_target, "commit", checked: Setting.upgrades_target == "commit" %>
-            <%= form.label :upgrades_target_commit, class: Setting.upgrades_target == "commit" ? "text-gray-900" : "text-gray-500" do %>
-              <span class="font-semibold">Latest Commit</span> - you will automatically be upgraded any time the Maybe repo is updated
-            <% end %>
-          </div>
-        <% end %>
       </div>
-    </section>
-    <div class="fixed right-5 bottom-5">
-      <button type="submit" class="flex items-center justify-center w-12 h-12 mb-2 bg-black rounded-full shrink-0 grow-0 hover:bg-gray-600">
-        <%= inline_svg_tag("icn-check.svg", class: "text-white fill-current") %>
-      </button>
-    </div>
+      <div>
+        <h2 class="font-medium mb-1"><%= t(".provider_settings.title") %></h2>
+        <p class="text-gray-500 text-sm mb-4"><%= t(".render_deploy_hook_description") %></p>
+        <%= form.url_field :render_deploy_hook, label: t(".render_deploy_hook_label"), placeholder: t(".render_deploy_hook_placeholder"), value: Setting.render_deploy_hook, data: { "auto-submit-form-target" => "auto" } %>
+      </div>
+      <div>
+        <h2 class="font-medium mb-1"><%= t(".smtp_settings.title") %></h2>
+        <p class="text-gray-500 text-sm mb-4"><%= t(".smtp_settings.description") %></p>
+        <div class="space-y-4">
+          <div class="space-y-3">
+            <%= form.text_field :smtp_domain, disabled: true, label: t(".smtp_settings.domain"), placeholder: t(".smtp_settings.domain_placeholder") %>
+            <%= form.text_field :smtp_host, disabled: true, label: t(".smtp_settings.host"), placeholder: t(".smtp_settings.host_placeholder") %>
+            <%= form.number_field :smtp_port, disabled: true, label: t(".smtp_settings.port"), placeholder: t(".smtp_settings.port_placeholder") %>
+            <%= form.text_field :smtp_username, disabled: true, label: t(".smtp_settings.username"), placeholder: t(".smtp_settings.username_placeholder") %>
+            <%= form.password_field :smtp_password, disabled: true, label: t(".smtp_settings.password"), placeholder: t(".smtp_settings.password_placeholder") %>
+          </div>
+          <div class="flex items-center justify-between bg-white border border-alpha-black-100 p-4 rounded-lg">
+            <div class="flex items-center gap-3">
+              <div class="w-10 h-10 rounded-full bg-gray-25 flex items-center justify-center">
+                <%= lucide_icon "mails", class: "w-6 h-6 text-gray-500" %>
+              </div>
+              <div>
+                <p class="text-gray-900 font-medium text-sm"><%= t(".smtp_settings.send_test_email") %></p>
+                <p class="text-gray-500 text-sm"><%= t(".smtp_settings.send_test_email_description") %></p>
+              </div>
+            </div>
+            <div>
+              <button type="button" class="bg-gray-50 text-gray-900 text-sm font-medium rounded-lg px-3 py-2 cursor-not-allowed" disabled><%= t(".smtp_settings.send_test_email_button") %></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
   <% end %>
   <div class="flex justify-between gap-4">
     <%= previous_setting("Billing", settings_billing_path) %>

config/locales/views/settings/en.yml

@@ -2,6 +2,43 @@
 en:
   settings:
     hostings:
+      show:
+        general_settings_title: General Settings
+        page_title: Self-Hosting
+        provider_settings:
+          title: Provider Settings
+        render_deploy_hook_description: Input the deploy hook URL provided by Render
+        render_deploy_hook_label: Render Deploy Hook URL
+        render_deploy_hook_placeholder: https://api.render.com/deploy/srv-xyz...
+        smtp_settings:
+          description: Configure outgoing mail server settings for notifications and
+            alerts
+          domain: App Domain
+          domain_placeholder: mydomain.com
+          host: SMTP Host
+          host_placeholder: smtp.gmail.com
+          password: Password
+          password_placeholder: "*******"
+          port: Port
+          port_placeholder: 587
+          send_test_email: Send Test Email
+          send_test_email_button: Send Test Email
+          send_test_email_description: Verify SMTP settings by sending a test email
+          title: SMTP Email Configuration (coming soon...)
+          username: Username
+          username_placeholder: username@gmail.com
+        upgrades:
+          description: Choose how your application receives updates
+          latest_commit:
+            description: Automatically update to the latest commit (unstable)
+            title: Latest Commit
+          latest_release:
+            description: Automatically update to the most recent release (stable)
+            title: Latest Release
+          manual:
+            description: You control when to download and install updates
+            title: Manual
+          title: Auto upgrade
       update:
         render_deploy_hook_error: Render deploy hook must be provided to enable auto
           upgrades
@@ -18,7 +55,7 @@ en:
       profile_label: Account
       rules_label: Rules
       security_label: Security
-      self_hosting_label: Self Hosting
+      self_hosting_label: Self-Hosting
       whats_new_label: What's New
     nav_link_large:
       next: Next

test/controllers/settings/hostings_controller_test.rb

@@ -28,4 +28,20 @@ class Settings::HostingsControllerTest < ActionDispatch::IntegrationTest
 
     assert_equal NEW_RENDER_DEPLOY_HOOK, Setting.render_deploy_hook
   end
+
+  test "cannot set auto upgrades mode without a deploy hook" do
+    patch settings_hosting_url, params: { setting: { upgrades_mode: "auto" } }
+    assert_response :unprocessable_entity
+  end
+
+  test "can choose auto upgrades mode with a deploy hook" do
+    NEW_RENDER_DEPLOY_HOOK = "https://api.render.com/deploy/srv-abc123"
+    assert_nil Setting.render_deploy_hook
+
+    patch settings_hosting_url, params: { setting: { render_deploy_hook: NEW_RENDER_DEPLOY_HOOK, upgrades_mode: "release" } }
+
+    assert_equal "auto", Setting.upgrades_mode
+    assert_equal "release", Setting.upgrades_target
+    assert_equal NEW_RENDER_DEPLOY_HOOK, Setting.render_deploy_hook
+  end
 end

test/system/settings_test.rb

@@ -42,7 +42,7 @@ class SettingsTest < ApplicationSystemTestCase
     end
 
     # Conditional nav items don't show by default
-    assert_no_text "Self Hosting"
+    assert_no_text "Self-Hosting"
   end
 
   test "can see conditional nav items" do
@@ -50,8 +50,8 @@ class SettingsTest < ApplicationSystemTestCase
 
     open_settings_from_sidebar
 
-    click_link "Self Hosting"
-    assert_selector "h1", text: "Self Hosting"
+    click_link "Self-Hosting"
+    assert_selector "h1", text: "Self-Hosting"
   end
 
   test "clicking back or hitting escape key takes user back page they opened settings from" do