Add latest changes from gitlab-org/gitlab@master

25 files changed, 194 insertions, 74 deletions

diff --git a/spec/frontend/environments/environment_table_spec.js b/spec/frontend/environments/environment_table_spec.js
index 863c4526bb9..b08fa8d5117 100644
--- a/spec/frontend/environments/environment_table_spec.js
+++ b/spec/frontend/environments/environment_table_spec.js
@@ -359,7 +359,7 @@ describe('Environment table', () => {
               },
             },
             {
-              name: 'review/master',
+              name: 'review/main',
               last_deployment: {
                 created_at: '2019-02-17T16:26:15.125Z',
               },
@@ -374,7 +374,7 @@ describe('Environment table', () => {
         },
       ];
       const [production, review, staging] = mockItems;
-      const [addcibuildstatus, master] = mockItems[1].children;
+      const [addcibuildstatus, main] = mockItems[1].children;
 
       factory({
         propsData: {
@@ -390,7 +390,7 @@ describe('Environment table', () => {
         production.name,
       ]);
 
-      expect(wrapper.vm.sortedEnvironments[0].children).toEqual([master, addcibuildstatus]);
+      expect(wrapper.vm.sortedEnvironments[0].children).toEqual([main, addcibuildstatus]);
     });
   });
 });
diff --git a/spec/frontend/environments/mock_data.js b/spec/frontend/environments/mock_data.js
index 4ad005f55c3..9ba71b78c2f 100644
--- a/spec/frontend/environments/mock_data.js
+++ b/spec/frontend/environments/mock_data.js
@@ -76,8 +76,8 @@ const environment = {
     iid: 6,
     sha: '500aabcb17c97bdcf2d0c410b70cb8556f0362dd',
     ref: {
-      name: 'master',
-      ref_url: 'root/ci-folders/tree/master',
+      name: 'main',
+      ref_url: 'root/ci-folders/tree/main',
     },
     tag: true,
     'last?': true,
@@ -130,8 +130,8 @@ const environment = {
     iid: 27,
     sha: '1132df044b73943943c949e7ac2c2f120a89bf59',
     ref: {
-      name: 'master',
-      ref_path: '/root/environment-test/-/tree/master',
+      name: 'main',
+      ref_path: '/root/environment-test/-/tree/main',
     },
     status: 'running',
     created_at: '2020-12-04T19:57:49.514Z',
diff --git a/spec/frontend/members/components/table/members_table_spec.js b/spec/frontend/members/components/table/members_table_spec.js
index 5cf1f40a8f4..5308d7651a3 100644
--- a/spec/frontend/members/components/table/members_table_spec.js
+++ b/spec/frontend/members/components/table/members_table_spec.js
@@ -1,4 +1,4 @@
-import { GlBadge, GlTable } from '@gitlab/ui';
+import { GlBadge, GlPagination, GlTable } from '@gitlab/ui';
 import {
   getByText as getByTextHelper,
   getByTestId as getByTestIdHelper,
@@ -6,6 +6,7 @@ import {
 } from '@testing-library/dom';
 import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
 import Vuex from 'vuex';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import CreatedAt from '~/members/components/table/created_at.vue';
 import ExpirationDatepicker from '~/members/components/table/expiration_datepicker.vue';
 import ExpiresAt from '~/members/components/table/expires_at.vue';
@@ -16,7 +17,13 @@ import MembersTable from '~/members/components/table/members_table.vue';
 import RoleDropdown from '~/members/components/table/role_dropdown.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import * as initUserPopovers from '~/user_popovers';
-import { member as memberMock, directMember, invite, accessRequest } from '../../mock_data';
+import {
+  member as memberMock,
+  directMember,
+  invite,
+  accessRequest,
+  pagination,
+} from '../../mock_data';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -36,6 +43,7 @@ describe('MembersTable', () => {
               table: { 'data-qa-selector': 'members_list' },
               tr: { 'data-qa-selector': 'member_row' },
             },
+            pagination,
             ...state,
           },
         },
@@ -66,6 +74,8 @@ describe('MembersTable', () => {
     });
   };
 
+  const url = 'https://localhost/foo-bar/-/project_members';
+
   const getByText = (text, options) =>
     createWrapper(getByTextHelper(wrapper.element, text, options));
 
@@ -78,6 +88,14 @@ describe('MembersTable', () => {
       `[data-label="${tableCellLabel}"][role="cell"]`,
     );
 
+  const findPagination = () => extendedWrapper(wrapper.find(GlPagination));
+
+  const expectCorrectLinkToPage2 = () => {
+    expect(findPagination().findByText('2', { selector: 'a' }).attributes('href')).toBe(
+      `${url}?page=2`,
+    );
+  };
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -219,4 +237,80 @@ describe('MembersTable', () => {
 
     expect(findTable().find('tbody tr').attributes('data-qa-selector')).toBe('member_row');
   });
+
+  describe('when required pagination data is provided', () => {
+    beforeEach(() => {
+      delete window.location;
+    });
+
+    it('renders `gl-pagination` component with correct props', () => {
+      window.location = new URL(url);
+
+      createComponent();
+
+      const glPagination = findPagination();
+
+      expect(glPagination.exists()).toBe(true);
+      expect(glPagination.props()).toMatchObject({
+        value: pagination.currentPage,
+        perPage: pagination.perPage,
+        totalItems: pagination.totalItems,
+        prevText: 'Prev',
+        nextText: 'Next',
+        labelNextPage: 'Go to next page',
+        labelPrevPage: 'Go to previous page',
+        align: 'center',
+      });
+    });
+
+    it('uses `pagination.paramName` to generate the pagination links', () => {
+      window.location = new URL(url);
+
+      createComponent({
+        pagination: {
+          currentPage: 1,
+          perPage: 5,
+          totalItems: 10,
+          paramName: 'page',
+        },
+      });
+
+      expectCorrectLinkToPage2();
+    });
+
+    it('removes any url params defined as `null` in the `params` attribute', () => {
+      window.location = new URL(`${url}?search_groups=foo`);
+
+      createComponent({
+        pagination: {
+          currentPage: 1,
+          perPage: 5,
+          totalItems: 10,
+          paramName: 'page',
+          params: { search_groups: null },
+        },
+      });
+
+      expectCorrectLinkToPage2();
+    });
+  });
+
+  describe.each`
+    attribute        | value
+    ${'paramName'}   | ${null}
+    ${'currentPage'} | ${null}
+    ${'perPage'}     | ${null}
+    ${'totalItems'}  | ${0}
+  `('when pagination.$attribute is $value', ({ attribute, value }) => {
+    it('does not render `gl-pagination`', () => {
+      createComponent({
+        pagination: {
+          ...pagination,
+          [attribute]: value,
+        },
+      });
+
+      expect(findPagination().exists()).toBe(false);
+    });
+  });
 });
