Use default initial branch in SSE

Replace hardcoded master branch with the
initial branch provided by the backend
in the Static Site Editor

app/assets/javascripts/static_site_editor/constants.js

 import { s__, __ } from '~/locale';
 
 export const BRANCH_SUFFIX_COUNT = 8;
-export const DEFAULT_TARGET_BRANCH = 'master';
 export const ISSUABLE_TYPE = 'merge_request';
 
 export const SUBMIT_CHANGES_BRANCH_ERROR = s__('StaticSiteEditor|Branch could not be created.');

app/assets/javascripts/static_site_editor/graphql/resolvers/submit_content_changes.js

@@ -9,6 +9,7 @@ const submitContentChangesResolver = (
       project: projectId,
       username,
       sourcePath,
+      targetBranch,
       content,
       images,
       mergeRequestMeta,
@@ -21,6 +22,7 @@ const submitContentChangesResolver = (
     projectId,
     username,
     sourcePath,
+    targetBranch,
     content,
     images,
     mergeRequestMeta,

app/assets/javascripts/static_site_editor/pages/home.vue

@@ -111,6 +111,7 @@ export default {
               project: this.appData.project,
               username: this.appData.username,
               sourcePath: this.appData.sourcePath,
+              targetBranch: this.appData.branch,
               content: this.content,
               formattedMarkdown: this.formattedMarkdown,
               images: this.images,

app/assets/javascripts/static_site_editor/services/generate_branch_name.js

-import { BRANCH_SUFFIX_COUNT, DEFAULT_TARGET_BRANCH } from '../constants';
+import { BRANCH_SUFFIX_COUNT } from '../constants';
 
 const generateBranchSuffix = () => `${Date.now()}`.substr(BRANCH_SUFFIX_COUNT);
 
-const generateBranchName = (username, targetBranch = DEFAULT_TARGET_BRANCH) =>
+const generateBranchName = (username, targetBranch) =>
   `${username}-${targetBranch}-patch-${generateBranchSuffix()}`;
 
 export default generateBranchName;

app/assets/javascripts/static_site_editor/services/submit_content_changes.js

@@ -4,7 +4,6 @@ import generateBranchName from '~/static_site_editor/services/generate_branch_na
 import Tracking from '~/tracking';
 
 import {
-  DEFAULT_TARGET_BRANCH,
   SUBMIT_CHANGES_BRANCH_ERROR,
   SUBMIT_CHANGES_COMMIT_ERROR,
   SUBMIT_CHANGES_MERGE_REQUEST_ERROR,
@@ -16,9 +15,9 @@ import {
   DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION,
 } from '../constants';
 
-const createBranch = (projectId, branch) =>
+const createBranch = (projectId, branch, targetBranch) =>
   Api.createBranch(projectId, {
-    ref: DEFAULT_TARGET_BRANCH,
+    ref: targetBranch,
     branch,
   }).catch(() => {
     throw new Error(SUBMIT_CHANGES_BRANCH_ERROR);
@@ -73,13 +72,7 @@ const commit = (projectId, message, branch, actions) => {
   });
 };
 
-const createMergeRequest = (
-  projectId,
-  title,
-  description,
-  sourceBranch,
-  targetBranch = DEFAULT_TARGET_BRANCH,
-) => {
+const createMergeRequest = (projectId, title, description, sourceBranch, targetBranch) => {
   Tracking.event(document.body.dataset.page, TRACKING_ACTION_CREATE_MERGE_REQUEST);
   Api.trackRedisCounterEvent(USAGE_PING_TRACKING_ACTION_CREATE_MERGE_REQUEST);
 
@@ -100,16 +93,17 @@ const submitContentChanges = ({
   username,
   projectId,
   sourcePath,
+  targetBranch,
   content,
   images,
   mergeRequestMeta,
   formattedMarkdown,
 }) => {
-  const branch = generateBranchName(username);
+  const branch = generateBranchName(username, targetBranch);
   const { title: mergeRequestTitle, description: mergeRequestDescription } = mergeRequestMeta;
   const meta = {};
 
-  return createBranch(projectId, branch)
+  return createBranch(projectId, branch, targetBranch)
     .then(({ data: { web_url: url } }) => {
       const message = `${DEFAULT_FORMATTING_CHANGES_COMMIT_MESSAGE}\n\n${DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION}`;
 
@@ -133,7 +127,13 @@ const submitContentChanges = ({
     .then(({ data: { short_id: label, web_url: url } }) => {
       Object.assign(meta, { commit: { label, url } });
 
-      return createMergeRequest(projectId, mergeRequestTitle, mergeRequestDescription, branch);
+      return createMergeRequest(
+        projectId,
+        mergeRequestTitle,
+        mergeRequestDescription,
+        branch,
+        targetBranch,
+      );
     })
     .then(({ data: { iid: label, web_url: url } }) => {
       Object.assign(meta, { mergeRequest: { label: label.toString(), url } });

spec/frontend/static_site_editor/mock_data.js

@@ -55,7 +55,7 @@ export const mergeRequestTemplates = [
 
 export const submitChangesError = 'Could not save changes';
 export const commitBranchResponse = {
-  web_url: '/tree/root-master-patch-88195',
+  web_url: '/tree/root-main-patch-88195',
 };
 export const commitMultipleResponse = {
   short_id: 'ed899a2f4b5',
@@ -84,8 +84,8 @@ export const mounts = [
   },
 ];
 
-export const branch = 'master';
+export const branch = 'main';
 
-export const baseUrl = '/user1/project1/-/sse/master%2Ftest.md';
+export const baseUrl = '/user1/project1/-/sse/main%2Ftest.md';
 
 export const imageRoot = 'source/images/';

spec/frontend/static_site_editor/pages/home_spec.js

@@ -275,6 +275,7 @@ describe('static_site_editor/pages/home', () => {
             formattedMarkdown,
             project,
             sourcePath,
+            targetBranch: branch,
             username,
             images,
             mergeRequestMeta,

spec/frontend/static_site_editor/services/generate_branch_name_spec.js

-import { DEFAULT_TARGET_BRANCH, BRANCH_SUFFIX_COUNT } from '~/static_site_editor/constants';
+import { BRANCH_SUFFIX_COUNT } from '~/static_site_editor/constants';
 import generateBranchName from '~/static_site_editor/services/generate_branch_name';
 
-import { username } from '../mock_data';
+import { username, branch as targetBranch } from '../mock_data';
 
 describe('generateBranchName', () => {
   const timestamp = 12345678901234;
@@ -11,11 +11,11 @@ describe('generateBranchName', () => {
   });
 
   it('generates a name that includes the username and target branch', () => {
-    expect(generateBranchName(username)).toMatch(`${username}-${DEFAULT_TARGET_BRANCH}`);
+    expect(generateBranchName(username, targetBranch)).toMatch(`${username}-${targetBranch}`);
   });
 
   it(`adds the first ${BRANCH_SUFFIX_COUNT} numbers of the current timestamp`, () => {
-    expect(generateBranchName(username)).toMatch(
+    expect(generateBranchName(username, targetBranch)).toMatch(
       timestamp.toString().substring(BRANCH_SUFFIX_COUNT),
     );
   });

spec/frontend/static_site_editor/services/renderers/render_image_spec.js

@@ -47,11 +47,11 @@ describe('rich_content_editor/renderers/render_image', () => {
     it.each`
       destination                                      | isAbsolute | src
       ${'http://test.host/absolute/path/to/image.png'} | ${true}    | ${'http://test.host/absolute/path/to/image.png'}
-      ${'/relative/path/to/image.png'}                 | ${false}   | ${'http://test.host/user1/project1/-/raw/master/default/source/relative/path/to/image.png'}
-      ${'/target/image.png'}                           | ${false}   | ${'http://test.host/user1/project1/-/raw/master/source/with/target/image.png'}
-      ${'relative/to/current/image.png'}               | ${false}   | ${'http://test.host/user1/project1/-/raw/master/relative/to/current/image.png'}
-      ${'./relative/to/current/image.png'}             | ${false}   | ${'http://test.host/user1/project1/-/raw/master/./relative/to/current/image.png'}
-      ${'../relative/to/current/image.png'}            | ${false}   | ${'http://test.host/user1/project1/-/raw/master/../relative/to/current/image.png'}
+      ${'/relative/path/to/image.png'}                 | ${false}   | ${'http://test.host/user1/project1/-/raw/main/default/source/relative/path/to/image.png'}
+      ${'/target/image.png'}                           | ${false}   | ${'http://test.host/user1/project1/-/raw/main/source/with/target/image.png'}
+      ${'relative/to/current/image.png'}               | ${false}   | ${'http://test.host/user1/project1/-/raw/main/relative/to/current/image.png'}
+      ${'./relative/to/current/image.png'}             | ${false}   | ${'http://test.host/user1/project1/-/raw/main/./relative/to/current/image.png'}
+      ${'../relative/to/current/image.png'}            | ${false}   | ${'http://test.host/user1/project1/-/raw/main/../relative/to/current/image.png'}
     `('returns an image with the correct attributes', ({ destination, isAbsolute, src }) => {
       node.destination = destination;
 

spec/frontend/static_site_editor/services/submit_content_changes_spec.js

@@ -3,7 +3,6 @@ import Api from '~/api';
 import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 
 import {
-  DEFAULT_TARGET_BRANCH,
   SUBMIT_CHANGES_BRANCH_ERROR,
   SUBMIT_CHANGES_COMMIT_ERROR,
   SUBMIT_CHANGES_MERGE_REQUEST_ERROR,
@@ -25,6 +24,7 @@ import {
   createMergeRequestResponse,
   mergeRequestMeta,
   sourcePath,
+  branch as targetBranch,
   sourceContentYAML as content,
   trackingCategory,
   images,
@@ -33,7 +33,7 @@ import {
 jest.mock('~/static_site_editor/services/generate_branch_name');
 
 describe('submitContentChanges', () => {
-  const branch = 'branch-name';
+  const sourceBranch = 'branch-name';
   let trackingSpy;
   let origPage;
 
@@ -41,6 +41,7 @@ describe('submitContentChanges', () => {
     username,
     projectId,
     sourcePath,
+    targetBranch,
     content,
     images,
     mergeRequestMeta,
@@ -54,7 +55,7 @@ describe('submitContentChanges', () => {
       .spyOn(Api, 'createProjectMergeRequest')
       .mockResolvedValue({ data: createMergeRequestResponse });
 
-    generateBranchName.mockReturnValue(branch);
+    generateBranchName.mockReturnValue(sourceBranch);
 
     origPage = document.body.dataset.page;
     document.body.dataset.page = trackingCategory;
@@ -69,8 +70,8 @@ describe('submitContentChanges', () => {
   it('creates a branch named after the username and target branch', () => {
     return submitContentChanges(buildPayload()).then(() => {
       expect(Api.createBranch).toHaveBeenCalledWith(projectId, {
-        ref: DEFAULT_TARGET_BRANCH,
-        branch,
+        ref: targetBranch,
+        branch: sourceBranch,
       });
     });
   });
@@ -86,7 +87,7 @@ describe('submitContentChanges', () => {
   describe('committing markdown formatting changes', () => {
     const formattedMarkdown = `formatted ${content}`;
     const commitPayload = {
-      branch,
+      branch: sourceBranch,
       commit_message: `${DEFAULT_FORMATTING_CHANGES_COMMIT_MESSAGE}\n\n${DEFAULT_FORMATTING_CHANGES_COMMIT_DESCRIPTION}`,
       actions: [
         {
@@ -116,7 +117,7 @@ describe('submitContentChanges', () => {
   it('commits the content changes to the branch when creating branch succeeds', () => {
     return submitContentChanges(buildPayload()).then(() => {
       expect(Api.commitMultiple).toHaveBeenCalledWith(projectId, {
-        branch,
+        branch: sourceBranch,
         commit_message: mergeRequestMeta.title,
         actions: [
           {
@@ -140,7 +141,7 @@ describe('submitContentChanges', () => {
     const payload = buildPayload({ content: contentWithoutImages });
     return submitContentChanges(payload).then(() => {
       expect(Api.commitMultiple).toHaveBeenCalledWith(projectId, {
-        branch,
+        branch: sourceBranch,
         commit_message: mergeRequestMeta.title,
         actions: [
           {
@@ -169,8 +170,8 @@ describe('submitContentChanges', () => {
         convertObjectPropsToSnakeCase({
           title,
           description,
-          targetBranch: DEFAULT_TARGET_BRANCH,
-          sourceBranch: branch,
+          targetBranch,
+          sourceBranch,
         }),
       );
     });
@@ -194,7 +195,7 @@ describe('submitContentChanges', () => {
     });
 
     it('returns the branch name', () => {
-      expect(result).toMatchObject({ branch: { label: branch } });
+      expect(result).toMatchObject({ branch: { label: sourceBranch } });
     });
 
     it('returns commit short id and web url', () => {