Allow users to work on non-default branch in pipeline editor

app/assets/javascripts/pipeline_editor/components/commit/commit_form.vue

@@ -21,7 +21,7 @@ export default {
     GlSprintf,
   },
   props: {
-    defaultBranch: {
+    currentBranch: {
       type: String,
       required: false,
       default: '',
@@ -40,23 +40,23 @@ export default {
   data() {
     return {
       message: this.defaultMessage,
-      branch: this.defaultBranch,
       openMergeRequest: false,
+      targetBranch: this.currentBranch,
     };
   },
   computed: {
-    isDefaultBranch() {
-      return this.branch === this.defaultBranch;
+    isCurrentBranchTarget() {
+      return this.targetBranch === this.currentBranch;
     },
     submitDisabled() {
-      return !(this.message && this.branch);
+      return !(this.message && this.targetBranch);
     },
   },
   methods: {
     onSubmit() {
       this.$emit('submit', {
         message: this.message,
-        branch: this.branch,
+        targetBranch: this.targetBranch,
         openMergeRequest: this.openMergeRequest,
       });
     },
@@ -100,12 +100,12 @@ export default {
       >
         <gl-form-input
           id="target-branch-field"
-          v-model="branch"
+          v-model="targetBranch"
           class="gl-font-monospace!"
           required
         />
         <gl-form-checkbox
-          v-if="!isDefaultBranch"
+          v-if="!isCurrentBranchTarget"
           v-model="openMergeRequest"
           data-testid="new-mr-checkbox"
           class="gl-mt-3"

app/assets/javascripts/pipeline_editor/components/commit/commit_section.vue

@@ -4,6 +4,7 @@ import { __, s__, sprintf } from '~/locale';
 import { COMMIT_FAILURE, COMMIT_SUCCESS } from '../../constants';
 import commitCIFile from '../../graphql/mutations/commit_ci_file.mutation.graphql';
 import getCommitSha from '../../graphql/queries/client/commit_sha.graphql';
+import getCurrentBranch from '../../graphql/queries/client/current_branch.graphql';
 
 import CommitForm from './commit_form.vue';
 
@@ -21,7 +22,7 @@ export default {
   components: {
     CommitForm,
   },
-  inject: ['projectFullPath', 'ciConfigPath', 'defaultBranch', 'newMergeRequestPath'],
+  inject: ['projectFullPath', 'ciConfigPath', 'newMergeRequestPath'],
   props: {
     ciFileContent: {
       type: String,
@@ -38,6 +39,9 @@ export default {
     commitSha: {
       query: getCommitSha,
     },
+    currentBranch: {
+      query: getCurrentBranch,
+    },
   },
   computed: {
     defaultCommitMessage() {
@@ -49,13 +53,13 @@ export default {
       const url = mergeUrlParams(
         {
           [MR_SOURCE_BRANCH]: sourceBranch,
-          [MR_TARGET_BRANCH]: this.defaultBranch,
+          [MR_TARGET_BRANCH]: this.currentBranch,
         },
         this.newMergeRequestPath,
       );
       redirectTo(url);
     },
-    async onCommitSubmit({ message, branch, openMergeRequest }) {
+    async onCommitSubmit({ message, targetBranch, openMergeRequest }) {
       this.isSaving = true;
 
       try {
@@ -67,8 +71,8 @@ export default {
           mutation: commitCIFile,
           variables: {
             projectPath: this.projectFullPath,
-            branch,
-            startBranch: this.defaultBranch,
+            branch: targetBranch,
+            startBranch: this.currentBranch,
             message,
             filePath: this.ciConfigPath,
             content: this.ciFileContent,
@@ -86,7 +90,7 @@ export default {
         if (errors?.length) {
           this.$emit('showError', { type: COMMIT_FAILURE, reasons: errors });
         } else if (openMergeRequest) {
-          this.redirectToNewMergeRequest(branch);
+          this.redirectToNewMergeRequest(targetBranch);
         } else {
           this.$emit('commit', { type: COMMIT_SUCCESS });
         }
@@ -105,7 +109,7 @@ export default {
 
 <template>
   <commit-form
-    :default-branch="defaultBranch"
+    :current-branch="currentBranch"
     :default-message="defaultCommitMessage"
     :is-saving="isSaving"
     @cancel="onCommitCancel"

app/assets/javascripts/pipeline_editor/graphql/queries/client/current_branch.graphql

+query getCurrentBranch {
+  currentBranch @client
+}

app/assets/javascripts/pipeline_editor/index.js

@@ -22,6 +22,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
   const {
     // Add to apollo cache as it can be updated by future queries
     commitSha,
+    initialBranchName,
     // Add to provide/inject API for static values
     ciConfigPath,
     defaultBranch,
@@ -42,6 +43,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
 
   apolloProvider.clients.defaultClient.cache.writeData({
     data: {
+      currentBranch: initialBranchName || defaultBranch,
       commitSha,
     },
   });

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

@@ -9,6 +9,7 @@ import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_stat
 import { COMMIT_FAILURE, COMMIT_SUCCESS, DEFAULT_FAILURE, LOAD_FAILURE_UNKNOWN } from './constants';
 import getBlobContent from './graphql/queries/blob_content.graphql';
 import getCiConfigData from './graphql/queries/ci_config.graphql';
+import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import PipelineEditorHome from './pipeline_editor_home.vue';
 
 export default {
@@ -23,9 +24,6 @@ export default {
     ciConfigPath: {
       default: '',
     },
-    defaultBranch: {
-      default: null,
-    },
     projectFullPath: {
       default: '',
     },
@@ -58,7 +56,7 @@ export default {
         return {
           projectPath: this.projectFullPath,
           path: this.ciConfigPath,
-          ref: this.defaultBranch,
+          ref: this.currentBranch,
         };
       },
       update(data) {
@@ -97,6 +95,9 @@ export default {
         this.reportFailure(LOAD_FAILURE_UNKNOWN);
       },
     },
+    currentBranch: {
+      query: getCurrentBranch,
+    },
   },
   computed: {
     hasUnsavedChanges() {

app/views/projects/ci/pipeline_editor/show.html.haml

@@ -4,6 +4,7 @@
   "commit-sha" => @project.commit ? @project.commit.sha : '',
   "default-branch" => @project.default_branch,
   "empty-state-illustration-path" => image_path('illustrations/empty-state/empty-dag-md.svg'),
+  "initial-branch-name": params[:branch_name],
   "lint-help-page-path" => help_page_path('ci/lint', anchor: 'validate-basic-logic-and-syntax'),
   "new-merge-request-path" => namespace_project_new_merge_request_path,
   "project-path" => @project.path,

changelogs/unreleased/pipeline-editor-branch-param.yml

+---
+title: Allow users to work on non-default branch in pipeline editor
+merge_request: 55413
+author:
+type: added

spec/frontend/pipeline_editor/components/commit/commit_form_spec.js

@@ -12,7 +12,7 @@ describe('Pipeline Editor | Commit Form', () => {
     wrapper = mountFn(CommitForm, {
       propsData: {
         defaultMessage: mockCommitMessage,
-        defaultBranch: mockDefaultBranch,
+        currentBranch: mockDefaultBranch,
         ...props,
       },
 
@@ -41,7 +41,7 @@ describe('Pipeline Editor | Commit Form', () => {
       expect(findCommitTextarea().attributes('value')).toBe(mockCommitMessage);
     });
 
-    it('shows a default branch', () => {
+    it('shows current branch', () => {
       expect(findBranchInput().attributes('value')).toBe(mockDefaultBranch);
     });
 
@@ -66,7 +66,7 @@ describe('Pipeline Editor | Commit Form', () => {
       expect(wrapper.emitted('submit')[0]).toEqual([
         {
           message: mockCommitMessage,
-          branch: mockDefaultBranch,
+          targetBranch: mockDefaultBranch,
           openMergeRequest: false,
         },
       ]);
@@ -101,7 +101,7 @@ describe('Pipeline Editor | Commit Form', () => {
       expect(wrapper.emitted('submit')[0]).toEqual([
         {
           message: anotherMessage,
-          branch: anotherBranch,
+          targetBranch: anotherBranch,
           openMergeRequest: true,
         },
       ]);

spec/frontend/pipeline_editor/components/commit/commit_section_spec.js

@@ -35,7 +35,6 @@ const mockVariables = {
 
 const mockProvide = {
   ciConfigPath: mockCiConfigPath,
-  defaultBranch: mockDefaultBranch,
   projectFullPath: mockProjectFullPath,
   newMergeRequestPath: mockNewMergeRequestPath,
 };
@@ -64,6 +63,7 @@ describe('Pipeline Editor | Commit section', () => {
       data() {
         return {
           commitSha: mockCommitSha,
+          currentBranch: mockDefaultBranch,
         };
       },
       mocks: {
@@ -116,7 +116,7 @@ describe('Pipeline Editor | Commit section', () => {
       await submitCommit();
     });
 
-    it('calls the mutation with the default branch', () => {
+    it('calls the mutation with the current branch', () => {
       expect(mockMutate).toHaveBeenCalledTimes(1);
       expect(mockMutate).toHaveBeenCalledWith({
         mutation: commitCreate,