Redirect to view blob page after replace/delete

Redirects users to the view blob page after replace/delete

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

@@ -7,6 +7,8 @@ import getRefMixin from '../mixins/get_ref';
 import DeleteBlobModal from './delete_blob_modal.vue';
 import UploadBlobModal from './upload_blob_modal.vue';
 
+const REPLACE_BLOB_MODAL_ID = 'modal-replace-blob';
+
 export default {
   i18n: {
     replace: __('Replace'),
@@ -76,9 +78,6 @@ export default {
     },
   },
   computed: {
-    replaceModalId() {
-      return uniqueId('replace-modal');
-    },
     replaceModalTitle() {
       return sprintf(__('Replace %{name}'), { name: this.name });
     },
@@ -95,13 +94,14 @@ export default {
   methods: {
     showModal(modalId) {
       if (this.showForkSuggestion) {
-        this.$emit('fork');
+        this.$emit('fork', 'view');
         return;
       }
 
       this.$refs[modalId].show();
     },
   },
+  replaceBlobModalId: REPLACE_BLOB_MODAL_ID,
 };
 </script>
 
@@ -118,7 +118,7 @@ export default {
         data-testid="lock"
         :data-qa-selector="lockBtnQASelector"
       />
-      <gl-button data-testid="replace" @click="showModal(replaceModalId)">
+      <gl-button data-testid="replace" @click="showModal($options.replaceBlobModalId)">
         {{ $options.i18n.replace }}
       </gl-button>
       <gl-button data-testid="delete" @click="showModal(deleteModalId)">
@@ -126,8 +126,8 @@ export default {
       </gl-button>
     </gl-button-group>
     <upload-blob-modal
-      :ref="replaceModalId"
-      :modal-id="replaceModalId"
+      :ref="$options.replaceBlobModalId"
+      :modal-id="$options.replaceBlobModalId"
       :modal-title="replaceModalTitle"
       :commit-message="replaceModalTitle"
       :target-branch="targetBranch || ref"

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

@@ -142,9 +142,13 @@ export default {
       return this.isLoggedIn && !canModifyBlob && createMergeRequestIn && forkProject;
     },
     forkPath() {
-      return this.forkTarget === 'ide'
-        ? this.blobInfo.ideForkAndEditPath
-        : this.blobInfo.forkAndEditPath;
+      const forkPaths = {
+        ide: this.blobInfo.ideForkAndEditPath,
+        simple: this.blobInfo.forkAndEditPath,
+        view: this.blobInfo.forkAndViewPath,
+      };
+
+      return forkPaths[this.forkTarget];
     },
     isUsingLfs() {
       return this.blobInfo.storedExternally && this.blobInfo.externalStorage === LFS_STORAGE;
@@ -249,7 +253,7 @@ export default {
             :is-locked="Boolean(pathLockedByUser)"
             :can-lock="canLock"
             :show-fork-suggestion="showForkSuggestion"
-            @fork="setForkTarget('ide')"
+            @fork="setForkTarget('view')"
           />
         </template>
       </blob-header>

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

@@ -87,7 +87,7 @@ export default {
       fields: {
         // fields key must match case of form name for validation directive to work
         commit_message: initFormField({ value: this.commitMessage }),
-        branch_name: initFormField({ value: this.targetBranch }),
+        branch_name: initFormField({ value: this.targetBranch, skipValidation: !this.canPushCode }),
       },
     };
     return {

app/assets/javascripts/repository/constants.js

@@ -52,6 +52,7 @@ export const DEFAULT_BLOB_INFO = {
           ideEditPath: '',
           forkAndEditPath: '',
           ideForkAndEditPath: '',
+          forkAndViewPath: '',
           storedExternally: false,
           externalStorage: '',
           environmentFormattedExternalUrl: '',

app/assets/javascripts/repository/queries/blob_info.query.graphql

@@ -31,6 +31,7 @@ query getBlobInfo(
           ideEditPath
           forkAndEditPath
           ideForkAndEditPath
+          forkAndViewPath
           environmentFormattedExternalUrl
           environmentExternalUrlForRouteMap
           canModifyBlob

app/graphql/types/repository/blob_type.rb

@@ -41,6 +41,9 @@ module Types
       field :ide_fork_and_edit_path, GraphQL::Types::String, null: true,
             description: 'Web path to edit this blob in the Web IDE using a forked project.'
 
+      field :fork_and_view_path, GraphQL::Types::String, null: true,
+            description: 'Web path to view this blob using a forked project.'
+
       field :size, GraphQL::Types::Int, null: true,
             description: 'Size (in bytes) of the blob.'
 

app/presenters/blob_presenter.rb

@@ -104,6 +104,10 @@ class BlobPresenter < Gitlab::View::Presenter::Delegated
     fork_path_for_current_user(project, ide_edit_path)
   end
 
+  def fork_and_view_path
+    fork_path_for_current_user(project, web_path)
+  end
+
   def can_modify_blob?
     super(blob, project, blob.commit_id)
   end

doc/api/graphql/reference/index.md

@@ -14930,6 +14930,7 @@ Returns [`Tree`](#tree).
 | <a id="repositoryblobfiletype"></a>`fileType` | [`String`](#string) | Expected format of the blob based on the extension. |
 | <a id="repositoryblobfindfilepath"></a>`findFilePath` | [`String`](#string) | Web path to find file. |
 | <a id="repositoryblobforkandeditpath"></a>`forkAndEditPath` | [`String`](#string) | Web path to edit this blob using a forked project. |
+| <a id="repositoryblobforkandviewpath"></a>`forkAndViewPath` | [`String`](#string) | Web path to view this blob using a forked project. |
 | <a id="repositoryblobhistorypath"></a>`historyPath` | [`String`](#string) | Web path to blob history page. |
 | <a id="repositoryblobid"></a>`id` | [`ID!`](#id) | ID of the blob. |
 | <a id="repositoryblobideeditpath"></a>`ideEditPath` | [`String`](#string) | Web path to edit this blob in the Web IDE. |

spec/features/projects/files/user_deletes_files_spec.rb

@@ -15,7 +15,6 @@ RSpec.describe 'Projects > Files > User deletes files', :js do
   let(:user) { create(:user) }
 
   before do
-    stub_feature_flags(refactor_blob_viewer: false) # This stub will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/349953
     sign_in(user)
   end
 

spec/features/projects/files/user_replaces_files_spec.rb

@@ -17,7 +17,6 @@ RSpec.describe 'Projects > Files > User replaces files', :js do
   let(:user) { create(:user) }
 
   before do
-    stub_feature_flags(refactor_blob_viewer: false) # This stub will be removed in https://gitlab.com/gitlab-org/gitlab/-/issues/349953
     sign_in(user)
   end
 
@@ -34,9 +33,9 @@ RSpec.describe 'Projects > Files > User replaces files', :js do
       expect(page).to have_content('.gitignore')
 
       click_on('Replace')
-      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
 
-      page.within('#modal-upload-blob') do
+      page.within('#modal-replace-blob') do
         fill_in(:commit_message, with: 'Replacement file commit message')
       end
 
@@ -70,9 +69,9 @@ RSpec.describe 'Projects > Files > User replaces files', :js do
       expect(page).to have_content(fork_message)
 
       click_on('Replace')
-      drop_in_dropzone(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
+      find(".upload-dropzone-card").drop(File.join(Rails.root, 'spec', 'fixtures', 'doc_sample.txt'))
 
-      page.within('#modal-upload-blob') do
+      page.within('#modal-replace-blob') do
         fill_in(:commit_message, with: 'Replacement file commit message')
       end
 

spec/frontend/repository/mock_data.js

@@ -12,6 +12,7 @@ export const simpleViewerMock = {
   ideEditPath: 'some_file.js/ide/edit',
   forkAndEditPath: 'some_file.js/fork/edit',
   ideForkAndEditPath: 'some_file.js/fork/ide',
+  forkAndViewPath: 'some_file.js/fork/view',
   environmentFormattedExternalUrl: '',
   environmentExternalUrlForRouteMap: '',
   canModifyBlob: true,

spec/graphql/types/repository/blob_type_spec.rb

@@ -42,6 +42,7 @@ RSpec.describe Types::Repository::BlobType do
       :external_storage_url,
       :fork_and_edit_path,
       :ide_fork_and_edit_path,
+      :fork_and_view_path,
       :language
     )
   end