Merge branch '499285-protected-branch-blob-modal-changes' into 'master'

Update label text for protected branch in commit change modal

See merge request !176190



Merged-by: Miguel Rincon <mrincon@gitlab.com>
Approved-by: Brendan Lynch <blynch@gitlab.com>
Approved-by: Minahil Nichols <minahilnichols@gitlab.com>
Approved-by: Alyssa Trinh <atrinh@gitlab.com>
Approved-by: Miguel Rincon <mrincon@gitlab.com>
Reviewed-by: GitLab Duo <gitlab-duo@gitlab.com>
Co-authored-by: Chaoyue Zhao <czhao@gitlab.com>

app/assets/javascripts/repository/components/commit_changes_modal.vue

@@ -55,6 +55,7 @@ export default {
     COMMIT_MESSAGE_HINT: __(
       'Try to keep the first line under 52 characters and the others under 72.',
     ),
+    NEW_BRANCH: __('New branch'),
     NEW_BRANCH_LABEl: __('Commit to a new branch'),
     CREATE_MR_LABEL: __('Create a merge request for this change'),
     LFS_WARNING_TITLE: __("The file you're about to delete is tracked by LFS"),
@@ -66,6 +67,9 @@ export default {
     ),
     LFS_CONTINUE_TEXT: __('Continue…'),
     LFS_CANCEL_TEXT: __('Cancel'),
+    NO_PERMISSION_TO_COMMIT_MESSAGE: __(
+      "You don't have permission to commit to %{branchName}. %{linkStart}Learn more.%{linkEnd}",
+    ),
     SECONDARY_OPTIONS_TEXT,
   },
   directives: {
@@ -257,6 +261,7 @@ export default {
   deleteLfsHelpPath: helpPagePath('topics/git/lfs', {
     anchor: 'delete-a-git-lfs-file-from-repository-history',
   }),
+  protectedBranchHelpPath: helpPagePath('user/project/repository/branches/protected'),
 };
 </script>
 
@@ -326,12 +331,12 @@ export default {
         <template v-else>
           <input type="hidden" name="original_branch" :value="originalBranch" />
           <input v-if="createNewMr" type="hidden" name="create_merge_request" value="1" />
-          <gl-form-group
-            v-if="canPushCode"
-            :label="$options.i18n.BRANCH"
-            label-for="branch_selection"
-          >
-            <template v-if="canPushToBranch">
+          <template v-if="canPushCode">
+            <gl-form-group
+              v-if="canPushToBranch"
+              :label="$options.i18n.BRANCH"
+              label-for="branch_selection"
+            >
               <gl-form-radio-group
                 v-model="createNewBranch"
                 name="branch_selection"
@@ -367,12 +372,23 @@ export default {
                   </span>
                 </gl-form-checkbox>
               </div>
-            </template>
+            </gl-form-group>
             <template v-else>
-              <label for="branchNameInput">
-                {{ $options.i18n.NEW_BRANCH_LABEl }}
-              </label>
-              <gl-form-group :invalid-feedback="form.fields['branch_name'].feedback">
+              <gl-form-group
+                :label="$options.i18n.NEW_BRANCH"
+                label-for="branch_selection"
+                :invalid-feedback="form.fields['branch_name'].feedback"
+              >
+                <label for="branchNameInput" class="gl-font-normal gl-text-subtle">
+                  <gl-sprintf :message="$options.i18n.NO_PERMISSION_TO_COMMIT_MESSAGE">
+                    <template #branchName
+                      ><code class="gl-text-subtle">{{ originalBranch }}</code>
+                    </template>
+                    <template #link="{ content }">
+                      <gl-link :href="$options.protectedBranchHelpPath">{{ content }}</gl-link>
+                    </template>
+                  </gl-sprintf>
+                </label>
                 <gl-form-input
                   id="branchNameInput"
                   v-model="form.fields['branch_name'].value"
@@ -382,7 +398,6 @@ export default {
                   name="branch_name"
                   required
                   :placeholder="__('example-branch-name')"
-                  class="gl-mt-2"
                 />
               </gl-form-group>
 
@@ -392,7 +407,7 @@ export default {
                 </span>
               </gl-form-checkbox>
             </template>
-          </gl-form-group>
+          </template>
           <template v-else>
             <gl-alert v-if="branchAllowsCollaboration" :dismissible="false" class="gl-my-3">
               <gl-sprintf :message="$options.i18n.COMMIT_IN_BRANCH_MESSAGE">

locale/gitlab.pot

@@ -64974,6 +64974,9 @@ msgstr ""
 msgid "You don't have permission to approve this deployment. Contact the project or group owner for help."
 msgstr ""
+msgid "You don't have permission to commit to %{branchName}. %{linkStart}Learn more.%{linkEnd}"
+msgstr ""
+
 msgid "You don't have permission to manage email participants."
 msgstr ""

spec/features/projects/blobs/edit_spec.rb

@@ -226,7 +226,7 @@ def has_toolbar_buttons
 
             epoch = Time.zone.now.strftime('%s%L').last(5)
             expect(page).to have_checked_field _('Create a merge request for this change')
-            expect(find_field(_('Commit to a new branch')).value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
+            expect(find_field('branch_name').value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
           end
         end
       end

spec/features/projects/files/user_deletes_files_spec.rb

@@ -106,7 +106,7 @@
 
       epoch = Time.zone.now.strftime('%s%L').last(5)
       expect(page).to have_checked_field _('Create a merge request for this change')
-      expect(find_field(_('Commit to a new branch')).value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
+      expect(find_field('branch_name').value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
 
       fill_in(:commit_message, with: 'New commit message', visible: true)
       click_button('Commit changes')

spec/features/projects/files/user_replaces_files_spec.rb

@@ -122,7 +122,7 @@
       click_on('Replace')
 
       epoch = Time.zone.now.strftime('%s%L').last(5)
-      expect(find_field(_('Commit to a new branch')).value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
+      expect(find_field('branch_name').value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
       find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
       page.within('#modal-replace-blob') do
         fill_in(:commit_message, with: 'Replacement file commit message')

spec/frontend/repository/components/commit_changes_modal_spec.js

@@ -66,7 +66,8 @@ describe('CommitChangesModal', () => {
   const findCurrentBranchRadioOption = () => findRadioGroup().at(0);
   const findNewBranchRadioOption = () => findRadioGroup().at(1);
   const findCreateMrCheckbox = () => findForm().findComponent(GlFormCheckbox);
-  const findTargetInput = () => findForm().findComponent(GlFormInput);
+  const findBranchNameInput = () => findForm().findComponent(GlFormInput);
+  const findBranchNameLabel = () => findForm().find(`label[for=branchNameInput]`);
   const findCommitHint = () => wrapper.find('[data-testid="hint"]');
   const findBranchInForkMessage = () =>
     wrapper.findByText('GitLab will create a branch in your fork and start a merge request.');
@@ -74,7 +75,7 @@ describe('CommitChangesModal', () => {
   const fillForm = async (inputValue = {}) => {
     const { targetText, commitText } = inputValue;
 
-    await findTargetInput().vm.$emit('input', targetText);
+    await findBranchNameInput().vm.$emit('input', targetText);
     await findCommitTextarea().vm.$emit('input', commitText);
   };
 
@@ -187,12 +188,12 @@ describe('CommitChangesModal', () => {
 
     it('shows the correct form fields when commit to new branch', async () => {
       createComponent();
-      expect(findTargetInput().exists()).toBe(false);
+      expect(findBranchNameInput().exists()).toBe(false);
 
       findFormRadioGroup().vm.$emit('input', true);
       await nextTick();
 
-      expect(findTargetInput().exists()).toBe(true);
+      expect(findBranchNameInput().exists()).toBe(true);
       expect(findCreateMrCheckbox().text()).toBe('Create a merge request for this change');
     });
 
@@ -201,7 +202,10 @@ describe('CommitChangesModal', () => {
       expect(wrapper.vm.$data.form.fields.branch_name.value).toBe('some-target-branch');
       expect(findCommitTextarea().exists()).toBe(true);
       expect(findRadioGroup().exists()).toBe(false);
-      expect(findTargetInput().exists()).toBe(true);
+      expect(findBranchNameInput().exists()).toBe(true);
+      expect(findBranchNameLabel().text()).toBe(
+        "You don't have permission to commit to main. Learn more.",
+      );
       expect(findCreateMrCheckbox().text()).toBe('Create a merge request for this change');
     });