Reorder settings nav and add translations (maybe-finance#680)

* Reorder settings nav and add translations * Attempt to fix flaky system test
josefarias · Apr 25, 2024 · e7fe1b5 · e7fe1b5
1 parent 8ea7b54
commit e7fe1b5
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git 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" %>
-        <%= 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? %>
-          <%= 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" %>
+        <%= 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">More</h3>
-      <div class="h-px bg-alpha-black-100 w-full"></div>
-    </div>
-    <ul class="space-y-1">
+      <% if self_hosted? %>
+        <li>
+          <%= sidebar_link_to t(".self_hosting_label"), settings_hosting_path, icon: "database" %>
+        </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
@@ -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
@@ -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"