Feature/54733 primerise the activity panel

[jjabari-op]

https://community.openproject.org/projects/openproject/work_packages/54733

[oliverguenther]

• [x] There's a large between comments when filtering for comments only, that I don't see specified in Figma.

[oliverguenther]

• [x] Copying and visiting a link to an activity scrolls to it correctly, but that results in the comment container being scrolled weirdly:

[oliverguenther]

• [ ] Hitting the action menus on mobile result in wrong placement (the known position problem)

[oliverguenther]

• [ ] There is no way to cancel writing a comment (it's not specified in the ticket as far as I can tell)

[oliverguenther]

• [x] With a long name, the part after it is broken up in a weird way

[oliverguenther]

• [x] As an anonymous user in a public project, or member without comment permission, I see the comment form and can click submit, nothing happens (no errors either)

• [x] I can also see "quote reply" without permission to comment

[oliverguenther]

• [x] Drag and Drop an into the comment field does no longer open it.

Kapture 2024-08-27 at 16.16.15.webm

[lindenthal]

hi @jjabari-op,

I just had a brief look on iOS. There were a couple of problems. Can you please also test it small screens?

Thanks Niels

[jjabari-op]

hi @jjabari-op,

I just had a brief look on iOS. There were a couple of problems. Can you please also test it small screens?

Thanks Niels

Hi @lindenthal! Sorry for that, some optimizations I've implemented recently broke some mobile behavior without me noticing it. Will fix it asap!

Best, Jonas

[dominic-braeunlein]

Auto generated description (might contain errors):

Context This pull request addresses the need to "primerize" the activity panel in the OpenProject work package view. The goal is to enhance the user experience by adopting Primer design components, improving the UI consistency, and making the activity panel more responsive and visually appealing. The changes are being made to modernize the UI and align with OpenProject's ongoing UI/UX improvements, as well as to introduce better error handling and user interaction improvements within the activity panel.

Description The task involves updating the activity panel to use Primer components, which is part of OpenProject’s broader move towards a more modern, consistent, and accessible UI. The activity panel is a crucial part of the work package view, where users can see the history of changes, comments, and other activities related to a work package. The changes include refactoring existing components to use Primer's design system, adding new components for error handling, and improving the interaction flow for adding comments and filtering activities.

Steps to accomplish this task include:

1. Refactoring the existing activity panel to use Primer components for layout and interaction.
2. Adding new components for handling errors and empty states.
3. Implementing new components for filtering and sorting activities.
4. Ensuring the new components are responsive and accessible across different screen sizes.
5. Integrating the changes into the existing work package view and ensuring compatibility with other parts of the system.

Changes in the codebase

1. New Components:

   • Error Handling: ErrorFrameComponent and ErrorStreamComponent handle error messages gracefully using Primer's banner component.
   • Activity Panel: IndexComponent, ItemComponent, DetailsComponent, NewComponent, and FilterAndSortingComponent manage the display of activities, comments, and filtering/sorting options. These components use Primer’s layout system, including flex layouts, buttons, and action menus.
   • Empty State: EmptyComponent displays a friendly message when there are no activities to show.
   • Form Handling: NewComponent manages the form for adding new comments, with a toggle between the button and form views.
   • Shared Helpers: A helper module (SharedHelpers) was introduced for common tasks like rendering user names and links.

2. Styling:

   • New SCSS files were added for each component to handle the layout and styling, ensuring that the components are responsive and follow the Primer design guidelines.
   • Specific adjustments were made for mobile and desktop views to ensure the UI works well across different screen sizes.

3. Backend Logic:

   • The backend logic for handling activity filtering and sorting was updated. The FilterAndSortingComponent allows users to filter activities by "all," "only changes," or "only comments" and sort them in ascending or descending order.

4. Integration with Existing System:

   • The new activity panel components are integrated into the work package view, replacing the old activity panel. The integration ensures that the new components work seamlessly with the existing functionality, such as permissions for adding comments and notifications.

Changes outside the codebase

1. Environment Variables:

   • A new environment variable OPENPROJECT_FEATURE_PRIMERIZED_WORK_PACKAGE_ACTIVITIES_ACTIVE was added to enable or disable the primerized activity panel in different environments.

2. Third-Party Services:

   • No changes were made to third-party services.

3. Infrastructure:

   • No changes were made to the infrastructure configuration.

Additional Information

• The polling interval for updating the activity stream is set to 10 seconds by default, which is configurable in the test environment.
• The UI has been designed to be accessible and responsive, with special attention to mobile layouts.
• The use of Turbo Streams ensures that the activity panel can update dynamically without requiring a full page refresh.

Work Package For more details, you can refer to the work package #54733, which outlines the need for primerizing the activity panel and provides additional context on the expected outcomes and design goals.

Code Challenge

1. Error Handling: The ErrorFrameComponent and ErrorStreamComponent handle errors well by displaying a danger banner when an error occurs. However, it is important to ensure that the error messages are properly sanitized to avoid potential XSS vulnerabilities, especially since user-generated content could be involved.

2. Polling Interval: The polling interval is hardcoded to 10 seconds, which might be too frequent for some use cases. It would be beneficial to allow this to be configurable through the environment or user preferences in production environments as well.

3. Journal Sorting Logic: The sorting logic for journals is based on the user's preference, defaulting to "desc." However, if a user does not have a preference set, it might be useful to provide a more explicit fallback mechanism or prompt the user to set their preference.

4. Form Toggle: The toggle between the comment button and the form works well, but there might be edge cases where the form does not render correctly if the DOM is manipulated too quickly (e.g., during rapid clicking). It might be useful to debounce the click event to prevent such issues.

5. Empty State: The EmptyComponent provides a good user experience when no activities are present. However, it might be useful to implement a more detailed message or action (e.g., a prompt to add the first comment) to encourage user interaction.

[lindenthal]

Hi @jonasjabari and @wielinde,

I just added a comment on mobile. Currently it requires two clicks/taps to enter text. Here in GitHub only one click is required. Can you please check? Thanks Niels

[lindenthal]

Hi @jonasjabari and @wielinde I just found another problem with embedded work package macros on mobile. Can you please check? Thanks Niels

[jjabari-op]

Thank you for your feedback @lindenthal I have both things on my list now!