[#57688] Primerize Backlogs - CLASSIC #21723

myabc · 2026-01-20T00:10:19Z

Ticket

https://community.openproject.org/wp/57688

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

frontend/src/assets/sass/backlogs/_index.sass

frontend/src/assets/sass/backlogs/_master_backlog.sass

EinLama · 2026-01-29T13:54:18Z

modules/backlogs/app/controllers/rb_sprints_controller.rb

@@ -52,4 +98,10 @@ def load_sprint_and_project
    # This overrides sprint's project if we set another project, say a subproject
    @project = Project.find(params[:project_id]) if params[:project_id]


Memo to self: we could consider adding the visible scope here so that the controllers throws a 404 in case a user is not allowed to view a Project instead of a 403.

EinLama · 2026-01-29T14:02:41Z

modules/backlogs/app/controllers/rb_stories_controller.rb

+  def reorder
+    story = Story.find(params[:id])
+
+    if story.update(move_to: reorder_param)


I think the permissions here are not implicitly verified for Story on work package level. Only on project level. So a user with access to the project can access any work package (=Story) here.

Since update is called directly here, the visibility-permission check that would happen if we used the Story service here is also bypassed.

We should either ensure the Controllers perform all necessary checks or rely on services to ensure this - or do both 😁

ulferts

Hey @myabc I really like where this is heading. Doesn't look like Y2K any more.

I didn't do a complete and thorough review but rather read through it all and remarked on things here and there.

There are a number of general topics I'd like to raise to discuss later:

Currently, the implementation is based on turbo streams. Backlogs are loaded individually when they are changed which, even with the limited set of scenarios provided does not always work and leads to complicated code. I have never done it and don't know if it will work but I would be interested in your opinion on using turbo drive or frame to load the whole page. To avoid undesired flickering and state changes, morphing would need to be used and the state would need to be sent to the backend (or morphing disabled on some parts of the application via JS). This would greatly simplify the backend/frontend communication I believe. Reloading the page upon changes in the split view e.g. would not need a lot of knowledge on what was changed. With the current approach, on a change to version, two backlogs would need to be reloaded. For the move action, this already seems to be failing and that is only within the stimulus controlled parts of the application. E.g. when moving the last story out of a backlog, it receives a way to big "Sprint backlog is empty" skeleton. All the other empty sprints are updated as well. This can be fixed but I see that as a warning sign of things to come:

As mentioned above, changes in the work package split view are not reflected in the backlog view. Additionally, one can change the work package in a way that it will disappear from the page. Currently this can be done by changing the type to a non story type or by changing the version to one that is not on the page. The first problem will likely disappear once the setting is removed.
With the split view opening, there is very little space

Then there are some bugs I noticed when trying out the changes:

Moving the a story to the backlog and trying to move it again right away does not work
When opening the split view, the backlogs area sometimes did not allow to scroll horizontally. That happens after drag and drop, maybe?
Opening the split view breaks the right hand side margin so backlog and button are glued to the right hand side:

We might consider opening a folded backlog when dragging. At least after hovering over it for some time
The menu item says "Edit title" when in fact I can edit more attributes:

ulferts · 2026-01-29T14:07:02Z

frontend/src/stimulus/controllers/dynamic/backlogs/story.controller.ts

+
+    this.element.addEventListener('click', this, { signal });
+    this.element.addEventListener('dblclick', this, { signal });
+    this.element.addEventListener('keydown', this, { signal });


Out of curiosity - why not use stimulus actions here. The construct used here seems overly complicated. But admittedly, I haven't tried using stimulus actions on elements like you are aiming for here.

ulferts · 2026-01-29T14:08:28Z

frontend/src/stimulus/controllers/dynamic/backlogs/story.controller.ts

+    } else {
+      this.openSplitPane();
+    }
+  }


If the approach is kept, this part of the code needs to be dry-ed

ulferts · 2026-01-29T14:11:31Z

modules/backlogs/app/components/backlogs/backlog_component.html.erb

+            blankslate.with_heading(tag: :h4).with_content(t(".product_backlog.blank_slate_title"))
+            blankslate.with_description_content(t(".product_backlog.blank_slate_description"))
+          end
+        %>


Moving the logic to the component (backlog.sprint_backlog?) would simplify the template since the only difference seems to be in the I18n keys.

modules/backlogs/app/components/backlogs/backlog_component.rb

modules/backlogs/app/components/backlogs/backlog_header_component.rb

ulferts · 2026-01-29T15:22:08Z

frontend/src/app/app.module.ts


    registerCustomElement('opce-my-page', MyPageComponent, { injector });
    registerCustomElement('opce-dashboard', DashboardComponent, { injector });
+    registerCustomElement('opce-burndown-chart', BurndownChartComponent, { injector });


Is there a way to keep it in the backlogs module?

@ulferts good question. That would be tidier. Let me ask @oliverguenther !

ulferts · 2026-01-29T15:53:13Z

