Reduce duplicate code for modal content

[Arnei]

This code structure appears in like 50 files, so I'm putting it in a component so I don't have to see it again.

While there are many changed lines, 99% of them are indentation changes, so this is hopefully fairly easy to review.

How to test this

Can be tested as usual.

[github-actions]

Use docker or podman to test this pull request locally.

Run test server using develop.opencast.org as backend:

podman run --rm -it -p 127.0.0.1:3000:3000 ghcr.io/opencast/opencast-admin-interface:pr-1059

Specify a different backend like stable.opencast.org:

podman run --rm -it -p 127.0.0.1:3000:3000 -e PROXY_TARGET=https://stable.opencast.org ghcr.io/opencast/opencast-admin-interface:pr-1059

It may take a few seconds for the interface to spin up.
It will then be available at http://127.0.0.1:3000.
For more options you can pass on to the proxy, take a look at the README.md.

[github-actions]

This pull request is deployed at test.admin-interface.opencast.org/1059/2025-03-20_12-42-06/ .
It might take a few minutes for it to become available.

[ziegenberg]

Could you separate the whitespace changes into a separate commit?

[Arnei]

I can try.

[Arnei]

Although the white space changes are directly related to the introduction of the new component, so it seems reasonable to me to have them in the same commit. Can you explain to me how separating them into their own commit helps with git blame?

If the white space changes are directly related to the introduction of the new component then leave them as-is.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[ferishili]

Thanks @Arnei.
This looks good to me! Since the changes primarily involve replacing the modal HTML with a modal component, I’d appreciate it if you could highlight any areas where additional modifications were made. That way, I can focus my testing on those specific parts. 🚀

[ferishili]

I had to add this here to clarify the issue:
I noticed that in User Dialog → Roles List, the modal is not functioning correctly. After reviewing other PRs, I realized this could be a problem in the test environments. However, to ensure this PR is safe, I want to highlight this here first, as it is related to the changes.

[Arnei]

Thanks for the review. Could you give me more information on the issue you are seeing?

• What exactly is not "functioning correctly" and in which way?
• What test environment are you using? Test deployment with mock data, docker or a local version of the PR?

[ferishili]

Thanks for the review. Could you give me more information on the issue you are seeing?

• What exactly is not "functioning correctly" and in which way?
• What test environment are you using? Test deployment with mock data, docker or a local version of the PR?

Of course:
I have tested this on both the PR Test deployment and my local machine. Both have the same issue:

To reproduce:
Navigate to Users (Organization) from left-hand pane > In action column > User details > Go to Roles tab!

[Arnei]

Issues I see:

• The user name is not displayed in the modal header
• The overall css of the modal is wonky.

Both of these can be observed on main as well as far as I can tell.

If you are wondering why you cannot add or remove roles, that is likely because the user is marked as "not managable" (a notification on the first tab "User" should tell you as such. That notification should probably be displayed here is well, I'll create an issue for that.) "Not managable" users cannot be edited, so the behaviour is correct in this case.

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

[ferishili]

The issue I raised has been resolved, so this PR looks good from my side!

[github-actions]

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.