[#72242] Workflows UX improvement: Allow multi-selection of roles in workflow

app/components/workflows/blankslate_component.html.erb

@@ -32,7 +32,7 @@ See COPYRIGHT and LICENSE files for more details.
     blankslate.with_heading(tag: :h2).with_content(t("admin.workflows.blankslate.title"))
     blankslate.with_description_content(t("admin.workflows.blankslate.description"))
     blankslate.with_primary_action(
-      href: helpers.status_dialog_workflow_tab_path(@type, @tab, role_id: @role.id),
+      href: helpers.status_dialog_workflow_tab_path(@type, @tab, role_ids: @roles.map(&:id)),
       scheme: :secondary,
       data: { controller: "async-dialog" }
     ) do |button|

app/components/workflows/blankslate_component.rb

@@ -32,9 +32,9 @@ module Workflows
   class BlankslateComponent < ApplicationComponent
     include OpPrimer::ComponentHelpers
 
-    def initialize(role:, type:, tab:)
+    def initialize(roles:, type:, tab:)
       super
-      @role = role
+      @roles = roles
       @type = type
       @tab = tab
     end

app/components/workflows/page_headers/edit_component.rb

@@ -30,7 +30,7 @@
 
 module Workflows::PageHeaders
   class EditComponent < BaseComponent
-    options :tabs, :role
+    options :tabs, :roles
 
     def type = model
 
@@ -49,7 +49,7 @@ def add_action_buttons(header)
         mobile_icon: :copy,
         mobile_label: t(:button_copy),
         size: :medium,
-        href: new_workflow_copy_path(type, source_role_id: role&.id),
+        href: new_workflow_copy_path(type, source_role_id: roles&.first&.id),
         aria: { label: helpers.t(:button_copy) },
         title: helpers.t(:button_copy)
       ) do |button|

app/components/workflows/status_dialog_component.html.erb

@@ -42,7 +42,7 @@ See COPYRIGHT and LICENSE files for more details.
         Workflows::StatusFormComponent.new(
           all_statuses: @all_statuses,
           current_statuses: @current_statuses,
-          role: @role,
+          roles: @roles,
           type: @type,
           tab: @tab
         )

app/components/workflows/status_dialog_component.rb

@@ -35,11 +35,11 @@ class StatusDialogComponent < ApplicationComponent
 
     DIALOG_ID = "workflows-status-dialog"
 
-    def initialize(all_statuses:, current_statuses:, role:, type:, tab:)
+    def initialize(all_statuses:, current_statuses:, roles:, type:, tab:)
       super
       @all_statuses = all_statuses
       @current_statuses = current_statuses
-      @role = role
+      @roles = roles
       @type = type
       @tab = tab
     end

app/components/workflows/status_form_component.html.erb

