Change primary button for editing on files

Add :web_ide_primary_edit feature flag and snowplow tracking
for change in the usage of Edit and Web IDE buttons.

app/helpers/blob_helper.rb

@@ -48,24 +48,40 @@ module BlobHelper
     return unless blob = readable_blob(options, path, project, ref)
 
     common_classes = "btn btn-primary js-edit-blob ml-2 #{options[:extra_class]}"
+    data = { track_event: 'click_edit', track_label: 'Edit' }
+
+    if Feature.enabled?(:web_ide_primary_edit, project.group)
+      common_classes += " btn-inverted"
+      data[:track_property] = 'secondary'
+    end
 
     edit_button_tag(blob,
                     common_classes,
                     _('Edit'),
                     edit_blob_path(project, ref, path, options),
                     project,
-                    ref)
+                    ref,
+                    data)
   end
 
   def ide_edit_button(project = @project, ref = @ref, path = @path, blob:)
     return unless blob
 
+    common_classes = 'btn btn-primary ide-edit-button ml-2'
+    data = { track_event: 'click_edit_ide', track_label: 'Web IDE' }
+
+    unless Feature.enabled?(:web_ide_primary_edit, project.group)
+      common_classes += " btn-inverted"
+      data[:track_property] = 'secondary'
+    end
+
     edit_button_tag(blob,
-                    'btn btn-inverted btn-primary ide-edit-button ml-2',
+                    common_classes,
                     _('Web IDE'),
                     ide_edit_path(project, ref, path),
                     project,
-                    ref)
+                    ref,
+                    data)
   end
 
   def modify_file_button(project = @project, ref = @ref, path = @path, blob:, label:, action:, btn_class:, modal_type:)
@@ -325,16 +341,16 @@ module BlobHelper
     button_tag(button_text, class: "#{common_classes} disabled has-tooltip", title: _('You can only edit files when you are on a branch'), data: { container: 'body' })
   end
 
-  def edit_link_tag(link_text, edit_path, common_classes)
-    link_to link_text, edit_path, class: "#{common_classes} btn-sm"
+  def edit_link_tag(link_text, edit_path, common_classes, data)
+    link_to link_text, edit_path, class: "#{common_classes} btn-sm", data: data
   end
 
-  def edit_button_tag(blob, common_classes, text, edit_path, project, ref)
+  def edit_button_tag(blob, common_classes, text, edit_path, project, ref, data)
     if !on_top_of_branch?(project, ref)
       edit_disabled_button_tag(text, common_classes)
       # This condition only applies to users who are logged in
     elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
-      edit_link_tag(text, edit_path, common_classes)
+      edit_link_tag(text, edit_path, common_classes, data)
     elsif can?(current_user, :fork_project, project) && can?(current_user, :create_merge_request_in, project)
       edit_fork_button_tag(common_classes, project, text, edit_blob_fork_params(edit_path))
     end

spec/helpers/blob_helper_spec.rb

@@ -30,6 +30,8 @@ RSpec.describe BlobHelper do
     let(:namespace) { create(:namespace, name: 'gitlab') }
     let(:project) { create(:project, :repository, namespace: namespace) }
 
+    subject(:link) { helper.edit_blob_button(project, 'master', 'README.md') }
+
     before do
       allow(helper).to receive(:current_user).and_return(nil)
       allow(helper).to receive(:can?).and_return(true)
@@ -53,15 +55,49 @@ RSpec.describe BlobHelper do
     end
 
     it 'returns a link with the proper route' do
-      link = helper.edit_blob_button(project, 'master', 'README.md')
-
       expect(Capybara.string(link).find_link('Edit')[:href]).to eq("/#{project.full_path}/-/edit/master/README.md")
     end
 
     it 'returns a link with the passed link_opts on the expected route' do
-      link = helper.edit_blob_button(project, 'master', 'README.md', link_opts: { mr_id: 10 })
+      link_with_mr = helper.edit_blob_button(project, 'master', 'README.md', link_opts: { mr_id: 10 })
 
