From e7fe1b5a4b9dabd2b4db26f3a773a1e0fde74463 Mon Sep 17 00:00:00 2001
From: Zach Gollwitzer <zach.gollwitzer@gmail.com>
Date: Thu, 25 Apr 2024 16:31:12 -0400
Subject: [PATCH] Reorder settings nav and add translations (#680)

* Reorder settings nav and add translations

* Attempt to fix flaky system test
---
 app/views/settings/_nav.html.erb     | 77 +++++++++++++++++-----------
 config/locales/views/settings/en.yml |  3 ++
 test/system/settings_test.rb         |  3 ++
 3 files changed, 53 insertions(+), 30 deletions(-)

diff --git a/app/views/settings/_nav.html.erb b/app/views/settings/_nav.html.erb
index 9908a449..c78f9239 100644
--- a/app/views/settings/_nav.html.erb
+++ b/app/views/settings/_nav.html.erb
@@ -10,47 +10,64 @@
 <nav class="space-y-4">
   <section class="space-y-2">
     <div class="flex items-center gap-2">
-      <h3 class="uppercase text-gray-500 font-medium text-xs">General</h3>
+      <h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".general_section_title") %></h3>
       <div class="h-px bg-alpha-black-100 w-full"></div>
     </div>
     <ul class="space-y-1">
       <li>
         <%= sidebar_link_to t(".profile_label"), settings_profile_path, icon: "circle-user" %>
+      </li>
+      <li>
         <%= sidebar_link_to t(".preferences_label"), settings_preferences_path, icon: "bolt" %>
+      </li>
+      <li>
         <%= sidebar_link_to t(".notifications_label"), settings_notifications_path, icon: "bell-dot" %>
+      </li>
+      <li>
         <%= sidebar_link_to t(".security_label"), settings_security_path, icon: "shield-check" %>
+      </li>
+      <li>
         <%= sidebar_link_to t(".billing_label"), settings_billing_path, icon: "circle-dollar-sign" %>
       </li>
-    </ul>
-  </section>
-  <section class="space-y-2">
-    <div class="flex items-center gap-2">
-      <h3 class="uppercase text-gray-500 font-medium text-xs">Setup</h3>
-      <div class="h-px bg-alpha-black-100 w-full"></div>
-    </div>
-    <ul class="space-y-1">
-      <li>
-        <% if self_hosted? %>
+      <% if self_hosted? %>
+        <li>
           <%= sidebar_link_to t(".self_hosting_label"), settings_hosting_path, icon: "database" %>
-        <% end %>
-        <%= sidebar_link_to t(".accounts_label"), accounts_path, icon: "layers" %>
-        <%= sidebar_link_to t(".categories_label"), transactions_categories_path, icon: "tags" %>
-        <%= sidebar_link_to t(".merchants_label"), transactions_merchants_path, icon: "store" %>
-        <%= sidebar_link_to t(".rules_label"), transactions_rules_path, icon: "list-checks" %>
-      </li>
-    </ul>
-  </section>
-  <section class="space-y-2">
-    <div class="flex items-center gap-2">
-      <h3 class="uppercase text-gray-500 font-medium text-xs">More</h3>
-      <div class="h-px bg-alpha-black-100 w-full"></div>
-    </div>
-    <ul class="space-y-1">
+        </li>
+      <% end %>
       <li>
-        <%= sidebar_link_to t(".whats_new_label"), changelog_path, icon: "box" %>
-        <%= sidebar_link_to t(".feedback_label"), feedback_path, icon: "megaphone" %>
-        <%= sidebar_link_to t(".invite_label"), invites_path, icon: "gift" %>
+        <%= sidebar_link_to t(".accounts_label"), accounts_path, icon: "layers" %>
       </li>
-    </ul>
-  </section>
+    </li>
+  </ul>
+</section>
+<section class="space-y-2">
+  <div class="flex items-center gap-2">
+    <h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".transactions_section_title") %></h3>
+    <div class="h-px bg-alpha-black-100 w-full"></div>
+  </div>
+  <ul class="space-y-1">
+    <li>
+      <%= sidebar_link_to t(".categories_label"), transactions_categories_path, icon: "tags" %>
+    </li>
+    <li>
+      <%= sidebar_link_to t(".merchants_label"), transactions_merchants_path, icon: "store" %>
+    </li>
+    <li>
+      <%= sidebar_link_to t(".rules_label"), transactions_rules_path, icon: "list-checks" %>
+    </li>
+  </ul>
+</section>
+<section class="space-y-2">
+  <div class="flex items-center gap-2">
+    <h3 class="uppercase text-gray-500 font-medium text-xs"><%= t(".other_section_title") %></h3>
+    <div class="h-px bg-alpha-black-100 w-full"></div>
+  </div>
+  <ul class="space-y-1">
+    <li>
+      <%= sidebar_link_to t(".whats_new_label"), changelog_path, icon: "box" %>
+      <%= sidebar_link_to t(".feedback_label"), feedback_path, icon: "megaphone" %>
+      <%= sidebar_link_to t(".invite_label"), invites_path, icon: "gift" %>
+    </li>
+  </ul>
+</section>
 </nav>
diff --git a/config/locales/views/settings/en.yml b/config/locales/views/settings/en.yml
index a3e4f443..8a0c2c89 100644
--- a/config/locales/views/settings/en.yml
+++ b/config/locales/views/settings/en.yml
@@ -48,14 +48,17 @@ en:
       billing_label: Billing
       categories_label: Categories
       feedback_label: Feedback
+      general_section_title: General
       invite_label: Invite friends
       merchants_label: Merchants
       notifications_label: Notifications
+      other_section_title: More
       preferences_label: Preferences
       profile_label: Account
       rules_label: Rules
       security_label: Security
       self_hosting_label: Self-Hosting
+      transactions_section_title: Transactions
       whats_new_label: What's New
     nav_link_large:
       next: Next
diff --git a/test/system/settings_test.rb b/test/system/settings_test.rb
index 4c10fb05..e382bef1 100644
--- a/test/system/settings_test.rb
+++ b/test/system/settings_test.rb
@@ -48,6 +48,9 @@ class SettingsTest < ApplicationSystemTestCase
   test "can see conditional nav items" do
     ENV["SELF_HOSTING_ENABLED"] = "true"
 
+    visit root_path
+    sign_in @user
+
     open_settings_from_sidebar
 
     click_link "Self-Hosting"