Add Vue Issuables List to Project List

app/controllers/projects/issues_controller.rb

@@ -47,6 +47,7 @@ class Projects::IssuesController < Projects::ApplicationController
   before_action do
     push_frontend_feature_flag(:vue_issuable_sidebar, project.group)
     push_frontend_feature_flag(:tribute_autocomplete, @project)
+    push_frontend_feature_flag(:vue_issuables_list, project)
   end
 
   before_action only: :show do
@@ -55,6 +56,10 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:confidential_apollo_sidebar, @project)
   end
 
+  before_action only: :index do
+    push_frontend_feature_flag(:scoped_labels, @project)
+  end
+
   around_action :allow_gitaly_ref_name_caching, only: [:discussions]
 
   respond_to :html

app/views/projects/issues/_issues.html.haml

-- empty_state_path = local_assigns.fetch(:empty_state_path, 'shared/empty_states/issues')
+- if Feature.enabled?(:vue_issuables_list, @project)
+  .js-issuables-list{ data: { endpoint: expose_url(api_v4_projects_issues_path(id: @project.id)),
+    'can-bulk-edit': @can_bulk_update.to_json,
+    'empty-svg-path': image_path('illustrations/issues.svg'),
+    'sort-key': @sort } }
+- else
+  - empty_state_path = local_assigns.fetch(:empty_state_path, 'shared/empty_states/issues')
+  %ul.content-list.issues-list.issuable-list{ class: ("manual-ordering" if @sort == 'relative_position') }
+    = render partial: "projects/issues/issue", collection: @issues
+    - if @issues.blank?
+      = render empty_state_path
 
-%ul.content-list.issues-list.issuable-list{ class: ("manual-ordering" if @sort == 'relative_position') }
-  = render partial: "projects/issues/issue", collection: @issues
-  - if @issues.blank?
-    = render empty_state_path
-
-- if @issues.present?
-  = paginate @issues, theme: "gitlab", total_pages: @total_pages
+  - if @issues.present?
+    = paginate @issues, theme: "gitlab", total_pages: @total_pages

ee/spec/features/issues/issue_weight_spec.rb

@@ -5,6 +5,10 @@ require 'spec_helper'
 RSpec.describe 'Issue weight', :js do
   let(:project) { create(:project, :public) }
 
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
   it 'shows weight on issue list row' do
     create(:issue, project: project, weight: 2)
 

ee/spec/features/issues/service_desk_spec.rb

@@ -7,6 +7,8 @@ RSpec.describe 'Service Desk Issue Tracker', :js do
   let(:user) { create(:user) }
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+
     allow(License).to receive(:feature_available?).and_call_original
     allow(License).to receive(:feature_available?).with(:service_desk).and_return(true)
     allow(Gitlab::IncomingEmail).to receive(:enabled?).and_return(true)

spec/features/groups/empty_states_spec.rb

@@ -7,6 +7,8 @@ RSpec.describe 'Group empty states' do
   let(:user) { create(:group_member, :developer, user: create(:user), group: group ).user }
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+
     sign_in(user)
   end
 

spec/features/issuables/issuable_list_spec.rb

@@ -2,13 +2,15 @@
 
 require 'spec_helper'
 
-RSpec.describe 'issuable list' do
+RSpec.describe 'issuable list', :js do
   let(:project) { create(:project) }
   let(:user)    { create(:user) }
 
   issuable_types = [:issue, :merge_request]
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+    # something is going on
     project.add_user(user, :developer)
     sign_in(user)
     issuable_types.each { |type| create_issuables(type) }

spec/features/issuables/sorting_list_spec.rb

@@ -10,6 +10,10 @@ RSpec.describe 'Sort Issuable List' do
   let(:first_updated_issuable) { issuables.order_updated_asc.first }
   let(:last_updated_issuable) { issuables.order_updated_desc.first }
 
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
   context 'for merge requests' do
     include MergeRequestHelpers
 

spec/features/issues/bulk_assignment_labels_spec.rb

@@ -13,6 +13,9 @@ RSpec.describe 'Issues > Labels bulk assignment' do
 
   context 'as an allowed user', :js do
     before do
