Merge branch 'retain-pipeline-editor-branch' into 'master'

Update session history when switching branches in pipeline editor

See merge request gitlab-org/gitlab!60995

app/assets/javascripts/pipeline_editor/components/file_nav/branch_switcher.vue

 <script>
 import { GlDropdown, GlDropdownItem, GlDropdownSectionHeader, GlIcon } from '@gitlab/ui';
+import { historyPushState } from '~/lib/utils/common_utils';
+import { setUrlParams } from '~/lib/utils/url_utility';
 import { s__ } from '~/locale';
 import { DEFAULT_FAILURE } from '~/pipeline_editor/constants';
 import getAvailableBranches from '~/pipeline_editor/graphql/queries/available_branches.graphql';
@@ -55,6 +57,9 @@ export default {
         data: { currentBranch: newBranch },
       });
 
+      const updatedPath = setUrlParams({ branch_name: newBranch });
+      historyPushState(updatedPath);
+
       this.$emit('refetchContent');
     },
   },

spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js

@@ -123,11 +123,28 @@ describe('Pipeline editor branch switcher', () => {
 
   describe('when switching branches', () => {
     beforeEach(async () => {
+      jest.spyOn(window.history, 'pushState').mockImplementation(() => {});
       mockAvailableBranchQuery.mockResolvedValue(mockProjectBranches);
       createComponentWithApollo();
       await waitForPromises();
     });
 
+    it('updates session history when selecting a different branch', async () => {
+      const branch = findDropdownItems().at(1);
+      await branch.vm.$emit('click');
+
+      expect(window.history.pushState).toHaveBeenCalled();
+      expect(window.history.pushState.mock.calls[0][2]).toContain(`?branch_name=${branch.text()}`);
+    });
+
+    it('does not update session history when selecting current branch', async () => {
+      const branch = findDropdownItems().at(0);
+      await branch.vm.$emit('click');
+
+      expect(branch.text()).toBe(mockDefaultBranch);
+      expect(window.history.pushState).not.toHaveBeenCalled();
+    });
+
     it('emits the refetchContent event when selecting a different branch', async () => {
       const branch = findDropdownItems().at(1);