Add setting to use browser locale if available (#404)

app/controllers/application_controller.rb

@@ -63,6 +63,18 @@ class ApplicationController < ActionController::Base
 
       # Set tenant locale
       I18n.locale = @tenant.locale
+
+      if @tenant_setting.use_browser_locale
+        user_preferred_language = request.env['HTTP_ACCEPT_LANGUAGE'].scan(/^[a-z]{2}/).first
+        available_locales = I18n.available_locales.map { |locale| locale.to_s[0, 2] }
+
+        if available_locales.include?(user_preferred_language)
+          # special cases
+          user_preferred_language = 'zh-CN' if user_preferred_language == 'zh'
+             
+          I18n.locale = user_preferred_language
+        end
+      end
     end
 
     def load_oauths

app/javascript/components/SiteSettings/General/GeneralSiteSettingsP.tsx

@@ -25,6 +25,7 @@ export interface ISiteSettingsGeneralForm {
   siteLogo: string;
   brandDisplaySetting: string;
   locale: string;
+  useBrowserLocale: boolean;
   rootBoardId?: string;
   customDomain?: string;
   isPrivate: boolean;
@@ -51,6 +52,7 @@ interface Props {
     siteLogo: string,
     brandDisplaySetting: string,
     locale: string,
+    useBrowserLocale: boolean,
     rootBoardId: number,
     customDomain: string,
     isPrivate: boolean,
@@ -86,6 +88,7 @@ const GeneralSiteSettingsP = ({
       siteLogo: originForm.siteLogo,
       brandDisplaySetting: originForm.brandDisplaySetting,
       locale: originForm.locale,
+      useBrowserLocale: originForm.useBrowserLocale,
       rootBoardId: originForm.rootBoardId,
       customDomain: originForm.customDomain,
       isPrivate: originForm.isPrivate,
@@ -105,6 +108,7 @@ const GeneralSiteSettingsP = ({
       data.siteLogo,
       data.brandDisplaySetting,
       data.locale,
+      data.useBrowserLocale,
       Number(data.rootBoardId),
       data.customDomain,
       data.isPrivate,
@@ -213,6 +217,16 @@ const GeneralSiteSettingsP = ({
             </select>
           </div>
 
+          <div className="formGroup">
+            <div className="checkboxSwitch">
+              <input {...register('useBrowserLocale')} type="checkbox" id="use_browser_locale_checkbox" />
+              <label htmlFor="use_browser_locale_checkbox">{ getLabel('tenant_setting', 'use_browser_locale') }</label>
+              <SmallMutedText>
+                { I18n.t('site_settings.general.use_browser_locale_help') }
+              </SmallMutedText>
+            </div>
+          </div>
+
           <div className="formGroup">
             <label htmlFor="rootBoardId">{ getLabel('tenant_setting', 'root_board_id') }</label>
             <select

app/javascript/containers/GeneralSiteSettings.tsx

@@ -16,6 +16,7 @@ const mapDispatchToProps = (dispatch: any) => ({
     siteLogo: string,
     brandDisplaySetting: TenantSettingBrandDisplay,
     locale: string,
+    useBrowserLocale: boolean,
     rootBoardId: number,
     customDomain: string,
     isPrivate: boolean,
@@ -33,6 +34,7 @@ const mapDispatchToProps = (dispatch: any) => ({
       siteLogo,
       tenantSetting: {
         brand_display: brandDisplaySetting,
+        use_browser_locale: useBrowserLocale,
         root_board_id: rootBoardId,
         is_private: isPrivate,
         allow_anonymous_feedback: allowAnonymousFeedback,

app/javascript/interfaces/ITenantSetting.ts

@@ -41,6 +41,7 @@ export type TenantSettingCollapseBoardsInHeader =
 
 interface ITenantSetting {
   brand_display?: TenantSettingBrandDisplay;
+  use_browser_locale?: boolean;
   root_board_id?: number;
   is_private?: boolean;
   email_registration_policy?: TenantSettingEmailRegistrationPolicy;

app/policies/tenant_setting_policy.rb

@@ -3,6 +3,7 @@ class TenantSettingPolicy < ApplicationPolicy
     if user.admin?
       [
         :brand_display,
+        :use_browser_locale,
         :root_board_id,
         :is_private,
         :email_registration_policy,

app/views/site_settings/general.html.erb

@@ -19,7 +19,8 @@
             feedbackApprovalPolicy: @tenant_setting.feedback_approval_policy,
             showRoadmapInHeader: @tenant_setting.show_roadmap_in_header,
             collapseBoardsInHeader: @tenant_setting.collapse_boards_in_header,
-            locale: @tenant.locale
+            locale: @tenant.locale,
+            useBrowserLocale: @tenant_setting.use_browser_locale,
           },
           boards: @tenant.boards.order(order: :asc),
           isMultiTenant: Rails.application.multi_tenancy?,

config/locales/backend/backend.en.yml

@@ -125,6 +125,7 @@ en:
         custom_domain: 'Custom domain'
       tenant_setting:
         brand_display: 'Display'
+        use_browser_locale: 'Use browser language'
         is_private: 'Private site'
         email_registration_policy: 'Email registration policy'
         allowed_email_domains: 'Allowed email domains'

config/locales/en.yml

@@ -183,6 +183,7 @@ en:
       brand_setting_name: 'Name only'
       brand_setting_logo: 'Logo only'
       brand_setting_none: 'None'
+      use_browser_locale_help: "If you enable this setting, the feedback space will be displayed in the user's browser preferred language. If the language is not available, the default language will be used."
       subtitle_privacy: 'Privacy'
       is_private_help: 'If you enable this setting, only logged in users will be able to see the content of the feedback space.'
       subtitle_moderation: 'Moderation'

db/migrate/20240908121603_add_use_browser_locale_to_tenant_settings.rb

@@ -0,0 +1,5 @@
+class AddUseBrowserLocaleToTenantSettings < ActiveRecord::Migration[6.1]
+  def change
+    add_column :tenant_settings, :use_browser_locale, :boolean, default: false, null: false
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 2024_09_02_151945) do
+ActiveRecord::Schema.define(version: 2024_09_08_121603) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -182,6 +182,7 @@ ActiveRecord::Schema.define(version: 2024_09_02_151945) do
     t.boolean "is_private", default: false, null: false
     t.integer "email_registration_policy", default: 0, null: false
     t.string "allowed_email_domains"
+    t.boolean "use_browser_locale", default: false, null: false
     t.index ["tenant_id"], name: "index_tenant_settings_on_tenant_id"
   end