Skip to content

Resolve "[FE] Implement status and Discussion Count on Designs"

Thomas Randolph requested to merge 13354-design-status-and-comments-count into master

What does this MR do?

Feature

  1. Add a design status indicator so that it's more clear what changed between versions of a design.
  2. Add a comment count indicator so that it's visually obvious when a design has a conversation started on it

Prior Art

The design list already had code to show the comments icon and count, but it was not being used for two reasons:

  1. The component was using commentsCount as the variable, and the GraphQL query eventually wound up adding notesCount
  2. Regardless of the name, the frontend GQL queries (and mutations) did not include the notesCount field

Implementation

There are essentially two changes here.

The first change is to add the event and notesCount fields to the GraphQL queries & mutations, to the Vue components, and to update the existing code to show the comments to use the notesCount field instead of commentsCount. This enabled the existing UI for that feature (Feature #​2 above).

The second change is to use the event field to show a file modification icon. This required a small amount of new UI and styles. Notably, the new code handles design additions, modifications, and deletions (as well as "no event"). However, I don't believe it's possible for the UI to generate a deletion event. If deletion events exist, they will come from some other source. Regardless, the UI handles them, so it should work when we add the ability to delete designs.

Notable Choices

  • Despite changing the variable from commentsCount to notesCount, which keeps the names consistent throughout the code (GQL -> List component -> Item Component), the eventual UI output is still "Comments". I think this is reasonable because it's likely what users will expect and there was no direction in the issue to update the UI to use "Notes".

Screenshots

Current master After This MR
Modification designsCurrentPrevious designsNewPrevious
Addition designsCurrentLatest designsNewLatest

Does this MR meet the acceptance criteria?

Conformity

Performance and Testing

Security

If this MR contains changes to processing or storing of credentials or tokens, authorization and authentication methods and other items described in the security review guidelines:

  • ~~Label as security and @ mention @gitlab-com/gl-security/appsec~~
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team
Edited by 🤖 GitLab Bot 🤖

Merge request reports