Show available options for WorkPackage::StatusButtonComponent

app/components/work_packages/hover_card_component.html.erb

@@ -1,7 +1,7 @@
 <%= if @work_package.present?
   grid_layout('op-wp-hover-card', tag: :div) do |grid|
     grid.with_area(:status, tag: :div, color: :muted) do
-      render WorkPackages::StatusButtonComponent.new(work_package: @work_package, button_arguments: { size: :small })
+      render WorkPackages::StatusButtonComponent.new(work_package: @work_package, user: helpers.current_user, button_arguments: { size: :small })
     end
 
     grid.with_area(:id, tag: :div, color: :muted) do

app/components/work_packages/status_button_component.html.erb

@@ -1,11 +1,24 @@
 <%=
-  render(Primer::Alpha::ActionMenu.new(**@menu_arguments)) do |menu|
-    menu.with_show_button(**@button_arguments) do |button|
-      button.with_trailing_action_icon(icon: "triangle-down")
-      'Placeholder Status'
-    end
+  if @editable
+    render(Primer::Alpha::ActionMenu.new(**@menu_arguments)) do |menu|
+      menu.with_show_button(**button_arguments) do |button|
+        button.with_trailing_action_icon(icon: "triangle-down")
+        button.with_leading_visual_icon(icon: "lock") if readonly?
+        @status.name
+      end
 
-    menu.with_item { "OPTION 1"}
-    menu.with_item { "OPTION 2"}
+      @items.each do |item|
+        menu.with_item(label: item.name,
+                       content_arguments: { classes: "__hl_inline_status_#{item.id}",
+                                            align_items: :center }) do |menu_item|
+          menu_item.with_trailing_visual_icon(icon: :lock) if item.is_readonly?
+        end
+      end
+    end
+  else
+    render(Primer::Beta::Button.new(**button_arguments)) do |button|
+      button.with_leading_visual_icon(icon: "lock") if readonly?
+      @status.name
+    end
   end
 %>

app/components/work_packages/status_button_component.rb

@@ -3,13 +3,43 @@
 class WorkPackages::StatusButtonComponent < ApplicationComponent
   include OpPrimer::ComponentHelpers
 
-  def initialize(work_package:, button_arguments: {}, menu_arguments: {})
+  def initialize(work_package:, user:, editable: true, button_arguments: {}, menu_arguments: {})
     super
 
     @work_package = work_package
+    @user = user
     @status = work_package.status
+    @project = work_package.project
+
+    @editable = editable
     @menu_arguments = menu_arguments
+    @button_arguments = button_arguments.merge({ classes: "__hl_background_status_#{@status.id}" })
+
+    @items = available_statusses
+  end
+
+  def button_title
+    I18n.t("js.label_edit_status")
+  end
+
+  def disabled?
+    !@user.allowed_in_project?(:edit_work_packages, @project)
+  end
+
+  def readonly?
+    @status.is_readonly?
+  end
+
+  def button_arguments
+    { title: button_title,
+      disabled: disabled?,
+      aria: {
+        label: button_title
+      } }.deep_merge(@button_arguments)
+  end
 
-    @button_arguments = button_arguments.merge({classes: "__hl_background_status_#{@status.id}"})
+  def available_statusses
+    WorkPackages::UpdateContract.new(@work_package, @user)
+                                .assignable_statuses
   end
 end

frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.ts

@@ -46,12 +46,6 @@ import {
   shift,
 } from '@floating-ui/dom';
 import { WorkPackageIsolatedQuerySpaceDirective } from 'core-app/features/work-packages/directives/query-space/wp-isolated-query-space.directive';
-import { fromEvent } from 'rxjs';
-import {
-  filter,
-  tap,
-  throttleTime,
-} from 'rxjs/operators';
 
 @Component({
   templateUrl: './hover-card.modal.html',
@@ -76,7 +70,7 @@ export class HoverCardComponent extends OpModalComponent implements OnInit {
 
   ngOnInit() {
     super.ngOnInit();
-    this.turboFrameSrc = this.locals.turboFrameSrc;
+    this.turboFrameSrc = this.locals.turboFrameSrc as string;
   }
 
   public async reposition(element:HTMLElement, target:HTMLElement) {

lookbook/previews/open_project/work_packages/status_button_component_preview.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module OpenProject::WorkPackages
+  # @logical_path OpenProject/WorkPackages
+  class StatusButtonComponentPreview < ViewComponent::Preview
+    # @display min_height 400px
+    # @param editable [Boolean]
+    # @param size [Symbol] select [small, medium, large]
+    def playground(editable: true, size: :medium)
+      user = FactoryBot.build_stubbed(:admin)
+      render(WorkPackages::StatusButtonComponent.new(work_package: WorkPackage.visible.first,
+                                                     user:,
+                                                     editable:,
+                                                     button_arguments: { size: }))
+    end
+  end
+end