[PLAY-1054] Use new sorting style (#2846)

**What does this PR do?** A clear and concise description with your
runway ticket url.

Runway: https://nitro.powerhrg.com/runway/backlog_items/PLAY-1054

Removes the explicit Acending/Decending options from the header dropdown

Checkout the page this is used on in Nitro:

https://pr35577.nitro-web.beta.hq.powerapp.cloud/project_surveys/surveys?q%5Bcompleted_date_beginning_of_day_gteq%5D=01%2F01%2F2022&q%5Bcompleted_date_end_of_day_lteq%5D=12%2F31%2F2022&q%5Bs%5D=percentage_2+desc

I originally thought this would produce a breaking change to Nitro, but
I opted not to change the shape of the `sort_menu` object. Therefore no
breaking change 🎉

**Screenshots:** Screenshots to visualize your addition/change

From This:

![screenshot-pr2846 playbook beta hq powerapp cloud-2023 11
07-09_38_41](https://github.com/powerhome/playbook/assets/38965626/a04fddf4-f7b5-4124-9d89-ca78206a8320)

To This:

![screenshot-playbook powerapp cloud-2023 11
07-09_38_26](https://github.com/powerhome/playbook/assets/38965626/cfae6705-1689-40d4-9ab4-c8a42728480d)

**How to test?** Steps to confirm the desired behavior:
1. Go to
https://pr2846.playbook.beta.hq.powerapp.cloud/kits/table/rails?sort=firstname_desc#table-header
2. Click on the Full name header
4. See addition/change


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [x] **TESTS** I have added test coverage to my code.

Co-authored-by: Nida Ghuman <nidaqg@gmail.com>

playbook/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb

@@ -39,10 +39,10 @@
         text: "Full Name",
         colspan: 2,
         sort_menu: [
-          { item: "First Name Descending", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
-          { item: "First Name Ascending", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
-          { item: "Last Name Descending", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
-          { item: "Last Name Ascending", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
+          { item: "First Name", link: "?sort=firstname_desc#table-header", active: params["sort"] == "firstname_desc", direction: "desc" },
+          { item: "First Name", link: "?sort=firstname_asc#table-header", active: params["sort"] == "firstname_asc", direction: "asc" },
+          { item: "Last Name", link: "?sort=lastname_desc#table-header", active: params["sort"] == "lastname_desc", direction: "desc" },
+          { item: "Last Name", link: "?sort=lastname_asc#table-header", active: params["sort"] == "lastname_asc", direction: "asc" }
         ],
       }) %>
       <%= pb_rails("table/table_header", props: {

playbook/app/pb_kits/playbook/pb_table/table_header.html.erb

@@ -28,15 +28,16 @@
                                       position: object.placement ,
                                       padding: 'none'}) do %>
         <%= pb_rails("nav", props: {classname: "pb_table_header_dropdown"}) do %>
-          <% object.sort_menu.each_with_index do |item, index| %>
+          <% object.sort_items.each do |sort_item| %>
+            <% item = active_or_first_item(sort_items_for(sort_item)) %>
             <%= pb_rails("nav/item", props: {
               text: item[:item],
-              link: item[:link],
+              link: next_link(sort_item: sort_item),
               highlighted_border: false,
               padding: "xs",
               icon_right: sort_icon(item[:direction], item[:active]),
               active: item[:active],
-              classname: "header_nav_item #{'header_first_item' if index == 0} #{'header_last_item' if index == object.sort_menu.size - 1}"
+              classname: "header_nav_item"
             }) %>
           <% end %>
         <% end %>

playbook/app/pb_kits/playbook/pb_table/table_header.rb

@@ -32,20 +32,43 @@ def align_class
         align.present? ? "align_#{align}" : nil
       end
 
-      def next_link
-        return sort_menu[0][:link] if sort_menu.all? { |item| item[:active] == false }
+      def next_link(sort_item: "")
+        sort_menu_for = if sort_item.blank?
+                          sort_menu
+                        else
+                          sort_items_for(sort_item)
+                        end
+
+        return sort_menu_for[0][:link] if sort_menu_for.all? { |item| item[:active] == false }
 
         link = ""
 
-        sort_menu.each_with_index do |item, index|
+        sort_menu_for.each_with_index do |item, index|
           if item[:active] == true
-            next_index = (index + 1) % sort_menu.length
-            link = sort_menu[next_index][:link]
+            next_index = (index + 1) % sort_menu_for.length
+            link = sort_menu_for[next_index][:link]
           end
         end
         link
       end
 
+      def sort_items
+        sort_menu.map { |hash| hash[:item] }.uniq
+      end
+
+      def sort_items_for(sort_item)
+        sort_menu.find_all { |hash| hash[:item] == sort_item }
+      end
+
+      def active_or_first_item(items)
+        active_item = items.find { |hash| hash[:active] == true }
+        if active_item.present?
+          active_item
+        else
+          items[0]
+        end
+      end
+
       def sorting_style?
         sort_menu != [{}]
       end