@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%=
   primer_form_with(
-    url: helpers.confirm_statuses_workflow_tab_path(@type, @tab, role_id: @role.id),
+    url: helpers.confirm_statuses_workflow_tab_path(@type, @tab, role_ids: @roles.map(&:id)),
     method: :post,
     id: FORM_ID,
     data: { turbo_frame: "workflow-table" }
@@ -39,7 +39,6 @@ See COPYRIGHT and LICENSE files for more details.
         f,
         all_statuses: @all_statuses,
         current_statuses: @current_statuses,
-        role: @role,
         type: @type,
         tab: @tab,
         dialog_id:

app/components/workflows/status_form_component.rb

@@ -32,11 +32,11 @@ module Workflows
   class StatusFormComponent < ApplicationComponent
     FORM_ID = "status-selection-form"
 
-    def initialize(all_statuses:, current_statuses:, role:, type:, tab:)
+    def initialize(all_statuses:, current_statuses:, roles:, type:, tab:)
       super
       @all_statuses = all_statuses
       @current_statuses = current_statuses
-      @role = role
+      @roles = roles
       @type = type
       @tab = tab
     end

app/components/workflows/status_matrix_form_component.html.erb

@@ -32,21 +32,39 @@ See COPYRIGHT and LICENSE files for more details.
     render Primer::OpenProject::SubHeader.new do |subheader|
       if @type && @available_roles.any?
         subheader.with_filter_component do
-          render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
-            menu.with_show_button(scheme: :secondary) do |button|
+          render(
+            Primer::Alpha::SelectPanel.new(
+              select_variant: :multiple,
+              fetch_strategy: :local,
+              title: t("admin.workflows.role_selector.title"),
+              data: data_attributes
+            )
+          ) do |panel|
+            panel.with_show_button(scheme: :secondary) do |button|
               button.with_trailing_visual_icon(icon: :"triangle-down")
-              @role ? t("admin.workflows.role_selector.label", role: @role.name) : t("admin.workflows.role_selector.no_role")
+              if @roles.many?
+                t("admin.workflows.role_selector.roles", count: @roles.size)
+              elsif @roles.one?
+                t("admin.workflows.role_selector.label", role: @roles.first.name)
+              else
+                t("admin.workflows.role_selector.no_role")
+              end
             end
             @available_roles.each do |available_role|
-              menu.with_item(
+              panel.with_item(
                 label: available_role.name,
-                active: available_role == @role,
-                tag: :a,
-                href: helpers.edit_workflow_tab_path(@type, @tab, role_id: available_role.id),
-                content_arguments: { data: { "admin--workflow-checkbox-state-confirmation-trigger": "click",
-                                             turbo_action: "advance" } }
+                active: @roles.include?(available_role),
+                item_id: available_role.id
               )
             end
+            panel.with_footer(show_divider: true) do
+              render(
+                Primer::Beta::Button.new(
+                  scheme: :primary,
+                  data: { action: "click->admin--workflow-role-select#apply" }
+                )
+              ) { t(:button_save) }
+            end
           end
         end
       end
@@ -56,7 +74,7 @@ See COPYRIGHT and LICENSE files for more details.
         scheme: :secondary,
         leading_icon: :plus,
         label: t("admin.workflows.status_button"),
-        href: helpers.status_dialog_workflow_tab_path(@type, @tab, role_id: @role&.id, status_ids: @statuses.pluck(:id).presence),
+        href: helpers.status_dialog_workflow_tab_path(@type, @tab, role_ids: @roles.map(&:id), status_ids: @statuses.pluck(:id).presence),
         data: { controller: "async-dialog" }
       ) do
         t("admin.workflows.status_button")
@@ -67,7 +85,7 @@ See COPYRIGHT and LICENSE files for more details.
   <% if @statuses.any? %>
     <%= form_tag(
           workflow_tab_path(@type),
-          id: "workflow_form",
+          id: form_id,
           method: :patch,
           autocomplete: "off",
           data: {
@@ -76,7 +94,9 @@ See COPYRIGHT and LICENSE files for more details.
           }
         ) do %>
         <%= hidden_field_tag "type_id", @type.id %>
-        <%= hidden_field_tag "role_id", @role.id %>
+        <% @roles.each do |role| %>
+          <%= hidden_field_tag "role_ids[]", role.id %>
+        <% end %>
         <%= hidden_field_tag "tab", @tab %>
 
         <%= helpers.render_tabs helpers.workflow_tabs(@type) %>
@@ -94,7 +114,7 @@ See COPYRIGHT and LICENSE files for more details.
             Primer::OpenProject::FeedbackDialog.new(
               title: t("admin.workflows.leave_confirmation.title"),
               data: {
-                "admin--workflow-checkbox-state-target": "confirmationDialog",
+                "admin--workflow-checkbox-state-target": "confirmationDialog"
               }
             )
           ) do |dialog|
@@ -118,6 +138,6 @@ See COPYRIGHT and LICENSE files for more details.
         %>
       <% end %>
   <% else %>
-    <%= render Workflows::BlankslateComponent.new(role: @role, type: @type, tab: @tab) %>
+    <%= render Workflows::BlankslateComponent.new(roles: @roles, type: @type, tab: @tab) %>
   <% end %>
 <% end %>

app/components/workflows/status_matrix_form_component.rb

@@ -33,14 +33,29 @@ class StatusMatrixFormComponent < ApplicationComponent
     include OpTurbo::Streamable
     include OpPrimer::ComponentHelpers
 
-    def initialize(tab:, role:, type:, available_roles:, statuses:, has_status_changes:)
+    FORM_ID = "workflow_form"
+
+    def initialize(tab:, roles:, type:, available_roles:, statuses:, has_status_changes:)
       super
       @tab = tab
-      @role = role
+      @roles = roles
       @type = type
       @available_roles = available_roles
       @statuses = statuses
       @has_status_changes = has_status_changes
     end
+
+    private
+
+    def form_id = FORM_ID
+
+    def data_attributes
+      {
+        controller: "admin--workflow-role-select",
+        "admin--workflow-role-select-base-url-value": helpers.edit_workflow_tab_path(@type, @tab),
+        "admin--workflow-role-select-current-role-ids-value": @roles.map(&:id),
+        "admin--workflow-role-select-admin--workflow-checkbox-state-outlet": "##{form_id}"
+      }
+    end
   end
 end

app/components/workflows/status_removal_danger_dialog_component.html.erb

@@ -46,7 +46,7 @@ See COPYRIGHT and LICENSE files for more details.
     # The reason this is done here is because the submit is not a DELETE, and GET form submissions
     # strip url params
     dialog.with_additional_details do
-      concat(hidden_field_tag(:role_id, @role.id))
+      @roles.each { |role| concat(hidden_field_tag("role_ids[]", role.id)) }
       @status_ids.each { |id| concat(hidden_field_tag("status_ids[]", id)) }
     end
   end

app/components/workflows/status_removal_danger_dialog_component.rb

@@ -35,9 +35,9 @@ class StatusRemovalDangerDialogComponent < ApplicationComponent
 
     DIALOG_ID = "workflows-status-removal-dialog"
 
-    def initialize(role:, type:, tab:, status_ids:, removed_count:)
+    def initialize(roles:, type:, tab:, status_ids:, removed_count:)
       super
-      @role = role
+      @roles = roles
       @type = type
       @tab = tab
       @status_ids = Array(status_ids).flatten.map(&:to_i)