simplify rendering mobile actions

Author: bsatarnejad

app/components/primer/open_project/page_header.html.erb

@@ -4,17 +4,7 @@
       <div class="PageHeader-contextBar">
         <%= @parent_link %>
         <%= breadcrumbs %>
-        <% if @mobile_segmented_control %>
-          <%= render(@mobile_segmented_control, &@mobile_segmented_control_block) %>
-        <% end %>
-        <% if render_mobile_menu? %>
-          <%= render(@mobile_action_menu) do |menu| %>
-            <% menu.with_show_button(icon: :"kebab-horizontal", size: :small, "aria-label": @mobile_menu_label) %>
-            <% @desktop_menu_block.call(menu) unless @desktop_menu_block.nil? %>
-          <% end %>
-        <% elsif actions.length == 1 && @mobile_action.present? %>
-          <%= render(@mobile_action) { |el| @mobile_action_block.call(el) unless @mobile_action_block.nil?} %>
-        <% end %>
+        <%= render_mobile_actions %>
       </div>
     <% end %>
   <% end %>
@@ -30,18 +20,7 @@
 
         <%# If there are no breadcrumbs, render mobile actions in the title bar instead %>
         <% unless breadcrumbs %>
-
-          <% if @mobile_segmented_control %>
-            <%= render(@mobile_segmented_control, &@mobile_segmented_control_block) %>
-          <% end %>
-          <% if render_mobile_menu? %>
-            <%= render(@mobile_action_menu) do |menu| %>
-              <% menu.with_show_button(icon: :"kebab-horizontal", size: :small, "aria-label": @mobile_menu_label) %>
-              <% @desktop_menu_block.call(menu) unless @desktop_menu_block.nil? %>
-            <% end %>
-          <% elsif actions.length == 1 && @mobile_action.present? %>
-            <%= render(@mobile_action) { |el| @mobile_action_block.call(el) unless @mobile_action_block.nil?} %>
-          <% end %>
+          <%= render_mobile_actions %>
         <% end %>
       </div>
     <% end %>
@@ -54,4 +33,3 @@
     </div>
   <% end %>
 <% end %>
-

app/components/primer/open_project/page_header.rb

@@ -275,43 +275,27 @@ def show_state?
         @state == STATE_DEFAULT
       end
 
-      def context_bar
-        # Determine if breadcrumbs slot is present
-        show_context_bar = breadcrumbs? || @parent_link.present?
-
-        # Check if there are mobile actions (single action or menu)
-        has_mobile_actions = actions.any?
-
-        return unless show_context_bar || has_mobile_actions
-
-        display = if show_context_bar
-                    [:flex, :flex]   # show on all screens
-                  else
-                    [:flex, :none]   # only on mobile
-                  end
-
-        render Primer::BaseComponent.new(
-          tag: :div,
-          classes: "PageHeader-contextBar",
-          display: display
-        ) do
-          concat(@parent_link) if @parent_link.present?
-          concat(breadcrumbs) if breadcrumbs?
-          if @mobile_segmented_control
-            concat(render(@mobile_segmented_control, &@mobile_segmented_control_block))
-          end
+      def render_mobile_actions
+        safe_join([
+                    (render(@mobile_segmented_control, &@mobile_segmented_control_block) if @mobile_segmented_control),
+                    (render_mobile_action_menu if render_mobile_menu?),
+                    (render_single_mobile_action if actions.one? && @mobile_action.present?)
+                  ].compact)
+      end
 
-          if render_mobile_menu?
-            concat(render(@mobile_action_menu) do |menu|
-              menu.with_show_button(icon: :"kebab-horizontal", size: :small, "aria-label": @mobile_menu_label)
-              @desktop_menu_block.call(menu) unless @desktop_menu_block.nil?
-            end)
-          elsif actions.length == 1 && @mobile_action.present?
-            concat(render(@mobile_action) { |el| @mobile_action_block.call(el) unless @mobile_action_block.nil? })
-          end
+      private
+
+      def render_mobile_action_menu
+        render(@mobile_action_menu) do |menu|
+          menu.with_show_button(icon: :"kebab-horizontal", size: :small, "aria-label": @mobile_menu_label)
+          @desktop_menu_block&.call(menu)
         end
       end
 
+      def render_single_mobile_action
+        render(@mobile_action) { |el| @mobile_action_block&.call(el) }
+      end
+
       private
 
       def set_action_arguments(system_arguments, scheme: nil)

previews/primer/open_project/page_header_preview.rb

@@ -278,12 +278,10 @@ def without_breadcrumbs
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title { "Hello" }
           header.with_description { "This PageHeader does not have any breadcrumbs." }
-
           header.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
             button.with_leading_visual_icon(icon: "star")
             "Star"
           end
-
         end
       end
     end

test/components/primer/open_project/page_header_test.rb

@@ -318,6 +318,32 @@ def test_renders_actions_without_breadcrumbs
     assert_selector(".PageHeader-actions .Button, .PageHeader-actions action-menu", minimum: 1)
   end
 
+  def test_renders_with_mobile_segmented_control
+    render_inline(Primer::OpenProject::PageHeader.new(show_state: true)) do |header|
+      header.with_title { "Title" }
+      header.with_action_segmented_control(
+        "aria-label": "Segmented control",
+        mobile_system_arguments: { hide_labels: true }
+      ) do |control|
+        control.with_item(label: "Preview", icon: :eye, selected: true)
+        control.with_item(label: "Raw", icon: :"file-code")
+      end
+    end
+
+    assert_selector(".PageHeader-action")
+    assert_selector(".PageHeader-action.SegmentedControl")
+  end
+
+  def test_renders_single_action_with_mobile_action
+    render_inline(Primer::OpenProject::PageHeader.new(show_state: true)) do |header|
+      header.with_title { "Single Action Test" }
+      header.with_action_button(mobile_icon: "plus", mobile_label: "Add") { "Add" }
+    end
+
+    assert_text("Add")
+  end
+
+
   private
 
   def breadcrumb_elements