From 0567032e75d7ddf616eaa494361bb7b43299ec77 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Fri, 15 Nov 2024 12:02:29 +0000
Subject: [PATCH 01/11] Update edit blob to use commit change modal

Changelog: changed
---
 .../javascripts/blob_edit/blob_bundle.js      |  9 +-
 .../javascripts/blob_edit/blob_edit_header.js | 44 +++++++++
 app/assets/javascripts/blob_edit/edit_blob.js |  4 +
 .../components/commit_changes_modal.vue       | 57 +++++++----
 .../repository/pages/blob_edit_header.vue     | 98 +++++++++++++++++++
 app/helpers/blob_helper.rb                    | 16 +++
 app/views/projects/blob/edit.html.haml        | 19 ++--
 ee/spec/helpers/ee/blob_helper_spec.rb        |  2 +-
 locale/gitlab.pot                             |  3 -
 qa/qa/page/file/shared/editor.rb              | 26 +++++
 qa/qa/page/file/show.rb                       |  5 +-
 .../file/delete_file_via_web_spec.rb          |  3 +-
 .../repository/file/edit_file_via_web_spec.rb |  3 +-
 .../source_editor_toolbar_spec.rb             |  3 +-
 .../user/user_inherited_access_spec.rb        |  5 +-
 .../maintainer_edits_fork_spec.rb             |  7 ++
 spec/features/projects/blobs/edit_spec.rb     | 26 +++--
 .../projects/files/editing_a_file_spec.rb     | 10 +-
 .../projects/files/user_edits_files_spec.rb   | 32 ++++--
 spec/frontend/blob_edit/blob_bundle_spec.js   |  5 +-
 spec/frontend/blob_edit/edit_blob_spec.js     |  9 +-
 .../components/commit_changes_modal_spec.js   | 61 +++++++++---
 .../repository/pages/blob_edit_header_spec.js | 80 +++++++++++++++
 spec/helpers/blob_helper_spec.rb              | 98 ++++++++++++++++++-
 24 files changed, 548 insertions(+), 77 deletions(-)
 create mode 100644 app/assets/javascripts/blob_edit/blob_edit_header.js
 create mode 100644 app/assets/javascripts/repository/pages/blob_edit_header.vue
 create mode 100644 spec/frontend/repository/pages/blob_edit_header_spec.js

diff --git a/app/assets/javascripts/blob_edit/blob_bundle.js b/app/assets/javascripts/blob_edit/blob_bundle.js
index 730ea9fe80125d..7e097041beb874 100644
--- a/app/assets/javascripts/blob_edit/blob_bundle.js
+++ b/app/assets/javascripts/blob_edit/blob_bundle.js
@@ -1,6 +1,6 @@
 import $ from 'jquery';
 import { createAlert } from '~/alert';
