Resolve "[FE] Implement status and Discussion Count on Designs"
What does this MR do?
Feature
- Add a design status indicator so that it's more clear what changed between versions of a design.
- 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:
- The component was using
commentsCount
as the variable, and the GraphQL query eventually wound up addingnotesCount
- 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
tonotesCount
, 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 | ||
Addition |
Does this MR meet the acceptance criteria?
Conformity
-
Changelog entry -
Documentation created/updated or follow-up review issue created -
Code review guidelines -
Merge request performance guidelines -
Style guides -
Database guides -
Separation of EE specific content
Performance and Testing
-
Review and add/update tests for this feature/bug. Consider all test levels. See the Test Planning Process. -
Tested in all supported browsers
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