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,145 +14,162 @@ describe 'Packages' do
     stub_licensed_features(packages: true)
   end
 
-  context 'packages feature is not available because of license' do
+  context 'with vue_package_list feature flag disabled' do
     before do
-      stub_licensed_features(packages: false)
+      stub_feature_flags(vue_package_list: false)
     end
 
-    it 'gives 404' do
-      visit_project_packages
+    context 'packages feature is not available because of license' do
+      before do
+        stub_licensed_features(packages: false)
+      end
 
-      expect(status_code).to eq(404)
-    end
-  end
+      it 'gives 404' do
+        visit_project_packages
 
-  context 'packages feature is disabled by config' do
-    before do
-      allow(Gitlab.config.packages).to receive(:enabled).and_return(false)
+        expect(status_code).to eq(404)
+      end
     end
 
-    it 'gives 404' do
-      visit_project_packages
+    context 'packages feature is disabled by config' do
+      before do
+        allow(Gitlab.config.packages).to receive(:enabled).and_return(false)
+      end
+
+      it 'gives 404' do
+        visit_project_packages
 
-      expect(status_code).to eq(404)
+        expect(status_code).to eq(404)
+      end
     end
-  end
 
-  context 'when there are no packages' do
-    it 'shows no packages message' do
-      visit_project_packages
+    context 'when there are no packages' do
+      it 'shows no packages message' do
+        visit_project_packages
 
-      expect(page).to have_content 'There are no packages yet'
+        expect(page).to have_content 'There are no packages yet'
+      end
     end
-  end
 
-  context 'when there are packages' do
-    let!(:package) { create(:maven_package, project: project) }
+    context 'when there are packages' do
+      let!(:package) { create(:maven_package, project: project) }
 
-    before do
-      visit_project_packages
-    end
+      before do
+        visit_project_packages
+      end
 
-    it 'shows list of packages' do
-      expect(page).to have_content(package.name)
-      expect(page).to have_content(package.version)
-    end
+      it 'shows list of packages' do
+        expect(page).to have_content(package.name)
+        expect(page).to have_content(package.version)
+      end
 
-    it 'hides a package without a version from the list' do
-      package.update!(version: nil)
+      it 'hides a package without a version from the list' do
+        package.update!(version: nil)
 
-      visit_project_packages
+        visit_project_packages
 
-      expect(page).not_to have_content(package.name)
-    end
+        expect(page).not_to have_content(package.name)
+      end
 
-    it 'shows a single package', :js do
-      click_on package.name
+      it 'shows a single package', :js do
+        click_on package.name
 
-      expect(page).to have_content(package.name)
-      expect(page).to have_content(package.version)
+        expect(page).to have_content(package.name)
+        expect(page).to have_content(package.version)
 
-      package.package_files.each do |package_file|
-        expect(page).to have_content(package_file.file_name)
+        package.package_files.each do |package_file|
+          expect(page).to have_content(package_file.file_name)
+        end
       end
-    end
 
-    it 'removes package' do
-      click_link 'Delete Package'
+      it 'removes package' do
+        click_link 'Delete Package'
 
-      expect(page).to have_content 'Package was removed'
-      expect(page).not_to have_content(package.name)
+        expect(page).to have_content 'Package was removed'
+        expect(page).not_to have_content(package.name)
+      end
     end
-  end
 
-  context 'sorting when there are packages' do
-    let!(:aaa_package) do
-      create(
-        :maven_package,
-        name: 'aaa/company/app/my-app',
-        version: '1.0-SNAPSHOT',
-        project: project)
-    end
+    context 'sorting when there are packages' do
+      let!(:aaa_package) do
+        create(
+          :maven_package,
+          name: 'aaa/company/app/my-app',
+          version: '1.0-SNAPSHOT',
+          project: project)
+      end
 
-    let!(:bbb_package) do
-      create(
-        :maven_package,
-        name: 'bbb/company/app/my-app',
-        version: '1.1-SNAPSHOT',
-        project: project)
-    end
+      let!(:bbb_package) do
+        create(
+          :maven_package,
+          name: 'bbb/company/app/my-app',
+          version: '1.1-SNAPSHOT',
+          project: project)
+      end
 