-      expect(Capybara.string(link).find_link('Edit')[:href]).to eq("/#{project.full_path}/-/edit/master/README.md?mr_id=10")
+      expect(Capybara.string(link_with_mr).find_link('Edit')[:href]).to eq("/#{project.full_path}/-/edit/master/README.md?mr_id=10")
+    end
+
+    context 'when edit is the primary button' do
+      before do
+        stub_feature_flags(web_ide_primary_edit: false)
+      end
+
+      it 'is rendered as primary' do
+        expect(link).not_to match(/btn-inverted/)
+      end
+
+      it 'passes on primary tracking attributes' do
+        parsed_link = Capybara.string(link).find_link('Edit')
+
+        expect(parsed_link[:'data-track-event']).to eq("click_edit")
+        expect(parsed_link[:'data-track-label']).to eq("Edit")
+        expect(parsed_link[:'data-track-property']).to eq(nil)
+      end
+    end
+
+    context 'when Web IDE is the primary button' do
+      before do
+        stub_feature_flags(web_ide_primary_edit: true)
+      end
+
+      it 'is rendered as inverted' do
+        expect(link).to match(/btn-inverted/)
+      end
+
+      it 'passes on secondary tracking attributes' do
+        parsed_link = Capybara.string(link).find_link('Edit')
+
+        expect(parsed_link[:'data-track-event']).to eq("click_edit")
+        expect(parsed_link[:'data-track-label']).to eq("Edit")
+        expect(parsed_link[:'data-track-property']).to eq("secondary")
+      end
     end
   end
 
@@ -285,6 +321,62 @@ RSpec.describe BlobHelper do
     end
   end
 
+  describe `#ide_edit_button` do
+    let_it_be(:namespace) { create(:namespace, name: 'gitlab') }
+    let_it_be(:project) { create(:project, :repository, namespace: namespace) }
+    let_it_be(:current_user) { create(:user) }
+    let(:can_push_code) { true }
+    let(:blob) { project.repository.blob_at('refs/heads/master', 'README.md') }
+
+    subject(:link) { helper.ide_edit_button(project, 'master', 'README.md', blob: blob) }
+
+    before do
+      allow(helper).to receive(:current_user).and_return(current_user)
+      allow(helper).to receive(:can?).with(current_user, :push_code, project).and_return(can_push_code)
+      allow(helper).to receive(:can_collaborate_with_project?).and_return(true)
+    end
+
+    it 'returns a link with a Web IDE route' do
+      expect(Capybara.string(link).find_link('Web IDE')[:href]).to eq("/-/ide/project/#{project.full_path}/edit/master/-/README.md")
+    end
+
+    context 'when edit is the primary button' do
+      before do
+        stub_feature_flags(web_ide_primary_edit: false)
+      end
+
+      it 'is rendered as inverted' do
+        expect(link).to match(/btn-inverted/)
+      end
+
+      it 'passes on secondary tracking attributes' do
+        parsed_link = Capybara.string(link).find_link('Web IDE')
+
+        expect(parsed_link[:'data-track-event']).to eq("click_edit_ide")
+        expect(parsed_link[:'data-track-label']).to eq("Web IDE")
+        expect(parsed_link[:'data-track-property']).to eq("secondary")
+      end
+    end
+
+    context 'when Web IDE is the primary button' do
+      before do
+        stub_feature_flags(web_ide_primary_edit: true)
+      end
+
+      it 'is rendered as primary' do
+        expect(link).not_to match(/btn-inverted/)
+      end
+
+      it 'passes on primary tracking attributes' do
+        parsed_link = Capybara.string(link).find_link('Web IDE')
+
+        expect(parsed_link[:'data-track-event']).to eq("click_edit_ide")
+        expect(parsed_link[:'data-track-label']).to eq("Web IDE")
+        expect(parsed_link[:'data-track-property']).to eq(nil)
+      end
+    end
+  end
+
   describe '#ide_edit_path' do
     let(:project) { create(:project) }
     let(:current_user) { create(:user) }