From 8ea7b54fe8ac306b831afa841b57f3d7550355d1 Mon Sep 17 00:00:00 2001 From: Zach Gollwitzer Date: Thu, 25 Apr 2024 14:55:39 -0400 Subject: [PATCH] Update self host settings page styles (#677) * Update page styles * Add new styles to self host settings page * Update self hosting page title --- .../stylesheets/application.tailwind.css | 4 + .../settings/hostings_controller.rb | 12 +- app/helpers/application_form_builder.rb | 5 + .../auto_submit_form_controller.js | 8 +- app/views/accounts/index.html.erb | 2 +- app/views/settings/billings/show.html.erb | 2 +- app/views/settings/hostings/show.html.erb | 105 ++++++++++++------ config/locales/views/settings/en.yml | 39 ++++++- .../settings/hostings_controller_test.rb | 16 +++ test/system/settings_test.rb | 6 +- 10 files changed, 153 insertions(+), 46 deletions(-) diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 54deb8e7..e8202bb0 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/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; } diff --git a/app/controllers/settings/hostings_controller.rb b/app/controllers/settings/hostings_controller.rb index 7d3a6639..2bae3b56 100644 --- a/app/controllers/settings/hostings_controller.rb +++ b/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 diff --git a/app/helpers/application_form_builder.rb b/app/helpers/application_form_builder.rb index 397367f0..61366cc9 100644 --- a/app/helpers/application_form_builder.rb +++ b/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" } diff --git a/app/javascript/controllers/auto_submit_form_controller.js b/app/javascript/controllers/auto_submit_form_controller.js index 4d470f91..56eb9fd2 100644 --- a/app/javascript/controllers/auto_submit_form_controller.js +++ b/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); }); } diff --git a/app/views/accounts/index.html.erb b/app/views/accounts/index.html.erb index c14d2aa3..c1b42f35 100644 --- a/app/views/accounts/index.html.erb +++ b/app/views/accounts/index.html.erb @@ -59,7 +59,7 @@ <% end %>
<% 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 %> diff --git a/app/views/settings/billings/show.html.erb b/app/views/settings/billings/show.html.erb index 76a5756a..62f0a19f 100644 --- a/app/views/settings/billings/show.html.erb +++ b/app/views/settings/billings/show.html.erb @@ -11,7 +11,7 @@
<%= 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 %> diff --git a/app/views/settings/hostings/show.html.erb b/app/views/settings/hostings/show.html.erb index 32697741..fe883d7d 100644 --- a/app/views/settings/hostings/show.html.erb +++ b/app/views/settings/hostings/show.html.erb @@ -2,43 +2,78 @@ <%= render "settings/nav" %> <% end %>
-

Self Hosting

-
- <%= form_with model: Setting.new, url: settings_hosting_path, method: :patch, local: true, html: { class: "space-y-4" } do |form| %> -
-

Render Deploy Hook

-

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

- <%= form.url_field :render_deploy_hook, label: "Render Deploy Hook", placeholder: "https://api.render.com/deploy/srv-xyz...", value: Setting.render_deploy_hook %> -
-
-

Auto Upgrades Setting

-

This setting controls how often your self hosted app will update and what method it uses to do so.

-
-
- <%= 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" %> +

<%= t(".page_title") %>

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

<%= t(".upgrades.title") %>

+

<%= t(".upgrades.description") %>

+
+
+ <%= 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 %> + <%= t(".upgrades.manual.title") %> +
+ + <%= t(".upgrades.manual.description") %> + + <% end %> +
+
+ <%= 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 %> + <%= t(".upgrades.latest_release.title") %> +
+ + <%= t(".upgrades.latest_release.description") %> + + <% end %> +
+
+ <%= 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 %> + <%= t(".upgrades.latest_commit.title") %> +
+ + <%= t(".upgrades.latest_commit.description") %> + + <% end %> +
- <% if Setting.upgrades_mode == "auto" %> -
- <%= 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 %> - Latest Release (suggested) - you will automatically be upgraded to the latest stable release of Maybe - <% end %> -
-
- <%= 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 %> - Latest Commit - you will automatically be upgraded any time the Maybe repo is updated - <% end %> -
- <% end %>
-
-
- -
+
+

<%= t(".provider_settings.title") %>

+

<%= t(".render_deploy_hook_description") %>

+ <%= 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" } %> +
+
+

<%= t(".smtp_settings.title") %>

+

<%= t(".smtp_settings.description") %>

+
+
+ <%= 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") %> +
+
+
+
+ <%= lucide_icon "mails", class: "w-6 h-6 text-gray-500" %> +
+
+

<%= t(".smtp_settings.send_test_email") %>

+

<%= t(".smtp_settings.send_test_email_description") %>

+
+
+
+ +
+
+
+
+ <% end %> <% end %>
<%= previous_setting("Billing", settings_billing_path) %> diff --git a/config/locales/views/settings/en.yml b/config/locales/views/settings/en.yml index 1ec712e0..a3e4f443 100644 --- a/config/locales/views/settings/en.yml +++ b/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 diff --git a/test/controllers/settings/hostings_controller_test.rb b/test/controllers/settings/hostings_controller_test.rb index 80d8794a..09743ad1 100644 --- a/test/controllers/settings/hostings_controller_test.rb +++ b/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 diff --git a/test/system/settings_test.rb b/test/system/settings_test.rb index 76565b89..4c10fb05 100644 --- a/test/system/settings_test.rb +++ b/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