Merge branch '34820-snippets-view-vue-feature-flag' into 'master'

Introduced the snippets_vue feature flag

See merge request gitlab-org/gitlab!21088

app/assets/javascripts/pages/snippets/show/index.js

@@ -5,9 +5,11 @@ import initNotes from '~/init_notes';
 import snippetEmbed from '~/snippet/snippet_embed';
 
 document.addEventListener('DOMContentLoaded', () => {
-  new LineHighlighter(); // eslint-disable-line no-new
-  new BlobViewer(); // eslint-disable-line no-new
-  initNotes();
-  new ZenMode(); // eslint-disable-line no-new
-  snippetEmbed();
+  if (!gon.features.snippetsVue) {
+    new LineHighlighter(); // eslint-disable-line no-new
+    new BlobViewer(); // eslint-disable-line no-new
+    initNotes();
+    new ZenMode(); // eslint-disable-line no-new
+    snippetEmbed();
+  }
 });

app/views/snippets/show.html.haml

@@ -4,13 +4,16 @@
 - breadcrumb_title @snippet.to_reference
 - page_title "#{@snippet.title} (#{@snippet.to_reference})", _("Snippets")
 
-= render 'shared/snippets/header'
+- if Feature.enabled?(:snippets_vue)
+  #js-snippet-view{ 'data-qa-selector': 'snippet_view' }
+- else
+  = render 'shared/snippets/header'
 
-.personal-snippets
-  %article.file-holder.snippet-file-content
-    = render 'shared/snippets/blob'
+  .personal-snippets
+    %article.file-holder.snippet-file-content
+      = render 'shared/snippets/blob'
 
-  .row-content-block.top-block.content-component-block
-    = render 'award_emoji/awards_block', awardable: @snippet, inline: true
+    .row-content-block.top-block.content-component-block
+      = render 'award_emoji/awards_block', awardable: @snippet, inline: true
 
-  #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false
+    #notes.limited-width-notes= render "shared/notes/notes_with_form", :autocomplete => false

lib/gitlab/gon_helper.rb

@@ -42,6 +42,7 @@ module Gitlab
       # Initialize gon.features with any flags that should be
       # made globally available to the frontend
       push_frontend_feature_flag(:suppress_ajax_navigation_errors, default_enabled: true)
+      push_frontend_feature_flag(:snippets_vue, default_enabled: false)
     end
 
     # Exposes the state of a feature flag to the frontend code.

spec/features/snippets/internal_snippet_spec.rb

@@ -5,6 +5,10 @@ require 'spec_helper'
 describe 'Internal Snippets', :js do
   let(:internal_snippet) { create(:personal_snippet, :internal) }
 
+  before do
+    stub_feature_flags(snippets_vue: false)
+  end
+
   describe 'normal user' do
     before do
       sign_in(create(:user))

spec/features/snippets/notes_on_personal_snippets_spec.rb

@@ -16,6 +16,7 @@ describe 'Comments on personal snippets', :js do
   let!(:other_note) { create(:note_on_personal_snippet) }
 
   before do
+    stub_feature_flags(snippets_vue: false)
     sign_in user
     visit snippet_path(snippet)
 

spec/features/snippets/private_snippets_spec.rb

@@ -6,6 +6,7 @@ describe 'Private Snippets', :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(snippets_vue: false)
     sign_in(user)
   end
 

spec/features/snippets/public_snippets_spec.rb

@@ -3,6 +3,10 @@
 require 'spec_helper'
 
 describe 'Public Snippets', :js do
+  before do
+    stub_feature_flags(snippets_vue: false)
+  end
+
   it 'Unauthenticated user should see public snippets' do
     public_snippet = create(:personal_snippet, :public)
 

spec/features/snippets/show_spec.rb

@@ -6,6 +6,10 @@ describe 'Snippet', :js do
   let(:project) { create(:project, :repository) }
   let(:snippet) { create(:personal_snippet, :public, file_name: file_name, content: content) }
 
+  before do
+    stub_feature_flags(snippets_vue: false)
+  end
+
   context 'Ruby file' do
     let(:file_name) { 'popen.rb' }
     let(:content) { project.repository.blob_at('master', 'files/ruby/popen.rb').data }

spec/features/snippets/spam_snippets_spec.rb

@@ -7,6 +7,7 @@ describe 'User creates snippet', :js do
 
   before do
     stub_feature_flags(allow_possible_spam: false)
+    stub_feature_flags(snippets_vue: false)
     stub_env('IN_MEMORY_APPLICATION_SETTINGS', 'false')
 
     Gitlab::CurrentSettings.update!(

spec/features/snippets/user_creates_snippet_spec.rb

@@ -8,6 +8,7 @@ describe 'User creates snippet', :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(snippets_vue: false)
     sign_in(user)
     visit new_snippet_path
   end

spec/features/snippets/user_deletes_snippet_spec.rb

@@ -10,6 +10,8 @@ describe 'User deletes snippet' do
   before do
     sign_in(user)
 
+    stub_feature_flags(snippets_vue: false)
+
     visit snippet_path(snippet)
   end
 

spec/features/snippets/user_edits_snippet_spec.rb

@@ -12,6 +12,7 @@ describe 'User edits snippet', :js do
   let(:snippet) { create(:personal_snippet, :public, file_name: file_name, content: content, author: user) }
 
   before do
+    stub_feature_flags(snippets_vue: false)
     sign_in(user)
 
     visit edit_snippet_path(snippet)

spec/features/snippets_spec.rb

@@ -6,11 +6,38 @@ describe 'Snippets' do
   context 'when the project has snippets' do
     let(:project) { create(:project, :public) }
     let!(:snippets) { create_list(:project_snippet, 2, :public, author: project.owner, project: project) }
+
     before do
       allow(Snippet).to receive(:default_per_page).and_return(1)
-      visit snippets_path(username: project.owner.username)
+
+      visit project_snippets_path(project)
     end
 
     it_behaves_like 'paginated snippets'
   end
+
+  describe 'rendering engine' do
+    let_it_be(:snippet) { create(:personal_snippet, :public) }
+    let(:snippets_vue_feature_flag_enabled) { true }
+
+    before do
+      stub_feature_flags(snippets_vue: snippets_vue_feature_flag_enabled)
+
+      visit snippet_path(snippet)
+    end
+
+    it 'renders Vue application' do
+      expect(page).to have_selector('#js-snippet-view')
+      expect(page).not_to have_selector('.personal-snippets')
+    end
+
+    context 'when feature flag is disabled' do
+      let(:snippets_vue_feature_flag_enabled) { false }
+
+      it 'renders HAML application and not Vue' do
+        expect(page).not_to have_selector('#js-snippet-view')
+        expect(page).to have_selector('.personal-snippets')
+      end
+    end
+  end
 end