Add latest changes from gitlab-org/gitlab@16-0-stable-eev16.0.0-rc42

5 files changed, 19 insertions, 9 deletions

diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
index dafc4bc5abf..54d13ecc9c8 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_mini_graph.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLoadingIcon } from '@gitlab/ui';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import { __ } from '~/locale';
 import {
   getQueryHeaders,
diff --git a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
index 62b1209131c..71f53613a3b 100644
--- a/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
+++ b/app/assets/javascripts/projects/commit_box/info/components/commit_box_pipeline_status.vue
@@ -1,7 +1,7 @@
 <script>
 import { GlLoadingIcon, GlLink } from '@gitlab/ui';
 import CiIcon from '~/vue_shared/components/ci_icon.vue';
-import { createAlert } from '~/flash';
+import { createAlert } from '~/alert';
 import {
   getQueryHeaders,
   toggleQueryPollingByVisibility,
diff --git a/app/assets/javascripts/projects/commit_box/info/index.js b/app/assets/javascripts/projects/commit_box/info/index.js
index 7500c152b6a..7c4b76fd62f 100644
--- a/app/assets/javascripts/projects/commit_box/info/index.js
+++ b/app/assets/javascripts/projects/commit_box/info/index.js
@@ -1,6 +1,5 @@
 import { fetchCommitMergeRequests } from '~/commit_merge_requests';
 import { initCommitPipelineMiniGraph } from './init_commit_pipeline_mini_graph';
-import { initDetailsButton } from './init_details_button';
 import { loadBranches } from './load_branches';
 import initCommitPipelineStatus from './init_commit_pipeline_status';
 
@@ -14,7 +13,5 @@ export const initCommitBoxInfo = () => {
   // Display pipeline mini graph for this commit
   initCommitPipelineMiniGraph();
 
-  initDetailsButton();
-
   initCommitPipelineStatus();
 };
diff --git a/app/assets/javascripts/projects/commit_box/info/init_details_button.js b/app/assets/javascripts/projects/commit_box/info/init_details_button.js
index bc2c16b9e83..520b20fcb86 100644
--- a/app/assets/javascripts/projects/commit_box/info/init_details_button.js
+++ b/app/assets/javascripts/projects/commit_box/info/init_details_button.js
@@ -1,7 +1,17 @@
 export const initDetailsButton = () => {
-  document.querySelector('.commit-info').addEventListener('click', function expand(e) {
-    e.preventDefault();
-    this.querySelector('.js-details-content').classList.remove('hide');
-    this.querySelector('.js-details-expand').classList.add('gl-display-none');
+  const expandButton = document.querySelector('.js-details-expand');
+
+  if (!expandButton) {
+    return;
+  }
+
+  expandButton.addEventListener('click', (event) => {
+    const btn = event.currentTarget;
+    const contentEl = btn.parentElement.querySelector('.js-details-content');
+
+    if (contentEl) {
+      contentEl.classList.remove('hide');
+      btn.classList.add('gl-display-none');
+    }
   });
 };
diff --git a/app/assets/javascripts/projects/commit_box/info/load_branches.js b/app/assets/javascripts/projects/commit_box/info/load_branches.js
index d1136817cb3..8333e70b951 100644
--- a/app/assets/javascripts/projects/commit_box/info/load_branches.js
+++ b/app/assets/javascripts/projects/commit_box/info/load_branches.js
@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { sanitize } from '~/lib/dompurify';
 import { __ } from '~/locale';
+import { initDetailsButton } from './init_details_button';
 
 export const loadBranches = (containerSelector = '.js-commit-box-info') => {
   const containerEl = document.querySelector(containerSelector);
@@ -14,6 +15,8 @@ export const loadBranches = (containerSelector = '.js-commit-box-info') => {
     .get(commitPath)
     .then(({ data }) => {
       branchesEl.innerHTML = sanitize(data);
+
+      initDetailsButton();
     })
     .catch(() => {
       branchesEl.textContent = __('Failed to load branches. Please try again.');