diff options
9 files changed, 94 insertions, 61 deletions
diff --git a/app/assets/javascripts/diffs/components/diff_file_row.vue b/app/assets/javascripts/diffs/components/diff_file_row.vue index 5aaed0d40db..15e63a1c9ca 100644 --- a/app/assets/javascripts/diffs/components/diff_file_row.vue +++ b/app/assets/javascripts/diffs/components/diff_file_row.vue @@ -5,12 +5,14 @@ */ import FileRow from '~/vue_shared/components/file_row.vue'; import FileRowStats from './file_row_stats.vue'; +import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; export default { name: 'DiffFileRow', components: { FileRow, FileRowStats, + ChangedFileIcon, }, props: { file: { @@ -31,7 +33,8 @@ export default { </script> <template> - <file-row :file="file" :hide-file-stats="hideFileStats" v-bind="$attrs" v-on="$listeners"> - <file-row-stats v-if="showFileRowStats" :file="file" /> + <file-row :file="file" v-bind="$attrs" v-on="$listeners"> + <file-row-stats v-if="showFileRowStats" :file="file" class="mr-1" /> + <changed-file-icon :file="file" :size="16" /> </file-row> </template> diff --git a/app/assets/javascripts/diffs/components/tree_list.vue b/app/assets/javascripts/diffs/components/tree_list.vue index 1eac3430a20..eca9091f92f 100644 --- a/app/assets/javascripts/diffs/components/tree_list.vue +++ b/app/assets/javascripts/diffs/components/tree_list.vue @@ -95,8 +95,6 @@ export default { :file="file" :level="0" :hide-file-stats="hideFileStats" - :hide-extra-on-tree="true" - :show-changed-icon="true" :file-row-component="$options.DiffFileRow" @toggleTreeOpen="toggleTreeOpen" @clickFile="scrollToFile" diff --git a/app/assets/javascripts/self_monitor/components/self_monitor_form.vue b/app/assets/javascripts/self_monitor/components/self_monitor_form.vue index 2f364eae67f..6b19a72317c 100644 --- a/app/assets/javascripts/self_monitor/components/self_monitor_form.vue +++ b/app/assets/javascripts/self_monitor/components/self_monitor_form.vue @@ -106,7 +106,7 @@ export default { saveChangesSelfMonitorProject() { if (this.projectCreated && !this.projectEnabled) { this.showSelfMonitorModal(); - } else { + } else if (!this.projectCreated && !this.loading) { this.createProject(); } }, diff --git a/app/assets/javascripts/user_popovers.js b/app/assets/javascripts/user_popovers.js index 67e5f175039..5cc22f62262 100644 --- a/app/assets/javascripts/user_popovers.js +++ b/app/assets/javascripts/user_popovers.js @@ -60,43 +60,45 @@ export default (elements = document.querySelectorAll('.js-user-link')) => { const userLinks = Array.from(elements); const UserPopoverComponent = Vue.extend(UserPopover); - return userLinks.map(el => { - if (initializedPopovers.has(el)) { - return initializedPopovers.get(el); - } - - const user = { - location: null, - bio: null, - organization: null, - status: null, - loaded: false, - }; - const renderedPopover = new UserPopoverComponent({ - propsData: { - target: el, - user, - }, - }); - - initializedPopovers.set(el, renderedPopover); - - renderedPopover.$mount(); - - el.addEventListener('mouseenter', ({ target }) => { - removeTitle(target); - const preloadedUserInfo = getPreloadedUserInfo(target.dataset); - - Object.assign(user, preloadedUserInfo); - - if (preloadedUserInfo.userId) { - populateUserInfo(user); + return userLinks + .filter(({ dataset }) => dataset.user || dataset.userId) + .map(el => { + if (initializedPopovers.has(el)) { + return initializedPopovers.get(el); } - }); - el.addEventListener('mouseleave', ({ target }) => { - target.removeAttribute('aria-describedby'); - }); - return renderedPopover; - }); + const user = { + location: null, + bio: null, + organization: null, + status: null, + loaded: false, + }; + const renderedPopover = new UserPopoverComponent({ + propsData: { + target: el, + user, + }, + }); + + initializedPopovers.set(el, renderedPopover); + + renderedPopover.$mount(); + + el.addEventListener('mouseenter', ({ target }) => { + removeTitle(target); + const preloadedUserInfo = getPreloadedUserInfo(target.dataset); + + Object.assign(user, preloadedUserInfo); + + if (preloadedUserInfo.userId) { + populateUserInfo(user); + } + }); + el.addEventListener('mouseleave', ({ target }) => { + target.removeAttribute('aria-describedby'); + }); + + return renderedPopover; + }); }; diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue index 1ea6eb2628b..578fcc819b0 100644 --- a/app/assets/javascripts/vue_shared/components/file_row.vue +++ b/app/assets/javascripts/vue_shared/components/file_row.vue @@ -1,14 +1,12 @@ <script> import FileHeader from '~/vue_shared/components/file_row_header.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue'; -import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; export default { name: 'FileRow', components: { FileHeader, FileIcon, - ChangedFileIcon, }, props: { file: { @@ -19,11 +17,6 @@ export default { type: Number, required: true, }, - showChangedIcon: { - type: Boolean, - required: false, - default: false, - }, }, computed: { isTree() { @@ -121,15 +114,14 @@ export default { <div class="file-row-name-container"> <span ref="textOutput" :style="levelIndentation" class="file-row-name str-truncated"> <file-icon - v-if="!showChangedIcon || file.type === 'tree'" class="file-row-icon" + :class="{ 'text-secondary': file.type === 'tree' }" :file-name="file.name" :loading="file.loading" :folder="isTree" :opened="file.opened" :size="16" /> - <changed-file-icon v-else :file="file" :size="16" class="append-right-5" /> {{ file.name }} </span> <slot></slot> diff --git a/changelogs/unreleased/118442-step2-restyle-changes-header-and-file-tree.yml b/changelogs/unreleased/118442-step2-restyle-changes-header-and-file-tree.yml new file mode 100644 index 00000000000..9610765103f --- /dev/null +++ b/changelogs/unreleased/118442-step2-restyle-changes-header-and-file-tree.yml @@ -0,0 +1,5 @@ +--- +title: Restyle Merge Request diffs file tree +merge_request: 24342 +author: +type: changed diff --git a/spec/frontend/diffs/components/diff_file_row_spec.js b/spec/frontend/diffs/components/diff_file_row_spec.js index bd5b3afdc05..9b7a16d0cb5 100644 --- a/spec/frontend/diffs/components/diff_file_row_spec.js +++ b/spec/frontend/diffs/components/diff_file_row_spec.js @@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils'; import DiffFileRow from '~/diffs/components/diff_file_row.vue'; import FileRow from '~/vue_shared/components/file_row.vue'; import FileRowStats from '~/diffs/components/file_row_stats.vue'; +import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; describe('Diff File Row component', () => { let wrapper; @@ -38,6 +39,21 @@ describe('Diff File Row component', () => { ); }); + it('renders ChangedFileIcon component', () => { + createComponent({ + level: 4, + file: {}, + hideFileStats: false, + }); + + expect(wrapper.find(ChangedFileIcon).props()).toEqual( + expect.objectContaining({ + file: {}, + size: 16, + }), + ); + }); + describe('FileRowStats components', () => { it.each` type | hideFileStats | value | desc diff --git a/spec/frontend/fixtures/merge_requests.rb b/spec/frontend/fixtures/merge_requests.rb index 4f004a69265..be11423ec41 100644 --- a/spec/frontend/fixtures/merge_requests.rb +++ b/spec/frontend/fixtures/merge_requests.rb @@ -10,20 +10,24 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont let(:project) { create(:project, :repository, namespace: namespace, path: 'merge-requests-project') } # rubocop: disable Layout/TrailingWhitespace + let(:description) do + <<~MARKDOWN.strip_heredoc + - [ ] Task List Item + - [ ] + - [ ] Task List Item 2 + MARKDOWN + end + # rubocop: enable Layout/TrailingWhitespace + let(:merge_request) do create( :merge_request, :with_diffs, source_project: project, target_project: project, - description: <<~MARKDOWN.strip_heredoc - - [ ] Task List Item - - [ ] - - [ ] Task List Item 2 - MARKDOWN + description: description ) end - # rubocop: enable Layout/TrailingWhitespace let(:merged_merge_request) { create(:merge_request, :merged, source_project: project, target_project: project) } let(:pipeline) do @@ -122,6 +126,15 @@ describe Projects::MergeRequestsController, '(JavaScript fixtures)', type: :cont end end + context 'with mentions' do + let(:group) { create(:group) } + let(:description) { "@#{group.full_path} @all @#{admin.username}" } + + it 'merge_requests/merge_request_with_mentions.html' do + render_merge_request(merge_request) + end + end + private def render_discussions_json(merge_request) diff --git a/spec/javascripts/user_popovers_spec.js b/spec/javascripts/user_popovers_spec.js index b3def474957..6ac22fca2d3 100644 --- a/spec/javascripts/user_popovers_spec.js +++ b/spec/javascripts/user_popovers_spec.js @@ -2,10 +2,10 @@ import initUserPopovers from '~/user_popovers'; import UsersCache from '~/lib/utils/users_cache'; describe('User Popovers', () => { - const fixtureTemplate = 'merge_requests/diff_comment.html'; + const fixtureTemplate = 'merge_requests/merge_request_with_mentions.html'; preloadFixtures(fixtureTemplate); - const selector = '.js-user-link'; + const selector = '.js-user-link, .gfm-project_member'; const dummyUser = { name: 'root' }; const dummyUserStatus = { message: 'active' }; @@ -34,8 +34,12 @@ describe('User Popovers', () => { popovers = initUserPopovers(document.querySelectorAll(selector)); }); - it('initializes a popover for each js-user-link element found in the document', () => { - expect(document.querySelectorAll(selector).length).toBe(popovers.length); + it('initializes a popover for each user link with a user id', () => { + const linksWithUsers = Array.from(document.querySelectorAll(selector)).filter( + ({ dataset }) => dataset.user || dataset.userId, + ); + + expect(linksWithUsers.length).toBe(popovers.length); }); it('does not initialize the user popovers twice for the same element', () => { |