- Moved discussion notes out of `NoteableDiscussion` component into a
new `DiscussionNotes` component
- Wrote Jest tests for the new `DiscussionNotes` component
- Updated Jest config for emojis fixtures
- Updated Karma tests `NoteableDiscussion` to match its new structure
- Convert `DiffDiscussions` tests to use Vue test utils
- Created DiscussionActions component
- Updated NoteableDiscussion component accordingly
- Wrote Jest tests for DiscussionActions
- Updated Jest config to enable emojis aliases mock
- Updated qa specs to reflect changes in NoteableDiscussions
When converting a comment to a discussion
if the "Cancel" button is used to exit the new discussion note,
the comment would revert back to its initial state
The header of the `NoteableDiscussion` component is really a media
object[1], but it didn't have the right DOM or styling to correctly
achieve it.
This change wraps all the children of the media object (except the
floated image) in a dedicated `.timeline-content` element, which is
styled to establish its own block formatting context[2]. This ensures
*all* of its children sit left-aligned to the right edge of the float.
In short, the DOM used to look like this:
.discussion-header
.timeline-icon
note-header
note-edited-text
and now it looks like this:
.discussion-header
.timeline-icon
.timeline-content (with own formatting context)
note-header
note-edited-text
This is also now more consistent with the DOM of `NoteableNote`, in that
`.timeline-icon` and `.timeline-content` seem to want to be siblings.
[1]: http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
[2]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
fix#56369
chore(changelog): Added changelog entry
chore(prettier): Formated with prettier
test(JumpToNextDiscussionButton): Added test for new component
test(Refactored tests to use vue test-utils):
chore(translations): Added newly generated locales
Update spec/javascripts/notes/components/discussion_jump_to_next_button_spec.js
chore(prettier): Formated with prettier
test(JumpToNextDiscussionButton): Updated tests to use a local vue instance
test(JumpToNextDiscussionButton): Running tests in async to prevent maximum stack overflow
Resolve "Commit comments displayed on a merge request that contains that commit no longer specify which commit they come from"
Closes#53950
See merge request gitlab-org/gitlab-ce!24427
Before, diff file `higlighted_diff_lines`/`parallel_diff_lines` and
diff discussion `truncated_diff_lines` were inconsistent: `text` and
`rich_text` on the latter included the leading +/-/<space> character,
like on the backend, while the former had no `text` and its `rich_text`
had dropped this char.
This resulted in a bug when the suggestions feature expected these diff
line objects to be identical in format and thus interchangeable, which
was not the case.
Improve the renderign of new and existing discussions
by reducing the number of watchers on each object & array.
Previously every discussion change would trigger an update for every
discussion component.
Also tidied up some components to get them closer to our docs.
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/51506
This caused many pain points when working with it.
Part of the data was camel cased the other snake case.
Other parts where snake case & then getting converted in components,
this conversion has the potential for leaking memory.
This changes that & makes it consistent with what it returned from the
API, snake case.
This re-implements image commenting in merge request diffs.
This feature was previously lost when the merge request
page was refactored into Vue.
With this, we create an overlay component. The overlay
component handles displaying the comment badges
and the comment form badge.
Badges are displayed based on the position attribute
sent with the discussion.
Comment forms for diff files are controlled through
a different state property. This is so we don't
tie comment forms to diff files directly creating
deep nested state. Instead we create a flat array
which holds the file hash & the X & Y position of
the comment form.
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/48956
The eslint-plugin-vue upgrade had some breaking changes to
vue/attribute-order which needed to be resolved in order to avoid
disabling the rule entirely