diff --git a/app/assets/javascripts/repository/components/header_area.vue b/app/assets/javascripts/repository/components/header_area.vue
index 6268dfed47b757bd6a55b508e4fbc8436cfdf4c7..a66fa1d9ef6dfef72ab799f39683013936d1df4b 100644
--- a/app/assets/javascripts/repository/components/header_area.vue
+++ b/app/assets/javascripts/repository/components/header_area.vue
@@ -89,7 +89,7 @@ export default {
     'showEditButton',
     'showWebIdeButton',
     'isGitpodEnabledForInstance',
-    'showPipelineEditorUrl',
+    'showPipelineEditorButton',
     'webIdeUrl',
     'editUrl',
     'pipelineEditorUrl',
@@ -430,7 +430,7 @@ export default {
           :show-edit-button="showEditButton"
           :show-web-ide-button="showWebIdeButton"
           :is-gitpod-enabled-for-instance="isGitpodEnabledForInstance"
-          :show-pipeline-editor-url="showPipelineEditorUrl"
+          :show-pipeline-editor-button="showPipelineEditorButton"
           :web-ide-url="webIDEUrl"
           :edit-url="editUrl"
           :pipeline-editor-url="pipelineEditorUrl"
diff --git a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
index 4bd729645d93812736297c4f139138ef67d5da06..6f35bb98895cc2bd45343e4fa8c05ff1f536486a 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_button_group.vue
@@ -56,7 +56,7 @@ export default {
         text: this.$options.i18n.replace,
         extraAttrs: {
           'data-testid': 'replace',
-          disabled: this.isReplaceDisabled,
+          disabled: this.isReplaceDisabled || !this.userPermissions.createMergeRequestIn,
         },
       };
     },
diff --git a/app/assets/javascripts/repository/components/header_area/blob_controls.vue b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
index 6f7c8f245d654617f5792aa775fb85f98c941209..1f475e805814e69c510ae640309337726f3cb640 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_controls.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_controls.vue
@@ -30,6 +30,7 @@ import OpenMrBadge from '~/badges/components/open_mr_badge/open_mr_badge.vue';
 import BlobOverflowMenu from 'ee_else_ce/repository/components/header_area/blob_overflow_menu.vue';
 import ForkSuggestionModal from '~/repository/components/header_area/fork_suggestion_modal.vue';
 import { TEXT_FILE_TYPE, EMPTY_FILE, DEFAULT_BLOB_INFO } from '../../constants';
+import { NO_MODIFY_PERMISSION_MESSAGE } from './constants';
 
 export default {
   i18n: {
@@ -37,6 +38,7 @@ export default {
     blame: __('Blame'),
     errorMessage: __('An error occurred while loading file controls. Refresh the page.'),
     archivedProjectTooltip: __('You cannot edit files in archived projects'),
+    noPermissionTooltip: NO_MODIFY_PERMISSION_MESSAGE,
     lfsFileTooltip: __('You cannot edit files stored in LFS'),
   },
   buttonClassList: '@sm/panel:gl-w-auto gl-w-full @sm/panel:gl-mt-0 gl-mt-3',
@@ -99,7 +101,7 @@ export default {
       },
     },
   },
-  inject: ['currentRef'],
+  inject: ['currentRef', 'showWebIdeButton', 'showPipelineEditorButton'],
   provide() {
     return {
       blobInfo: computed(() => this.blobInfo ?? DEFAULT_BLOB_INFO.repository.blobs.nodes[0]),
@@ -223,6 +225,10 @@ export default {
           condition: () => this.isUsingLfs,
           message: this.$options.i18n.lfsFileTooltip,
         },
+        fileModifyPermission: {
+          condition: () => !this.showWebIdeButton,
+          message: this.$options.i18n.noPermissionTooltip,
+        },
       };
     },
   },
@@ -299,11 +305,12 @@ export default {
     <web-ide-link
       class="!gl-m-0"
       :show-edit-button="!isBinaryFileType"
+      :show-web-ide-button="showWebIdeButton"
       :edit-url="blobInfo.editBlobPath"
       :web-ide-url="blobInfo.ideEditPath"
       :needs-to-fork="shouldShowSingleFileEditorForkSuggestion"
       :needs-to-fork-with-web-ide="shouldShowWebIdeForkSuggestion"
-      :show-pipeline-editor-button="Boolean(blobInfo.pipelineEditorPath)"
+      :show-pipeline-editor-button="showPipelineEditorButton"
       :pipeline-editor-url="blobInfo.pipelineEditorPath"
       :gitpod-url="blobInfo.gitpodBlobUrl"
       :is-gitpod-enabled-for-instance="gitpodEnabled"
diff --git a/app/assets/javascripts/repository/components/header_area/blob_delete_file_group.vue b/app/assets/javascripts/repository/components/header_area/blob_delete_file_group.vue
index 7a1da134ee60d224c83ca7bf2afe57124c7ab253..70a5200c18c9c356df02a46192f119db0bf059d7 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_delete_file_group.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_delete_file_group.vue
@@ -54,7 +54,7 @@ export default {
         text: __('Delete'),
         extraAttrs: {
           'data-testid': 'delete',
-          disabled: this.disabled,
+          disabled: this.disabled || !this.userPermissions.createMergeRequestIn,
         },
       };
     },
diff --git a/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue b/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue
index dc98dd88fabf9f8b3ecac2f13e055eda77ab4367..8f2b89f78007cb332dca8c3404a3b6482dd81f82 100644
--- a/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue
+++ b/app/assets/javascripts/repository/components/header_area/blob_overflow_menu.vue
@@ -9,6 +9,7 @@ import projectInfoQuery from 'ee_else_ce/repository/queries/project_info.query.g
 import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import { DEFAULT_BLOB_INFO } from '~/repository/constants';
 import BlobButtonGroup from 'ee_else_ce/repository/components/header_area/blob_button_group.vue';
