# Feature COMMS-36 - Primerise the Activity panel

Project: Stream Communicator
Status: closed
URL: https://community.openproject.org/work_packages/COMMS-36

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | 15.0.0 |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

| ID | Subject | Status | Decision |
| --- | --- | --- | --- |
| COMMS-82 | The content-loader (skeleton) doesn't really match the appearance of the tab itself | decided | Implement a skeleton loader based on the reference image |

## Features and Chunks

| ID | Subject | Type | Status | Assignee | Target versions | Spent time |
| --- | --- | --- | --- | --- | --- | --- |
| COMMS-77 | Add feature tests for notification center adjustments | Implementation | closed |  | 15.0.0 |  |
| COMMS-78 | Review render performance of comments list and optimize it | Implementation | closed |  | 15.0.0 |  |
| COMMS-79 | Resolve dangling stem on last comment | Implementation | closed |  |  |  |
| COMMS-83 | Rename Display comments options | Implementation | closed |  | 15.0.0 |  |

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| COMMS-130 | Bug | Notification bubbles and mark-as-read buttons not responding correctly to changes | closed |  | 15.0.0 |  |  |
| COMMS-125 | Bug | When user has 'newest on top' sort order, latest comment still shows up at the bottom | closed |  | 15.0.0 |  |  |
| COMMS-121 | Bug | The comment box in Activity requires a second click for keyboard focus | closed |  | 15.0.0 |  |  |
| COMMS-115 | Bug | New comment on WP requires page reload to appear | closed |  | 15.0.0 |  |  |
| COMMS-96 | Bug | Improve error handling when two users edit the same work package in parallel (conflict) | closed |  | 15.0.0 |  |  |
| OP-16081 | Bug | Line height in activity less than e.g. in description  | closed |  | 15.0.0 |  |  |
| COMMS-123 | Bug | Activity number is not a link but sets href only using javascript | closed |  | 15.0.0 |  |  |
| COMMS-100 | Bug | Doubled scrollbar on mobile | closed |  | 15.0.0 |  |  |
| COMMS-93 | Bug | Text field doesn't reduce on blur when there is text in it | closed |  | 15.0.0 |  |  |
| COMMS-92 | Bug | Mobile: Superfluous line at the start of the thread | closed |  | 15.0.0 |  |  |
| COMMS-90 | Bug | Activity numbers are kind of random | closed |  | 15.0.0 |  |  |
| COMMS-85 | Bug | Orphaned connection line when filtering activity for comments only | closed |  | 15.0.0 |  |  |
| COMMS-84 | Bug | Empty lines are showing when displaying activities | closed |  | 15.0.0 |  |  |
| COMMS-105 | Bug | Comment hyperlink is broken in Activity tab | rejected |  | 15.0.0 |  |  |
| COMMS-134 | Bug | The comment box remains open and does not blur on submitting comment | closed |  | 15.0.2 |  |  |
| COMMS-119 | Bug | Error toast giving a 500 error without relevant details | closed |  | 15.0.2 |  |  |
| COMMS-108 | Bug | Work package creation event not displayed if aggregation includes a comment | closed | Jonas Jabari | 15.0.2 |  |  |
| COMMS-118 | Bug | Missing hint in comment box label | closed |  | 15.1.0 |  |  |
| COMMS-141 | Bug | [Regression] Missing "Commit Message" Comments in Work Packages after upgrade to 15.0.1 | closed |  | 15.3.0 |  |  |
| COMMS-89 | Bug | User is able to edit someone else's comment | closed |  | 16.0.0 |  |  |
| COMMS-87 | Bug | Comment box headers are cut off on the right side | rejected |  | Won't Fix |  |  |
| COMMS-122 | Bug | Comment box doesn't reduce in size when out of focus | rejected |  |  |  |  |
| COMMS-117 | Bug | Paragraph breaks in comments are converted to line breaks  | rejected |  |  |  |  |
| COMMS-106 | Bug | Notification Center Activity panel is scrollable horizontally | rejected |  |  |  |  |
| COMMS-63 | Support Request | Rename label "Oldest on top" to "Newest at the bottom"? | resolved | Jonas Jabari |  |  |  |
| COMMS-124 | Bug | The activity tab content-loader (skeleton) doesn't really match the appearance of the tab itself | confirmed |  |  |  | Modules and project features / Comments and activity |
| COMMS-120 | Bug | Decreasing browser width while typing leads to unnecessary white space above input field | confirmed |  |  |  | Modules and project features / Comments and activity |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview | https://pr-15643-54733-primeri-ip-3-71-84-40.my.pullpreview.com |
| Mockups | https://www.figma.com/design/Lb7ao364ppIiPxp9ptSXkM/Threads?node-id=449-5550 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Wieland Lindenthal |
| Product manager |  |
| Developers |  |
| Designer | Parimal Satyal |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

