Add a consolidated button to edit blobs

Add a dropdown based consolidated button to edit blobs in
Web IDE, single file editor and GitPod

Changelog: added

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

 <script>
-import { GlButton } from '@gitlab/ui';
-import { __ } from '~/locale';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
-import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 export default {
-  i18n: {
-    edit: __('Edit'),
-    webIde: __('Web IDE'),
-  },
   components: {
-    GlButton,
     WebIdeLink,
   },
-  mixins: [glFeatureFlagsMixin()],
   props: {
     showEditButton: {
       type: Boolean,
@@ -43,7 +34,6 @@ export default {
 
 <template>
   <web-ide-link
-    v-if="glFeatures.consolidatedEditButton"
     :show-edit-button="showEditButton"
     class="gl-mr-3"
     :edit-url="editPath"
@@ -53,26 +43,4 @@ export default {
     disable-fork-modal
     @edit="onEdit"
   />
-  <div v-else>
-    <gl-button
-      v-if="showEditButton"
-      class="gl-mr-2"
-      category="primary"
-      variant="confirm"
-      data-testid="edit"
-      @click="onEdit('simple')"
-    >
-      {{ $options.i18n.edit }}
-    </gl-button>
-
-    <gl-button
-      class="gl-mr-3"
-      category="primary"
-      variant="confirm"
-      data-testid="web-ide"
-      @click="onEdit('ide')"
-    >
-      {{ $options.i18n.webIde }}
-    </gl-button>
-  </div>
 </template>

app/controllers/projects/blob_controller.rb

@@ -45,7 +45,6 @@ class Projects::BlobController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:refactor_blob_viewer, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:highlight_js, @project, default_enabled: :yaml)
-    push_frontend_feature_flag(:consolidated_edit_button, @project, default_enabled: :yaml)
     push_licensed_feature(:file_locks) if @project.licensed_feature_available?(:file_locks)
   end
 

app/controllers/projects/tree_controller.rb

@@ -22,7 +22,6 @@ class Projects::TreeController < Projects::ApplicationController
     push_frontend_feature_flag(:refactor_blob_viewer, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:highlight_js, @project, default_enabled: :yaml)
     push_licensed_feature(:file_locks) if @project.licensed_feature_available?(:file_locks)
-    push_frontend_feature_flag(:consolidated_edit_button, @project, default_enabled: :yaml)
   end
 
   feature_category :source_code_management

app/controllers/projects_controller.rb

@@ -41,7 +41,6 @@ class ProjectsController < Projects::ApplicationController
     push_frontend_feature_flag(:increase_page_size_exponentially, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:new_dir_modal, @project, default_enabled: :yaml)
     push_licensed_feature(:file_locks) if @project.present? && @project.licensed_feature_available?(:file_locks)
-    push_frontend_feature_flag(:consolidated_edit_button, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:work_items, @project, default_enabled: :yaml)
   end
 

app/views/projects/blob/_header.html.haml

@@ -5,11 +5,7 @@
 
   .file-actions.gl-display-flex.gl-align-items-center.gl-flex-wrap.gl-md-justify-content-end<
     = render 'projects/blob/viewer_switcher', blob: blob unless blame
-    - if Feature.enabled?(:consolidated_edit_button, @project)
-      = render 'shared/web_ide_button', blob: blob
-    - else
-      = edit_blob_button(@project, @ref, @path, blob: blob)
-      = ide_edit_button(@project, @ref, @path, blob: blob)
+    = render 'shared/web_ide_button', blob: blob
     - if can_view_pipeline_editor?(@project) && @path == @project.ci_config_path_or_default
       = link_to "Pipeline Editor", project_ci_pipeline_editor_path(@project, branch_name: @ref), class: "btn gl-button btn-confirm-secondary gl-ml-3"
     .btn-group{ role: "group", class: ("gl-ml-3" if current_user) }>

config/feature_flags/development/consolidated_edit_button.yml

----
-name: consolidated_edit_button
-introduced_by_url: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/44311
-rollout_issue_url: https://gitlab.com/gitlab-org/gitlab/-/issues/270433
-milestone: '13.5'
-type: development
-group: group::editor
-default_enabled: false

qa/qa/page/file/show.rb

@@ -33,15 +33,10 @@ module QA
         end
 
         def click_edit
-          # TODO: remove this condition and else part once ff :consolidated_edit_button is enabled by default
-          if has_element?(:action_dropdown)
-            within_element(:action_dropdown) do
-              click_button(class: 'dropdown-toggle-split')
-              click_element(:edit_menu_item)
-              click_element(:edit_button)
-            end
-          else
-            click_on 'Edit'
+          within_element(:action_dropdown) do
+            click_button(class: 'dropdown-toggle-split')
+            click_element(:edit_menu_item)
+            click_element(:edit_button)
           end
         end
 

spec/features/projects/files/user_browses_lfs_files_spec.rb

@@ -75,22 +75,5 @@ RSpec.describe 'Projects > Files > User browses LFS files' do
         expect(page).to have_selector(:link_or_button, 'Edit in Web IDE')
       end
     end
-
-    context 'when feature flag :consolidated_edit_button is off' do
-      before do
-        stub_feature_flags(consolidated_edit_button: false)
-
-        click_link('files')
-        click_link('lfs')
-        click_link('lfs_object.iso')
-      end
-
-      it 'does not show single file edit link' do
-        page.within('.content') do
-          expect(page).to have_selector(:link_or_button, 'Web IDE')
-          expect(page).not_to have_css('button[data-testid="edit"')
-        end
-      end
-    end
   end
 end

spec/features/projects/files/user_edits_files_spec.rb

@@ -236,116 +236,5 @@ RSpec.describe 'Projects > Files > User edits files', :js do
         let(:project) { project2 }
       end
     end
-
-    context 'when feature flag :consolidated_edit_button is off' do
-      before do
-        stub_feature_flags(consolidated_edit_button: false)
-      end
-
-      context 'when an user does not have write access', :js do
-        before do
-          project2.add_reporter(user)
-          visit(project2_tree_path_root_ref)
-          wait_for_requests
-        end
-
-        it 'inserts a content of a file in a forked project', :sidekiq_might_not_need_inline do
-          set_default_button('edit')
-          click_link('.gitignore')
-          click_link_or_button('Edit')
-
-          expect_fork_prompt
-
-          click_link_or_button('Fork')
-
-          expect_fork_status
-
-          find('.file-editor', match: :first)
-
-          find('#editor')
-          set_editor_value('*.rbca')
-
-          expect(editor_value).to eq('*.rbca')
-        end
-
-        it 'opens the Web IDE in a forked project', :sidekiq_might_not_need_inline do
-          set_default_button('webide')
-          click_link('.gitignore')
-          click_link_or_button('Web IDE')
-
-          expect_fork_prompt
-
-          click_link_or_button('Fork')
-
-          expect_fork_status
-
-          expect(page).to have_css('.ide-sidebar-project-title', text: "#{project2.name} #{user.namespace.full_path}/#{project2.path}")
-          expect(page).to have_css('.ide .multi-file-tab', text: '.gitignore')
-        end
-
-        it 'commits an edited file in a forked project', :sidekiq_might_not_need_inline do
-          set_default_button('edit')
-          click_link('.gitignore')
-          click_link_or_button('Edit')
-
-          expect_fork_prompt
-
-          click_link_or_button('Fork')
-
-          expect_fork_status
-
-          find('.file-editor', match: :first)
-
-          find('#editor')
-          set_editor_value('*.rbca')
-          fill_in(:commit_message, with: 'New commit message', visible: true)
-          click_button('Commit changes')
-
-          fork = user.fork_of(project2.reload)
-
-          expect(current_path).to eq(project_new_merge_request_path(fork))
-
-          wait_for_requests
-
-          expect(page).to have_content('New commit message')
-        end
-
-        context 'when the user already had a fork of the project', :js do
-          let!(:forked_project) { fork_project(project2, user, namespace: user.namespace, repository: true) }
-
-          before do
-            visit(project2_tree_path_root_ref)
-            wait_for_requests
-          end
-
-          it 'links to the forked project for editing', :sidekiq_might_not_need_inline do
-            set_default_button('edit')
-            click_link('.gitignore')
-            click_link_or_button('Edit')
-
-            expect(page).not_to have_link('Fork')
-
-            find('#editor')
-            set_editor_value('*.rbca')
-            fill_in(:commit_message, with: 'Another commit', visible: true)
-            click_button('Commit changes')
-
-            fork = user.fork_of(project2)
-
-            expect(current_path).to eq(project_new_merge_request_path(fork))
-
-            wait_for_requests
-
-            expect(page).to have_content('Another commit')
-            expect(page).to have_content("From #{forked_project.full_path}")
-            expect(page).to have_content("into #{project2.full_path}")
-          end
-
-          it_behaves_like 'unavailable for an archived project' do
-            let(:project) { project2 }
-          end
-        end
-      end
-    end
   end
 end

spec/frontend/repository/components/blob_edit_spec.js

-import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import BlobEdit from '~/repository/components/blob_edit.vue';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
@@ -13,17 +12,12 @@ const DEFAULT_PROPS = {
 describe('BlobEdit component', () => {
   let wrapper;
 
-  const createComponent = (consolidatedEditButton = false, props = {}) => {
+  const createComponent = (props = {}) => {
     wrapper = shallowMount(BlobEdit, {
       propsData: {
         ...DEFAULT_PROPS,
         ...props,
       },
-      provide: {
-        glFeatures: {
-          consolidatedEditButton,
-        },
-      },
     });
   };
 
@@ -32,9 +26,7 @@ describe('BlobEdit component', () => {
     wrapper = null;
   });
 
-  const findButtons = () => wrapper.findAll(GlButton);
   const findEditButton = () => wrapper.find('[data-testid="edit"]');
-  const findWebIdeButton = () => wrapper.find('[data-testid="web-ide"]');
   const findWebIdeLink = () => wrapper.find(WebIdeLink);
 
   it('renders component', () => {
@@ -48,28 +40,8 @@ describe('BlobEdit component', () => {
     });
   });
 
-  it('renders both buttons', () => {
-    createComponent();
-
-    expect(findButtons()).toHaveLength(2);
-  });
-
-  it('renders the Edit button', () => {
-    createComponent();
-
-    expect(findEditButton().text()).toBe('Edit');
-    expect(findEditButton()).not.toBeDisabled();
-  });
-
-  it('renders the Web IDE button', () => {
-    createComponent();
-
-    expect(findWebIdeButton().text()).toBe('Web IDE');
-    expect(findWebIdeButton()).not.toBeDisabled();
-  });
-
   it('renders WebIdeLink component', () => {
-    createComponent(true);
+    createComponent();
 
     const { editPath: editUrl, webIdePath: webIdeUrl, needsToFork } = DEFAULT_PROPS;
 
@@ -86,13 +58,13 @@ describe('BlobEdit component', () => {
     const showEditButton = false;
 
     it('renders WebIdeLink component without an edit button', () => {
-      createComponent(true, { showEditButton });
+      createComponent({ showEditButton });
 
       expect(findWebIdeLink().props()).toMatchObject({ showEditButton });
     });
 
     it('does not render an Edit button', () => {
-      createComponent(false, { showEditButton });
+      createComponent({ showEditButton });
 
       expect(findEditButton().exists()).toBe(false);
     });