+import { NO_MODIFY_PERMISSION_MESSAGE } from './constants';
 import BlobDefaultActionsGroup from './blob_default_actions_group.vue';
 import BlobDeleteFileGroup from './blob_delete_file_group.vue';
 import BlobRepositoryActionsGroup from './blob_repository_actions_group.vue';
@@ -107,6 +108,7 @@ export default {
       userPermissions: DEFAULT_BLOB_INFO.userPermissions,
       activeViewerType: SIMPLE_BLOB_VIEWER,
       isLoggedIn: isLoggedIn(),
+      dropdownTooltipText: this.$options.i18n.dropdownTooltip,
     };
   },
   computed: {
@@ -139,8 +141,35 @@ export default {
   },
   mounted() {
     this.updateViewerFromQueryParam(this.$route?.query?.plain);
+
+    const disclosureDropdown = this.$refs.disclosureDropdown?.$el;
+    if (disclosureDropdown) {
+      disclosureDropdown.addEventListener('mouseover', this.updateDropdownTooltipText);
+      disclosureDropdown.addEventListener('mouseleave', this.updateDropdownTooltipText);
+    }
+  },
+  beforeDestroy() {
+    const disclosureDropdown = this.$refs.disclosureDropdown?.$el;
+    if (disclosureDropdown) {
+      disclosureDropdown.removeEventListener('mouseover', this.updateDropdownTooltipText);
+      disclosureDropdown.removeEventListener('mouseleave', this.updateDropdownTooltipText);
+    }
   },
   methods: {
+    updateDropdownTooltipText(event) {
+      const isHoveredButtonGroup = this.$refs.buttonGroup?.$el?.contains?.(event.target);
+      const isHoveredDeleteFileGroup = this.$refs.deleteFileGroup?.$el?.contains(event.target);
+
+      if (
+        (isHoveredButtonGroup || isHoveredDeleteFileGroup) &&
+        !this.userPermissions.createMergeRequestIn
+      ) {
+        this.dropdownTooltipText = NO_MODIFY_PERMISSION_MESSAGE;
+        return;
+      }
+
+      this.dropdownTooltipText = this.$options.i18n.dropdownTooltip;
+    },
     updateViewerFromQueryParam(plainValue) {
       const hasRichViewer = Boolean(this.blobInfo.richViewer);
       const useSimpleViewer = plainValue === '1' || !hasRichViewer;
@@ -162,7 +191,8 @@ export default {
 </script>
 <template>
   <gl-disclosure-dropdown
-    v-gl-tooltip-directive.hover="$options.i18n.dropdownTooltip"
+    ref="disclosureDropdown"
+    v-gl-tooltip-directive.hover="dropdownTooltipText"
     no-caret
     icon="ellipsis_v"
     data-testid="blob-overflow-menu"
@@ -174,6 +204,7 @@ export default {
     <blob-repository-actions-group :permalink-path="blobInfo.permalinkPath" />
     <blob-button-group
       v-if="isLoggedIn && !blobInfo.archived"
+      ref="buttonGroup"
       :current-ref="currentRef"
       :project-path="projectPath"
       :is-using-lfs="isUsingLfs"
@@ -195,6 +226,7 @@ export default {
     />
     <blob-delete-file-group
       v-if="isLoggedIn && !blobInfo.archived"
+      ref="deleteFileGroup"
       :current-ref="currentRef"
       :is-empty-repository="isEmptyRepository"
       :is-using-lfs="isUsingLfs"
diff --git a/app/assets/javascripts/repository/components/header_area/constants.js b/app/assets/javascripts/repository/components/header_area/constants.js
index 7060c527b05a3fd6f21d0aa4fc0a5e6a66e4782b..878f2268ca97ed2181b9a94087e5dd1f89817e67 100644
--- a/app/assets/javascripts/repository/components/header_area/constants.js
+++ b/app/assets/javascripts/repository/components/header_area/constants.js
@@ -1,6 +1,10 @@
+import { __ } from '~/locale';
+
 export const ADD_DROPDOWN_CLICK = 'click_add_dropdown';
 export const NEW_FILE_CLICK = 'click_new_file';
 export const UPLOAD_FILE_CLICK = 'click_upload_file';
 export const NEW_DIRECTORY_CLICK = 'click_new_directory';
 export const NEW_BRANCH_CLICK = 'click_new_branch';
 export const NEW_TAG_CLICK = 'click_new_tag';
+
+export const NO_MODIFY_PERMISSION_MESSAGE = __("You don't have permission to modify this file.");
diff --git a/app/assets/javascripts/repository/init_header_app.js b/app/assets/javascripts/repository/init_header_app.js
index 65d68a62581426b90cda2cc974c543d3ada89fab..6a340369611cc4fbb3b380f6076d001499e17d70 100644
--- a/app/assets/javascripts/repository/init_header_app.js
+++ b/app/assets/javascripts/repository/init_header_app.js
@@ -76,7 +76,7 @@ export default function initHeaderApp({ router, isReadmeView = false, isBlobView
       showEditButton,
       showWebIdeButton,
       showGitpodButton,
-      showPipelineEditorUrl,
+      showPipelineEditorButton,
       webIdeUrl,
       editUrl,
       pipelineEditorUrl,
@@ -116,7 +116,7 @@ export default function initHeaderApp({ router, isReadmeView = false, isBlobView
         showEditButton: parseBoolean(showEditButton),
         showWebIdeButton: parseBoolean(showWebIdeButton),
         isGitpodEnabledForInstance: parseBoolean(showGitpodButton),
-        showPipelineEditorUrl: parseBoolean(showPipelineEditorUrl),
+        showPipelineEditorButton: parseBoolean(showPipelineEditorButton),
         webIdeUrl,
         editUrl,
         pipelineEditorUrl,
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index b7e0f568f5efc4310856630ff1017132c709757a..1e8be2e05226ad3acf73ef66cf28df99f3673948 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -1,6 +1,8 @@
 # frozen_string_literal: true
 
 module BlobHelper
+  include WebIdeButtonHelper
+
   def edit_blob_path(project = @project, ref = @ref, path = @path, options = {})
     project_edit_blob_path(project, tree_join(ref, path), options[:link_opts])
   end
@@ -321,7 +323,9 @@ def vue_blob_header_app_data(project, blob, ref)
       ssh_url: ssh_enabled? ? ssh_clone_url_to_repo(project) : '',
       http_url: http_enabled? ? http_clone_url_to_repo(project) : '',
       xcode_url: show_xcode_link?(project) ? xcode_uri_to_repo(project) : '',
-      download_links: archive_download_links(project, ref, archive_prefix).to_json
+      download_links: archive_download_links(project, ref, archive_prefix).to_json,
+      web_ide_button_options: web_ide_button_data({ blob: blob }).merge(fork_modal_options(project, blob)).to_json,
+      web_ide_button_default_branch: project.default_branch_or_main
     }
   end
 
diff --git a/app/helpers/tree_helper.rb b/app/helpers/tree_helper.rb
index ff78a6dc9b925f46d224064541b6e13d14883023..e1a295262c8c05b8dd1b2c02a597bb1a0b25b271 100644
--- a/app/helpers/tree_helper.rb
+++ b/app/helpers/tree_helper.rb
@@ -182,44 +182,6 @@ def vue_file_list_data(project, ref)
     }
   end
 
-  def fork_modal_options(project, blob)
-    if show_edit_button?({ blob: blob })
-      fork_modal_id = "modal-confirm-fork-edit"
-    elsif show_web_ide_button?
-      fork_modal_id = "modal-confirm-fork-webide"
-    end
-
-    {
-      fork_path: new_namespace_project_fork_path(project_id: project.path, namespace_id: project.namespace.full_path),
-      fork_modal_id: fork_modal_id
-    }
-  end
-
-  def web_ide_button_data(options = {})
-    {
-      project_path: project_to_use.full_path,
-      ref: @ref,
-
-      is_fork: fork?,
-      needs_to_fork: needs_to_fork?,
-      gitpod_enabled: !current_user.nil? && current_user.gitpod_enabled,
-      is_blob: !options[:blob].nil?,
-
-      show_edit_button: show_edit_button?(options),
-      show_web_ide_button: show_web_ide_button?,
-      show_gitpod_button: show_gitpod_button?,
-      show_pipeline_editor_button: show_pipeline_editor_button?(@project, @path),
-
-      web_ide_url: web_ide_url,
-      edit_url: edit_url(options),
-      pipeline_editor_url: project_ci_pipeline_editor_path(@project, branch_name: @ref),
-
-      gitpod_url: gitpod_url,
-      user_preferences_gitpod_path: profile_preferences_path(anchor: 'user_gitpod_enabled'),
-      user_profile_enable_gitpod_path: user_settings_profile_path(user: { gitpod_enabled: true })
-    }
-  end
-
   def code_dropdown_ide_data
     {
       gitpod_enabled: current_user&.gitpod_enabled || false,
diff --git a/app/helpers/web_ide_button_helper.rb b/app/helpers/web_ide_button_helper.rb
index 2f654056382bb17760b4d360214eb897424c35ab..ae6c7151b7189e9ac8943ef033d7df2783c33688 100644
--- a/app/helpers/web_ide_button_helper.rb
+++ b/app/helpers/web_ide_button_helper.rb
@@ -58,4 +58,42 @@ def gitpod_url
 
     "#{Gitlab::CurrentSettings.gitpod_url}##{project_tree_url(@project, tree_join(@ref, @path || ''))}"
   end
+
+  def web_ide_button_data(options = {})
+    {
+      project_path: project_to_use.full_path,
+      ref: @ref,
+
+      is_fork: fork?,
+      needs_to_fork: needs_to_fork?,
+      gitpod_enabled: !current_user.nil? && current_user.gitpod_enabled,
+      is_blob: !options[:blob].nil?,
+
+      show_edit_button: show_edit_button?(options),
+      show_web_ide_button: show_web_ide_button?,
+      show_gitpod_button: show_gitpod_button?,
+      show_pipeline_editor_button: show_pipeline_editor_button?(@project, @path),
+
+      web_ide_url: web_ide_url,
+      edit_url: edit_url(options),
+      pipeline_editor_url: project_ci_pipeline_editor_path(@project, branch_name: @ref),
+
+      gitpod_url: gitpod_url,
+      user_preferences_gitpod_path: profile_preferences_path(anchor: 'user_gitpod_enabled'),
+      user_profile_enable_gitpod_path: user_settings_profile_path(user: { gitpod_enabled: true })
+    }
+  end
+
+  def fork_modal_options(project, blob)
+    if show_edit_button?({ blob: blob })
+      fork_modal_id = "modal-confirm-fork-edit"
+    elsif show_web_ide_button?
+      fork_modal_id = "modal-confirm-fork-webide"
+    end
+
+    {
+      fork_path: new_namespace_project_fork_path(project_id: project.path, namespace_id: project.namespace.full_path),
+      fork_modal_id: fork_modal_id
+    }
+  end
 end
diff --git a/ee/spec/frontend/repository/mock_data.js b/ee/spec/frontend/repository/mock_data.js
index c9e396320c2e16a8c195aee90c2fea9e119b1a1f..074854a8fe3ad7985a64a8e088397ab903646d86 100644
--- a/ee/spec/frontend/repository/mock_data.js
+++ b/ee/spec/frontend/repository/mock_data.js
@@ -45,7 +45,7 @@ export const headerAppInjected = {
   showEditButton: true,
   showWebIdeButton: true,
   isGitpodEnabledForInstance: false,
-  showPipelineEditorUrl: true,
+  showPipelineEditorButton: true,
   webIdeUrl: 'https://gitlab.com/project/-/ide/',
   editUrl: 'https://gitlab.com/project/-/edit/main/',
   pipelineEditorUrl: 'https://gitlab.com/project/-/ci/editor',
diff --git a/ee/spec/helpers/ee/blob_helper_spec.rb b/ee/spec/helpers/ee/blob_helper_spec.rb
index d1d5e502c9ecb469e3b779f5d46be2d503ff91d0..9e9438a01f5ba6b294f063257f98686bf2fc3ff6 100644
--- a/ee/spec/helpers/ee/blob_helper_spec.rb
+++ b/ee/spec/helpers/ee/blob_helper_spec.rb
@@ -74,7 +74,9 @@
     it 'returns data related to blob header app' do
       Current.organization = organization
       allow(helper).to receive_messages(selected_branch: ref, current_user: nil,
-        breadcrumb_data_attributes: breadcrumb_data)
+        breadcrumb_data_attributes: breadcrumb_data,
+        web_ide_button_data: {},
+        fork_modal_options: {})
 
       expect(helper.vue_blob_header_app_data(project, blob, ref)).to include({
         new_workspace_path: new_remote_development_workspace_path,
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 75994af249ee298a4fc212ffbe63bfe8291ce0a3..46620ac848dc89fd57e98eacfe286f3ae699250a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -78882,6 +78882,9 @@ msgstr ""
 msgid "You don't have permission to manage this issue."
 msgstr ""
 
+msgid "You don't have permission to modify this file."
+msgstr ""
+
 msgid "You don't have permission to update the setting %{attribute}."
 msgstr ""
 
diff --git a/spec/frontend/repository/components/header_area/blob_button_group_spec.js b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
index 0661adfd780396ee26b1fae38c2bb37ce54d9954..08d747cbd5431194060154fa8b0b969f450de609 100644
--- a/spec/frontend/repository/components/header_area/blob_button_group_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_button_group_spec.js
@@ -82,6 +82,20 @@ describe('BlobButtonGroup component', () => {
       expect(showUploadBlobModalMock).toHaveBeenCalled();
     });
 
+    describe('when user cannot create merge requests', () => {
+      it('disables the button item', async () => {
+        await createComponent({
+          props: {
+            userPermissions: { pushCode: false, createMergeRequestIn: false, forkProject: true },
+          },
+        });
+
+        expect(findReplaceItem().props('item')).toMatchObject({
+          extraAttrs: { disabled: true },
+        });
+      });
+    });
+
     describe('when user cannot modify blob', () => {
       beforeEach(async () => {
         await createComponent({
diff --git a/spec/frontend/repository/components/header_area/blob_controls_spec.js b/spec/frontend/repository/components/header_area/blob_controls_spec.js
index 7b882e6ebbfcb0ce74e51aebc61d87377785ee6e..c2abe95ff95e89d06ac61210e0e723df8872d177 100644
--- a/spec/frontend/repository/components/header_area/blob_controls_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_controls_spec.js
@@ -23,6 +23,8 @@ import applicationInfoQuery from '~/repository/queries/application_info.query.gr
 import createRouter from '~/repository/router';
 import OpenMrBadge from '~/badges/components/open_mr_badge/open_mr_badge.vue';
 import ForkSuggestionModal from '~/repository/components/header_area/fork_suggestion_modal.vue';
+import { NO_MODIFY_PERMISSION_MESSAGE } from '~/repository/components/header_area/constants';
+
 import {
   blobControlsDataMock,
   refMock,
@@ -89,6 +91,7 @@ describe('Blob controls component', () => {
     blobControlsResolver = blobControlsSuccessResolver,
     currentUserResolver = currentUserSuccessResolver,
     applicationInfoResolver = applicationInfoSuccessResolver,
+    provide = {},
   } = {}) => {
     const projectPath = 'some/project';
     router = createRouter(projectPath, refMock);
@@ -111,6 +114,9 @@ describe('Blob controls component', () => {
       apolloProvider: fakeApollo,
       provide: {
         currentRef: refMock,
+        showWebIdeButton: true,
+        showPipelineEditorButton: true,
+        ...provide,
       },
       directives: {
         GlTooltip: createMockDirective('gl-tooltip'),
@@ -271,6 +277,13 @@ describe('Blob controls component', () => {
       });
     });
 
+    it('passes disabled and customTooltipText prop when user has no permission to modify the file', async () => {
+      await createComponent({ provide: { showWebIdeButton: false } });
+
+      expect(findWebIdeLink().props('disabled')).toBe(true);
+      expect(findWebIdeLink().props('customTooltipText')).toBe(NO_MODIFY_PERMISSION_MESSAGE);
+    });
+
     describe('when project query has errors', () => {
       it('disables the WebIdeLink component with appropriate tooltip', async () => {
         await createComponent({ blobControlsResolver: blobControlsErrorResolver });
diff --git a/spec/frontend/repository/components/header_area/blob_delete_file_group_spec.js b/spec/frontend/repository/components/header_area/blob_delete_file_group_spec.js
index a4eb6850663e48201c27e5d45bb82b11c7e78b1b..0f16ee174b96bb4aee1b63a879635183f0599ea0 100644
--- a/spec/frontend/repository/components/header_area/blob_delete_file_group_spec.js
+++ b/spec/frontend/repository/components/header_area/blob_delete_file_group_spec.js
@@ -80,6 +80,20 @@ describe('BlobDeleteFileGroup component', () => {
       expect(showDeleteBlobModalMock).toHaveBeenCalled();
     });
 
+    describe('when user cannot create merge requests', () => {
+      it('disables the button item', async () => {
+        await createComponent({
+          props: {
+            userPermissions: { pushCode: false, createMergeRequestIn: false, forkProject: true },
+          },
+        });
+
+        expect(findDeleteItem().props('item')).toMatchObject({
+          extraAttrs: { disabled: true },
+        });
+      });
+    });
+
     describe('when user cannot modify blob', () => {
       beforeEach(async () => {
         await createComponent({
diff --git a/spec/frontend/repository/components/header_area_spec.js b/spec/frontend/repository/components/header_area_spec.js
index 09ed906c8f484b4c27586aa499563d226ec8d099..4b03609691f0263521dae78294256401dc9327cb 100644
--- a/spec/frontend/repository/components/header_area_spec.js
+++ b/spec/frontend/repository/components/header_area_spec.js
@@ -17,6 +17,7 @@ import Shortcuts from '~/behaviors/shortcuts/shortcuts';
 import { useMockInternalEventsTracking } from 'helpers/tracking_internal_events_helper';
 import { headerAppInjected } from 'ee_else_ce_jest/repository/mock_data';
 import CompactCodeDropdown from 'ee_else_ce/repository/components/code_dropdown/compact_code_dropdown.vue';
+import WebIdeLink from 'ee_else_ce/vue_shared/components/web_ide_link.vue';
 import { useFileTreeBrowserVisibility } from '~/repository/stores/file_tree_browser_visibility';
 import { useMainContainer } from '~/pinia/global_stores/main_container';
 import FileTreeBrowserToggle from '~/repository/file_tree_browser/components/file_tree_browser_toggle.vue';
@@ -92,6 +93,7 @@ describe('HeaderArea', () => {
       stubs: {
         RouterLink: RouterLinkStub,
         CompactCodeDropdown,
+        WebIdeLink,
       },
       mocks: {
         $route: {
@@ -324,8 +326,27 @@ describe('HeaderArea', () => {
     });
 
     describe('Edit button', () => {
-      it('renders WebIdeLink component', () => {
+      it('renders WebIdeLink component with correct props', () => {
         expect(findWebIdeButton().exists()).toBe(true);
+
+        expect(findWebIdeButton().props()).toMatchObject({
+          showWebIdeButton: headerAppInjected.showWebIdeButton,
+          showEditButton: headerAppInjected.showEditButton,
+          showPipelineEditorButton: headerAppInjected.showPipelineEditorButton,
+          webIdeUrl: headerAppInjected.webIdeUrl,
+          editUrl: headerAppInjected.editUrl,
+          pipelineEditorUrl: headerAppInjected.pipelineEditorUrl,
+          gitpodUrl: headerAppInjected.gitpodUrl,
+          gitRef: 'main',
+          projectId: 123,
+          projectPath: 'test/project',
+          isFork: headerAppInjected.isFork,
+          needsToFork: headerAppInjected.needsToFork,
+          isBlob: headerAppInjected.isBlob,
+          isGitpodEnabledForUser: headerAppInjected.isGitpodEnabledForUser,
+          isGitpodEnabledForInstance: headerAppInjected.isGitpodEnabledForInstance,
+          disableForkModal: true,
+        });
       });
     });
 
diff --git a/spec/frontend/repository/mock_data.js b/spec/frontend/repository/mock_data.js
index d68c15ba5ec8e966fbf8f29c6cf9f9106cb48818..38daa9e7f6c5ef8140d9334d330d6307ba693bdb 100644
--- a/spec/frontend/repository/mock_data.js
+++ b/spec/frontend/repository/mock_data.js
@@ -249,7 +249,7 @@ export const headerAppInjected = {
   showEditButton: true,
   showWebIdeButton: true,
   isGitpodEnabledForInstance: false,
-  showPipelineEditorUrl: true,
+  showPipelineEditorButton: true,
   webIdeUrl: 'https://gitlab.com/project/-/ide/',
   editUrl: 'https://gitlab.com/project/-/edit/main/',
   pipelineEditorUrl: 'https://gitlab.com/project/-/ci/editor',
diff --git a/spec/helpers/blob_helper_spec.rb b/spec/helpers/blob_helper_spec.rb
index cc3dc33d5c1afc91abfb4779213cf3407dfdbb78..5a2addd84258a769f2d253ff377477974f5082e9 100644
--- a/spec/helpers/blob_helper_spec.rb
+++ b/spec/helpers/blob_helper_spec.rb
@@ -657,7 +657,9 @@
         ssh_url: ssh_clone_url_to_repo(project),
         http_url: http_clone_url_to_repo(project),
         xcode_url: 'xcode://example.com/project.git',
-        download_links: helper.send(:archive_download_links, project, ref, "#{project.path}-#{ref.tr('/', '-')}").to_json
+        download_links: helper.send(:archive_download_links, project, ref, "#{project.path}-#{ref.tr('/', '-')}").to_json,
+        web_ide_button_options: helper.web_ide_button_data({ blob: blob }).merge(helper.fork_modal_options(project, blob)).to_json,
+        web_ide_button_default_branch: project.default_branch_or_main
       })
     end
 
diff --git a/spec/helpers/tree_helper_spec.rb b/spec/helpers/tree_helper_spec.rb
index 6e421f1064630386e746fdf17d1121791ee482a9..0ee3407ff62b0db304914ff933dc546d361cd518 100644
--- a/spec/helpers/tree_helper_spec.rb
+++ b/spec/helpers/tree_helper_spec.rb
@@ -226,223 +226,6 @@
     end
   end
 
-  describe '#web_ide_button_data' do
-    let(:blob) { project.repository.blob_at('refs/heads/master', @path) }
-
-    let_it_be(:user_preferences_gitpod_path) { '/-/profile/preferences#user_gitpod_enabled' }
-    let_it_be(:user_profile_enable_gitpod_path) { '/-/user_settings/profile?user%5Bgitpod_enabled%5D=true' }
-
-    before do
-      @path = ''
-      @project = project
-      @ref = sha
-
-      allow(helper).to receive_messages(
-        current_user: nil,
-        can_collaborate_with_project?: true,
-        can?: true,
-        user_preferences_gitpod_path: user_preferences_gitpod_path,
-        user_profile_enable_gitpod_path: user_profile_enable_gitpod_path
-      )
-    end
-
-    subject { helper.web_ide_button_data(blob: blob) }
-
-    it 'returns a list of attributes related to the project' do
-      expect(subject).to include(
-        project_path: project.full_path,
-        ref: sha,
-
-        is_fork: false,
-        needs_to_fork: false,
-        gitpod_enabled: false,
-        is_blob: false,
-
-        show_edit_button: false,
-        show_web_ide_button: true,
-        show_gitpod_button: false,
-        show_pipeline_editor_button: false,
-
-        edit_url: '',
-        web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}",
-        pipeline_editor_url: "/#{project.full_path}/-/ci/editor?branch_name=#{@ref}",
-
-        gitpod_url: '',
-        user_preferences_gitpod_path: user_preferences_gitpod_path,
-        user_profile_enable_gitpod_path: user_profile_enable_gitpod_path
-      )
-    end
-
-    context 'a blob is passed' do
-      before do
-        @path = 'README.md'
-      end
-
-      it 'returns edit url and webide url for the blob' do
-        expect(subject).to include(
-          show_edit_button: true,
-          edit_url: "/#{project.full_path}/-/edit/#{sha}/#{@path}",
-          web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}/-/#{@path}"
-        )
-      end
-
-      it 'does not load blob from repository again' do
-        blob
-
-        expect(repository).not_to receive(:blob_at)
-
-        subject
-      end
-    end
-
-    context 'nil blob is passed' do
-      let(:blob) { nil }
-
-      it 'does not load blob from repository' do
-        expect(repository).not_to receive(:blob_at)
-
-        subject
-      end
-    end
-
-    context 'user does not have write access but a personal fork exists' do
-      include ProjectForksHelper
-
-      let(:project) { create(:project, :repository) }
-      let(:forked_project) { create(:project, :repository, namespace: user.namespace) }
-
-      before do
-        project.add_guest(user)
-        fork_project(project, nil, target_project: forked_project)
-
-        allow(helper).to receive(:current_user).and_return(user)
-      end
-
-      it 'includes forked project path as project_path' do
-        expect(subject).to include(
-          project_path: forked_project.full_path,
-          is_fork: true,
-          needs_to_fork: false,
-          show_edit_button: false,
-          web_ide_url: "/-/ide/project/#{forked_project.full_path}/edit/#{sha}"
-        )
-      end
-
-      context 'a blob is passed' do
-        before do
-          @path = 'README.md'
-        end
-
-        it 'returns edit url and web ide for the blob in the fork' do
-          expect(subject).to include(
-            is_blob: true,
-            show_edit_button: true,
-            # edit urls are automatically redirected to the fork
-            edit_url: "/#{project.full_path}/-/edit/#{sha}/#{@path}",
-            web_ide_url: "/-/ide/project/#{forked_project.full_path}/edit/#{sha}/-/#{@path}"
-          )
-        end
-      end
-    end
-
-    context 'for archived project' do
-      before do
-        allow(helper).to receive(:can_collaborate_with_project?).and_return(false)
-        allow(helper).to receive(:can?).and_return(false)
-
-        project.update!(archived: true)
-
-        @path = 'README.md'
-      end
-
-      it 'does not show any buttons' do
-        expect(subject).to include(
-          is_blob: true,
-          show_edit_button: false,
-          show_web_ide_button: false,
-          show_gitpod_button: false
-        )
-      end
-    end
-
-    context 'user has write access' do
-      before do
-        project.add_developer(user)
-
-        allow(helper).to receive(:current_user).and_return(user)
-      end
-
-      it 'includes original project path as project_path' do
-        expect(subject).to include(
-          project_path: project.full_path,
-
-          is_fork: false,
-          needs_to_fork: false,
-
-          show_edit_button: false,
-          web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}"
-        )
-      end
-
-      context 'a blob is passed' do
-        before do
-          @path = 'README.md'
-        end
-
-        it 'returns edit url and web ide for the blob in the fork' do
-          expect(subject).to include(
-            is_blob: true,
-            show_edit_button: true,
-            edit_url: "/#{project.full_path}/-/edit/#{sha}/#{@path}",
-            web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}/-/#{@path}"
-          )
-        end
-      end
-    end
-
-    context 'ona settings is enabled' do
-      before do
-        allow(Gitlab::CurrentSettings)
-          .to receive(:gitpod_enabled)
-          .and_return(true)
-
-        allow(helper).to receive(:current_user).and_return(user)
-      end
-
-      it 'has show_gitpod_button: true' do
-        expect(subject).to include(
-          show_gitpod_button: true
-        )
-      end
-
-      it 'has gitpod_enabled: true when user has enabled gitpod' do
-        user.gitpod_enabled = true
-
-        expect(subject).to include(
-          gitpod_enabled: true
-        )
-      end
-
-      it 'has gitpod_enabled: false when user has not enabled gitpod' do
-        user.gitpod_enabled = false
-
-        expect(subject).to include(
-          gitpod_enabled: false
-        )
-      end
-
-      it 'has show_gitpod_button: false when web ide button is not shown' do
-        allow(helper).to receive(:can_collaborate_with_project?).and_return(false)
-        allow(helper).to receive(:can?).and_return(false)
-
-        expect(subject).to include(
-          show_web_ide_button: false,
-          show_gitpod_button: false
-        )
-      end
-    end
-  end
-
   describe '#code_dropdown_ide_data' do
     before do
       helper.instance_variable_set(:@project, project)
@@ -531,45 +314,6 @@
     end
   end
 
-  describe '.fork_modal_options' do
-    let_it_be(:blob) { project.repository.blob_at('refs/heads/master', @path) }
-    let(:fork_path)  { "/#{project.path_with_namespace}/-/forks/new" }
-
-    before do
-      allow(helper).to receive(:current_user).and_return(user)
-    end
-
-    subject { helper.fork_modal_options(project, blob) }
-
-    it 'returns correct fork path' do
-      expect(subject).to match a_hash_including(fork_path: fork_path, fork_modal_id: nil)
-    end
-
-    context 'when show_edit_button true' do
-      before do
-        allow(helper).to receive(:show_edit_button?).and_return(true)
-      end
-
-      it 'returns correct fork path and modal id' do
-        expect(subject).to match a_hash_including(
-          fork_path: fork_path,
-          fork_modal_id: 'modal-confirm-fork-edit')
-      end
-    end
-
-    context 'when show_web_ide_button true' do
-      before do
-        allow(helper).to receive(:show_web_ide_button?).and_return(true)
-      end
-
-      it 'returns correct fork path and modal id' do
-        expect(subject).to match a_hash_including(
-          fork_path: fork_path,
-          fork_modal_id: 'modal-confirm-fork-webide')
-      end
-    end
-  end
-
   describe '#compact_code_dropdown_data' do
     let(:ref) { 'main' }
     let(:archive_prefix) { "#{project.path}-#{ref}" }
diff --git a/spec/helpers/web_ide_button_helper_spec.rb b/spec/helpers/web_ide_button_helper_spec.rb
index 3dd46021c114191950672d18a335f50f51c5383a..71cde3b59e97e107069dd88ce86d0f56d33297e4 100644
--- a/spec/helpers/web_ide_button_helper_spec.rb
+++ b/spec/helpers/web_ide_button_helper_spec.rb
@@ -2,7 +2,10 @@
 
 require 'spec_helper'
 
-RSpec.describe WebIdeButtonHelper do
+RSpec.describe WebIdeButtonHelper, feature_category: :source_code_management do
+  let(:project) { create(:project, :repository) } # rubocop:disable RSpec/FactoryBot/AvoidCreate -- stubbed models are not allowed to access the database
+  let_it_be_with_reload(:user) { create(:user) } # rubocop:disable RSpec/FactoryBot/AvoidCreate -- stubbed models are not allowed to access the database
+
   describe '#show_pipeline_editor_button?' do
     subject(:result) { helper.show_pipeline_editor_button?(project, path) }
 
@@ -42,4 +45,267 @@
       end
     end
   end
+
+  describe '#web_ide_button_data' do
+    let(:path) { '' }
+
+    let(:repository) { project.repository }
+    let(:sha) { 'c1c67abbaf91f624347bb3ae96eabe3a1b742478' }
+    let(:blob) { project.repository.blob_at('refs/heads/master', path) }
+
+    let_it_be(:user_preferences_gitpod_path) { '/-/profile/preferences#user_gitpod_enabled' }
+    let_it_be(:user_profile_enable_gitpod_path) { '/-/user_settings/profile?user%5Bgitpod_enabled%5D=true' }
+
+    before do
+      @project = project
+
+      helper.instance_variable_set(:@path, path)
+      helper.instance_variable_set(:@ref, sha)
+
+      allow(Current).to receive(:organization).and_return(project.organization)
+      allow(helper).to receive_messages(
+        current_user: nil,
+        can_collaborate_with_project?: true,
+        can?: true,
+        user_preferences_gitpod_path: user_preferences_gitpod_path,
+        user_profile_enable_gitpod_path: user_profile_enable_gitpod_path
+      )
+    end
+
+    subject(:response) { helper.web_ide_button_data(blob: blob) }
+
+    it 'returns a list of attributes related to the project' do
+      expect(response).to include(
+        project_path: project.full_path,
+        ref: sha,
+
+        is_fork: false,
+        needs_to_fork: false,
+        gitpod_enabled: false,
+        is_blob: false,
+
+        show_edit_button: false,
+        show_web_ide_button: true,
+        show_gitpod_button: false,
+        show_pipeline_editor_button: false,
+
+        edit_url: '',
+        web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}",
+        pipeline_editor_url: "/#{project.full_path}/-/ci/editor?branch_name=#{sha}",
+
+        gitpod_url: '',
+        user_preferences_gitpod_path: user_preferences_gitpod_path,
+        user_profile_enable_gitpod_path: user_profile_enable_gitpod_path
+      )
+    end
+
+    context 'when a blob is passed' do
+      let(:path) { 'README.md' }
+
+      it 'returns edit url and webide url for the blob' do
+        expect(response).to include(
+          show_edit_button: true,
+          edit_url: "/#{project.full_path}/-/edit/#{sha}/#{path}",
+          web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}/-/#{path}"
+        )
+      end
+
+      it 'does not load blob from repository again' do
+        blob
+
+        expect(repository).not_to receive(:blob_at)
+
+        response
+      end
+    end
+
+    context 'when nil blob is passed' do
+      let(:blob) { nil }
+
+      it 'does not load blob from repository' do
+        expect(repository).not_to receive(:blob_at)
+
+        response
+      end
+    end
+
+    context 'when user does not have write access but a personal fork exists' do
+      include ProjectForksHelper
+
+      let(:project) { create(:project, :repository) } # rubocop:disable RSpec/FactoryBot/AvoidCreate -- stubbed models are not allowed to access the database
+      let(:forked_project) { create(:project, :repository, namespace: user.namespace) } # rubocop:disable RSpec/FactoryBot/AvoidCreate -- stubbed models are not allowed to access the database
+
+      before do
+        project.add_guest(user)
+        fork_project(project, nil, target_project: forked_project)
+
+        allow(helper).to receive(:current_user).and_return(user)
+      end
+
+      it 'includes forked project path as project_path' do
+        expect(response).to include(
+          project_path: forked_project.full_path,
+          is_fork: true,
+          needs_to_fork: false,
+          show_edit_button: false,
+          web_ide_url: "/-/ide/project/#{forked_project.full_path}/edit/#{sha}"
+        )
+      end
+
+      context 'when a blob is passed' do
+        let(:path) { 'README.md' }
+        let(:blob) { project.repository.blob_at('refs/heads/master', path) }
+
+        it 'returns edit url and web ide for the blob in the fork' do
+          expect(response).to include(
+            is_blob: true,
+            show_edit_button: true,
+            # edit urls are automatically redirected to the fork
+            edit_url: "/#{project.full_path}/-/edit/#{sha}/#{path}",
+            web_ide_url: "/-/ide/project/#{forked_project.full_path}/edit/#{sha}/-/#{path}"
+          )
+        end
+      end
+    end
+
+    context 'for archived project' do
+      let(:path) { 'README.md' }
+
+      before do
+        allow(helper).to receive_messages(
+          can_collaborate_with_project?: false,
+          can?: false
+        )
+
+        project.update!(archived: true)
+      end
+
+      it 'does not show any buttons' do
+        expect(response).to include(
+          is_blob: true,
+          show_edit_button: false,
+          show_web_ide_button: false,
+          show_gitpod_button: false
+        )
+      end
+    end
+
+    context 'when user has write access' do
+      before do
+        project.add_developer(user)
+
+        allow(helper).to receive(:current_user).and_return(user)
+      end
+
+      it 'includes original project path as project_path' do
+        expect(response).to include(
+          project_path: project.full_path,
+
+          is_fork: false,
+          needs_to_fork: false,
+
+          show_edit_button: false,
+          web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}"
+        )
+      end
+
+      context 'when a blob is passed' do
+        let(:path) { 'README.md' }
+
+        it 'returns edit url and web ide for the blob in the fork' do
+          expect(response).to include(
+            is_blob: true,
+            show_edit_button: true,
+            edit_url: "/#{project.full_path}/-/edit/#{sha}/#{path}",
+            web_ide_url: "/-/ide/project/#{project.full_path}/edit/#{sha}/-/#{path}"
+          )
+        end
+      end
+    end
+
+    context 'when ona settings is enabled' do
+      before do
+        allow(Gitlab::CurrentSettings)
+          .to receive(:gitpod_enabled)
+          .and_return(true)
+
+        allow(helper).to receive(:current_user).and_return(user)
+      end
+
+      it 'has show_gitpod_button: true' do
+        expect(response).to include(
+          show_gitpod_button: true
+        )
+      end
+
+      it 'has gitpod_enabled: true when user has enabled gitpod' do
+        user.gitpod_enabled = true
+
+        expect(response).to include(
+          gitpod_enabled: true
+        )
+      end
+
+      it 'has gitpod_enabled: false when user has not enabled gitpod' do
+        user.gitpod_enabled = false
+
+        expect(response).to include(
+          gitpod_enabled: false
+        )
+      end
+
+      it 'has show_gitpod_button: false when web ide button is not shown' do
+        allow(helper).to receive_messages(
+          can_collaborate_with_project?: false,
+          can?: false
+        )
+
+        expect(response).to include(
+          show_web_ide_button: false,
+          show_gitpod_button: false
+        )
+      end
+    end
+  end
+
+  describe '.fork_modal_options' do
+    let(:path) { '' }
+
+    let(:blob) { project.repository.blob_at('refs/heads/master', path) }
+    let(:fork_path) { "/#{project.path_with_namespace}/-/forks/new" }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(user)
+    end
+
+    subject(:result) { helper.fork_modal_options(project, blob) }
+
+    it 'returns correct fork path' do
+      expect(result).to match a_hash_including(fork_path: fork_path, fork_modal_id: nil)
+    end
+
+    context 'when show_edit_button true' do
+      before do
+        allow(helper).to receive(:show_edit_button?).and_return(true)
+      end
+
+      it 'returns correct fork path and modal id' do
+        expect(result).to match a_hash_including(
+          fork_path: fork_path,
+          fork_modal_id: 'modal-confirm-fork-edit')
+      end
+    end
+
+    context 'when show_web_ide_button true' do
+      before do
+        allow(helper).to receive(:show_web_ide_button?).and_return(true)
+      end
+
+      it 'returns correct fork path and modal id' do
+        expect(result).to match a_hash_including(
+          fork_path: fork_path,
+          fork_modal_id: 'modal-confirm-fork-webide')
+      end
+    end
+  end
 end
diff --git a/spec/support/helpers/user_with_namespace_shim.yml b/spec/support/helpers/user_with_namespace_shim.yml
index a6dfb60e51a295dbc52662d2d70206f7b70a9178..7f73ef3238dcfafcbe5104e562f7f4582bc22b7c 100644
--- a/spec/support/helpers/user_with_namespace_shim.yml
+++ b/spec/support/helpers/user_with_namespace_shim.yml
@@ -630,6 +630,7 @@
 - spec/helpers/search_helper_spec.rb
 - spec/helpers/submodule_helper_spec.rb
 - spec/helpers/tree_helper_spec.rb
+- spec/helpers/web_ide_button_helper_spec.rb
 - spec/lib/banzai/filter/references/user_reference_filter_spec.rb
 - spec/lib/banzai/filter/truncate_visible_filter_spec.rb
 - spec/lib/banzai/reference_parser/project_parser_spec.rb