From 0955bbfab43928269b7744d16410e7a72af7522b Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Wed, 24 Aug 2022 16:26:05 -0600 Subject: [PATCH 1/3] Update the Changes tab with the real file count when it loads Changelog: fixed --- .../javascripts/diffs/components/app.vue | 18 +++++++++++++++++- .../projects/merge_requests/show.html.haml | 2 +- .../merge_requests/tabs/_tab.html.haml | 2 ++ 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index c16a43af1e647a..f720154e2d40b0 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -331,6 +331,8 @@ export default { mrReviews: this.rehydratedMrReviews, }); + this.interfaceWithDOM(); + if (this.endpointCodequality) { this.setCodequalityEndpoint(this.endpointCodequality); } @@ -445,6 +447,16 @@ export default { notesEventHub.$off('refetchDiffData', this.refetchDiffData); notesEventHub.$off('fetchDiffData', this.fetchData); }, + interfaceWithDOM() { + this.diffsTab = document.querySelector("[js-id='diffs_tab']"); + }, + updateChangesTabCount() { + const badge = this.diffsTab.querySelector('.gl-badge'); + + if (this.diffsTab && badge) { + badge.textContent = this.diffFilesLength; + } + }, navigateToDiffFileNumber(number) { this.navigateToDiffFileIndex(number - 1); }, @@ -461,7 +473,11 @@ export default { this.fetchDiffFilesMeta() .then(({ real_size }) => { this.diffFilesLength = parseInt(real_size, 10); - if (toggleTree) this.setTreeDisplay(); + if (toggleTree) { + this.setTreeDisplay(); + } + + this.updateChangesTabCount(); }) .catch(() => { createFlash({ diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index 9487f9e73ac03f..915139c350b43c 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -39,7 +39,7 @@ = tab_link_for @merge_request, :pipelines do = _("Pipelines") = gl_badge_tag @number_of_pipelines, { size: :sm }, { class: 'js-pipelines-mr-count' } - = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab" do + = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab", js_id: "diffs_tab" do = tab_link_for @merge_request, :diffs do = _("Changes") = gl_badge_tag @diffs_count, { size: :sm } diff --git a/app/views/projects/merge_requests/tabs/_tab.html.haml b/app/views/projects/merge_requests/tabs/_tab.html.haml index 9d942da8098396..37c23569f0de9a 100644 --- a/app/views/projects/merge_requests/tabs/_tab.html.haml +++ b/app/views/projects/merge_requests/tabs/_tab.html.haml @@ -2,8 +2,10 @@ - tab_class = local_assigns.fetch(:class, nil) - qa_selector = local_assigns.fetch(:qa_selector, nil) - id = local_assigns.fetch(:id, nil) +- js_id = local_assigns.fetch(:js_id, nil) - attrs = { class: [tab_class, ("active" if params[:tab] == tab_name)], data: { qa_selector: qa_selector } } - attrs[:id] = id if id.present? +- attrs["js-id"] = js_id if js_id.present? %li{ attrs } = yield -- GitLab From a4af80f8dd6ebf5f0efbd23d1b9873cb3bc6da2f Mon Sep 17 00:00:00 2001 From: Thomas Randolph Date: Thu, 8 Sep 2022 16:07:19 -0600 Subject: [PATCH 2/3] Use a custom JS class to select the diffs tab --- app/assets/javascripts/diffs/components/app.vue | 2 +- app/views/projects/merge_requests/show.html.haml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index f720154e2d40b0..f5c0776ca35f95 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -448,7 +448,7 @@ export default { notesEventHub.$off('fetchDiffData', this.fetchData); }, interfaceWithDOM() { - this.diffsTab = document.querySelector("[js-id='diffs_tab']"); + this.diffsTab = document.querySelector('.js-diffs-tab'); }, updateChangesTabCount() { const badge = this.diffsTab.querySelector('.gl-badge'); diff --git a/app/views/projects/merge_requests/show.html.haml b/app/views/projects/merge_requests/show.html.haml index 915139c350b43c..d34848c801d8dc 100644 --- a/app/views/projects/merge_requests/show.html.haml +++ b/app/views/projects/merge_requests/show.html.haml @@ -39,7 +39,7 @@ = tab_link_for @merge_request, :pipelines do = _("Pipelines") = gl_badge_tag @number_of_pipelines, { size: :sm }, { class: 'js-pipelines-mr-count' } - = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab", js_id: "diffs_tab" do + = render "projects/merge_requests/tabs/tab", name: "diffs", class: "diffs-tab js-diffs-tab", id: "diffs-tab", qa_selector: "diffs_tab" do = tab_link_for @merge_request, :diffs do = _("Changes") = gl_badge_tag @diffs_count, { size: :sm } -- GitLab From 99a1c3579b1c578de788e181baba1bf9e6e6a09e Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Sat, 10 Sep 2022 00:50:17 +0000 Subject: [PATCH 3/3] Remove HAML `js-id` handler code --- app/views/projects/merge_requests/tabs/_tab.html.haml | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/views/projects/merge_requests/tabs/_tab.html.haml b/app/views/projects/merge_requests/tabs/_tab.html.haml index 37c23569f0de9a..9d942da8098396 100644 --- a/app/views/projects/merge_requests/tabs/_tab.html.haml +++ b/app/views/projects/merge_requests/tabs/_tab.html.haml @@ -2,10 +2,8 @@ - tab_class = local_assigns.fetch(:class, nil) - qa_selector = local_assigns.fetch(:qa_selector, nil) - id = local_assigns.fetch(:id, nil) -- js_id = local_assigns.fetch(:js_id, nil) - attrs = { class: [tab_class, ("active" if params[:tab] == tab_name)], data: { qa_selector: qa_selector } } - attrs[:id] = id if id.present? -- attrs["js-id"] = js_id if js_id.present? %li{ attrs } = yield -- GitLab