modules/backlogs/app/helpers/rb_common_helper.rb

-
-      types
-    end
-  end


This is the code snippet needed for getting the right story type for when creating a new one via the modal

@ulferts ok. available_story_types.first is now passed to the modal.

ulferts · 2026-01-29T16:04:10Z

modules/backlogs/app/helpers/rb_common_helper.rb

-      mem
-    end
-  end
-


Some of these methods were used for performance optimizations. Without them, some n+1 queries are introduced:

Eager loading status and type when the stories are loaded should fix that.

@ulferts ah, good catch.

modules/backlogs/app/views/rb_taskboards/show.html.erb

ulferts · 2026-01-29T16:14:38Z

modules/backlogs/config/locales/en.yml

+    backlog_component:
+      sprint_backlog:
+        blank_slate_title: "Sprint backlog is empty"
+        blank_slate_description: "No items planned for this Sprint"


Why is sprint written in uppercase here?

@ulferts let's discuss this with @psatyal perhaps. We are inconsistent here.

Also: https://chatgpt.com/share/697bacd2-7078-8006-b65a-353e12724dfa

app/components/primer/component_helpers.rb

frontend/src/app/spot/styles/sass/common/focus.sass

frontend/src/stimulus/controllers/dynamic/backlogs/story.controller.ts

modules/backlogs/app/components/backlogs/backlog_component.html.erb

modules/backlogs/app/components/backlogs/collapsible_component.html.erb

modules/backlogs/app/components/backlogs/backlog_header_component.rb

modules/backlogs/app/components/backlogs/backlog_menu_component.html.erb

myabc · 2026-01-29T18:07:30Z

modules/backlogs/app/components/backlogs/backlog_menu_component.html.erb

+          project,
+          version_id: sprint.id,
+          story_points: 0,
+          type_id: Story.types.first


@ulferts I guess we should choose between:

leaving as-is for this iteration (this will involve disabling various features)

creating a custom Add Story modal.

making the existing Create work Package modal configurable**.

In terms of amount of work, I would guesstimate that it's in that order.

myabc · 2026-01-29T18:10:12Z

modules/backlogs/app/components/backlogs/collapsible_component.html.erb