diff --git a/spec/frontend/members/index_spec.js b/spec/frontend/members/index_spec.js
index 8b645d9b059..751c4674a60 100644
--- a/spec/frontend/members/index_spec.js
+++ b/spec/frontend/members/index_spec.js
@@ -2,7 +2,7 @@ import { createWrapper } from '@vue/test-utils';
 import MembersApp from '~/members/components/app.vue';
 import { MEMBER_TYPES } from '~/members/constants';
 import { initMembersApp } from '~/members/index';
-import { membersJsonString, members } from './mock_data';
+import { membersJsonString, members, paginationJsonString, pagination } from './mock_data';
 
 describe('initMembersApp', () => {
   let el;
@@ -24,6 +24,7 @@ describe('initMembersApp', () => {
   beforeEach(() => {
     el = document.createElement('div');
     el.setAttribute('data-members', membersJsonString);
+    el.setAttribute('data-pagination', paginationJsonString);
     el.setAttribute('data-source-id', '234');
     el.setAttribute('data-can-manage-members', 'true');
     el.setAttribute('data-member-path', '/groups/foo-bar/-/group_members/:id');
@@ -50,6 +51,12 @@ describe('initMembersApp', () => {
     expect(vm.$store.state[MEMBER_TYPES.user].members).toEqual(members);
   });
 
+  it('parses and sets `pagination` in Vuex store', () => {
+    setup();
+
+    expect(vm.$store.state[MEMBER_TYPES.user].pagination).toEqual(pagination);
+  });
+
   it('sets `tableFields` in Vuex store', () => {
     setup();
 
diff --git a/spec/frontend/members/mock_data.js b/spec/frontend/members/mock_data.js
index a47b7ab2118..6e1ee979839 100644
--- a/spec/frontend/members/mock_data.js
+++ b/spec/frontend/members/mock_data.js
@@ -79,3 +79,19 @@ export const directMember = { ...member, isDirectMember: true };
 export const inheritedMember = { ...member, isDirectMember: false };
 
 export const member2faEnabled = { ...member, user: { ...member.user, twoFactorEnabled: true } };
+
+export const paginationJsonString = JSON.stringify({
+  current_page: 1,
+  per_page: 5,
+  total_items: 10,
+  param_name: 'page',
+  params: { search_groups: null },
+});
+
+export const pagination = {
+  currentPage: 1,
+  perPage: 5,
+  totalItems: 10,
+  paramName: 'page',
+  params: { search_groups: null },
+};
diff --git a/spec/frontend/members/utils_spec.js b/spec/frontend/members/utils_spec.js
index bfb5a4bc7d3..91e99876238 100644
--- a/spec/frontend/members/utils_spec.js
+++ b/spec/frontend/members/utils_spec.js
@@ -22,6 +22,8 @@ import {
   invite,
   membersJsonString,
   members,
+  paginationJsonString,
+  pagination,
 } from './mock_data';
 
 const IS_CURRENT_USER_ID = 123;
@@ -259,6 +261,7 @@ describe('Members Utils', () => {
     beforeEach(() => {
       el = document.createElement('div');
       el.setAttribute('data-members', membersJsonString);
+      el.setAttribute('data-pagination', paginationJsonString);
       el.setAttribute('data-source-id', '234');
       el.setAttribute('data-can-manage-members', 'true');
     });
@@ -270,6 +273,7 @@ describe('Members Utils', () => {
     it('correctly parses the data attributes', () => {
       expect(parseDataAttributes(el)).toEqual({
         members,
+        pagination,
         sourceId: 234,
         canManageMembers: true,
       });
diff --git a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
index 7ec5818010a..dc70db42b4a 100644
--- a/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
+++ b/spec/frontend/pipeline_new/components/pipeline_new_form_spec.js
@@ -17,7 +17,7 @@ const projectRefsEndpoint = '/root/project/refs';
 const pipelinesPath = '/root/project/-/pipelines';
 const configVariablesPath = '/root/project/-/pipelines/config_variables';
 const newPipelinePostResponse = { id: 1 };
-const defaultBranch = 'master';
+const defaultBranch = 'main';
 
 describe('Pipeline New Form', () => {
   let wrapper;
@@ -187,13 +187,13 @@ describe('Pipeline New Form', () => {
       await waitForPromises();
     });
     it('variables persist between ref changes', async () => {
-      selectBranch('master');
+      selectBranch('main');
 
       await waitForPromises();
 
-      const masterInput = findKeyInputs().at(0);
-      masterInput.element.value = 'build_var';
-      masterInput.trigger('change');
+      const mainInput = findKeyInputs().at(0);
+      mainInput.element.value = 'build_var';
+      mainInput.trigger('change');
 
       await wrapper.vm.$nextTick();
 
@@ -207,7 +207,7 @@ describe('Pipeline New Form', () => {
 
       await wrapper.vm.$nextTick();
 
-      selectBranch('master');
+      selectBranch('main');
 
       await waitForPromises();
 
diff --git a/spec/frontend/pipeline_new/components/refs_dropdown_spec.js b/spec/frontend/pipeline_new/components/refs_dropdown_spec.js
index 8dafbf230f9..826f2826d3c 100644
--- a/spec/frontend/pipeline_new/components/refs_dropdown_spec.js
+++ b/spec/frontend/pipeline_new/components/refs_dropdown_spec.js
@@ -10,8 +10,8 @@ import RefsDropdown from '~/pipeline_new/components/refs_dropdown.vue';
 import { mockRefs, mockFilteredRefs } from '../mock_data';
 
 const projectRefsEndpoint = '/root/project/refs';
-const refShortName = 'master';
-const refFullName = 'refs/heads/master';
+const refShortName = 'main';
+const refFullName = 'refs/heads/main';
 
 jest.mock('~/flash');
 
diff --git a/spec/frontend/pipeline_new/mock_data.js b/spec/frontend/pipeline_new/mock_data.js
index 4fb58cb8e62..2a677f109da 100644
--- a/spec/frontend/pipeline_new/mock_data.js
+++ b/spec/frontend/pipeline_new/mock_data.js
@@ -1,5 +1,5 @@
 export const mockRefs = {
-  Branches: ['master', 'branch-1', 'branch-2'],
+  Branches: ['main', 'branch-1', 'branch-2'],
   Tags: ['1.0.0', '1.1.0', '1.2.0'],
 };
 
@@ -40,6 +40,6 @@ export const mockError = {
   total_warnings: 7,
 };
 
-export const mockBranchRefs = ['master', 'dev', 'release'];
+export const mockBranchRefs = ['main', 'dev', 'release'];
 
 export const mockTagRefs = ['1.0.0', '1.1.0', '1.2.0'];
diff --git a/spec/frontend/pipeline_new/utils/format_refs_spec.js b/spec/frontend/pipeline_new/utils/format_refs_spec.js
index 405a747c3ba..71190f55c16 100644
--- a/spec/frontend/pipeline_new/utils/format_refs_spec.js
+++ b/spec/frontend/pipeline_new/utils/format_refs_spec.js
@@ -5,7 +5,7 @@ import { mockBranchRefs, mockTagRefs } from '../mock_data';
 describe('Format refs util', () => {
   it('formats branch ref correctly', () => {
     expect(formatRefs(mockBranchRefs, BRANCH_REF_TYPE)).toEqual([
-      { fullName: 'refs/heads/master', shortName: 'master' },
+      { fullName: 'refs/heads/main', shortName: 'main' },
       { fullName: 'refs/heads/dev', shortName: 'dev' },
       { fullName: 'refs/heads/release', shortName: 'release' },
     ]);
diff --git a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
index e43aa2a02f5..d2a3b134845 100644
--- a/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
+++ b/spec/frontend/pipelines/components/pipelines_filtered_search_spec.js
@@ -138,7 +138,7 @@ describe('Pipelines filtered search', () => {
   describe('Url query params', () => {
     const params = {
       username: 'deja.green',
-      ref: 'master',
+      ref: 'main',
     };
 
     beforeEach(() => {
diff --git a/spec/frontend/pipelines/graph/linked_pipelines_mock_data.js b/spec/frontend/pipelines/graph/linked_pipelines_mock_data.js
index 5756a666ff3..eb05669463b 100644
--- a/spec/frontend/pipelines/graph/linked_pipelines_mock_data.js
+++ b/spec/frontend/pipelines/graph/linked_pipelines_mock_data.js
@@ -3727,8 +3727,8 @@ export default {
             scheduled_actions: [],
           },
           ref: {
-            name: 'master',
-            path: '/h5bp/html5-boilerplate/commits/master',
+            name: 'main',
+            path: '/h5bp/html5-boilerplate/commits/main',
             tag: false,
             branch: true,
             merge_request: false,
diff --git a/spec/frontend/pipelines/graph/mock_data_legacy.js b/spec/frontend/pipelines/graph/mock_data_legacy.js
index a4a5d78f906..e1c8b027121 100644
--- a/spec/frontend/pipelines/graph/mock_data_legacy.js
+++ b/spec/frontend/pipelines/graph/mock_data_legacy.js
@@ -221,22 +221,22 @@ export default {
     cancelable: false,
   },
   ref: {
-    name: 'master',
-    path: '/root/ci-mock/tree/master',
+    name: 'main',
+    path: '/root/ci-mock/tree/main',
     tag: false,
     branch: true,
   },
   commit: {
     id: '798e5f902592192afaba73f4668ae30e56eae492',
     short_id: '798e5f90',
-    title: "Merge branch 'new-branch' into 'master'\r",
+    title: "Merge branch 'new-branch' into 'main'\r",
     created_at: '2017-04-13T10:25:17.000+01:00',
     parent_ids: [
       '54d483b1ed156fbbf618886ddf7ab023e24f8738',
       'c8e2d38a6c538822e81c57022a6e3a0cfedebbcc',
     ],
     message:
-      "Merge branch 'new-branch' into 'master'\r\n\r\nAdd new file\r\n\r\nSee merge request !1",
+      "Merge branch 'new-branch' into 'main'\r\n\r\nAdd new file\r\n\r\nSee merge request !1",
     author_name: 'Root',
     author_email: 'admin@example.com',
     authored_date: '2017-04-13T10:25:17.000+01:00',
diff --git a/spec/frontend/pipelines/mock_data.js b/spec/frontend/pipelines/mock_data.js
index 337838c41b3..16f15b20824 100644
--- a/spec/frontend/pipelines/mock_data.js
+++ b/spec/frontend/pipelines/mock_data.js
@@ -387,7 +387,7 @@ export const tags = [
     protected: false,
   },
   {
-    name: 'master-tag',
+    name: 'main-tag',
     message: '',
     target: '66673b07efef254dab7d537f0433a40e61cf84fe',
     commit: {
@@ -413,10 +413,10 @@ export const tags = [
 
 export const mockSearch = [
   { type: 'username', value: { data: 'root', operator: '=' } },
-  { type: 'ref', value: { data: 'master', operator: '=' } },
+  { type: 'ref', value: { data: 'main', operator: '=' } },
   { type: 'status', value: { data: 'pending', operator: '=' } },
 ];
 
 export const mockBranchesAfterMap = ['branch-1', 'branch-10', 'branch-11'];
 
-export const mockTagsAfterMap = ['tag-3', 'tag-2', 'tag-1', 'master-tag'];
+export const mockTagsAfterMap = ['tag-3', 'tag-2', 'tag-1', 'main-tag'];
diff --git a/spec/frontend/pipelines/pipelines_ci_templates_spec.js b/spec/frontend/pipelines/pipelines_ci_templates_spec.js
index d4cf6027ff7..0c37bf2d84a 100644
--- a/spec/frontend/pipelines/pipelines_ci_templates_spec.js
+++ b/spec/frontend/pipelines/pipelines_ci_templates_spec.js
@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import ExperimentTracking from '~/experimentation/experiment_tracking';
 import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
 
-const addCiYmlPath = "/-/new/master?commit_message='Add%20.gitlab-ci.yml'";
+const addCiYmlPath = "/-/new/main?commit_message='Add%20.gitlab-ci.yml'";
 const suggestedCiTemplates = [
   { name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
   { name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
diff --git a/spec/frontend/pipelines/pipelines_spec.js b/spec/frontend/pipelines/pipelines_spec.js
index 84a25f42201..b5b19b55f0d 100644
--- a/spec/frontend/pipelines/pipelines_spec.js
+++ b/spec/frontend/pipelines/pipelines_spec.js
@@ -289,7 +289,7 @@ describe('Pipelines', () => {
             page: '1',
             scope: 'all',
             username: 'root',
-            ref: 'master',
+            ref: 'main',
             status: 'pending',
           };
 
@@ -321,7 +321,7 @@ describe('Pipelines', () => {
           expect(window.history.pushState).toHaveBeenCalledWith(
             expect.anything(),
             expect.anything(),
-            `${window.location.pathname}?page=1&scope=all&username=root&ref=master&status=pending`,
+            `${window.location.pathname}?page=1&scope=all&username=root&ref=main&status=pending`,
           );
         });
       });
diff --git a/spec/frontend/pipelines/test_reports/test_case_details_spec.js b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
index e866586a2c3..64c6f08dce0 100644
--- a/spec/frontend/pipelines/test_reports/test_case_details_spec.js
+++ b/spec/frontend/pipelines/test_reports/test_case_details_spec.js
@@ -13,7 +13,7 @@ describe('Test case details', () => {
     formattedTime: '10.04ms',
     recent_failures: {
       count: 2,
-      base_branch: 'master',
+      base_branch: 'main',
     },
     system_output: 'Line 42 is broken',
   };
diff --git a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
index 2e32d62b4bd..2e44f40eda4 100644
--- a/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_branch_name_token_spec.js
@@ -89,7 +89,7 @@ describe('Pipeline Branch Name Token', () => {
     });
 
     it('renders only the branch searched for', () => {
-      const mockBranches = ['master'];
+      const mockBranches = ['main'];
       createComponent({ stubs }, { branches: mockBranches, loading: false });
 
       expect(findAllFilteredSearchSuggestions()).toHaveLength(mockBranches.length);
diff --git a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
index 42c9dfc9ff0..b03dbb73b95 100644
--- a/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
+++ b/spec/frontend/pipelines/tokens/pipeline_tag_name_token_spec.js
@@ -89,7 +89,7 @@ describe('Pipeline Branch Name Token', () => {
     });
 
     it('renders only the tag searched for', () => {
-      const mockTags = ['master-tag'];
+      const mockTags = ['main-tag'];
       createComponent({ stubs }, { tags: mockTags, loading: false });
 
       expect(findAllFilteredSearchSuggestions()).toHaveLength(mockTags.length);
diff --git a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
index eadf07e54fb..115f21d8b35 100644
--- a/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/mr_widget_header_spec.js
@@ -34,7 +34,7 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 12,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
+            targetBranch: 'main',
             statusPath: 'abc',
           },
         });
@@ -48,7 +48,7 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 0,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
+            targetBranch: 'main',
             statusPath: 'abc',
           },
         });
@@ -64,14 +64,14 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 1,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
-            targetBranchPath: '/foo/bar/master',
+            targetBranch: 'main',
+            targetBranchPath: '/foo/bar/main',
             statusPath: 'abc',
           },
         });
 
         expect(wrapper.vm.commitsBehindText).toBe(
-          'The source branch is <a href="/foo/bar/master">1 commit behind</a> the target branch',
+          'The source branch is <a href="/foo/bar/main">1 commit behind</a> the target branch',
         );
       });
 
@@ -81,14 +81,14 @@ describe('MRWidgetHeader', () => {
             divergedCommitsCount: 2,
             sourceBranch: 'mr-widget-refactor',
             sourceBranchLink: '<a href="/foo/bar/mr-widget-refactor">Link</a>',
-            targetBranch: 'master',
-            targetBranchPath: '/foo/bar/master',
+            targetBranch: 'main',
+            targetBranchPath: '/foo/bar/main',
             statusPath: 'abc',
           },
         });
 
         expect(wrapper.vm.commitsBehindText).toBe(
-          'The source branch is <a href="/foo/bar/master">2 commits behind</a> the target branch',
+          'The source branch is <a href="/foo/bar/main">2 commits behind</a> the target branch',
         );
       });
     });
@@ -105,7 +105,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
@@ -125,7 +125,7 @@ describe('MRWidgetHeader', () => {
       });
 
       it('renders target branch', () => {
-        expect(wrapper.find('.js-target-branch').text().trim()).toBe('master');
+        expect(wrapper.find('.js-target-branch').text().trim()).toBe('main');
       });
     });
 
@@ -138,7 +138,7 @@ describe('MRWidgetHeader', () => {
         sourceBranchRemoved: false,
         targetBranchPath: 'foo/bar/commits-path',
         targetBranchTreePath: 'foo/bar/tree/path',
-        targetBranch: 'master',
+        targetBranch: 'main',
         isOpen: true,
         canPushToSourceBranch: true,
         emailPatchesPath: '/mr/email-patches',
@@ -227,7 +227,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: false,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
@@ -257,7 +257,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
@@ -281,7 +281,7 @@ describe('MRWidgetHeader', () => {
             sourceBranchRemoved: false,
             targetBranchPath: 'foo/bar/commits-path',
             targetBranchTreePath: 'foo/bar/tree/path',
-            targetBranch: 'master',
+            targetBranch: 'main',
             isOpen: true,
             emailPatchesPath: '/mr/email-patches',
             plainDiffPath: '/mr/plainDiffPath',
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
index e4123b2ca83..b31a75f30d3 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js
@@ -8,7 +8,7 @@ describe('Commits header component', () => {
     wrapper = shallowMount(CommitsHeader, {
       propsData: {
         isSquashEnabled: false,
-        targetBranch: 'master',
+        targetBranch: 'main',
         commitsCount: 5,
         isFastForwardEnabled: false,
         ...props,
@@ -94,7 +94,7 @@ describe('Commits header component', () => {
     it('has correct target branch displayed', () => {
       createComponent();
 
-      expect(findTargetBranchMessage().text()).toBe('master');
+      expect(findTargetBranchMessage().text()).toBe('main');
     });
 
     it('does has merge commit part of the message', () => {
diff --git a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 983e4a35078..7202f327683 100644
--- a/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/frontend/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -42,7 +42,7 @@ const createTestMr = (customConfig) => {
     commitMessageWithDescription,
     shouldRemoveSourceBranch: true,
     canRemoveSourceBranch: false,
-    targetBranch: 'master',
+    targetBranch: 'main',
     preferredAutoMergeStrategy: MWPS_MERGE_STRATEGY,
     availableAutoMergeStrategies: [MWPS_MERGE_STRATEGY],
     mergeImmediatelyDocsPath: 'path/to/merge/immediately/docs',
diff --git a/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js b/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js
index ff29022b75d..2083dc88681 100644
--- a/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js
+++ b/spec/frontend/vue_mr_widget/deployment/deployment_mock_data.js
@@ -45,15 +45,15 @@ const deploymentMockData = {
   changes: [
     {
       path: 'index.html',
-      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+      external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/index.html',
     },
     {
       path: 'imgs/gallery.html',
-      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+      external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
     },
     {
       path: 'about/',
-      external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+      external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/about/',
     },
   ],
 };
diff --git a/spec/frontend/vue_mr_widget/mock_data.js b/spec/frontend/vue_mr_widget/mock_data.js
index aa2345abccf..8e36a9225d6 100644
--- a/spec/frontend/vue_mr_widget/mock_data.js
+++ b/spec/frontend/vue_mr_widget/mock_data.js
@@ -48,7 +48,7 @@ export default {
   source_branch_link: 'daaaa',
   source_project_id: 19,
   source_project_full_path: '/group1/project1',
-  target_branch: 'master',
+  target_branch: 'main',
   target_project_id: 19,
   target_project_full_path: '/group2/project2',
   merge_request_add_ci_config_path: '/group2/project2/new/pipeline',
@@ -83,7 +83,7 @@ export default {
   diff_head_sha: '104096c51715e12e7ae41f9333e9fa35b73f385d',
   diff_head_commit_short_id: '104096c5',
   default_merge_commit_message:
-    "Merge branch 'daaaa' into 'master'\n\nUpdate README.md\n\nSee merge request !22",
+    "Merge branch 'daaaa' into 'main'\n\nUpdate README.md\n\nSee merge request !22",
   pipeline: {
     id: 172,
     user: {
@@ -173,8 +173,8 @@ export default {
       title: 'Update README.md',
       source_branch: 'feature-1',
       source_branch_path: '/root/detached-merge-request-pipelines/branches/feature-1',
-      target_branch: 'master',
-      target_branch_path: '/root/detached-merge-request-pipelines/branches/master',
+      target_branch: 'main',
+      target_branch_path: '/root/detached-merge-request-pipelines/branches/main',
     },
     commit: {
       id: '104096c51715e12e7ae41f9333e9fa35b73f385d',
@@ -243,7 +243,7 @@ export default {
     head_path: 'blob_path',
   },
   codequality_help_path: 'code_quality.html',
-  target_branch_path: '/root/acets-app/branches/master',
+  target_branch_path: '/root/acets-app/branches/main',
   source_branch_path: '/root/acets-app/branches/daaaa',
   conflict_resolution_ui_path: '/root/acets-app/-/merge_requests/22/conflicts',
   remove_wip_path: '/root/acets-app/-/merge_requests/22/remove_wip',
@@ -264,7 +264,7 @@ export default {
   ci_environments_status_url: '/root/acets-app/-/merge_requests/22/ci_environments_status',
   project_archived: false,
   default_merge_commit_message_with_description:
-    "Merge branch 'daaaa' into 'master'\n\nUpdate README.md\n\nSee merge request !22",
+    "Merge branch 'daaaa' into 'main'\n\nUpdate README.md\n\nSee merge request !22",
   default_squash_commit_message: 'Test squash commit message',
   diverged_commits_count: 0,
   only_allow_merge_if_pipeline_succeeds: false,
diff --git a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
index c4962b608e1..3ed9172eeb7 100644
--- a/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
+++ b/spec/frontend/vue_mr_widget/mr_widget_options_spec.js
@@ -559,15 +559,15 @@ describe('MrWidgetOptions', () => {
       const changes = [
         {
           path: 'index.html',
-          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+          external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/index.html',
         },
         {
           path: 'imgs/gallery.html',
-          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+          external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
         },
         {
           path: 'about/',
-          external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+          external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/about/',
         },
       ];
       const deploymentMockData = {
@@ -688,22 +688,22 @@ describe('MrWidgetOptions', () => {
               scheduled_actions: [],
             },
             ref: {
-              name: 'master',
-              path: '/root/ci-web-terminal/commits/master',
+              name: 'main',
+              path: '/root/ci-web-terminal/commits/main',
               tag: false,
               branch: true,
             },
             commit: {
               id: 'aa1939133d373c94879becb79d91828a892ee319',
               short_id: 'aa193913',
-              title: "Merge branch 'master-test' into 'master'",
+              title: "Merge branch 'main-test' into 'main'",
               created_at: '2018-10-22T11:41:33.000Z',
               parent_ids: [
                 '4622f4dd792468993003caf2e3be978798cbe096',
                 '76598df914cdfe87132d0c3c40f80db9fa9396a4',
               ],
               message:
-                "Merge branch 'master-test' into 'master'\n\nUpdate .gitlab-ci.yml\n\nSee merge request root/ci-web-terminal!1",
+                "Merge branch 'main-test' into 'main'\n\nUpdate .gitlab-ci.yml\n\nSee merge request root/ci-web-terminal!1",
               author_name: 'Administrator',
               author_email: 'admin@example.com',
               authored_date: '2018-10-22T11:41:33.000Z',
@@ -751,17 +751,16 @@ describe('MrWidgetOptions', () => {
                 changes: [
                   {
                     path: 'index.html',
-                    external_url:
-                      'http://root-master-patch-91341.volatile-watch.surge.sh/index.html',
+                    external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/index.html',
                   },
                   {
                     path: 'imgs/gallery.html',
                     external_url:
-                      'http://root-master-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
+                      'http://root-main-patch-91341.volatile-watch.surge.sh/imgs/gallery.html',
                   },
                   {
                     path: 'about/',
-                    external_url: 'http://root-master-patch-91341.volatile-watch.surge.sh/about/',
+                    external_url: 'http://root-main-patch-91341.volatile-watch.surge.sh/about/',
                   },
                 ],
                 status: 'success',