- Compare versions header is full width except in the unified diff mode
with no tree sidebar
- Bar is always full width, but the content within stays centered when
unified and no tree sidebar
- File header is the same height as the "Compare versions header"
- aligns with the design system grid guidelines => 56px
- Diff file headers use a button group, switch icon order to open file
externally being the last option, all buttons will become icon buttons
(icon delivery by @dimitrieh)
- If a file header becomes sticky no rounded corner/double border
problem is visible anymore
- Add an ID to the diff content
- handle clicking on file name in diffFileHeader when it is not a link
to another page but rather a link to an element on the page
Mousetrap is used as the help-tool to listen to keystrokes
Added currentDiffIndex getter to store that holds
the index of currently active diff file in the list
Instead of computing it on the component, we will take advantage of it
being available for all components in DiffsApp
Testing keyboard navigation and jumpToFile()
Fixes some diff files not rendering when the renderIt
property is updated.
Previously it was using a local copy of renderIt which meant
Vue wouldn't update it when the files renderIt property was updates
The empty state now only gets shown when no files exist in the branch.
If the user is reviewing 2 versions with no files, we don't show the state.
Refactors the diff app spec to use Vue test utils.
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/48635
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
This adds toggle buttons to switch between file & tree list.
For file list, it renders the truncated paths with the ellipsis
at the start of the path.
When focusing the input, it hides the toggle buttons.
On blur, the buttons get shown again.
Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/51859
Sam Bigelow
Phil Hughes
Clement Ho
Winnie Hellmann
Natalia Tepluhina
Denys Mishunov
Filipa Lacerda
Tim Zallmann
Nick Thomas
Sean Nichols
Oswaldo Ferreira
Jacques Erasmus
Mike Greiling
Johann Hubert Sonntagbauer