Refactor: update master to default branch naming

Update the review app modal to replace
master to default branch name as
used by the current project

app/assets/javascripts/environments/components/enable_review_app_modal.vue

@@ -10,6 +10,7 @@ export default {
     GlSprintf,
     ModalCopyButton,
   },
+  inject: ['defaultBranchName'],
   props: {
     modalId: {
       type: String,
@@ -28,7 +29,11 @@ export default {
   modalInfo: {
     closeText: s__('EnableReviewApp|Close'),
     copyToClipboardText: s__('EnableReviewApp|Copy snippet text'),
-    copyString: `deploy_review:
+    title: s__('ReviewApp|Enable Review App'),
+  },
+  computed: {
+    modalInfoCopyStr() {
+      return `deploy_review:
   stage: deploy
   script:
     - echo "Deploy a review app"
@@ -38,8 +43,8 @@ export default {
   only:
     - branches
   except:
-    - master`,
-    title: s__('ReviewApp|Enable Review App'),
+    - ${this.defaultBranchName}`;
+    },
   },
 };
 </script>
@@ -75,7 +80,9 @@ export default {
         </gl-sprintf>
       </p>
       <div class="gl-display-flex align-items-start">
-        <pre class="gl-w-full"> {{ $options.modalInfo.copyString }} </pre>
+        <pre class="gl-w-full" data-testid="enable-review-app-copy-string">
+ {{ modalInfoCopyStr }} </pre
+        >
         <modal-copy-button
           :title="$options.modalInfo.copyToClipboardText"
           :text="$options.modalInfo.copyString"
@@ -90,7 +97,9 @@ export default {
           <strong>{{ content }}</strong>
         </template>
         <template #link="{ content }">
-          <gl-link href="blob/master/.gitlab-ci.yml" target="_blank">{{ content }}</gl-link>
+          <gl-link :href="`blob/${defaultBranchName}/.gitlab-ci.yml`" target="_blank">{{
+            content
+          }}</gl-link>
         </template>
       </gl-sprintf>
     </p>

app/assets/javascripts/environments/index.js

@@ -22,6 +22,7 @@ export default () => {
     apolloProvider,
     provide: {
       projectPath: el.dataset.projectPath,
+      defaultBranchName: el.dataset.defaultBranchName,
     },
     data() {
       const environmentsData = el.dataset;

app/assets/javascripts/monitoring/components/duplicate_dashboard_form.vue

@@ -23,7 +23,7 @@ export default {
     },
   },
   radioVals: {
-    /* Use the default branch (e.g. master) */
+    /* Use the default branch (e.g. main) */
     DEFAULT: 'DEFAULT',
     /* Create a new branch */
     NEW: 'NEW',

app/views/projects/environments/index.html.haml

@@ -6,4 +6,5 @@
   "can-create-environment" => can?(current_user, :create_environment, @project).to_s,
   "new-environment-path" => new_project_environment_path(@project),
   "help-page-path" => help_page_path("ci/environments/index.md"),
-  "project-path" => @project.full_path } }
+  "project-path" => @project.full_path,
+  "default-branch-name" => @project.default_branch_or_master } }

changelogs/unreleased/324100-monitor.yml

+---
+title: Update master to main inside monitor copy
+merge_request: 56264
+author:
+type: changed

spec/frontend/environments/enable_review_app_modal_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import EnableReviewAppButton from '~/environments/components/enable_review_app_modal.vue';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 
@@ -11,15 +12,25 @@ describe('Enable Review App Button', () => {
 
   describe('renders the modal', () => {
     beforeEach(() => {
-      wrapper = shallowMount(EnableReviewAppButton, {
+      wrapper = extendedWrapper(
+        shallowMount(EnableReviewAppButton, {
           propsData: {
             modalId: 'fake-id',
           },
+          provide: {
+            defaultBranchName: 'main',
+          },
+        }),
+      );
     });
+
+    it('renders the defaultBranchName copy', () => {
+      const findCopyString = () => wrapper.findByTestId('enable-review-app-copy-string');
+      expect(findCopyString().text()).toContain('- main');
     });
 
     it('renders the copyToClipboard button', () => {
-      expect(wrapper.find(ModalCopyButton).exists()).toBe(true);
+      expect(wrapper.findComponent(ModalCopyButton).exists()).toBe(true);
     });
   });
 });