[#48274] Work packages export modal with settings & Job status modal

[as-op]

What are you trying to accomplish?

• Turbofying and primerizing the export modal dialog
• New: Export options are no longer individual entries, but settings via form elements
• New: Column selection of the Query can be overwritten in the export modal
• New: Long text fields included in the PDF Report can be selected
• New: Atom is removed from the export modal
• New: PDFs are opened in a new tab (if supported by browser)
• Turbofying and primerizing the job status dialog

Screenshots

Before	After

What approach did you choose and why?

• Form fields are included for all formats, hidden/shown by stimulus
• Existing wp export endpoint is used (GET)
• BCF download used the previous Angular export modal to display the job progress dialog (not the selection), it does now directly
• Replaced all usage of the Angular Job Modal with the turbo version
• removed from Angular: Export Modal, Job Modal and JobPage

Ticket

https://community.openproject.org/work_packages/48274

https://www.figma.com/file/n0uj7NMxC4Q2nAzMyhdBXF/Export-work-packages-table?type=design&node-id=0-1&mode=design

Merge checklist

• Added/updated tests
• Added/updated documentation in Lookbook (patterns, previews, etc)
• Tested major browsers (Chrome, Firefox, Edge, ...)

[as-op]

Thanks a lot for the very good feedback and detailed report, @HDinger!

I addresses & fixed nearly all of them, except the very first.


• The loading modal has a different text then specified in the visuals.

A background job status only has one message while processing, and that is already used by „Work packages are being exported“.
As the job status modal is used by various background jobs, e.g. copy project, create backup, and more, we need to keep it generic (and IMO the effort to change that is too much for now)

• The loading animation looks somehow interrupted. Instead of one smooth animation, it breaks and seems to start from the beginning
• On the success and the error modal, the close button is missing
• I somehow managed to produce an error, by adding all available columns. However, there was no error message shown.
• The error message looks different from what is specified in Figma:The icon is different, and in Figma, there is a generic large message "Something went wrong" and the details in the description below

I keep trying to reproduce the column error you had, because that looks suspicious and should® not happen at all.

Thanks again! 💙

Update: Found the bug. Column selection shows all available columns, including custom fields that are not valid in a project scoped query. I will filter them out.
UpdateUpdate: Fixed

[ulferts]

I pulled again shortly before writing this, @as-op . The latest commits seem to have fixed the issue about the d&d on the column selection. As such, I only have comments now and the PR can be merged in my opinion.

I still think though, that additional work would help improving the export modal as when using it, I found a couple of UI/UX issues (in my opinion):

• The text below the "Add column text" states that I cannot add long text fields in table view. But when switching to Report, that limitation is no longer mentioned. But I still cannot add the long text columns there but need to scroll down (which is easy to overlook) and then add the long text fields as a separate element. A bit of explanatory text, also as to that I cannot have the long text fields mixed with the other columns is missing.
• The subtext below the "Add columns" makes it harder to understand (for me) that the next element in which the columns can be sorted are affected by it as well and that the two belong together. Would it be possible to have a section heading? Ideally we would have a selection that also allows to sort the elements but I understand that this is out of scope.
• The ng-select of the "Add columns" are oftentimes cut off and require the user to scroll to see all options. (e.g. CSV format)

• The options to export "Table", "Report" and "Gantt chart" are the same for both the "work packages" as well as for the "Gantt charts" module. That is confusing to me as I would have expected to only have the "Gantt chart" option when exporting in "Gantt" (or as it is the only option then, no option at all). And when exporting in "Work packages", I would have expected to only have "Table" and "Report". From my personal perspective, I would much rather we readd the option to activate the Gantt chart to the work package list as well but the current decision is towards the other direction.

My review focuses on the backend as I understand that @HDinger already covered the frontend.

[as-op]

Hi @ulferts, I can agree with the UX remarks. I will copy the points to the work package to include the product team into the discussion.

I leave out the following

The ng-select of the "Add columns" are oftentimes cut off and require the user to scroll to see all options.

I talked with Oliver about it, but this is due to Primer dialogs using a different overlay technique (not z-index). Therefore the dropdown has to be attached to the dialog, resulting in extending the inner scroll area. If I remember right - in other dialogs with this situation, we scroll down on open, so it's visible. But I found that jumping to be equally unsatisfying. So I postponed the topic until ng-select can be changed/replaced.

Thanks a lot for the review!