-    it 'sorts by created date descending' do
-      visit project_packages_path(project, sort: sort_value_created_date)
-      expect(first_package).to include(bbb_package.name)
-      expect(last_package).to include(aaa_package.name)
-    end
+      it 'sorts by created date descending' do
+        visit project_packages_path(project, sort: sort_value_created_date)
+        expect(first_package).to include(bbb_package.name)
+        expect(last_package).to include(aaa_package.name)
+      end
 
-    it 'sorts by created date ascending' do
-      visit project_packages_path(project, sort: sort_value_oldest_created)
-      expect(first_package).to include(aaa_package.name)
-      expect(last_package).to include(bbb_package.name)
-    end
+      it 'sorts by created date ascending' do
+        visit project_packages_path(project, sort: sort_value_oldest_created)
+        expect(first_package).to include(aaa_package.name)
+        expect(last_package).to include(bbb_package.name)
+      end
 
-    it 'sorts by name descending' do
-      visit project_packages_path(project, sort: sort_value_name_desc)
-      expect(first_package).to include(bbb_package.name)
-      expect(last_package).to include(aaa_package.name)
-    end
+      it 'sorts by name descending' do
+        visit project_packages_path(project, sort: sort_value_name_desc)
+        expect(first_package).to include(bbb_package.name)
+        expect(last_package).to include(aaa_package.name)
+      end
 
-    it 'sorts by name ascending' do
-      visit project_packages_path(project, sort: sort_value_name)
-      expect(first_package).to include(aaa_package.name)
-      expect(last_package).to include(bbb_package.name)
-    end
+      it 'sorts by name ascending' do
+        visit project_packages_path(project, sort: sort_value_name)
+        expect(first_package).to include(aaa_package.name)
+        expect(last_package).to include(bbb_package.name)
+      end
+
+      it 'sorts by version descending' do
+        visit project_packages_path(project, sort: sort_value_version_desc)
+        expect(first_package).to include(bbb_package.name)
+        expect(last_package).to include(aaa_package.name)
+      end
 
-    it 'sorts by version descending' do
-      visit project_packages_path(project, sort: sort_value_version_desc)
-      expect(first_package).to include(bbb_package.name)
-      expect(last_package).to include(aaa_package.name)
+      it 'sorts by version ascending' do
+        visit project_packages_path(project, sort: sort_value_version_asc)
+        expect(first_package).to include(aaa_package.name)
+        expect(last_package).to include(bbb_package.name)
+      end
     end
 
-    it 'sorts by version ascending' do
-      visit project_packages_path(project, sort: sort_value_version_asc)
-      expect(first_package).to include(aaa_package.name)
-      expect(last_package).to include(bbb_package.name)
+    context 'sorting different types of packages' do
+      let!(:maven_package) { create(:maven_package, project: project) }
+      let!(:npm_package) { create(:npm_package, project: project) }
+
+      it 'sorts by type descending' do
+        visit project_packages_path(project, sort: sort_value_type_desc)
+        expect(first_package).to include(npm_package.name)
+        expect(last_package).to include(maven_package.name)
+      end
+
+      it 'sorts by type ascending' do
+        visit project_packages_path(project, sort: sort_value_type_asc)
+        expect(first_package).to include(maven_package.name)
+        expect(last_package).to include(npm_package.name)
+      end
     end
   end
 
-  context 'sorting different types of packages' do
-    let!(:maven_package) { create(:maven_package, project: project) }
-    let!(:npm_package) { create(:npm_package, project: project) }
-
-    it 'sorts by type descending' do
-      visit project_packages_path(project, sort: sort_value_type_desc)
-      expect(first_package).to include(npm_package.name)
-      expect(last_package).to include(maven_package.name)
+  context 'wtih vue_package_list ff enabled' do
+    before do
+      stub_feature_flags(vue_package_list: true)
+      visit_project_packages
     end
 
-    it 'sorts by type ascending' do
-      visit project_packages_path(project, sort: sort_value_type_asc)
-      expect(first_package).to include(maven_package.name)
-      expect(last_package).to include(npm_package.name)
+    it 'load an empty placeholder' do
+      expect(page.has_selector?('#js-vue-packages-list')).to be_truthy
     end
   end
 

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