diff --git a/app/assets/javascripts/repository/components/blob_button_group.vue b/app/assets/javascripts/repository/components/blob_button_group.vue
index 3aec35ee96000bcb34e8f8e4e6d6b60254c41450..f8d43a0922e1bb3dd383ed0fc681cb98956c70a5 100644
--- a/app/assets/javascripts/repository/components/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/blob_button_group.vue
@@ -1,6 +1,8 @@
 <script>
 import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import axios from '~/lib/utils/axios_utils';
+import { visitUrl } from '~/lib/utils/url_utility';
 import { sprintf, __ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import getRefMixin from '../mixins/get_ref';
@@ -105,6 +107,15 @@ export default {
 
       this.$refs[modalId].show();
     },
+    handleBlobDelete(formData) {
+      return axios({
+        method: 'post',
+        url: this.deletePath,
+        data: formData,
+      }).then((response) => {
+        visitUrl(response.data.filePath);
+      });
+    },
   },
   replaceBlobModalId: REPLACE_BLOB_MODAL_ID,
 };
@@ -144,7 +155,6 @@ export default {
     <commit-changes-modal
       :ref="deleteModalId"
       :modal-id="deleteModalId"
-      :delete-path="deletePath"
       :commit-message="deleteModalCommitMessage"
       :target-branch="targetBranch || ref"
       :original-branch="originalBranch || ref"
@@ -152,6 +162,11 @@ export default {
       :can-push-to-branch="canPushToBranch"
       :empty-repo="emptyRepo"
       :is-using-lfs="isUsingLfs"
-    />
+      :handle-form-submit="handleBlobDelete"
+    >
+      <template #form-fields>
+        <input type="hidden" name="_method" value="delete" />
+      </template>
+    </commit-changes-modal>
   </div>
 </template>
diff --git a/app/assets/javascripts/repository/components/commit_changes_modal.vue b/app/assets/javascripts/repository/components/commit_changes_modal.vue
index 9b0b7d5357553654c8799f9c09a15d1dd5061635..90535115a0e7e1781409768088cb02356cbe4191 100644
--- a/app/assets/javascripts/repository/components/commit_changes_modal.vue
+++ b/app/assets/javascripts/repository/components/commit_changes_modal.vue
@@ -1,5 +1,6 @@
 <script>
 import {
+  GlAlert,
   GlModal,
   GlFormCheckbox,
   GlFormGroup,
@@ -25,6 +26,7 @@ import {
 export default {
   csrf,
   components: {
+    GlAlert,
     GlModal,
     GlFormCheckbox,
     GlFormGroup,
@@ -38,8 +40,14 @@ export default {
   },
   i18n: {
     BRANCH: __('Branch'),
+    BRANCH_IN_FORK_MESSAGE: __(
+      'GitLab will create a branch in your fork and start a merge request.',
+    ),
     CURRENT_BRANCH_LABEL: __('Commit to the current %{branchName} branch'),
     COMMIT_CHANGES: __('Commit changes'),
+    COMMIT_IN_BRANCH_MESSAGE: __(
+      'Your changes can be committed to %{branchName} because a merge request is open.',
+    ),
     COMMIT_LABEL,
     COMMIT_MESSAGE_HINT: __(
       'Try to keep the first line under 52 characters and the others under 72.',
@@ -65,10 +73,6 @@ export default {
       type: String,
       required: true,
     },
-    deletePath: {
-      type: String,
-      required: true,
-    },
     commitMessage: {
       type: String,
       required: true,
@@ -98,6 +102,15 @@ export default {
       required: false,
       default: false,
     },
+    branchAllowsCollaboration: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    handleFormSubmit: {
+      type: Function,
+      required: true,
+    },
   },
   data() {
     const form = {
@@ -174,7 +187,7 @@ export default {
         ? this.$options.i18n.LFS_WARNING_TITLE
         : this.$options.i18n.COMMIT_CHANGES;
     },
-    showDeleteForm() {
+    showForm() {
       return !this.isUsingLfs || (this.isUsingLfs && this.lfsWarningDismissed);
     },
   },
@@ -224,7 +237,15 @@ export default {
 
       this.loading = true;
       this.form.showValidation = false;
-      this.$refs.form.$el.submit();
+
+      const form = this.$refs.form.$el;
+      const formData = new FormData(form);
+
+      try {
+        this.handleFormSubmit(formData);
+      } finally {
+        this.loading = false;
+      }
     },
   },
   deleteLfsHelpPath: helpPagePath('topics/git/lfs', {
@@ -243,6 +264,7 @@ export default {
     :action-cancel="cancelOptions"
     @primary="handlePrimaryAction"
   >
+    <slot name="body"></slot>
     <div v-if="showLfsWarning">
       <p>
         <gl-sprintf :message="$options.i18n.LFS_WARNING_PRIMARY_CONTENT">
@@ -260,10 +282,10 @@ export default {
         </gl-sprintf>
       </p>
     </div>
-    <div v-if="showDeleteForm">
-      <gl-form ref="form" novalidate :action="deletePath" method="post">
-        <input type="hidden" name="_method" value="delete" />
+    <div v-if="showForm">
+      <gl-form ref="form" novalidate>
         <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
+        <slot name="form-fields"></slot>
         <template v-if="emptyRepo">
           <input type="hidden" name="branch_name" :value="originalBranch" class="js-branch-name" />
         </template>
@@ -354,6 +376,18 @@ export default {
               </gl-form-checkbox>
             </template>
           </gl-form-group>
+          <template v-else>
+            <gl-alert v-if="branchAllowsCollaboration" :dismissible="false" class="gl-my-3">
+              <gl-sprintf :message="$options.i18n.COMMIT_IN_BRANCH_MESSAGE">
+                <template #branchName
+                  ><strong>{{ originalBranch }}</strong>
+                </template>
+              </gl-sprintf></gl-alert
+            >
+            <gl-alert v-else :dismissible="false" class="gl-my-3">{{
+              $options.i18n.BRANCH_IN_FORK_MESSAGE
+            }}</gl-alert>
+          </template>
         </template>
       </gl-form>
     </div>
diff --git a/ee/spec/frontend/repository/components/blob_button_group_spec.js b/ee/spec/frontend/repository/components/blob_button_group_spec.js
index 377aaec8bfe707956c5d5e5ec977d99fe51261c6..7f1fa11e36597571b7051eef2e83329a6eb7d3a1 100644
--- a/ee/spec/frontend/repository/components/blob_button_group_spec.js
+++ b/ee/spec/frontend/repository/components/blob_button_group_spec.js
@@ -14,6 +14,7 @@ const DEFAULT_PROPS = {
   isLocked: false,
   canLock: true,
   showForkSuggestion: false,
+  handleFormSubmit: jest.fn(),
 };
 
 const DEFAULT_INJECT = {
@@ -34,6 +35,9 @@ describe('EE BlobButtonGroup component', () => {
       provide: {
         ...DEFAULT_INJECT,
       },
+      stubs: {
+        LockButton,
+      },
     });
   };
 
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 17f998b956795c4ce3c76e759e01ffc54a4e19a8..2ba93322e33507046922f1d3f6f50219fd653ce7 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -64366,6 +64366,9 @@ msgstr ""
 msgid "Your browser doesn't support WebAuthn. Please use a supported browser, e.g. Chrome (67+) or Firefox (60+)."
 msgstr ""
 
+msgid "Your changes can be committed to %{branchName} because a merge request is open."
+msgstr ""
+
 msgid "Your changes can be committed to %{branch_name} because a merge request is open."
 msgstr ""
 
diff --git a/scripts/frontend/quarantined_vue3_specs.txt b/scripts/frontend/quarantined_vue3_specs.txt
index 12187b6eb147fd84e645c126e1795c5a61c9bcb8..f1554153faa200de50cfabdc589c46ca8cd10d1a 100644
--- a/scripts/frontend/quarantined_vue3_specs.txt
+++ b/scripts/frontend/quarantined_vue3_specs.txt
@@ -93,7 +93,6 @@ ee/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
 ee/spec/frontend/protected_environments/protected_environment_edit_spec.js
 ee/spec/frontend/related_items_tree/components/related_items_tree_body_spec.js
 ee/spec/frontend/related_items_tree/components/tree_root_spec.js
-ee/spec/frontend/repository/components/blob_button_group_spec.js
 ee/spec/frontend/requirements/components/requirement_item_spec.js
 ee/spec/frontend/requirements/components/requirements_root_spec.js
 ee/spec/frontend/roadmap/components/roadmap_shell_spec.js
diff --git a/spec/frontend/repository/components/blob_button_group_spec.js b/spec/frontend/repository/components/blob_button_group_spec.js
index 42aed016f40f1b2f5b0444ad832f95319ad43d12..89f764372cb717dda52ab9dbbab02df40e1ed0b9 100644
--- a/spec/frontend/repository/components/blob_button_group_spec.js
+++ b/spec/frontend/repository/components/blob_button_group_spec.js
@@ -147,7 +147,7 @@ describe('BlobButtonGroup component', () => {
     createComponent();
 
     const { targetBranch, originalBranch } = DEFAULT_INJECT;
-    const { name, canPushCode, deletePath, emptyRepo, isUsingLfs } = DEFAULT_PROPS;
+    const { name, canPushCode, emptyRepo, isUsingLfs } = DEFAULT_PROPS;
     const title = `Delete ${name}`;
 
     expect(findDeleteBlobModal().props()).toMatchObject({
@@ -155,9 +155,9 @@ describe('BlobButtonGroup component', () => {
       targetBranch,
       originalBranch,
       canPushCode,
-      deletePath,
       emptyRepo,
       isUsingLfs,
+      handleFormSubmit: expect.any(Function),
     });
   });
 });
diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js
index d95c4df434c374269bb6037260982aee8efcd37e..5b98fd51acbdb89660a8aff22c3ce69ad667a380 100644
--- a/spec/frontend/repository/components/commit_changes_modal_spec.js
+++ b/spec/frontend/repository/components/commit_changes_modal_spec.js
@@ -19,13 +19,13 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 const initialProps = {
   modalId: 'Delete-blob',
-  deletePath: 'some/path',
   commitMessage: 'Delete File',
   targetBranch: 'some-target-branch',
   originalBranch: 'main',
   canPushCode: true,
   canPushToBranch: true,
   emptyRepo: false,
+  handleFormSubmit: jest.fn(),
 };
 
 const { i18n } = CommitChangesModal;
@@ -35,7 +35,7 @@ describe('CommitChangesModal', () => {
 
   const createComponentFactory =
     (mountFn) =>
-    (props = {}) => {
+    ({ props, slots } = {}) => {
       wrapper = mountFn(CommitChangesModal, {
         propsData: {
           ...initialProps,
@@ -49,6 +49,7 @@ describe('CommitChangesModal', () => {
           GlSprintf,
           GlModal: stubComponent(GlModal, { template: RENDER_ALL_SLOTS_TEMPLATE }),
         },
+        slots,
       });
     };
 
@@ -56,6 +57,7 @@ describe('CommitChangesModal', () => {
   const createFullComponent = createComponentFactory(mount);
 
   const findModal = () => wrapper.findComponent(GlModal);
+  const findSlot = () => wrapper.findByTestId('test-slot');
   const findForm = () => findModal().findComponent(GlForm);
   const findCommitTextarea = () => findForm().findComponent(GlFormTextarea);
   const findFormRadioGroup = () => findForm().findComponent(GlFormRadioGroup);
@@ -65,6 +67,8 @@ describe('CommitChangesModal', () => {
   const findCreateMrCheckbox = () => findForm().findComponent(GlFormCheckbox);
   const findTargetInput = () => findForm().findComponent(GlFormInput);
   const findCommitHint = () => wrapper.find('[data-testid="hint"]');
+  const findBranchInForkMessage = () =>
+    wrapper.findByText('GitLab will create a branch in your fork and start a merge request.');
 
   const fillForm = async (inputValue = {}) => {
     const { targetText, commitText } = inputValue;
@@ -84,7 +88,7 @@ describe('CommitChangesModal', () => {
       linkEnd: '',
     });
 
-    beforeEach(() => createComponent({ isUsingLfs: true }));
+    beforeEach(() => createComponent({ props: { isUsingLfs: true } }));
 
     it('renders a modal containing LFS text', () => {
       expect(findModal().props('title')).toBe(lfsTitleText);
@@ -102,24 +106,45 @@ describe('CommitChangesModal', () => {
     });
   });
 
-  it('renders Modal component', () => {
-    createComponent();
+  describe('renders modal component', () => {
+    it('renders with correct props', () => {
+      createComponent();
 
-    expect(findModal().props()).toMatchObject({
-      size: 'md',
-      actionPrimary: {
-        text: 'Commit changes',
-      },
-      actionCancel: {
-        text: 'Cancel',
-      },
+      expect(findModal().props()).toMatchObject({
+        size: 'md',
+        actionPrimary: {
+          text: 'Commit changes',
+        },
+        actionCancel: {
+          text: 'Cancel',
+        },
+      });
+      expect(findSlot().exists()).toBe(false);
+    });
+
+    it('renders the body slot when one is provided', () => {
+      createComponent({
+        slots: {
+          body: '<div data-testid="test-slot">test body slot</div>',
+        },
+      });
+      expect(findSlot().text()).toBe('test body slot');
+    });
+
+    it('renders the form field slot when one is provided', () => {
+      createComponent({
+        slots: {
+          body: '<div data-testid="test-slot">test form fields slot</div>',
+        },
+      });
+      expect(findSlot().text()).toBe('test form fields slot');
     });
   });
 
   describe('form', () => {
     it('gets passed the path for action attribute', () => {
       createComponent();
-      expect(findForm().attributes('action')).toBe(initialProps.deletePath);
+      expect(findForm().attributes('action')).toBe(initialProps.actionPath);
     });
 
     it('shows the correct form fields when commit to current branch', () => {
@@ -142,7 +167,7 @@ describe('CommitChangesModal', () => {
     });
 
     it('shows the correct form fields when `canPushToBranch` is `false`', () => {
-      createComponent({ canPushToBranch: false, canPushCode: true });
+      createComponent({ props: { canPushToBranch: false, canPushCode: true } });
       expect(wrapper.vm.$data.form.fields.branch_name.value).toBe('some-target-branch');
       expect(findCommitTextarea().exists()).toBe(true);
       expect(findRadioGroup().exists()).toBe(false);
@@ -150,6 +175,36 @@ describe('CommitChangesModal', () => {
       expect(findCreateMrCheckbox().text()).toBe('Create a merge request for this change');
     });
 
+    describe('when `canPushToCode` is `false`', () => {
+      const commitInBranchMessage = sprintf(
+        'Your changes can be committed to %{branchName} because a merge request is open.',
+        {
+          branchName: 'main',
+        },
+      );
+
+      it('shows the correct form fields when `branchAllowsCollaboration` is `true`', () => {
+        createComponent({ props: { canPushCode: false, branchAllowsCollaboration: true } });
+        expect(findCommitTextarea().exists()).toBe(true);
+        expect(findRadioGroup().exists()).toBe(false);
+        expect(findModal().text()).toContain(commitInBranchMessage);
+        expect(findBranchInForkMessage().exists()).toBe(false);
+      });
+
+      it('shows the correct form fields when `branchAllowsCollaboration` is `false`', () => {
+        createComponent({
+          props: {
+            canPushCode: false,
+            branchAllowsCollaboration: false,
+          },
+        });
+        expect(findCommitTextarea().exists()).toBe(true);
+        expect(findRadioGroup().exists()).toBe(false);
+        expect(findModal().text()).not.toContain(commitInBranchMessage);
+        expect(findBranchInForkMessage().exists()).toBe(true);
+      });
+    });
+
     it('clear branch name when new branch option is selected', async () => {
       createComponent();
       expect(wrapper.vm.$data.form.fields.branch_name).toEqual({
@@ -174,8 +229,6 @@ describe('CommitChangesModal', () => {
       input                     | value                          | emptyRepo | canPushCode | canPushToBranch | exist
       ${'authenticity_token'}   | ${'mock-csrf-token'}           | ${false}  | ${true}     | ${true}         | ${true}
       ${'authenticity_token'}   | ${'mock-csrf-token'}           | ${true}   | ${false}    | ${true}         | ${true}
-      ${'_method'}              | ${'delete'}                    | ${false}  | ${true}     | ${true}         | ${true}
-      ${'_method'}              | ${'delete'}                    | ${true}   | ${false}    | ${true}         | ${true}
       ${'original_branch'}      | ${initialProps.originalBranch} | ${false}  | ${true}     | ${true}         | ${true}
       ${'original_branch'}      | ${undefined}                   | ${true}   | ${true}     | ${true}         | ${false}
       ${'create_merge_request'} | ${'1'}                         | ${false}  | ${false}    | ${true}         | ${true}
@@ -187,9 +240,11 @@ describe('CommitChangesModal', () => {
       'passes $input as a hidden input with the correct value',
       ({ input, value, emptyRepo, canPushCode, canPushToBranch, exist }) => {
         createComponent({
-          emptyRepo,
-          canPushCode,
-          canPushToBranch,
+          props: {
+            emptyRepo,
+            canPushCode,
+            canPushToBranch,
+          },
         });
 
         const inputMethod = findForm().find(`input[name="${input}"]`);
@@ -237,16 +292,15 @@ describe('CommitChangesModal', () => {
   });
 
   describe('form submission', () => {
-    let submitSpy;
+    const handleFormSubmitSpy = jest.fn();
 
     beforeEach(async () => {
-      createFullComponent();
+      createFullComponent({ props: { handleFormSubmit: handleFormSubmitSpy } });
       await nextTick();
-      submitSpy = jest.spyOn(findForm().element, 'submit');
     });
 
     afterEach(() => {
-      submitSpy.mockRestore();
+      handleFormSubmitSpy.mockRestore();
     });
 
     describe('invalid form', () => {
@@ -265,7 +319,7 @@ describe('CommitChangesModal', () => {
 
       it('does not submit form', () => {
         findModal().vm.$emit('primary', { preventDefault: () => {} });
-        expect(submitSpy).not.toHaveBeenCalled();
+        expect(handleFormSubmitSpy).not.toHaveBeenCalled();
       });
     });
 
@@ -287,7 +341,7 @@ describe('CommitChangesModal', () => {
 
       it('submits form', () => {
         findModal().vm.$emit('primary', { preventDefault: () => {} });
-        expect(submitSpy).toHaveBeenCalled();
+        expect(handleFormSubmitSpy).toHaveBeenCalled();
       });
     });
   });