Enable feature flag and add vue app mountpoint

 for project package list

ee/app/helpers/ee/packages_helper.rb

@@ -5,5 +5,9 @@ module EE
     def package_sort_path(options = {})
       "#{request.path}?#{options.to_param}"
     end
+
+    def vue_package_list_enabled_for?(subject)
+      ::Feature.enabled?(:vue_package_list, subject)
+    end
   end
 end

ee/app/views/projects/packages/packages/_legacy_package_list.html.haml

+- sort_value = @sort
+- sort_title = packages_sort_option_title(sort_value)
+
+- if @packages.any?
+  .d-flex.justify-content-end
+    .dropdown.inline.prepend-top-default.append-bottom-default.package-sort-dropdown
+      .btn-group{ role: 'group' }
+        .btn-group{ role: 'group' }
+          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
+            = sort_title
+            = icon('chevron-down')
+          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
+            %li
+              = sortable_item(sort_title_created_date,      package_sort_path(sort: sort_value_recently_created),  sort_title)
+              = sortable_item(sort_title_name,              package_sort_path(sort: sort_value_name_desc),         sort_title)
+              = sortable_item(sort_title_version,           package_sort_path(sort: sort_value_version_desc),      sort_title)
+              = sortable_item(sort_title_type,              package_sort_path(sort: sort_value_type_desc),         sort_title)
+        = packages_sort_direction_button(sort_value)
+
+  .table-holder
+    .gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
+      .table-section.section-30{ role: 'rowheader' }
+        = _('Name')
+      .table-section.section-20{ role: 'rowheader' }
+        = _('Version')
+      .table-section.section-20{ role: 'rowheader' }
+        = _('Type')
+      .table-section.section-20{ role: 'rowheader' }
+        = _('Created')
+      .table-section.section-10{ role: 'rowheader' }
+    - @packages.each do |package|
+      .gl-responsive-table-row.package-row.px-2{ data: { qa_selector: "package_row" } }
+        .table-section.section-30
+          .table-mobile-header{ role: "rowheader" }= _("Name")
+          .table-mobile-content.flex-truncate-parent
+            = link_to package.name, project_package_path(@project, package), class: 'flex-truncate-child', data: { qa_selector: "package_link" }
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Version")
+          .table-mobile-content
+            = package.version
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Type")
+          .table-mobile-content
+            = package.package_type
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Created")
+          .table-mobile-content
+            = time_ago_with_tooltip(package.created_at)
+        .table-section.section-10
+          .table-mobile-header{ role: "rowheader" }
+          .table-mobile-content
+            - if can_destroy_package
+              .pull-right
+                = link_to project_package_path(@project, package), method: :delete, data: { confirm: _("Are you sure?") }, class: "btn btn-grouped btn-remove", title: _('Delete Package') do
+                  = icon('trash')
+    = paginate @packages, theme: "gitlab"
+- else
+  .row.empty-state
+    .col-12
+      = render 'shared/packages/no_packages'

ee/app/views/projects/packages/packages/index.html.haml

-- sort_value = @sort
-- sort_title = packages_sort_option_title(sort_value)
 - page_title _("Packages")
 - can_destroy_package = can?(current_user, :destroy_package, @project)
 
-- if @packages.any?
-  .d-flex.justify-content-end
-    .dropdown.inline.prepend-top-default.append-bottom-default.package-sort-dropdown
-      .btn-group{ role: 'group' }
-        .btn-group{ role: 'group' }
-          %button.dropdown-menu-toggle{ type: 'button', data: { toggle: 'dropdown', display: 'static' }, class: 'btn btn-default' }
-            = sort_title
-            = icon('chevron-down')
-          %ul.dropdown-menu.dropdown-menu-right.dropdown-menu-selectable.dropdown-menu-sort
-            %li
-              = sortable_item(sort_title_created_date,      package_sort_path(sort: sort_value_recently_created),  sort_title)
-              = sortable_item(sort_title_name,              package_sort_path(sort: sort_value_name_desc),         sort_title)
-              = sortable_item(sort_title_version,           package_sort_path(sort: sort_value_version_desc),      sort_title)
-              = sortable_item(sort_title_type,              package_sort_path(sort: sort_value_type_desc),         sort_title)
-        = packages_sort_direction_button(sort_value)
+- if vue_package_list_enabled_for?(@project)
+  .row
+    .col-12
+      #js-vue-packages-list{ data: { project_id: @project.id, 'can_destroy_package' => can_destroy_package } }
 
-  .table-holder
-    .gl-responsive-table-row.table-row-header.bg-secondary-50.px-2.border-top{ role: 'row' }
-      .table-section.section-30{ role: 'rowheader' }
-        = _('Name')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Version')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Type')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Created')
-      .table-section.section-10{ role: 'rowheader' }
-    - @packages.each do |package|
-      .gl-responsive-table-row.package-row.px-2{ data: { qa_selector: "package_row" } }
-        .table-section.section-30
-          .table-mobile-header{ role: "rowheader" }= _("Name")
-          .table-mobile-content.flex-truncate-parent
-            = link_to package.name, project_package_path(@project, package), class: 'flex-truncate-child', data: { qa_selector: "package_link" }
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Version")
-          .table-mobile-content
-            = package.version
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Type")
-          .table-mobile-content
-            = package.package_type
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Created")
-          .table-mobile-content
-            = time_ago_with_tooltip(package.created_at)
-        .table-section.section-10
-          .table-mobile-header{ role: "rowheader" }
-          .table-mobile-content
-            - if can_destroy_package
-              .pull-right
-                = link_to project_package_path(@project, package), method: :delete, data: { confirm: _("Are you sure?") }, class: "btn btn-grouped btn-remove", title: _('Delete Package') do
-                  = icon('trash')
-    = paginate @packages, theme: "gitlab"
 - else
-  .row.empty-state
-    .col-12
-      = render 'shared/packages/no_packages'
+  = render "legacy_package_list", can_destroy_package: can_destroy_package

ee/spec/features/projects/packages_spec.rb

@@ -14,6 +14,11 @@ describe 'Packages' do
     stub_licensed_features(packages: true)
   end
 
+  context 'with vue_package_list feature flag disabled' do
+    before do
+      stub_feature_flags(vue_package_list: false)
+    end
+
     context 'packages feature is not available because of license' do
       before do
         stub_licensed_features(packages: false)
@@ -155,6 +160,18 @@ describe 'Packages' do
         expect(last_package).to include(npm_package.name)
       end
     end
+  end
+
+  context 'wtih vue_package_list ff enabled' do
+    before do
+      stub_feature_flags(vue_package_list: true)
+      visit_project_packages
+    end
+
+    it 'load an empty placeholder' do
+      expect(page.has_selector?('#js-vue-packages-list')).to be_truthy
+    end
+  end
 
   def visit_project_packages
     visit project_packages_path(project)

qa/qa/ee/page/project/packages/index.rb

@@ -6,7 +6,7 @@ module QA
       module Project
         module Packages
           class Index < QA::Page::Base
-            view 'ee/app/views/projects/packages/packages/index.html.haml' do
+            view 'ee/app/views/projects/packages/packages/_legacy_package_list.html.haml' do
               element :package_row
               element :package_link
             end