+            },
+            data: {
+              target: "collapsible-header.triggerElement",
+              action: "click:collapsible-header#toggle keydown:collapsible-header#toggleViaKeyboard"


@ulferts this is copy-and-pasted from the existing OpenProject::BorderBox::CollapsibleHeader. There are some issues with it that meant I reimplemented its functionality in CollapsibleComponent.

It's my intention that this should be upstreamed at some point.

FYI @HDinger

myabc · 2026-01-29T18:19:05Z

frontend/src/app/app.module.ts


    registerCustomElement('opce-my-page', MyPageComponent, { injector });
    registerCustomElement('opce-dashboard', DashboardComponent, { injector });
+    registerCustomElement('opce-burndown-chart', BurndownChartComponent, { injector });


@ulferts good question. That would be tidier. Let me ask @oliverguenther !

modules/backlogs/app/components/backlogs/collapsible_component.html.erb

myabc · 2026-01-29T18:54:31Z

modules/backlogs/config/locales/en.yml

+    backlog_component:
+      sprint_backlog:
+        blank_slate_title: "Sprint backlog is empty"
+        blank_slate_description: "No items planned for this Sprint"


@ulferts let's discuss this with @psatyal perhaps. We are inconsistent here.

Also: https://chatgpt.com/share/697bacd2-7078-8006-b65a-353e12724dfa

myabc · 2026-01-29T18:54:43Z

modules/backlogs/app/helpers/rb_common_helper.rb

-      mem
-    end
-  end
-


@ulferts ah, good catch.

modules/backlogs/app/components/backlogs/backlog_component.rb

Copilot · 2026-01-29T19:12:41Z

@myabc I've opened a new pull request, #21814, to work on those changes. Once the pull request is ready, I'll request review from you.

myabc · 2026-01-29T23:01:57Z

frontend/src/app/features/backlogs/burndown-chart.component.html

+<details>
+  <summary>Debug</summary>
+  <code>
+    <pre>{{maxValue() }}</pre>
+    <pre>{{lineChartData() | json}}</pre>
+  </code>
+</details>


TODO: remove this (or only show in dev)

myabc · 2026-01-29T23:05:00Z

frontend/src/app/features/backlogs/burndown-chart.component.ts

+import PrimerColorsPlugin from 'core-app/shared/components/work-package-graphs/plugin.primer-colors';
+import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';
+
+const BURNDOWN_Y_SCALE_MIN = 25;


@opf/polaris-developers FYI - this magic number is taken from BurndownChartHelper:

def yaxis_labels(burndown) max = burndown.max[:points] mvalue = (max / 25) + 1 labels = (0..mvalue).map { |i| "[#{i * 25}, #{i * 25}]" } mvalue = mvalue + 1 if mvalue == 1 || ((max % 25) == 0) labels << "[#{mvalue * 25}, '<span class=\"axislabel\">#{I18n.t('backlogs.points')}</span>']" result = labels.join(", ") result.html_safe end

Display on multiple lines on smaller viewports.

Updates `SprintPageHeaderComponent` to support `with_action_button`.

#21814) * Initial plan * Use fetch_or_fallback to validate state in BacklogHeaderComponent Co-authored-by: myabc <[email protected]> * Add test for state validation fallback behavior Co-authored-by: myabc <[email protected]> --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: myabc <[email protected]>

myabc force-pushed the feature/57688-primerize-backlogs-classic branch 3 times, most recently from 0a230ad to 5282199 Compare January 22, 2026 00:17

lindenthal added the pullpreview label Jan 23, 2026

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 23, 2026 18:17 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 5282199 to b8fa4bb Compare January 23, 2026 19:36

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 23, 2026 19:37 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from b8fa4bb to 7a142b0 Compare January 24, 2026 23:46

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 24, 2026 23:46 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch 2 times, most recently from e1c2623 to 9e9c053 Compare January 24, 2026 23:55

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 24, 2026 23:56 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 9e9c053 to 2777895 Compare January 25, 2026 00:30

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 25, 2026 00:31 Inactive

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 25, 2026 00:49 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from bebf10e to 25e2c19 Compare January 25, 2026 07:46

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 25, 2026 07:47 Inactive

myabc added feature javascript Pull requests that update Javascript code ruby Pull requests that update Ruby code labels Jan 27, 2026

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 25e2c19 to 7c350e7 Compare January 27, 2026 21:54

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 27, 2026 21:55 Inactive

EinLama reviewed Jan 28, 2026

View reviewed changes

frontend/src/assets/sass/backlogs/_index.sass Outdated Show resolved Hide resolved

EinLama reviewed Jan 28, 2026

View reviewed changes

frontend/src/assets/sass/backlogs/_master_backlog.sass Show resolved Hide resolved

EinLama reviewed Jan 29, 2026

View reviewed changes

ulferts reviewed Jan 29, 2026

View reviewed changes

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 7c350e7 to e8486ab Compare January 29, 2026 17:54

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 17:55 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from e8486ab to e61b486 Compare January 29, 2026 18:04

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 18:05 Inactive

dombesz reviewed Jan 29, 2026

View reviewed changes

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from e61b486 to 4164658 Compare January 29, 2026 18:14

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 18:15 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 4164658 to 1611283 Compare January 29, 2026 18:18

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 18:24 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 1611283 to c0e8332 Compare January 29, 2026 18:53

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 18:55 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from cbc8ddb to 495075f Compare January 29, 2026 19:01

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 19:04 Inactive

myabc commented Jan 29, 2026

View reviewed changes

Copilot AI mentioned this pull request Jan 29, 2026

Use fetch_or_fallback for state validation in BacklogHeaderComponent #21814

Merged

3 tasks

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 22:56 Inactive

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from b38b08a to 861e1cb Compare January 29, 2026 23:00

myabc commented Jan 29, 2026

View reviewed changes

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 29, 2026 23:05 Inactive

myabc mentioned this pull request Jan 30, 2026

[#70778] Primerize Backlogs Project Settings #21822

Open

3 tasks

myabc and others added 8 commits January 31, 2026 14:37

[#57688] Primerize Backlogs

521cc36

Burndown chart: Force Turbo to perform page reload

5108453

WIP - Improve responsiveness, harmonize with Meetings

800ea08

Make Backlog Header form responsive

7ee234c

Display on multiple lines on smaller viewports.

Remove unused jquery.flot vendored/npm dependency

5aaf8d9

Show action buttons in Task board/Burndown headers

27dc6da

Updates `SprintPageHeaderComponent` to support `with_action_button`.

WIP - refresh main pane on update

d6f9758

myabc force-pushed the feature/57688-primerize-backlogs-classic branch from 861e1cb to d6f9758 Compare January 31, 2026 17:38

github-actions bot temporarily deployed to gh-6899875-pr-21723 January 31, 2026 17:38 Inactive

Replace jquery.cookie with localStorage

999adbf

github-actions bot deployed to gh-6899875-pr-21723 January 31, 2026 18:24 View deployment

		@@ -52,4 +98,10 @@ def load_sprint_and_project
		# This overrides sprint's project if we set another project, say a subproject
		@project = Project.find(params[:project_id]) if params[:project_id]

[#57688] Primerize Backlogs - CLASSIC #21723

Are you sure you want to change the base?

[#57688] Primerize Backlogs - CLASSIC #21723

Conversation

myabc commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Ticket

What are you trying to accomplish?

Screenshots

What approach did you choose and why?

Merge checklist

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

EinLama Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ulferts left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI commented Jan 29, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

myabc commented Jan 20, 2026 •

edited

Loading

EinLama Jan 29, 2026 •

edited

Loading

ulferts left a comment •

edited

Loading