+      # Make sure that issuables list FF is not turned on.
+      stub_feature_flags(vue_issuables_list: false)
+
       project.add_maintainer(user)
 
       sign_in user

spec/features/issues/filtered_search/filter_issues_spec.rb

@@ -26,6 +26,8 @@ RSpec.describe 'Filter issues', :js do
   end
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+
     project.add_maintainer(user)
 
     create(:issue, project: project, author: user2, title: "Bug report 1")

spec/features/issues/update_issues_spec.rb

@@ -8,6 +8,7 @@ RSpec.describe 'Multiple issue updating from issues#index', :js do
   let!(:user)      { create(:user)}
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
     project.add_maintainer(user)
     sign_in(user)
   end

spec/features/issues/user_filters_issues_spec.rb

@@ -7,6 +7,8 @@ RSpec.describe 'User filters issues' do
   let_it_be(:project) { create(:project_empty_repo, :public) }
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+
     %w[foobar barbaz].each do |title|
       create(:issue,
              author: user,

spec/features/issues/user_sees_breadcrumb_links_spec.rb

@@ -7,6 +7,8 @@ RSpec.describe 'New issue breadcrumb' do
   let(:user) { project.creator }
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+
     sign_in(user)
     visit(new_project_issue_path(project))
   end

spec/features/issues/user_sees_empty_state_spec.rb

@@ -6,6 +6,10 @@ RSpec.describe 'Issues > User sees empty state' do
   let_it_be(:project) { create(:project, :public) }
   let_it_be(:user) { project.creator }
 
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
   shared_examples_for 'empty state with filters' do
     it 'user sees empty state with filters' do
       create(:issue, author: user, project: project)

spec/features/issues/user_sorts_issues_spec.rb

@@ -16,6 +16,8 @@ RSpec.describe "User sorts issues" do
   let_it_be(:later_due_milestone) { create(:milestone, project: project, due_date: '2013-12-12') }
 
   before do
+    stub_feature_flags(vue_issuables_list: false)
+
     create_list(:award_emoji, 2, :upvote, awardable: issue1)
     create_list(:award_emoji, 2, :downvote, awardable: issue2)
     create(:award_emoji, :downvote, awardable: issue1)

spec/features/issues/user_views_issues_spec.rb

@@ -9,6 +9,10 @@ RSpec.describe "User views issues" do
 
   let_it_be(:user) { create(:user) }
 
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
   shared_examples "opens issue from list" do
     it "opens issue" do
       click_link(issue.title)
@@ -116,4 +120,24 @@ RSpec.describe "User views issues" do
   context "when not signed in" do
     include_examples "public project"
   end
+
+  context 'when vue_issuables_list feature is enabled', :js do
+    before do
+      stub_feature_flags(vue_issuables_list: true)
+    end
+
+    context 'when signed in' do
+      before do
+        project.add_developer(user)
+        sign_in(user)
+      end
+
+      include_examples "public project"
+      include_examples "internal project"
+    end
+
+    context 'when not signed in' do
+      include_examples "public project"
+    end
+  end
 end

spec/features/projects/labels/issues_sorted_by_priority_spec.rb

@@ -13,6 +13,10 @@ RSpec.describe 'Issue prioritization' do
   let(:label_4) { create(:label, title: 'label_4', project: project, priority: 4) }
   let(:label_5) { create(:label, title: 'label_5', project: project) } # no priority
 
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
   # According to https://gitlab.com/gitlab-org/gitlab-foss/issues/14189#note_4360653
   context 'when issues have one label' do
     it 'Are sorted properly' do

spec/features/projects/user_sees_sidebar_spec.rb

@@ -6,6 +6,10 @@ RSpec.describe 'Projects > User sees sidebar' do
   let(:user) { create(:user) }
   let(:project) { create(:project, :private, public_builds: false, namespace: user.namespace) }
 
+  before do
+    stub_feature_flags(vue_issuables_list: false)
+  end
+
   # NOTE: See documented behaviour https://design.gitlab.com/regions/navigation#contextual-navigation
   context 'on different viewports', :js do
     include MobileHelpers