#### **Context**

As part of our on-going work on Primer-ising OpenProject, this feature aims to Primerise the *Activity* tab in work packages behind a feature flag, to lay the groundwork for further integration with Open points.

#### Goals

We aim at multiple improvements at the same time:

  - Advanced UI patterns: Adopt Primer's timeline style, that we are familiar with from GitHub PRs.

  - Adopt known UX pattern: Behave more often like a chat.
    
      - Make the input field for comments more prominently, always visible, at least for desktop screen sizes
    
      - By default order the timeline from old to new, making the newest message visible by default just above the message input field
    
      - Show new comments automatically without reloads by polling frequently for new comments

#### **Acceptance criteria**

  - **Primer:** Use Primer components to rebuild the current Activity tab (in the right split screen of Work package details view)

  - **Current elements** must be present:
    
      - Meta information:
        
          - User name
        
          - Date/time
        
          - \#id
        
          - Notification badge (if present)
        
          - More icon with existing actions
    
      - Comment text
    
      - Change list
    
      - Reply/Quote button that functions as it does today
        
          - ~~\[open\] Emoji button?~~

  - **New comment box:**
    
      - On desktop/split screen:
        
          - The comment box will be a fixed element anchored to the bottom of the split screen area (regardless of sort order of activity)
        
          - When a new comment is posted, the activity tab will scroll to display the new comment (on top or at the bottom, depending on user preferences)
    
      - On mobile:
        
          - The comment box will not be a fixed element; it will function as it does today: it will be positioned either on top after the tab bar (when sort order is newest on top) or at the bottom after all activity (when sort order is newest at bottom).
    
      - The comment box will, at its base state, be a single line text-area.
        
          - On focus, this will expand to multi-line with an CKEditor editor toolbar.
        
          - The comment box will expand to a max-height, after which it will be scrollable.
            
              - For the fixed version: max-height will be 30% of the available total height.
        
          - When focusing out (on blur),
            
              - If the field is empty: it goes back to its initial empty one-line state
            
              - If the field has text: it will reduce in size to a max of 4-lines (or less if content is less)

  - **Filtering** with these options:
    
      - Show everything
    
      - Show changes only
    
      - Show comments only

  - **Ordering** (move it here instead of hiding it in a separate settings page):
    
      - Newest on top
    
      - Newest at the bottom (new default), on page load scrolled to bottom, so that newest are visible directly.

  - *Additional specifications to be defined*

  - In **Account settings** → **Settings**, rename the two options under *Display comments* to: <mention class="mention" data-id="58460" data-type="work_package" data-text="###58460">###58460</mention>
    
      - Newest first = "Newest on top"
    
      - Oldest first = "Newest at the bottom"

#### Related/parallel features

  - <mention class="mention" data-id="40437" data-type="work_package" data-text="###40437">###40437</mention>

  - Activities displayed in a GitHub-style timeline (feature to be defined), with separation of comments and activities/changes

#### **Out of scope**

  - Primerisation of other elements of the page, including:
    
      - The tab bar itself
    
      - Other tabs (such as Files, Relations, Watchers)

  - Threads (the ability to start a new thread with a reply to individual comments): <mention class="mention" data-id="54709" data-type="work_package" data-text="###54709">###54709</mention>

  - Open points: <mention class="mention" data-id="49578" data-type="work_package" data-text="###49578">###49578</mention>

**Figma prototype**