-import NewCommitForm from '../new_commit_form';
+import initBlobEditHeader from '~/blob_edit/blob_edit_header';
 
 export default () => {
   const editBlobForm = $('.js-edit-blob-form');
@@ -20,8 +20,7 @@ export default () => {
 
     import('./edit_blob')
       .then(({ default: EditBlob } = {}) => {
-        // eslint-disable-next-line no-new
-        new EditBlob({
+        const editor = new EditBlob({
           assetsPath: `${urlRoot}${assetsPath}`,
           filePath,
           currentAction,
@@ -30,6 +29,8 @@ export default () => {
           isMarkdown,
           previewMarkdownPath,
         });
+
+        initBlobEditHeader(editor);
       })
       .catch((e) =>
         createAlert({
@@ -47,8 +48,6 @@ export default () => {
       window.onbeforeunload = null;
     });
 
-    new NewCommitForm(editBlobForm); // eslint-disable-line no-new
-
     // returning here blocks page navigation
     window.onbeforeunload = () => '';
   }
diff --git a/app/assets/javascripts/blob_edit/blob_edit_header.js b/app/assets/javascripts/blob_edit/blob_edit_header.js
new file mode 100644
index 00000000000000..ea2891a191187f
--- /dev/null
+++ b/app/assets/javascripts/blob_edit/blob_edit_header.js
@@ -0,0 +1,44 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import BlobEditHeader from '~/repository/pages/blob_edit_header.vue';
+
+export default function initBlobEditHeader(editor) {
+  const el = document.querySelector('.js-blob-edit-header');
+
+  if (!el) {
+    return null;
+  }
+
+  const {
+    updatePath,
+    cancelPath,
+    originalBranch,
+    targetBranch,
+    canPushCode,
+    canPushToBranch,
+    emptyRepo,
+    isUsingLfs,
+    blobName,
+    branchAllowsCollaboration,
+    lastCommitSha,
+  } = el.dataset;
+
+  return new Vue({
+    el,
+    provide: {
+      editor,
+      updatePath,
+      cancelPath,
+      originalBranch,
+      targetBranch,
+      blobName,
+      lastCommitSha,
+      emptyRepo: parseBoolean(emptyRepo),
+      canPushCode: parseBoolean(canPushCode),
+      canPushToBranch: parseBoolean(canPushToBranch),
+      isUsingLfs: parseBoolean(isUsingLfs),
+      branchAllowsCollaboration: parseBoolean(branchAllowsCollaboration),
+    },
+    render: (createElement) => createElement(BlobEditHeader),
+  });
+}
diff --git a/app/assets/javascripts/blob_edit/edit_blob.js b/app/assets/javascripts/blob_edit/edit_blob.js
index 123e59bdff0431..0a35ba64c075d0 100644
--- a/app/assets/javascripts/blob_edit/edit_blob.js
+++ b/app/assets/javascripts/blob_edit/edit_blob.js
@@ -216,4 +216,8 @@ export default class EditBlob {
     this.$toggleButton.toggleClass('soft-wrap-active', this.isSoftWrapped);
     this.editor.updateOptions({ wordWrap: this.isSoftWrapped ? 'on' : 'off' });
   }
+
+  getFileContent() {
+    return this.editor?.getValue();
+  }
 }
diff --git a/app/assets/javascripts/repository/components/commit_changes_modal.vue b/app/assets/javascripts/repository/components/commit_changes_modal.vue
index 074cfe1c766898..4a70f043958649 100644
--- a/app/assets/javascripts/repository/components/commit_changes_modal.vue
+++ b/app/assets/javascripts/repository/components/commit_changes_modal.vue
@@ -16,6 +16,7 @@ import csrf from '~/lib/utils/csrf';
 import { __, s__ } from '~/locale';
 import validation, { initFormField } from '~/vue_shared/directives/validation';
 import { helpPagePath } from '~/helpers/help_page_helper';
+import { getParameterByName } from '~/lib/utils/url_utility';
 import {
   SECONDARY_OPTIONS_TEXT,
   COMMIT_LABEL,
@@ -106,6 +107,26 @@ export default {
       required: false,
       default: false,
     },
+    method: {
+      type: String,
+      required: false,
+      default: 'delete',
+    },
+    fileContent: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    filePath: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    isEdit: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     branchAllowsCollaboration: {
       type: Boolean,
       required: false,
@@ -153,6 +174,7 @@ export default {
           variant: 'confirm',
           loading: this.loading,
           disabled: this.loading || !this.form.state || !this.valid,
+          'data-testid': 'commit-change-modal-commit-button',
         },
       };
 
@@ -189,7 +211,7 @@ export default {
       );
     },
     showLfsWarning() {
-      return this.isUsingLfs && !this.lfsWarningDismissed;
+      return this.isUsingLfs && !this.lfsWarningDismissed && !this.isEdit;
     },
     title() {
       return this.showLfsWarning
@@ -197,22 +219,10 @@ export default {
         : this.$options.i18n.COMMIT_CHANGES;
     },
     showForm() {
-      return !this.isUsingLfs || (this.isUsingLfs && this.lfsWarningDismissed);
+      return !this.isUsingLfs || (this.isUsingLfs && this.lfsWarningDismissed) || this.isEdit;
     },
-  },
-  watch: {
-    createNewBranch: {
-      handler(newValue) {
-        if (newValue) {
-          this.form.fields.branch_name.value = '';
-        } else {
-          this.form.fields.branch_name = {
-            ...this.form.fields.branch_name,
-            value: this.originalBranch,
-            state: true,
-          };
-        }
-      },
+    fromMergeRequestIid() {
+      return getParameterByName('from_merge_request_iid') || '';
     },
   },
   methods: {
@@ -229,6 +239,7 @@ export default {
       this.$refs.message?.$el.focus();
     },
     async handlePrimaryAction(e) {
+      window.onbeforeunload = null;
       e.preventDefault(); // Prevent modal from closing
 
       if (this.showLfsWarning) {
@@ -264,6 +275,7 @@ export default {
     v-bind="$attrs"
     :modal-id="modalId"
     :title="title"
+    data-testid="commit-change-modal"
     :action-primary="primaryOptions"
     :action-cancel="cancelOptions"
     @primary="handlePrimaryAction"
@@ -286,7 +298,14 @@ export default {
       </p>
     </div>
     <div v-if="showForm">
-      <gl-form ref="form" novalidate>
+      <gl-form ref="form" novalidate :action="actionPath" method="post">
+        <input type="hidden" name="_method" :value="method" />
+        <template v-if="isEdit">
+          <input type="hidden" name="content" :value="fileContent" />
+          <input type="hidden" name="file_path" :value="filePath" />
+          <input type="hidden" name="last_commit_sha" :value="lastCommitSha" />
+          <input type="hidden" name="from_merge_request_iid" :value="fromMergeRequestIid" />
+        </template>
         <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
         <slot name="form-fields"></slot>
         <gl-form-group
@@ -353,7 +372,6 @@ export default {
                   :disabled="loading"
                   name="branch_name"
                   required
-                  :placeholder="__('example-branch-name')"
                   class="gl-mt-2"
                 />
                 <gl-form-checkbox v-if="createNewBranch" v-model="createNewMr" class="gl-mt-4">
@@ -364,7 +382,7 @@ export default {
               </div>
             </template>
             <template v-else>
-              <label for="branchNameInput">
+              <label for="branchNameInput" class="gl-font-normal">
                 {{ $options.i18n.NEW_BRANCH_LABEl }}
               </label>
               <gl-form-input
@@ -375,7 +393,6 @@ export default {
                 :disabled="loading"
                 name="branch_name"
                 required
-                :placeholder="__('example-branch-name')"
                 class="gl-mt-2"
               />
               <gl-form-checkbox v-model="createNewMr" class="gl-mt-4">
diff --git a/app/assets/javascripts/repository/pages/blob_edit_header.vue b/app/assets/javascripts/repository/pages/blob_edit_header.vue
new file mode 100644
index 00000000000000..b372e91a043b36
--- /dev/null
+++ b/app/assets/javascripts/repository/pages/blob_edit_header.vue
@@ -0,0 +1,98 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+import { __, sprintf } from '~/locale';
+import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
+import getRefMixin from '../mixins/get_ref';
+
+export default {
+  components: {
+    CommitChangesModal,
+    GlButton,
+  },
+  mixins: [getRefMixin],
+  inject: [
+    'editor',
+    'updatePath',
+    'cancelPath',
+    'originalBranch',
+    'targetBranch',
+    'blobName',
+    'canPushCode',
+    'canPushToBranch',
+    'emptyRepo',
+    'isUsingLfs',
+    'branchAllowsCollaboration',
+    'lastCommitSha',
+  ],
+  data() {
+    return {
+      isCommitChangeModalOpen: false,
+      fileContent: null,
+      filePath: null,
+    };
+  },
+  computed: {
+    updateModalId() {
+      return uniqueId('update-modal');
+    },
+    updateModalCommitMessage() {
+      return sprintf(__('Edit %{name}'), { name: this.blobName });
+    },
+  },
+  methods: {
+    handleCancelButtonClick() {
+      window.onbeforeunload = null;
+    },
+    openModal() {
+      this.fileContent = this.editor.getFileContent();
+      this.filePath = this.editor.filepathFormMediator?.$filenameInput?.val();
+      this.$refs[this.updateModalId].show();
+    },
+  },
+  i18n: {
+    headerText: __('Edit file'),
+    cancelButtonText: __('Cancel'),
+    commitButtonText: __('Commit changes'),
+    confirmationMessage: __('Leave edit mode? All unsaved changes will be lost.'),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-mb-4 gl-mt-5 gl-items-center gl-justify-between md:gl-flex lg:gl-my-5">
+    <h1 class="gl-heading-1 gl-inline-block md:!gl-mb-0">
+      {{ $options.i18n.headerText }}
+    </h1>
+    <div class="gl-flex gl-gap-3">
+      <gl-button
+        :data-confirm="$options.i18n.confirmationMessage"
+        data-confirm-btn-variant="danger"
+        :href="cancelPath"
+        @click="handleCancelButtonClick"
+        >{{ $options.i18n.cancelButtonText }}</gl-button
+      >
+      <gl-button variant="confirm" data-testid="blob-edit-header-commit-button" @click="openModal">
+        {{ $options.i18n.commitButtonText }}
+      </gl-button>
+    </div>
+    <commit-changes-modal
+      :ref="updateModalId"
+      :modal-id="updateModalId"
+      :action-path="updatePath"
+      :commit-message="updateModalCommitMessage"
+      :target-branch="targetBranch || ref"
+      :original-branch="originalBranch || ref"
+      :can-push-code="canPushCode"
+      :empty-repo="emptyRepo"
+      :can-push-to-branch="canPushToBranch"
+      :is-using-lfs="isUsingLfs"
+      :file-content="fileContent"
+      :file-path="filePath"
+      :branch-allows-collaboration="branchAllowsCollaboration"
+      :last-commit-sha="lastCommitSha"
+      method="put"
+      is-edit
+    />
+  </div>
+</template>
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 91c82bdea76258..74ad217255525b 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -317,6 +317,22 @@ def vue_blob_header_app_data(project, blob, ref)
       ref: ref
     }
   end
+
+  def edit_blob_app_data(project, id, blob, ref)
+    {
+      update_path: project_update_blob_path(project, id),
+      cancel_path: project_blob_path(project, id),
+      original_branch: ref,
+      target_branch: selected_branch,
+      can_push_code: can?(current_user, :push_code, project).to_s,
+      can_push_to_branch: project.present(current_user: current_user).can_current_user_push_to_branch?(ref).to_s,
+      empty_repo: project.empty_repo?.to_s,
+      is_using_lfs: blob.stored_externally?.to_s,
+      blob_name: blob.name,
+      branch_allows_collaboration: project.branch_allows_collaboration?(current_user, ref).to_s,
+      last_commit_sha: @last_commit_sha
+    }
+  end
 end
 
 BlobHelper.prepend_mod_with('BlobHelper')
diff --git a/app/views/projects/blob/edit.html.haml b/app/views/projects/blob/edit.html.haml
index d607a94ca5dbc1..d6b825621e7ab9 100644
--- a/app/views/projects/blob/edit.html.haml
+++ b/app/views/projects/blob/edit.html.haml
@@ -3,6 +3,7 @@
 - content_for :prefetch_asset_tags do
   - webpack_preload_asset_tag('monaco')
 - add_page_specific_style 'page_bundles/editor'
+
 - if @conflict
   = render Pajamas::AlertComponent.new(alert_options: { class: 'gl-mb-5 gl-mt-5' },
     variant: :danger,
@@ -18,8 +19,17 @@
         - blob_url = project_blob_path(@project, @id)
         = _('Someone edited the file the same time you did. Please check out %{link_start}the file %{icon}%{link_end} and make sure your changes will not unintentionally remove theirs.').html_safe % { link_start: blob_link_start % { url: blob_url }, link_end: link_end , icon: external_link_icon }
 
-%h1.page-title.gl-text-size-h-display.blob-edit-page-title
-  Edit file
+
+.js-blob-edit-header{ data: edit_blob_app_data(@project, @id, @blob, @ref) }
+  .gl-mb-4.gl-mt-5.gl-items-center.gl-justify-between.md:gl-flex.lg:gl-my-5
+    %h1{ class: 'md:!gl-mb-0 gl-heading-1 gl-inline-block' }
+      = _('Edit file')
+    .gl-flex.gl-gap-3
+      = render Pajamas::ButtonComponent.new do
+        = _('Cancel')
+      = render Pajamas::ButtonComponent.new(variant: :confirm) do
+        = _('Commit changes')
+
 .file-editor
   = gl_tabs_nav({ class: 'js-edit-mode nav-links gl-border-0'}) do
     = gl_tab_link_to _('Write'), '#editor', { tab_class: 'active' }
@@ -28,8 +38,3 @@
 
   = form_tag(project_update_blob_path(@project, @id), method: :put, class: 'js-quick-submit js-edit-blob-form', data: blob_editor_paths(@project, 'put')) do
     = render 'projects/blob/editor', ref: @ref, path: @path, blob_data: @blob.data
-    = render 'shared/new_commit_form', placeholder: "Update #{@blob.name}"
-    = hidden_field_tag 'last_commit_sha', @last_commit_sha
-    = hidden_field_tag 'content', '', id: "file-content"
-    = hidden_field_tag 'from_merge_request_iid', params[:from_merge_request_iid]
-    = render 'projects/commit_button', ref: @ref, cancel_path: project_blob_path(@project, @id)
diff --git a/ee/spec/helpers/ee/blob_helper_spec.rb b/ee/spec/helpers/ee/blob_helper_spec.rb
index fbc09fd7a87478..faaef40d31d1f3 100644
--- a/ee/spec/helpers/ee/blob_helper_spec.rb
+++ b/ee/spec/helpers/ee/blob_helper_spec.rb
@@ -73,7 +73,7 @@
     end
 
     it 'returns data related to blob app' do
-      allow(helper).to receive(:current_user).and_return(nil)
+      allow(helper).to receive_messages(selected_branch: ref, current_user: nil)
 
       expect(helper.vue_blob_app_data(project, blob, ref)).to include({
         user_id: '',
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index b5ec4e4f844669..be4d29301e2989 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -66413,9 +66413,6 @@ msgstr ""
 msgid "event"
 msgstr ""
 
-msgid "example-branch-name"
-msgstr ""
-
 msgid "example.com"
 msgstr ""
 
diff --git a/qa/qa/page/file/shared/editor.rb b/qa/qa/page/file/shared/editor.rb
index 86d044bb4fa117..93db7b6807fe15 100644
--- a/qa/qa/page/file/shared/editor.rb
+++ b/qa/qa/page/file/shared/editor.rb
@@ -13,6 +13,18 @@ def self.included(base)
             base.view 'app/views/projects/blob/_editor.html.haml' do
               element 'source-editor-preview-container'
             end
+
+            base.view 'app/assets/javascripts/repository/components/commit_changes_modal.vue' do
+              element 'commit-change-modal'
+            end
+
+            base.view 'app/assets/javascripts/repository/components/commit_changes_modal.vue' do
+              element 'commit-change-modal-commit-button'
+            end
+
+            base.view 'app/assets/javascripts/repository/pages/blob_edit_header.vue' do
+              element 'blob-edit-header-commit-button'
+            end
           end
 
           def add_content(content)
@@ -27,6 +39,20 @@ def remove_content
             end
           end
 
+          def click_commit_changes_in_header
+            click_element('blob-edit-header-commit-button')
+          end
+
+          def commit_changes_through_modal
+            within_element 'commit-change-modal' do
+              click_element('commit-change-modal-commit-button')
+            end
+          end
+
+          def has_modal_commit_button?
+            has_element?('commit-change-modal-commit-button')
+          end
+
           private
 
           def text_area
diff --git a/qa/qa/page/file/show.rb b/qa/qa/page/file/show.rb
index 4637cedad418a5..6bb4b9b1b80448 100644
--- a/qa/qa/page/file/show.rb
+++ b/qa/qa/page/file/show.rb
@@ -7,6 +7,7 @@ class Show < Page::Base
         include Shared::CommitMessage
         include Layout::Flash
         include Page::Component::BlobContent
+        include Shared::Editor
 
         view 'app/assets/javascripts/repository/components/blob_button_group.vue' do
           element 'lock-button'
@@ -34,10 +35,6 @@ def highlight_text
         def explain_code
           click_element('question-icon')
         end
-
-        def click_commit_changes
-          click_on 'Commit changes'
-        end
       end
     end
   end
diff --git a/qa/qa/specs/features/browser_ui/3_create/repository/file/delete_file_via_web_spec.rb b/qa/qa/specs/features/browser_ui/3_create/repository/file/delete_file_via_web_spec.rb
index 4085c4953f6495..aaef69eda20b85 100644
--- a/qa/qa/specs/features/browser_ui/3_create/repository/file/delete_file_via_web_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/repository/file/delete_file_via_web_spec.rb
@@ -16,9 +16,10 @@ module QA
         Page::File::Show.perform do |file|
           file.click_delete
           file.add_commit_message(commit_message_for_delete)
-          file.click_commit_changes
         end
 
+        Page::File::Edit.perform(&:commit_changes_through_modal)
+
         Page::Project::Show.perform do |project|
           aggregate_failures 'file details' do
             expect(project).to have_notice('The file has been successfully deleted.')
diff --git a/qa/qa/specs/features/browser_ui/3_create/repository/file/edit_file_via_web_spec.rb b/qa/qa/specs/features/browser_ui/3_create/repository/file/edit_file_via_web_spec.rb
index 11280c71618854..8fa99a55c3b499 100644
--- a/qa/qa/specs/features/browser_ui/3_create/repository/file/edit_file_via_web_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/repository/file/edit_file_via_web_spec.rb
@@ -19,8 +19,9 @@ module QA
         Page::File::Form.perform do |file|
           file.remove_content
           file.add_content(updated_file_content)
+          file.click_commit_changes_in_header
           file.add_commit_message(commit_message_for_update)
-          file.commit_changes
+          file.commit_changes_through_modal
         end
 
         Page::File::Show.perform do |file|
diff --git a/qa/qa/specs/features/browser_ui/3_create/source_editor/source_editor_toolbar_spec.rb b/qa/qa/specs/features/browser_ui/3_create/source_editor/source_editor_toolbar_spec.rb
index 37e7aa898610a2..52cc5ef8629aa0 100644
--- a/qa/qa/specs/features/browser_ui/3_create/source_editor/source_editor_toolbar_spec.rb
+++ b/qa/qa/specs/features/browser_ui/3_create/source_editor/source_editor_toolbar_spec.rb
@@ -29,7 +29,8 @@ module QA
           file.add_content("# #{edited_readme_content}")
           file.preview
           expect(file.has_markdown_preview?('h1', edited_readme_content)).to be true
-          file.commit_changes
+          file.click_commit_changes_in_header
+          file.commit_changes_through_modal
         end
 
         Page::File::Show.perform do |file|
diff --git a/qa/qa/specs/features/browser_ui/9_data_stores/user/user_inherited_access_spec.rb b/qa/qa/specs/features/browser_ui/9_data_stores/user/user_inherited_access_spec.rb
index a49bf4c99c4dc7..a5eea8d9849230 100644
--- a/qa/qa/specs/features/browser_ui/9_data_stores/user/user_inherited_access_spec.rb
+++ b/qa/qa/specs/features/browser_ui/9_data_stores/user/user_inherited_access_spec.rb
@@ -36,8 +36,9 @@ module QA
 
           Page::File::Show.perform(&:click_edit)
 
-          Page::File::Form.perform do |file_form|
-            expect(file_form).to have_element('data-testid': 'commit-button')
+          Page::File::Edit.perform do |file|
+            file.click_commit_changes_in_header
+            expect(file).to have_modal_commit_button
           end
         end
       end
diff --git a/spec/features/merge_request/maintainer_edits_fork_spec.rb b/spec/features/merge_request/maintainer_edits_fork_spec.rb
index 8618dca5873dbf..f50af8dace9da4 100644
--- a/spec/features/merge_request/maintainer_edits_fork_spec.rb
+++ b/spec/features/merge_request/maintainer_edits_fork_spec.rb
@@ -40,6 +40,8 @@
   end
 
   it 'mentions commits will go to the source branch' do
+    click_button 'Commit changes'
+
     expect(page).to have_content('Your changes can be committed to fix because a merge request is open.')
   end
 
@@ -48,6 +50,11 @@
     editor_set_value(content)
 
     click_button 'Commit changes'
+
+    within_testid('commit-change-modal') do
+      click_button 'Commit changes'
+    end
+
     wait_for_requests
 
     expect(page).to have_content('Your changes have been committed successfully')
diff --git a/spec/features/projects/blobs/edit_spec.rb b/spec/features/projects/blobs/edit_spec.rb
index 0f5f7db5bf4b33..fe79dd7d6d475c 100644
--- a/spec/features/projects/blobs/edit_spec.rb
+++ b/spec/features/projects/blobs/edit_spec.rb
@@ -34,7 +34,13 @@ def edit_and_commit(commit_changes: true, is_diff: false)
       # there may be no diff and nothing to render.
       fill_editor(content: "class NextFeature#{object_id}\\nend\\n")
 
-      click_button 'Commit changes' if commit_changes
+      if commit_changes
+        click_button('Commit changes')
+
+        within_testid('commit-change-modal') do
+          click_button('Commit changes')
+        end
+      end
     end
 
     def fill_editor(content: 'class NextFeature\\nend\\n')
@@ -204,18 +210,23 @@ def has_toolbar_buttons
 
         it 'shows blob editor with same branch' do
           expect(page).to have_current_path(project_edit_blob_path(project, tree_join(branch, file_path)))
-          expect(find('.js-branch-name').value).to eq(branch)
+
+          click_button('Commit changes')
+
+          expect(page).to have_selector('code', text: branch)
         end
       end
 
       context 'with protected branch' do
-        it 'shows blob editor with patch branch' do
+        it 'shows blob editor with patch branch and option to create MR' do
           freeze_time do
             visit project_edit_blob_path(project, tree_join(protected_branch, file_path))
 
-            epoch = Time.zone.now.strftime('%s%L').last(5)
+            click_button('Commit changes')
 
-            expect(find('.js-branch-name').value).to eq "#{user.username}-protected-branch-patch-#{epoch}"
+            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}"
           end
         end
       end
@@ -232,7 +243,10 @@ def has_toolbar_buttons
 
       it 'shows blob editor with same branch' do
         expect(page).to have_current_path(project_edit_blob_path(project, tree_join(branch, file_path)))
-        expect(find('.js-branch-name').value).to eq(branch)
+
+        click_button('Commit changes')
+
+        expect(page).to have_selector('code', text: branch)
       end
     end
   end
diff --git a/spec/features/projects/files/editing_a_file_spec.rb b/spec/features/projects/files/editing_a_file_spec.rb
index 39e75f2cee6629..9f3636405e2e08 100644
--- a/spec/features/projects/files/editing_a_file_spec.rb
+++ b/spec/features/projects/files/editing_a_file_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Projects > Files > User wants to edit a file', feature_category: :source_code_management do
+RSpec.describe 'Projects > Files > User wants to edit a file', :js, feature_category: :source_code_management do
   include ProjectForksHelper
   let(:project) { create(:project, :repository, :public) }
   let(:user) { project.first_owner }
@@ -28,6 +28,10 @@
 
       click_button 'Commit changes'
 
+      within_testid('commit-change-modal') do
+        click_button('Commit changes')
+      end
+
       expect(page).to have_content 'Someone edited the file the same time you did.'
     end
   end
@@ -52,6 +56,10 @@
         it 'renders an error message' do
           click_button 'Commit changes'
 
+          within_testid('commit-change-modal') do
+            click_button('Commit changes')
+          end
+
           expect(page).to have_content(
             %(Error: Can't edit this file. The fork and upstream project have diverged. Edit the file on the fork)
           )
diff --git a/spec/features/projects/files/user_edits_files_spec.rb b/spec/features/projects/files/user_edits_files_spec.rb
index 81cebde16ca4a3..2b6e3a7ab753b0 100644
--- a/spec/features/projects/files/user_edits_files_spec.rb
+++ b/spec/features/projects/files/user_edits_files_spec.rb
@@ -81,9 +81,13 @@
       find('.file-editor', match: :first)
 
       editor_set_value('*.rbca')
-      fill_in(:commit_message, with: 'New commit message', visible: true)
       click_button('Commit changes')
 
+      within_testid('commit-change-modal') do
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+      end
+
       expect(page).to have_current_path(project_blob_path(project, 'master/.gitignore'), ignore_query: true)
 
       wait_for_requests
@@ -97,9 +101,13 @@
       find('.file-editor', match: :first)
 
       editor_set_value('*.rbca')
-      fill_in(:commit_message, with: 'New commit message', visible: true)
       click_button('Commit changes')
 
+      within_testid('commit-change-modal') do
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+      end
+
       expect(page).to have_current_path(project_blob_path(project, 'master/.gitignore'), ignore_query: true)
 
       wait_for_requests
@@ -117,10 +125,14 @@
       find('.file-editor', match: :first)
 
       editor_set_value('*.rbca')
-      fill_in(:commit_message, with: 'New commit message', visible: true)
-      fill_in(:branch_name, with: 'new_branch_name', visible: true)
       click_button('Commit changes')
 
+      within_testid('commit-change-modal') do
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        choose(option: true)
+        fill_in(:branch_name, with: 'new_branch_name', visible: true)
+        click_button('Commit changes')
+      end
       expect(page).to have_current_path(project_new_merge_request_path(project), ignore_query: true)
 
       click_link('Changes')
@@ -206,9 +218,13 @@ def expect_fork_status
       find('.file-editor', match: :first)
 
       editor_set_value('*.rbca')
-      fill_in(:commit_message, with: 'New commit message', visible: true)
       click_button('Commit changes')
 
+      within_testid('commit-change-modal') do
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        click_button('Commit changes')
+      end
+
       fork = user.fork_of(project2.reload)
 
       expect(page).to have_current_path(project_new_merge_request_path(fork), ignore_query: true)
@@ -233,9 +249,13 @@ def expect_fork_status
         expect(page).not_to have_link('Fork')
 
         editor_set_value('*.rbca')
-        fill_in(:commit_message, with: 'Another commit', visible: true)
         click_button('Commit changes')
 
+        within_testid('commit-change-modal') do
+          fill_in(:commit_message, with: 'Another commit', visible: true)
+          click_button('Commit changes')
+        end
+
         fork = user.fork_of(project2)
 
         expect(page).to have_current_path(project_new_merge_request_path(fork), ignore_query: true)
diff --git a/spec/frontend/blob_edit/blob_bundle_spec.js b/spec/frontend/blob_edit/blob_bundle_spec.js
index ca75cb00fbd367..b39e471272cc03 100644
--- a/spec/frontend/blob_edit/blob_bundle_spec.js
+++ b/spec/frontend/blob_edit/blob_bundle_spec.js
@@ -2,12 +2,14 @@ import $ from 'jquery';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
 import waitForPromises from 'helpers/wait_for_promises';
 import blobBundle from '~/blob_edit/blob_bundle';
+import initBlobEditHeader from '~/blob_edit/blob_edit_header';
 
 import SourceEditor from '~/blob_edit/edit_blob';
 import { createAlert } from '~/alert';
 
 jest.mock('~/blob_edit/edit_blob');
 jest.mock('~/alert');
+jest.mock('~/blob_edit/blob_edit_header');
 
 describe('BlobBundle', () => {
   beforeAll(() => {
@@ -27,7 +29,8 @@ describe('BlobBundle', () => {
     blobBundle();
     await waitForPromises();
     expect(SourceEditor).toHaveBeenCalled();
-
+    expect(initBlobEditHeader).toHaveBeenCalledTimes(1);
+    expect(initBlobEditHeader).toHaveBeenCalledWith(expect.any(SourceEditor));
     resetHTMLFixture();
   });
 
diff --git a/spec/frontend/blob_edit/edit_blob_spec.js b/spec/frontend/blob_edit/edit_blob_spec.js
index 27e456437586c5..974f0d57c0ebad 100644
--- a/spec/frontend/blob_edit/edit_blob_spec.js
+++ b/spec/frontend/blob_edit/edit_blob_spec.js
@@ -49,12 +49,14 @@ describe('Blob Editing', () => {
   const filePath = 'path/to/file.js';
   const useMock = jest.fn(() => markdownExtensions);
   const unuseMock = jest.fn();
+  const valueMock = 'test value';
+  const getValueMock = jest.fn().mockReturnValue('test value');
   const emitter = new Emitter();
   const mockInstance = {
     use: useMock,
     unuse: unuseMock,
     setValue: jest.fn(),
-    getValue: jest.fn().mockReturnValue('test value'),
+    getValue: getValueMock,
     focus: jest.fn(),
     onDidChangeModelLanguage: emitter.event,
     updateModelLanguage: jest.fn(),
@@ -114,6 +116,11 @@ describe('Blob Editing', () => {
         }),
       );
     });
+
+    it('returns content from the editor', () => {
+      expect(blobInstance.getFileContent()).toBe(valueMock);
+      expect(getValueMock).toHaveBeenCalled();
+    });
   });
 
   it('loads SourceEditorExtension and FileTemplateExtension by default', async () => {
diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js
index 941ae8307c7d0a..cce0de287a1f8c 100644
--- a/spec/frontend/repository/components/commit_changes_modal_spec.js
+++ b/spec/frontend/repository/components/commit_changes_modal_spec.js
@@ -12,6 +12,7 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { RENDER_ALL_SLOTS_TEMPLATE, stubComponent } from 'helpers/stub_component';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
 import { sprintf } from '~/locale';
 
@@ -19,6 +20,7 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 const initialProps = {
   modalId: 'Delete-blob',
+  actionPath: 'some/path',
   commitMessage: 'Delete File',
   targetBranch: 'some-target-branch',
   originalBranch: 'main',
@@ -88,27 +90,38 @@ describe('CommitChangesModal', () => {
       linkEnd: '',
     });
 
-    beforeEach(() => createComponent({ props: { isUsingLfs: true } }));
+    describe('when deleting a file', () => {
+      beforeEach(() => createComponent({ isUsingLfs: true }));
 
-    it('renders a modal containing LFS text', () => {
-      expect(findModal().props('title')).toBe(lfsTitleText);
-      expect(findModal().text()).toContain(primaryLfsText);
-      expect(findModal().text()).toContain(secondaryLfsText);
+      it('renders a modal containing LFS text', () => {
+        expect(findModal().props('title')).toBe(lfsTitleText);
+        expect(findModal().text()).toContain(primaryLfsText);
+        expect(findModal().text()).toContain(secondaryLfsText);
+      });
+
+      it('hides the LFS content when the continue button is clicked', async () => {
+        findModal().vm.$emit('primary', { preventDefault: jest.fn() });
+        await nextTick();
+
+        expect(findModal().props('title')).not.toBe(lfsTitleText);
+        expect(findModal().text()).not.toContain(primaryLfsText);
+        expect(findModal().text()).not.toContain(secondaryLfsText);
+      });
     });
 
-    it('hides the LFS content if the continue button is clicked', async () => {
-      findModal().vm.$emit('primary', { preventDefault: jest.fn() });
-      await nextTick();
+    describe('when editing a file', () => {
+      beforeEach(() => createComponent({ isUsingLfs: true, isEdit: true }));
 
-      expect(findModal().props('title')).not.toBe(lfsTitleText);
-      expect(findModal().text()).not.toContain(primaryLfsText);
-      expect(findModal().text()).not.toContain(secondaryLfsText);
+      it('does not render LFS text', () => {
+        expect(findModal().props('title')).not.toBe(lfsTitleText);
+        expect(findModal().text()).not.toContain(primaryLfsText);
+        expect(findModal().text()).not.toContain(secondaryLfsText);
+      });
     });
   });
 
-  describe('renders modal component', () => {
-    it('renders with correct props', () => {
-      createComponent();
+  it('renders Modal component', () => {
+    createComponent();
 
       expect(findModal().props()).toMatchObject({
         size: 'md',
@@ -263,7 +276,25 @@ describe('CommitChangesModal', () => {
       ${'create_merge_request'} | ${undefined}                   | ${true}   | ${false}    | ${true}         | ${false}
     `(
       'passes $input as a hidden input with the correct value',
-      ({ input, value, emptyRepo, canPushCode, canPushToBranch, exist }) => {
+      ({
+        input,
+        value,
+        emptyRepo,
+        canPushCode,
+        canPushToBranch,
+        exist,
+        method,
+        fileContent,
+        lastCommitSha,
+        fromMergeRequestIid,
+        isEdit,
+        filePath,
+      }) => {
+        if (fromMergeRequestIid) {
+          setWindowLocation(
+            `https://gitlab.test/foo?from_merge_request_iid=${fromMergeRequestIid}`,
+          );
+        }
         createComponent({
           props: {
             emptyRepo,
diff --git a/spec/frontend/repository/pages/blob_edit_header_spec.js b/spec/frontend/repository/pages/blob_edit_header_spec.js
new file mode 100644
index 00000000000000..f167780ef57f83
--- /dev/null
+++ b/spec/frontend/repository/pages/blob_edit_header_spec.js
@@ -0,0 +1,80 @@
+import { nextTick } from 'vue';
+import { GlButton } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
+import BlobEditHeader from '~/repository/pages/blob_edit_header.vue';
+import { stubComponent } from 'helpers/stub_component';
+
+describe('BlobEditHeader', () => {
+  let wrapper;
+  const mockEditor = {
+    getFileContent: jest.fn().mockReturnValue('test content'),
+    filepathFormMediator: { $filenameInput: { val: jest.fn().mockReturnValue('.gitignore') } },
+  };
+
+  const createWrapper = () => {
+    return shallowMountExtended(BlobEditHeader, {
+      provide: {
+        editor: mockEditor,
+        updatePath: '/update',
+        cancelPath: '/cancel',
+        originalBranch: 'main',
+        targetBranch: 'feature',
+        blobName: 'test.js',
+        canPushCode: true,
+        canPushToBranch: true,
+        emptyRepo: false,
+        isUsingLfs: false,
+        branchAllowsCollaboration: false,
+        lastCommitSha: '782426692977b2cedb4452ee6501a404410f9b00',
+      },
+      stubs: {
+        CommitChangesModal: stubComponent(CommitChangesModal, {
+          methods: {
+            show: jest.fn(),
+          },
+        }),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+  });
+
+  const findTitle = () => wrapper.find('h1');
+  const findButtons = () => wrapper.findAllComponents(GlButton);
+  const findCommitChangesModal = () => wrapper.findComponent(CommitChangesModal);
+  const findCommitChangesButton = () => wrapper.findByTestId('blob-edit-header-commit-button');
+
+  it('renders title with two buttons', () => {
+    expect(findTitle().text()).toBe('Edit file');
+    const buttons = findButtons();
+    expect(buttons).toHaveLength(2);
+    expect(buttons.at(0).text()).toBe('Cancel');
+    expect(buttons.at(1).text()).toBe('Commit changes');
+  });
+
+  it('opens commit changes modal with correct props', async () => {
+    findCommitChangesButton().vm.$emit('click');
+    await nextTick();
+    expect(mockEditor.getFileContent).toHaveBeenCalled();
+    expect(findCommitChangesModal().props()).toEqual({
+      actionPath: '/update',
+      canPushCode: true,
+      canPushToBranch: true,
+      commitMessage: 'Edit test.js',
+      emptyRepo: false,
+      fileContent: 'test content',
+      filePath: '.gitignore',
+      isUsingLfs: false,
+      method: 'put',
+      modalId: 'update-modal3',
+      originalBranch: 'main',
+      targetBranch: 'feature',
+      isEdit: true,
+      branchAllowsCollaboration: false,
+      lastCommitSha: '782426692977b2cedb4452ee6501a404410f9b00',
+    });
+  });
+});
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index 7bf6fc7300e4cb..bfa65f6d2c03ff 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -211,7 +211,7 @@
   end
 
   describe '#ide_edit_path' do
-    let(:project) { create(:project) }
+    let_it_be(:project) { create(:project) }
     let(:current_user) { create(:user) }
     let(:can_push_code) { true }
 
@@ -421,7 +421,6 @@
       let_it_be(:user) { build_stubbed(:user) }
 
       before do
-        allow(helper).to receive(:current_user).and_return(user)
         allow(Ability).to receive(:allowed?).and_call_original
         allow(Ability).to receive(:allowed?).with(user, :download_code, project).and_return(true)
       end
@@ -434,6 +433,101 @@
     end
   end
 
+  describe '#edit_blob_app_data' do
+    let(:project) { build_stubbed(:project) }
+    let(:user) { build_stubbed(:user) }
+    let(:blob) { fake_blob(path: 'test.rb', size: 100.bytes) }
+    let(:ref) { 'main' }
+    let(:id) { "#{ref}/#{blob.path}" }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+      allow(helper).to receive(:selected_branch).and_return(ref)
+
+      assign(:project, project)
+      assign(:id, id)
+      assign(:ref, ref)
+      assign(:blob, blob)
+    end
+
+    it 'returns data related to blob editing' do
+      project_presenter = instance_double(ProjectPresenter)
+
+      allow(helper).to receive(:can?).with(user, :push_code, project).and_return(true)
+      allow(project).to receive(:present).and_return(project_presenter)
+      allow(project_presenter).to receive(:can_current_user_push_to_branch?).with(ref).and_return(true)
+      allow(project).to receive(:empty_repo?).and_return(false)
+      allow(blob).to receive(:stored_externally?).and_return(false)
+      allow(project).to receive(:branch_allows_collaboration?).with(user, ref).and_return(false)
+
+      expect(helper.edit_blob_app_data(project, id, blob, ref)).to include({
+        update_path: project_update_blob_path(project, id),
+        cancel_path: project_blob_path(project, id),
+        original_branch: ref,
+        target_branch: ref,
+        can_push_code: 'true',
+        can_push_to_branch: 'true',
+        empty_repo: 'false',
+        is_using_lfs: 'false',
+        blob_name: blob.name,
+        branch_allows_collaboration: 'false'
+      })
+    end
+
+    context 'when user cannot push code' do
+      it 'returns false for push permissions' do
+        allow(helper).to receive(:can?).with(user, :push_code, project).and_return(false)
+
+        expect(helper.edit_blob_app_data(project, id, blob, ref)).to include(
+          can_push_code: 'false'
+        )
+      end
+    end
+
+    context 'when user cannot push to branch' do
+      it 'returns false for branch push permissions' do
+        project_presenter = instance_double(ProjectPresenter)
+
+        allow(project).to receive(:present).and_return(project_presenter)
+        allow(project_presenter).to receive(:can_current_user_push_to_branch?).with(ref).and_return(false)
+
+        expect(helper.edit_blob_app_data(project, id, blob, ref)).to include(
+          can_push_to_branch: 'false'
+        )
+      end
+    end
+
+    context 'when repository is empty' do
+      it 'returns true for empty_repo' do
+        allow(project).to receive(:empty_repo?).and_return(true)
+
+        expect(helper.edit_blob_app_data(project, id, blob, ref)).to include(
+          empty_repo: 'true'
+        )
+      end
+    end
+
+    context 'when blob is stored externally' do
+      it 'returns true for is_using_lfs' do
+        allow(blob).to receive(:stored_externally?).and_return(true)
+
+        expect(helper.edit_blob_app_data(project, id, blob, ref)).to include(
+          is_using_lfs: 'true'
+        )
+      end
+    end
+
+    context 'branch collaboration' do
+      it 'returns true when branch allows collaboration' do
+        allow(project).to receive(:branch_allows_collaboration?).with(user, ref).and_return(true)
+
+        expect(helper.edit_blob_app_data(project, id, blob, ref)).to include(
+          branch_allows_collaboration: 'true'
+        )
+      end
+    end
+  end
+
   describe "#copy_blob_source_button" do
     let(:project) { build_stubbed(:project) }
 
-- 
GitLab


From 16a7911da146574d4e66009a710330fbc9721b4b Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Fri, 29 Nov 2024 13:15:25 -0500
Subject: [PATCH 02/11] Post rebase changes:

- Refactor to not pass down props & hidden form fields
- Remove isUsingLfs as it's not being used in the modal
- Add additional tests in `blob_edit_header_spec`
- Put back the logic to reset default branch name
---
 .../javascripts/blob_edit/blob_edit_header.js |  2 -
 .../components/commit_changes_modal.vue       | 54 ++++++---------
 .../repository/pages/blob_edit_header.vue     | 37 +++++++---
 app/helpers/blob_helper.rb                    |  1 -
 locale/gitlab.pot                             |  3 +
 spec/features/projects/blobs/edit_spec.rb     | 10 +--
 .../components/commit_changes_modal_spec.js   | 64 ++++++-----------
 .../repository/pages/blob_edit_header_spec.js | 69 ++++++++++++++++---
 spec/helpers/blob_helper_spec.rb              | 11 ---
 9 files changed, 135 insertions(+), 116 deletions(-)

diff --git a/app/assets/javascripts/blob_edit/blob_edit_header.js b/app/assets/javascripts/blob_edit/blob_edit_header.js
index ea2891a191187f..83db372ac3fa86 100644
--- a/app/assets/javascripts/blob_edit/blob_edit_header.js
+++ b/app/assets/javascripts/blob_edit/blob_edit_header.js
@@ -17,7 +17,6 @@ export default function initBlobEditHeader(editor) {
     canPushCode,
     canPushToBranch,
     emptyRepo,
-    isUsingLfs,
     blobName,
     branchAllowsCollaboration,
     lastCommitSha,
@@ -36,7 +35,6 @@ export default function initBlobEditHeader(editor) {
       emptyRepo: parseBoolean(emptyRepo),
       canPushCode: parseBoolean(canPushCode),
       canPushToBranch: parseBoolean(canPushToBranch),
-      isUsingLfs: parseBoolean(isUsingLfs),
       branchAllowsCollaboration: parseBoolean(branchAllowsCollaboration),
     },
     render: (createElement) => createElement(BlobEditHeader),
diff --git a/app/assets/javascripts/repository/components/commit_changes_modal.vue b/app/assets/javascripts/repository/components/commit_changes_modal.vue
index 4a70f043958649..35414c61232e3d 100644
--- a/app/assets/javascripts/repository/components/commit_changes_modal.vue
+++ b/app/assets/javascripts/repository/components/commit_changes_modal.vue
@@ -16,7 +16,6 @@ import csrf from '~/lib/utils/csrf';
 import { __, s__ } from '~/locale';
 import validation, { initFormField } from '~/vue_shared/directives/validation';
 import { helpPagePath } from '~/helpers/help_page_helper';
-import { getParameterByName } from '~/lib/utils/url_utility';
 import {
   SECONDARY_OPTIONS_TEXT,
   COMMIT_LABEL,
@@ -107,26 +106,6 @@ export default {
       required: false,
       default: false,
     },
-    method: {
-      type: String,
-      required: false,
-      default: 'delete',
-    },
-    fileContent: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    filePath: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    isEdit: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     branchAllowsCollaboration: {
       type: Boolean,
       required: false,
@@ -211,7 +190,7 @@ export default {
       );
     },
     showLfsWarning() {
-      return this.isUsingLfs && !this.lfsWarningDismissed && !this.isEdit;
+      return this.isUsingLfs && !this.lfsWarningDismissed;
     },
     title() {
       return this.showLfsWarning
@@ -219,10 +198,22 @@ export default {
         : this.$options.i18n.COMMIT_CHANGES;
     },
     showForm() {
-      return !this.isUsingLfs || (this.isUsingLfs && this.lfsWarningDismissed) || this.isEdit;
+      return !this.isUsingLfs || (this.isUsingLfs && this.lfsWarningDismissed);
     },
-    fromMergeRequestIid() {
-      return getParameterByName('from_merge_request_iid') || '';
+  },
+  watch: {
+    createNewBranch: {
+      handler(newValue) {
+        if (newValue) {
+          this.form.fields.branch_name.value = '';
+        } else {
+          this.form.fields.branch_name = {
+            ...this.form.fields.branch_name,
+            value: this.originalBranch,
+            state: true,
+          };
+        }
+      },
     },
   },
   methods: {
@@ -298,14 +289,7 @@ export default {
       </p>
     </div>
     <div v-if="showForm">
-      <gl-form ref="form" novalidate :action="actionPath" method="post">
-        <input type="hidden" name="_method" :value="method" />
-        <template v-if="isEdit">
-          <input type="hidden" name="content" :value="fileContent" />
-          <input type="hidden" name="file_path" :value="filePath" />
-          <input type="hidden" name="last_commit_sha" :value="lastCommitSha" />
-          <input type="hidden" name="from_merge_request_iid" :value="fromMergeRequestIid" />
-        </template>
+      <gl-form ref="form" novalidate>
         <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
         <slot name="form-fields"></slot>
         <gl-form-group
@@ -371,6 +355,7 @@ export default {
                   :state="form.fields['branch_name'].state"
                   :disabled="loading"
                   name="branch_name"
+                  :placeholder="__('example-branch-name')"
                   required
                   class="gl-mt-2"
                 />
@@ -382,7 +367,7 @@ export default {
               </div>
             </template>
             <template v-else>
-              <label for="branchNameInput" class="gl-font-normal">
+              <label for="branchNameInput">
                 {{ $options.i18n.NEW_BRANCH_LABEl }}
               </label>
               <gl-form-input
@@ -393,6 +378,7 @@ export default {
                 :disabled="loading"
                 name="branch_name"
                 required
+                :placeholder="__('example-branch-name')"
                 class="gl-mt-2"
               />
               <gl-form-checkbox v-model="createNewMr" class="gl-mt-4">
diff --git a/app/assets/javascripts/repository/pages/blob_edit_header.vue b/app/assets/javascripts/repository/pages/blob_edit_header.vue
index b372e91a043b36..8b3fe5560f89de 100644
--- a/app/assets/javascripts/repository/pages/blob_edit_header.vue
+++ b/app/assets/javascripts/repository/pages/blob_edit_header.vue
@@ -1,8 +1,12 @@
 <script>
 import { GlButton } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
+import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
 import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
+import { getParameterByName, visitUrl } from '~/lib/utils/url_utility';
+import { createAlert } from '~/alert';
+import { BLOB_EDIT_ERROR } from '~/blob_edit/constants';
 import getRefMixin from '../mixins/get_ref';
 
 export default {
@@ -21,7 +25,6 @@ export default {
     'canPushCode',
     'canPushToBranch',
     'emptyRepo',
-    'isUsingLfs',
     'branchAllowsCollaboration',
     'lastCommitSha',
   ],
@@ -39,6 +42,9 @@ export default {
     updateModalCommitMessage() {
       return sprintf(__('Edit %{name}'), { name: this.blobName });
     },
+    fromMergeRequestIid() {
+      return getParameterByName('from_merge_request_iid') || '';
+    },
   },
   methods: {
     handleCancelButtonClick() {
@@ -49,6 +55,24 @@ export default {
       this.filePath = this.editor.filepathFormMediator?.$filenameInput?.val();
       this.$refs[this.updateModalId].show();
     },
+    handleBlobEdit(formData) {
+      formData.append('file', this.fileContent);
+      formData.append('file_path', this.filePath);
+      formData.append('last_commit_sha', this.lastCommitSha);
+      formData.append('from_merge_request_iid', this.fromMergeRequestIid);
+
+      return axios({
+        method: 'put',
+        url: this.updatePath,
+        data: formData,
+      })
+        .then((response) => {
+          visitUrl(response.data.filePath);
+        })
+        .catch(() => {
+          createAlert({ message: BLOB_EDIT_ERROR, captureError: true });
+        });
+    },
   },
   i18n: {
     headerText: __('Edit file'),
@@ -67,8 +91,9 @@ export default {
     <div class="gl-flex gl-gap-3">
       <gl-button
         :data-confirm="$options.i18n.confirmationMessage"
-        data-confirm-btn-variant="danger"
         :href="cancelPath"
+        data-confirm-btn-variant="danger"
+        data-testid="blob-edit-header-cancel-button"
         @click="handleCancelButtonClick"
         >{{ $options.i18n.cancelButtonText }}</gl-button
       >
@@ -79,20 +104,14 @@ export default {
     <commit-changes-modal
       :ref="updateModalId"
       :modal-id="updateModalId"
-      :action-path="updatePath"
       :commit-message="updateModalCommitMessage"
       :target-branch="targetBranch || ref"
       :original-branch="originalBranch || ref"
       :can-push-code="canPushCode"
       :empty-repo="emptyRepo"
       :can-push-to-branch="canPushToBranch"
-      :is-using-lfs="isUsingLfs"
-      :file-content="fileContent"
-      :file-path="filePath"
       :branch-allows-collaboration="branchAllowsCollaboration"
-      :last-commit-sha="lastCommitSha"
-      method="put"
-      is-edit
+      :handle-form-submit="handleBlobEdit"
     />
   </div>
 </template>
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 74ad217255525b..523eb97f1d5901 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -327,7 +327,6 @@ def edit_blob_app_data(project, id, blob, ref)
       can_push_code: can?(current_user, :push_code, project).to_s,
       can_push_to_branch: project.present(current_user: current_user).can_current_user_push_to_branch?(ref).to_s,
       empty_repo: project.empty_repo?.to_s,
-      is_using_lfs: blob.stored_externally?.to_s,
       blob_name: blob.name,
       branch_allows_collaboration: project.branch_allows_collaboration?(current_user, ref).to_s,
       last_commit_sha: @last_commit_sha
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index be4d29301e2989..b5ec4e4f844669 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -66413,6 +66413,9 @@ msgstr ""
 msgid "event"
 msgstr ""
 
+msgid "example-branch-name"
+msgstr ""
+
 msgid "example.com"
 msgstr ""
 
diff --git a/spec/features/projects/blobs/edit_spec.rb b/spec/features/projects/blobs/edit_spec.rb
index fe79dd7d6d475c..b1660b9c06136d 100644
--- a/spec/features/projects/blobs/edit_spec.rb
+++ b/spec/features/projects/blobs/edit_spec.rb
@@ -34,12 +34,12 @@ def edit_and_commit(commit_changes: true, is_diff: false)
       # there may be no diff and nothing to render.
       fill_editor(content: "class NextFeature#{object_id}\\nend\\n")
 
-      if commit_changes
-        click_button('Commit changes')
+      return unless commit_changes
 
-        within_testid('commit-change-modal') do
-          click_button('Commit changes')
-        end
+      click_button('Commit changes')
+
+      within_testid('commit-change-modal') do
+        click_button('Commit changes')
       end
     end
 
diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js
index cce0de287a1f8c..4896629f054aea 100644
--- a/spec/frontend/repository/components/commit_changes_modal_spec.js
+++ b/spec/frontend/repository/components/commit_changes_modal_spec.js
@@ -20,7 +20,6 @@ jest.mock('~/lib/utils/csrf', () => ({ token: 'mock-csrf-token' }));
 
 const initialProps = {
   modalId: 'Delete-blob',
-  actionPath: 'some/path',
   commitMessage: 'Delete File',
   targetBranch: 'some-target-branch',
   originalBranch: 'main',
@@ -90,8 +89,8 @@ describe('CommitChangesModal', () => {
       linkEnd: '',
     });
 
-    describe('when deleting a file', () => {
-      beforeEach(() => createComponent({ isUsingLfs: true }));
+    describe('LFS warning', () => {
+      beforeEach(() => createComponent({ props: { isUsingLfs: true } }));
 
       it('renders a modal containing LFS text', () => {
         expect(findModal().props('title')).toBe(lfsTitleText);
@@ -108,41 +107,31 @@ describe('CommitChangesModal', () => {
         expect(findModal().text()).not.toContain(secondaryLfsText);
       });
     });
-
-    describe('when editing a file', () => {
-      beforeEach(() => createComponent({ isUsingLfs: true, isEdit: true }));
-
-      it('does not render LFS text', () => {
-        expect(findModal().props('title')).not.toBe(lfsTitleText);
-        expect(findModal().text()).not.toContain(primaryLfsText);
-        expect(findModal().text()).not.toContain(secondaryLfsText);
-      });
-    });
   });
 
   it('renders Modal component', () => {
     createComponent();
 
-      expect(findModal().props()).toMatchObject({
-        size: 'md',
-        actionPrimary: {
-          text: 'Commit changes',
-        },
-        actionCancel: {
-          text: 'Cancel',
-        },
-      });
-      expect(findSlot().exists()).toBe(false);
+    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 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({
@@ -276,20 +265,7 @@ describe('CommitChangesModal', () => {
       ${'create_merge_request'} | ${undefined}                   | ${true}   | ${false}    | ${true}         | ${false}
     `(
       'passes $input as a hidden input with the correct value',
-      ({
-        input,
-        value,
-        emptyRepo,
-        canPushCode,
-        canPushToBranch,
-        exist,
-        method,
-        fileContent,
-        lastCommitSha,
-        fromMergeRequestIid,
-        isEdit,
-        filePath,
-      }) => {
+      ({ input, value, emptyRepo, canPushCode, canPushToBranch, exist, fromMergeRequestIid }) => {
         if (fromMergeRequestIid) {
           setWindowLocation(
             `https://gitlab.test/foo?from_merge_request_iid=${fromMergeRequestIid}`,
diff --git a/spec/frontend/repository/pages/blob_edit_header_spec.js b/spec/frontend/repository/pages/blob_edit_header_spec.js
index f167780ef57f83..87646e9711ea94 100644
--- a/spec/frontend/repository/pages/blob_edit_header_spec.js
+++ b/spec/frontend/repository/pages/blob_edit_header_spec.js
@@ -1,10 +1,29 @@
 import { nextTick } from 'vue';
+import MockAdapter from 'axios-mock-adapter';
 import { GlButton } from '@gitlab/ui';
+import axios from '~/lib/utils/axios_utils';
+import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
+import { visitUrl } from '~/lib/utils/url_utility';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
 import BlobEditHeader from '~/repository/pages/blob_edit_header.vue';
+import { createAlert } from '~/alert';
+import waitForPromises from 'helpers/wait_for_promises';
 import { stubComponent } from 'helpers/stub_component';
 
+jest.mock('~/alert');
+
+jest.mock('lodash/uniqueId', () => {
+  return jest.fn((input) => `${input}1`);
+});
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  visitUrl: jest.fn(),
+  joinPaths: () => '/update',
+  setUrlFragment: jest.fn(),
+  getParameterByName: jest.fn(),
+}));
+
 describe('BlobEditHeader', () => {
   let wrapper;
   const mockEditor = {
@@ -24,7 +43,6 @@ describe('BlobEditHeader', () => {
         canPushCode: true,
         canPushToBranch: true,
         emptyRepo: false,
-        isUsingLfs: false,
         branchAllowsCollaboration: false,
         lastCommitSha: '782426692977b2cedb4452ee6501a404410f9b00',
       },
@@ -42,10 +60,15 @@ describe('BlobEditHeader', () => {
     wrapper = createWrapper();
   });
 
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   const findTitle = () => wrapper.find('h1');
   const findButtons = () => wrapper.findAllComponents(GlButton);
   const findCommitChangesModal = () => wrapper.findComponent(CommitChangesModal);
   const findCommitChangesButton = () => wrapper.findByTestId('blob-edit-header-commit-button');
+  const findCancelButton = () => wrapper.findByTestId('blob-edit-header-cancel-button');
 
   it('renders title with two buttons', () => {
     expect(findTitle().text()).toBe('Edit file');
@@ -60,21 +83,47 @@ describe('BlobEditHeader', () => {
     await nextTick();
     expect(mockEditor.getFileContent).toHaveBeenCalled();
     expect(findCommitChangesModal().props()).toEqual({
-      actionPath: '/update',
+      modalId: 'update-modal1',
       canPushCode: true,
       canPushToBranch: true,
       commitMessage: 'Edit test.js',
-      emptyRepo: false,
-      fileContent: 'test content',
-      filePath: '.gitignore',
-      isUsingLfs: false,
-      method: 'put',
-      modalId: 'update-modal3',
       originalBranch: 'main',
       targetBranch: 'feature',
-      isEdit: true,
+      isUsingLfs: false,
+      emptyRepo: false,
       branchAllowsCollaboration: false,
-      lastCommitSha: '782426692977b2cedb4452ee6501a404410f9b00',
+      handleFormSubmit: expect.any(Function),
+    });
+  });
+
+  it('shows confirmation message on cancel button', () => {
+    expect(findCancelButton().attributes('data-confirm')).toBe(
+      'Leave edit mode? All unsaved changes will be lost.',
+    );
+  });
+
+  it('redirects on success', async () => {
+    const mockFormData = new FormData();
+    const mock = new MockAdapter(axios);
+    mock.onPut('/update').reply(HTTP_STATUS_OK, { filePath: '/update/path' });
+
+    await wrapper.vm.handleBlobEdit(mockFormData);
+
+    expect(mock.history.put).toHaveLength(1);
+    expect(visitUrl).toHaveBeenCalledWith('/update/path');
+  });
+
+  it('creates alerts on failure', async () => {
+    const mockFormData = new FormData();
+    const mock = new MockAdapter(axios);
+    mock.onPut('/update').timeout();
+
+    await wrapper.vm.handleBlobEdit(mockFormData);
+    await waitForPromises();
+
+    expect(createAlert).toHaveBeenCalledWith({
+      captureError: true,
+      message: 'An error occurred editing the blob',
     });
   });
 });
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index bfa65f6d2c03ff..b5d5ab04f706c3 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -468,7 +468,6 @@
         can_push_code: 'true',
         can_push_to_branch: 'true',
         empty_repo: 'false',
-        is_using_lfs: 'false',
         blob_name: blob.name,
         branch_allows_collaboration: 'false'
       })
@@ -507,16 +506,6 @@
       end
     end
 
-    context 'when blob is stored externally' do
-      it 'returns true for is_using_lfs' do
-        allow(blob).to receive(:stored_externally?).and_return(true)
-
-        expect(helper.edit_blob_app_data(project, id, blob, ref)).to include(
-          is_using_lfs: 'true'
-        )
-      end
-    end
-
     context 'branch collaboration' do
       it 'returns true when branch allows collaboration' do
         allow(project).to receive(:branch_allows_collaboration?).with(user, ref).and_return(true)
-- 
GitLab


From 2e9c25d227c9104bd65bbae1e6f52582533b27df Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Mon, 2 Dec 2024 17:30:43 -0500
Subject: [PATCH 03/11] Fix issue with line ending being mutated

---
 .../javascripts/repository/pages/blob_edit_header.vue  |  9 ++++++++-
 .../frontend/repository/pages/blob_edit_header_spec.js | 10 +++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/repository/pages/blob_edit_header.vue b/app/assets/javascripts/repository/pages/blob_edit_header.vue
index 8b3fe5560f89de..40adb32837a6ed 100644
--- a/app/assets/javascripts/repository/pages/blob_edit_header.vue
+++ b/app/assets/javascripts/repository/pages/blob_edit_header.vue
@@ -61,10 +61,17 @@ export default {
       formData.append('last_commit_sha', this.lastCommitSha);
       formData.append('from_merge_request_iid', this.fromMergeRequestIid);
 
+      // Object.fromEntries is used here to handle potential line ending mutations in `FormData`.
+      // `FormData` uses the "multipart/form-data" format (RFC 2388), which follows MIME data stream rules (RFC 2046).
+      // These specifications require line breaks to be represented as CRLF sequences in the canonical form.
+      // See https://stackoverflow.com/questions/69835705/formdata-textarea-puts-r-carriage-return-when-sent-with-post for more details.
+      const data = Object.fromEntries(formData);
+
       return axios({
         method: 'put',
         url: this.updatePath,
-        data: formData,
+
+        data,
       })
         .then((response) => {
           visitUrl(response.data.filePath);
diff --git a/spec/frontend/repository/pages/blob_edit_header_spec.js b/spec/frontend/repository/pages/blob_edit_header_spec.js
index 87646e9711ea94..938fe41772f714 100644
--- a/spec/frontend/repository/pages/blob_edit_header_spec.js
+++ b/spec/frontend/repository/pages/blob_edit_header_spec.js
@@ -26,8 +26,11 @@ jest.mock('~/lib/utils/url_utility', () => ({
 
 describe('BlobEditHeader', () => {
   let wrapper;
+
+  const content = 'some \r\n content \n';
+
   const mockEditor = {
-    getFileContent: jest.fn().mockReturnValue('test content'),
+    getFileContent: jest.fn().mockReturnValue(content),
     filepathFormMediator: { $filenameInput: { val: jest.fn().mockReturnValue('.gitignore') } },
   };
 
@@ -107,9 +110,14 @@ describe('BlobEditHeader', () => {
     const mock = new MockAdapter(axios);
     mock.onPut('/update').reply(HTTP_STATUS_OK, { filePath: '/update/path' });
 
+    findCommitChangesButton().vm.$emit('click');
+    await nextTick();
+
     await wrapper.vm.handleBlobEdit(mockFormData);
 
     expect(mock.history.put).toHaveLength(1);
+    const putData = JSON.parse(mock.history.put[0].data);
+    expect(putData.file).toBe(content);
     expect(visitUrl).toHaveBeenCalledWith('/update/path');
   });
 
-- 
GitLab


From f058f5cb51ef4b614117e793b04a86c318489eab Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 5 Dec 2024 13:16:54 -0500
Subject: [PATCH 04/11] Add tests for line ending

---
 .../projects/files/user_edits_files_spec.rb   | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/spec/features/projects/files/user_edits_files_spec.rb b/spec/features/projects/files/user_edits_files_spec.rb
index 2b6e3a7ab753b0..45867118071dfe 100644
--- a/spec/features/projects/files/user_edits_files_spec.rb
+++ b/spec/features/projects/files/user_edits_files_spec.rb
@@ -17,6 +17,11 @@
   let(:project_tree_path_root_ref) { project_tree_path(project, project.repository.root_ref) }
   let(:project2_tree_path_root_ref) { project_tree_path(project2, project2.repository.root_ref) }
 
+  let_it_be(:lf_text) { 'Line 1\nLine 2\nLine 3\n' }
+  let_it_be(:crlf_text) { 'Line 1\r\nLine 2\r\nLine 3\r\n"' }
+  let_it_be(:project_with_lf) { create(:project, :custom_repo, name: 'Project with lf', files: { 'lf_file.txt' => lf_text }) }
+  let_it_be(:project_with_crlf) { create(:project, :custom_repo, name: 'Project with crlf', files: { 'crlf_file.txt' => crlf_text }) }
+
   before do
     stub_feature_flags(vscode_web_ide: false)
 
@@ -284,4 +289,47 @@ def expect_fork_status
       expect(find('.monaco-editor')).to have_content(json_text)
     end
   end
+
+  context 'for line endings', :js do
+    before_all do
+      project_with_lf.add_maintainer(user)
+      project_with_crlf.add_maintainer(user)
+    end
+
+    it 'does not mutate LF line endings' do
+      visit(project_edit_blob_path(project_with_lf, tree_join(project_with_lf.default_branch, 'lf_file.txt')))
+      wait_for_requests
+
+      find('.file-editor', match: :first)
+
+      click_button('Commit changes')
+
+      within_testid('commit-change-modal') do
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        choose(option: true)
+        fill_in(:branch_name, with: 'new_branch_name', visible: true)
+        click_button('Commit changes')
+      end
+
+      expect(page).to have_content('Changes 0')
+    end
+
+    it 'does not mutate CRLF line endings' do
+      visit(project_edit_blob_path(project_with_crlf, tree_join(project_with_crlf.default_branch, 'crlf_file.txt')))
+      wait_for_requests
+
+      find('.file-editor', match: :first)
+
+      click_button('Commit changes')
+
+      within_testid('commit-change-modal') do
+        fill_in(:commit_message, with: 'New commit message', visible: true)
+        choose(option: true)
+        fill_in(:branch_name, with: 'new_branch_name', visible: true)
+        click_button('Commit changes')
+      end
+
+      expect(page).to have_content('Changes 0')
+    end
+  end
 end
-- 
GitLab


From 9f1d651e0275719ae09d3d9fa623bac96608521b Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 5 Dec 2024 13:23:36 -0500
Subject: [PATCH 05/11] Attempt to fix the broken `editing_a_file_spec`

---
 .../javascripts/repository/pages/blob_edit_header.vue    | 9 +++++++--
 spec/helpers/blob_helper_spec.rb                         | 6 ++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/repository/pages/blob_edit_header.vue b/app/assets/javascripts/repository/pages/blob_edit_header.vue
index 40adb32837a6ed..fba9c1b3e20c21 100644
--- a/app/assets/javascripts/repository/pages/blob_edit_header.vue
+++ b/app/assets/javascripts/repository/pages/blob_edit_header.vue
@@ -70,11 +70,16 @@ export default {
       return axios({
         method: 'put',
         url: this.updatePath,
-
         data,
       })
         .then((response) => {
-          visitUrl(response.data.filePath);
+          if (response.data.filePath) {
+            visitUrl(response.data.filePath);
+          } else {
+            // in this case, server is returning some HTML
+            // should we just open it?
+            // visitUrl(this.filePath);
+          }
         })
         .catch(() => {
           createAlert({ message: BLOB_EDIT_ERROR, captureError: true });
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index b5d5ab04f706c3..c4dda34edc358d 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -2,7 +2,7 @@
 
 require 'spec_helper'
 
-RSpec.describe BlobHelper do
+RSpec.describe BlobHelper, feature_category: :source_code_management do
   include TreeHelper
   include FakeBlobHelpers
   include Devise::Test::ControllerHelpers
@@ -459,6 +459,7 @@
       allow(project).to receive(:empty_repo?).and_return(false)
       allow(blob).to receive(:stored_externally?).and_return(false)
       allow(project).to receive(:branch_allows_collaboration?).with(user, ref).and_return(false)
+      assign(:last_commit_sha, '782426692977b2cedb4452ee6501a404410f9b00')
 
       expect(helper.edit_blob_app_data(project, id, blob, ref)).to include({
         update_path: project_update_blob_path(project, id),
@@ -469,7 +470,8 @@
         can_push_to_branch: 'true',
         empty_repo: 'false',
         blob_name: blob.name,
-        branch_allows_collaboration: 'false'
+        branch_allows_collaboration: 'false',
+        last_commit_sha: '782426692977b2cedb4452ee6501a404410f9b00'
       })
     end
 
-- 
GitLab


From d2710d7cc1af8cc092df68c667c6c9d8d437d135 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Mon, 9 Dec 2024 15:38:32 -0500
Subject: [PATCH 06/11] Use custom event

---
 .../javascripts/repository/pages/blob_edit_header.vue      | 3 ++-
 spec/frontend/repository/pages/blob_edit_header_spec.js    | 7 ++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/repository/pages/blob_edit_header.vue b/app/assets/javascripts/repository/pages/blob_edit_header.vue
index fba9c1b3e20c21..18b4f360c2c2e4 100644
--- a/app/assets/javascripts/repository/pages/blob_edit_header.vue
+++ b/app/assets/javascripts/repository/pages/blob_edit_header.vue
@@ -56,6 +56,7 @@ export default {
       this.$refs[this.updateModalId].show();
     },
     handleBlobEdit(formData) {
+      console.log('hellooooo do you get called');
       formData.append('file', this.fileContent);
       formData.append('file_path', this.filePath);
       formData.append('last_commit_sha', this.lastCommitSha);
@@ -123,7 +124,7 @@ export default {
       :empty-repo="emptyRepo"
       :can-push-to-branch="canPushToBranch"
       :branch-allows-collaboration="branchAllowsCollaboration"
-      :handle-form-submit="handleBlobEdit"
+      @submit-form="handleBlobEdit"
     />
   </div>
 </template>
diff --git a/spec/frontend/repository/pages/blob_edit_header_spec.js b/spec/frontend/repository/pages/blob_edit_header_spec.js
index 938fe41772f714..73d0d9205a589b 100644
--- a/spec/frontend/repository/pages/blob_edit_header_spec.js
+++ b/spec/frontend/repository/pages/blob_edit_header_spec.js
@@ -95,7 +95,6 @@ describe('BlobEditHeader', () => {
       isUsingLfs: false,
       emptyRepo: false,
       branchAllowsCollaboration: false,
-      handleFormSubmit: expect.any(Function),
     });
   });
 
@@ -110,11 +109,9 @@ describe('BlobEditHeader', () => {
     const mock = new MockAdapter(axios);
     mock.onPut('/update').reply(HTTP_STATUS_OK, { filePath: '/update/path' });
 
-    findCommitChangesButton().vm.$emit('click');
+    findCommitChangesModal().vm.$emit('submit-form', mockFormData);
     await nextTick();
 
-    await wrapper.vm.handleBlobEdit(mockFormData);
-
     expect(mock.history.put).toHaveLength(1);
     const putData = JSON.parse(mock.history.put[0].data);
     expect(putData.file).toBe(content);
@@ -126,7 +123,7 @@ describe('BlobEditHeader', () => {
     const mock = new MockAdapter(axios);
     mock.onPut('/update').timeout();
 
-    await wrapper.vm.handleBlobEdit(mockFormData);
+    findCommitChangesModal().vm.$emit('submit-form', mockFormData);
     await waitForPromises();
 
     expect(createAlert).toHaveBeenCalledWith({
-- 
GitLab


From 887fe0545b298ce029f95431dc7b0d880375fcb5 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Mon, 9 Dec 2024 16:40:51 -0500
Subject: [PATCH 07/11] Update to throw generic error message

---
 .../repository/pages/blob_edit_header.vue        |  6 ++----
 .../projects/files/editing_a_file_spec.rb        |  4 ++--
 .../repository/pages/blob_edit_header_spec.js    | 16 +++++++++++++++-
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/repository/pages/blob_edit_header.vue b/app/assets/javascripts/repository/pages/blob_edit_header.vue
index 18b4f360c2c2e4..b932c4e035c179 100644
--- a/app/assets/javascripts/repository/pages/blob_edit_header.vue
+++ b/app/assets/javascripts/repository/pages/blob_edit_header.vue
@@ -56,7 +56,6 @@ export default {
       this.$refs[this.updateModalId].show();
     },
     handleBlobEdit(formData) {
-      console.log('hellooooo do you get called');
       formData.append('file', this.fileContent);
       formData.append('file_path', this.filePath);
       formData.append('last_commit_sha', this.lastCommitSha);
@@ -77,9 +76,8 @@ export default {
           if (response.data.filePath) {
             visitUrl(response.data.filePath);
           } else {
-            // in this case, server is returning some HTML
-            // should we just open it?
-            // visitUrl(this.filePath);
+            this.$ref.commitChangesModal.hide();
+            createAlert({ message: BLOB_EDIT_ERROR, captureError: true });
           }
         })
         .catch(() => {
diff --git a/spec/features/projects/files/editing_a_file_spec.rb b/spec/features/projects/files/editing_a_file_spec.rb
index 9f3636405e2e08..58535c82453177 100644
--- a/spec/features/projects/files/editing_a_file_spec.rb
+++ b/spec/features/projects/files/editing_a_file_spec.rb
@@ -32,7 +32,7 @@
         click_button('Commit changes')
       end
 
-      expect(page).to have_content 'Someone edited the file the same time you did.'
+      expect(page).to have_content 'An error occurred editing the blob'
     end
   end
 
@@ -61,7 +61,7 @@
           end
 
           expect(page).to have_content(
-            %(Error: Can't edit this file. The fork and upstream project have diverged. Edit the file on the fork)
+            'An error occurred editing the blob'
           )
         end
       end
diff --git a/spec/frontend/repository/pages/blob_edit_header_spec.js b/spec/frontend/repository/pages/blob_edit_header_spec.js
index 73d0d9205a589b..804e385b818136 100644
--- a/spec/frontend/repository/pages/blob_edit_header_spec.js
+++ b/spec/frontend/repository/pages/blob_edit_header_spec.js
@@ -110,7 +110,7 @@ describe('BlobEditHeader', () => {
     mock.onPut('/update').reply(HTTP_STATUS_OK, { filePath: '/update/path' });
 
     findCommitChangesModal().vm.$emit('submit-form', mockFormData);
-    await nextTick();
+    await waitForPromises();
 
     expect(mock.history.put).toHaveLength(1);
     const putData = JSON.parse(mock.history.put[0].data);
@@ -118,6 +118,20 @@ describe('BlobEditHeader', () => {
     expect(visitUrl).toHaveBeenCalledWith('/update/path');
   });
 
+  it('creates alert when there is no filePath in response', async () => {
+    const mockFormData = new FormData();
+    const mock = new MockAdapter(axios);
+    mock.onPut('/update').reply(HTTP_STATUS_OK);
+
+    findCommitChangesModal().vm.$emit('submit-form', mockFormData);
+    await waitForPromises();
+
+    expect(createAlert).toHaveBeenCalledWith({
+      captureError: true,
+      message: 'An error occurred editing the blob',
+    });
+  });
+
   it('creates alerts on failure', async () => {
     const mockFormData = new FormData();
     const mock = new MockAdapter(axios);
-- 
GitLab


From fbd2821d24d3707a59aab41a399165c6ae49e841 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 12 Dec 2024 15:50:25 -0500
Subject: [PATCH 08/11] Fix brackets after rebase

---
 .../components/commit_changes_modal_spec.js   | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/spec/frontend/repository/components/commit_changes_modal_spec.js b/spec/frontend/repository/components/commit_changes_modal_spec.js
index 4896629f054aea..39365b20a193d5 100644
--- a/spec/frontend/repository/components/commit_changes_modal_spec.js
+++ b/spec/frontend/repository/components/commit_changes_modal_spec.js
@@ -133,34 +133,33 @@ describe('CommitChangesModal', () => {
     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');
+  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');
+  });
 
-    it('disables actionable while loading', () => {
-      createComponent({ props: { loading: true } });
+  it('disables actionable while loading', () => {
+    createComponent({ props: { loading: true } });
 
-      expect(findModal().props('actionPrimary').attributes).toEqual(
-        expect.objectContaining({ disabled: true }),
-      );
-      expect(findModal().props('actionCancel').attributes).toEqual(
-        expect.objectContaining({ disabled: true }),
-      );
-      expect(findCommitTextarea().attributes()).toEqual(
-        expect.objectContaining({ disabled: 'true' }),
-      );
-      expect(findCurrentBranchRadioOption().attributes()).toEqual(
-        expect.objectContaining({ disabled: 'true' }),
-      );
-      expect(findNewBranchRadioOption().attributes()).toEqual(
-        expect.objectContaining({ disabled: 'true' }),
-      );
-    });
+    expect(findModal().props('actionPrimary').attributes).toEqual(
+      expect.objectContaining({ disabled: true }),
+    );
+    expect(findModal().props('actionCancel').attributes).toEqual(
+      expect.objectContaining({ disabled: true }),
+    );
+    expect(findCommitTextarea().attributes()).toEqual(
+      expect.objectContaining({ disabled: 'true' }),
+    );
+    expect(findCurrentBranchRadioOption().attributes()).toEqual(
+      expect.objectContaining({ disabled: 'true' }),
+    );
+    expect(findNewBranchRadioOption().attributes()).toEqual(
+      expect.objectContaining({ disabled: 'true' }),
+    );
   });
 
   describe('form', () => {
@@ -344,7 +343,9 @@ describe('CommitChangesModal', () => {
       });
 
       it('does not submit form', () => {
-        findModal().vm.$emit('primary', { preventDefault: () => {} });
+        findModal().vm.$emit('primary', {
+          preventDefault: () => {},
+        });
         expect(wrapper.emitted('submit-form')).toBeUndefined();
       });
     });
@@ -361,7 +362,9 @@ describe('CommitChangesModal', () => {
       });
 
       it('does not submit form', () => {
-        findModal().vm.$emit('primary', { preventDefault: () => {} });
+        findModal().vm.$emit('primary', {
+          preventDefault: () => {},
+        });
         expect(wrapper.emitted('submit-form')).toBeUndefined();
       });
     });
-- 
GitLab


From 4c0353484d9fccef5febb70cd5e29fa9ea8418a1 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 12 Dec 2024 16:07:28 -0500
Subject: [PATCH 09/11] Code review changes:

- Clean up specs
- Add invalidation message for branch nane input
---
 .../components/commit_changes_modal.vue       | 47 ++++++++++---------
 ee/spec/helpers/ee/blob_helper_spec.rb        |  4 --
 spec/helpers/blob_helper_spec.rb              |  5 --
 3 files changed, 26 insertions(+), 30 deletions(-)

diff --git a/app/assets/javascripts/repository/components/commit_changes_modal.vue b/app/assets/javascripts/repository/components/commit_changes_modal.vue
index 35414c61232e3d..871226a711a640 100644
--- a/app/assets/javascripts/repository/components/commit_changes_modal.vue
+++ b/app/assets/javascripts/repository/components/commit_changes_modal.vue
@@ -349,16 +349,18 @@ export default {
                 </gl-form-radio>
               </gl-form-radio-group>
               <div v-if="createNewBranch" class="gl-ml-6">
-                <gl-form-input
-                  v-model="form.fields['branch_name'].value"
-                  v-validation:[form.showValidation]
-                  :state="form.fields['branch_name'].state"
-                  :disabled="loading"
-                  name="branch_name"
-                  :placeholder="__('example-branch-name')"
-                  required
-                  class="gl-mt-2"
-                />
+                <gl-form-group :invalid-feedback="form.fields['branch_name'].feedback">
+                  <gl-form-input
+                    v-model="form.fields['branch_name'].value"
+                    v-validation:[form.showValidation]
+                    :state="form.fields['branch_name'].state"
+                    :disabled="loading"
+                    name="branch_name"
+                    :placeholder="__('example-branch-name')"
+                    required
+                    class="gl-mt-2"
+                  />
+                </gl-form-group>
                 <gl-form-checkbox v-if="createNewBranch" v-model="createNewMr" class="gl-mt-4">
                   <span>
                     {{ $options.i18n.CREATE_MR_LABEL }}
@@ -370,17 +372,20 @@ export default {
               <label for="branchNameInput">
                 {{ $options.i18n.NEW_BRANCH_LABEl }}
               </label>
-              <gl-form-input
-                id="branchNameInput"
-                v-model="form.fields['branch_name'].value"
-                v-validation:[form.showValidation]
-                :state="form.fields['branch_name'].state"
-                :disabled="loading"
-                name="branch_name"
-                required
-                :placeholder="__('example-branch-name')"
-                class="gl-mt-2"
-              />
+              <gl-form-group :invalid-feedback="form.fields['branch_name'].feedback">
+                <gl-form-input
+                  id="branchNameInput"
+                  v-model="form.fields['branch_name'].value"
+                  v-validation:[form.showValidation]
+                  :state="form.fields['branch_name'].state"
+                  :disabled="loading"
+                  name="branch_name"
+                  required
+                  :placeholder="__('example-branch-name')"
+                  class="gl-mt-2"
+                />
+              </gl-form-group>
+
               <gl-form-checkbox v-model="createNewMr" class="gl-mt-4">
                 <span>
                   {{ $options.i18n.CREATE_MR_LABEL }}
diff --git a/ee/spec/helpers/ee/blob_helper_spec.rb b/ee/spec/helpers/ee/blob_helper_spec.rb
index faaef40d31d1f3..d9eeefb7d1d30c 100644
--- a/ee/spec/helpers/ee/blob_helper_spec.rb
+++ b/ee/spec/helpers/ee/blob_helper_spec.rb
@@ -68,10 +68,6 @@
     let(:project) { build_stubbed(:project) }
     let(:ref) { 'main' }
 
-    before do
-      allow(helper).to receive(:selected_branch).and_return(ref)
-    end
-
     it 'returns data related to blob app' do
       allow(helper).to receive_messages(selected_branch: ref, current_user: nil)
 
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index c4dda34edc358d..1f4e870ae7a1f3 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -443,11 +443,6 @@
     before do
       allow(helper).to receive(:current_user).and_return(user)
       allow(helper).to receive(:selected_branch).and_return(ref)
-
-      assign(:project, project)
-      assign(:id, id)
-      assign(:ref, ref)
-      assign(:blob, blob)
     end
 
     it 'returns data related to blob editing' do
-- 
GitLab


From b8b1383b13142fd163f7889fc7d76b99c9f470da Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Thu, 12 Dec 2024 16:24:42 -0500
Subject: [PATCH 10/11] Clean up `blob_edit_header.spec`

---
 .../repository/pages/blob_edit_header_spec.js | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/spec/frontend/repository/pages/blob_edit_header_spec.js b/spec/frontend/repository/pages/blob_edit_header_spec.js
index 804e385b818136..5f8d37f4a5bf42 100644
--- a/spec/frontend/repository/pages/blob_edit_header_spec.js
+++ b/spec/frontend/repository/pages/blob_edit_header_spec.js
@@ -2,30 +2,23 @@ import { nextTick } from 'vue';
 import MockAdapter from 'axios-mock-adapter';
 import { GlButton } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
+import * as urlUtility from '~/lib/utils/url_utility';
 import { HTTP_STATUS_OK } from '~/lib/utils/http_status';
-import { visitUrl } from '~/lib/utils/url_utility';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CommitChangesModal from '~/repository/components/commit_changes_modal.vue';
 import BlobEditHeader from '~/repository/pages/blob_edit_header.vue';
 import { createAlert } from '~/alert';
-import waitForPromises from 'helpers/wait_for_promises';
 import { stubComponent } from 'helpers/stub_component';
 
 jest.mock('~/alert');
-
 jest.mock('lodash/uniqueId', () => {
   return jest.fn((input) => `${input}1`);
 });
 
-jest.mock('~/lib/utils/url_utility', () => ({
-  visitUrl: jest.fn(),
-  joinPaths: () => '/update',
-  setUrlFragment: jest.fn(),
-  getParameterByName: jest.fn(),
-}));
-
 describe('BlobEditHeader', () => {
   let wrapper;
+  let mock;
+  let visitUrlSpy;
 
   const content = 'some \r\n content \n';
 
@@ -60,11 +53,14 @@ describe('BlobEditHeader', () => {
   };
 
   beforeEach(() => {
+    visitUrlSpy = jest.spyOn(urlUtility, 'visitUrl');
+    mock = new MockAdapter(axios);
     wrapper = createWrapper();
   });
 
   afterEach(() => {
     jest.clearAllMocks();
+    mock.restore();
   });
 
   const findTitle = () => wrapper.find('h1');
@@ -73,6 +69,12 @@ describe('BlobEditHeader', () => {
   const findCommitChangesButton = () => wrapper.findByTestId('blob-edit-header-commit-button');
   const findCancelButton = () => wrapper.findByTestId('blob-edit-header-cancel-button');
 
+  const submitForm = async () => {
+    findCommitChangesModal().vm.$emit('submit-form', new FormData());
+
+    await axios.waitForAll();
+  };
+
   it('renders title with two buttons', () => {
     expect(findTitle().text()).toBe('Edit file');
     const buttons = findButtons();
@@ -93,8 +95,10 @@ describe('BlobEditHeader', () => {
       originalBranch: 'main',
       targetBranch: 'feature',
       isUsingLfs: false,
+      loading: false,
       emptyRepo: false,
       branchAllowsCollaboration: false,
+      valid: true,
     });
   });
 
@@ -104,27 +108,21 @@ describe('BlobEditHeader', () => {
     );
   });
 
-  it('redirects on success', async () => {
-    const mockFormData = new FormData();
-    const mock = new MockAdapter(axios);
-    mock.onPut('/update').reply(HTTP_STATUS_OK, { filePath: '/update/path' });
+  it('on submit, redirects to the updated file', async () => {
+    findCommitChangesButton().vm.$emit('click');
 
-    findCommitChangesModal().vm.$emit('submit-form', mockFormData);
-    await waitForPromises();
+    mock.onPut('/update').replyOnce(HTTP_STATUS_OK, { filePath: '/update/path' });
+    await submitForm();
 
     expect(mock.history.put).toHaveLength(1);
     const putData = JSON.parse(mock.history.put[0].data);
     expect(putData.file).toBe(content);
-    expect(visitUrl).toHaveBeenCalledWith('/update/path');
+    expect(visitUrlSpy).toHaveBeenCalledWith('/update/path');
   });
 
   it('creates alert when there is no filePath in response', async () => {
-    const mockFormData = new FormData();
-    const mock = new MockAdapter(axios);
     mock.onPut('/update').reply(HTTP_STATUS_OK);
-
-    findCommitChangesModal().vm.$emit('submit-form', mockFormData);
-    await waitForPromises();
+    await submitForm();
 
     expect(createAlert).toHaveBeenCalledWith({
       captureError: true,
@@ -132,13 +130,9 @@ describe('BlobEditHeader', () => {
     });
   });
 
-  it('creates alerts on failure', async () => {
-    const mockFormData = new FormData();
-    const mock = new MockAdapter(axios);
+  it('on error, creates an alert error', async () => {
     mock.onPut('/update').timeout();
-
-    findCommitChangesModal().vm.$emit('submit-form', mockFormData);
-    await waitForPromises();
+    await submitForm();
 
     expect(createAlert).toHaveBeenCalledWith({
       captureError: true,
-- 
GitLab


From f2207cbad1779c0ffff37d9adef86c2aa6fac923 Mon Sep 17 00:00:00 2001
From: Chaoyue Zhao <czhao@gitlab.com>
Date: Tue, 17 Dec 2024 10:22:41 -0500
Subject: [PATCH 11/11] Fix `user_replaces_files_spec.rb`

---
 spec/features/projects/files/user_replaces_files_spec.rb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/features/projects/files/user_replaces_files_spec.rb b/spec/features/projects/files/user_replaces_files_spec.rb
index 926efbd4c2cb8d..da8bc710e17f36 100644
--- a/spec/features/projects/files/user_replaces_files_spec.rb
+++ b/spec/features/projects/files/user_replaces_files_spec.rb
@@ -48,7 +48,7 @@
       click_on('Replace')
       find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
 
-      within_testid('upload-blob-modal') do
+      page.within('#modal-replace-blob') do
         fill_in(:commit_message, with: 'Replacement file commit message')
         click_button('Commit changes')
       end
-- 
GitLab