Merge branch '33905-refactor-package-list-page-from-haml-to-vue' into 'master'

Enable new packages list by removing feature flag

Closes #55220 and #33905

See merge request gitlab-org/gitlab!18860

changelogs/unreleased/33905-refactor-package-list-page-from-haml-to-vue.yml

+---
+title: New package list is enabled which includes filtering by type
+merge_request: 18860
+author:
+type: added

ee/app/assets/javascripts/packages/list/stores/state.js

@@ -41,6 +41,6 @@ export default () => ({
    */
   sorting: {
     sort: 'desc',
-    orderBy: 'version',
+    orderBy: 'created_at',
   },
 });

ee/app/controllers/groups/packages_controller.rb

@@ -2,27 +2,10 @@
 
 module Groups
   class PackagesController < Groups::ApplicationController
-    include SortingHelper
-
     before_action :verify_packages_enabled!
 
-    def index
-      @sort = sort_value
-
-      @packages = ::Packages::GroupPackagesFinder.new(current_user, group)
-        .execute
-        .sort_by_attribute(@sort)
-        .page(params[:page])
-    end
-
     private
 
-    def sort_value
-      return params[:sort] if packages_sort_options_hash.key?(params[:sort])
-
-      sort_value_recently_created
-    end
-
     def verify_packages_enabled!
       render_404 unless group.packages_feature_available?
     end

ee/app/controllers/projects/packages/packages_controller.rb

@@ -4,18 +4,9 @@ module Projects
   module Packages
     class PackagesController < Projects::ApplicationController
       include PackagesAccess
-      include SortingHelper
 
       before_action :authorize_destroy_package!, only: [:destroy]
 
-      def index
-        @packages = project.packages
-                      .has_version
-                      .processed
-                      .sort_by_attribute(@sort = params[:sort] || 'created_desc')
-                      .page(params[:page])
-      end
-
       def show
         @package = project.packages.find(params[:id])
         @package_files = @package.package_files.recent

ee/app/helpers/ee/packages_helper.rb

@@ -6,10 +6,6 @@ module EE
       "#{request.path}?#{options.to_param}"
     end
 
-    def vue_package_list_enabled_for?(subject)
-      ::Feature.enabled?(:vue_package_list, subject)
-    end
-
     def nuget_package_registry_url(project_id)
       expose_url(api_v4_projects_packages_nuget_index_path(id: project_id, format: '.json'))
     end

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

 - page_title _("Packages")
 
-- if vue_package_list_enabled_for?(@group)
-  .row
-    .col-12
-      #js-vue-packages-list{ data: { resource_id: @group.id,
-        page_type: 'groups',
-        empty_list_help_url: help_page_path('administration/packages/index'),
-        empty_list_illustration: image_path('illustrations/no-packages.svg') } }
-
-- else
-  = render "legacy_package_list"
-
+.row
+  .col-12
+    #js-vue-packages-list{ data: { resource_id: @group.id,
+      page_type: 'groups',
+      empty_list_help_url: help_page_path('administration/packages/index'),
+      empty_list_illustration: image_path('illustrations/no-packages.svg') } }

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

 - page_title _("Packages")
-- can_destroy_package = can?(current_user, :destroy_package, @project)
 
-- if vue_package_list_enabled_for?(@project)
-  .row
-    .col-12
-      #js-vue-packages-list{ data: { resource_id: @project.id,
-        page_type: 'projects',
-        empty_list_help_url: help_page_path('administration/packages/index'),
-        empty_list_illustration: image_path('illustrations/no-packages.svg') } }
-
-- else
-  = render "legacy_package_list", can_destroy_package: can_destroy_package
+.row
+  .col-12
+    #js-vue-packages-list{ data: { resource_id: @project.id,
+      page_type: 'projects',
+      empty_list_help_url: help_page_path('administration/packages/index'),
+      empty_list_illustration: image_path('illustrations/no-packages.svg') } }

ee/spec/features/groups/packages_spec.rb

@@ -3,8 +3,6 @@
 require 'spec_helper'
 
 describe 'Group Packages' do
-  include SortingHelper
-
   let_it_be(:user) { create(:user) }
   let_it_be(:group) { create(:group) }
   let_it_be(:project) { create(:project, group: group) }
@@ -15,11 +13,7 @@ describe 'Group 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 'when feature is not available' do
     context 'packages feature is not available because of license' do
       before do
         stub_licensed_features(packages: false)
@@ -43,158 +37,18 @@ describe 'Group Packages' do
         expect(page).to have_gitlab_http_status(:not_found)
       end
     end
-
-    context 'when there are no packages' do
-      it 'shows no packages message' do
-        visit_group_packages
-
-        expect(page).to have_content 'There are no packages yet'
-      end
-    end
-
-    context 'when there are packages' do
-      let!(:package) { create(:maven_package, project: project) }
-
-      it 'shows list of packages' do
-        visit_group_packages
-
-        expect(page).to have_content(package.name)
-        expect(page).to have_content(package.version)
-      end
-    end
-
-    context 'sorting when there are packages' do
-      let!(:second_project) { create(:project, name: 'second-project', group: group) }
-
-      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: second_project)
-      end
-
-      it 'sorts by created date descending by default' do
-        visit group_packages_path(group)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_created_date)
-        expect(first_package).to include(bbb_package.name)
-        expect(last_package).to include(aaa_package.name)
-      end
-
-      it 'handles an invalid param' do
-        visit group_packages_path(group, sort: 'garbage') # bad sort param
-
-        expect(sort_dropdown_button_text).to eq(sort_title_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 group_packages_path(group, sort: sort_value_recently_created)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_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 group_packages_path(group, sort: sort_value_oldest_created)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_created_date)
-        expect(first_package).to include(aaa_package.name)
-        expect(last_package).to include(bbb_package.name)
-      end
-
-      it 'sorts by name descending' do
-        visit group_packages_path(group, sort: sort_value_name_desc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_name)
-        expect(first_package).to include(bbb_package.name)
-        expect(last_package).to include(aaa_package.name)
-      end
-
-      it 'sorts by name ascending' do
-        visit group_packages_path(group, sort: sort_value_name)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_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 group_packages_path(group, sort: sort_value_version_desc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_version)
-        expect(first_package).to include(bbb_package.name)
-        expect(last_package).to include(aaa_package.name)
-      end
-
-      it 'sorts by version ascending' do
-        visit group_packages_path(group, sort: sort_value_version_asc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_version)
-        expect(first_package).to include(aaa_package.name)
-        expect(last_package).to include(bbb_package.name)
-      end
-
-      it 'sorts by project descending' do
-        visit group_packages_path(group, sort: sort_value_project_name_desc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_project_name)
-        expect(first_package).to include(bbb_package.name)
-        expect(last_package).to include(aaa_package.name)
-      end
-
-      it 'sorts by project ascending' do
-        visit group_packages_path(group, sort: sort_value_project_name_asc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_project_name)
-        expect(first_package).to include(aaa_package.name)
-        expect(last_package).to include(bbb_package.name)
-      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 group_packages_path(group, sort: sort_value_type_desc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_type)
-        expect(first_package).to include(npm_package.name)
-        expect(last_package).to include(maven_package.name)
-      end
-
-      it 'sorts by type ascending' do
-        visit group_packages_path(group, sort: sort_value_type_asc)
-
-        expect(sort_dropdown_button_text).to eq(sort_title_type)
-        expect(first_package).to include(maven_package.name)
-        expect(last_package).to include(npm_package.name)
-      end
-    end
   end
 
-  context 'wtih vue_package_list feature flag enabled', :js do
+  context 'when there are packages', :js do
     before do
       visit_group_packages
     end
 
     context 'when there are packages' do
       let_it_be(:second_project) { create(:project, name: 'second-project', group: group) }
-      let_it_be(:conan_package) { create(:conan_package, project: project) }
-      let_it_be(:maven_package) { create(:maven_package, project: second_project) }
-      let_it_be(:packages) { [maven_package, conan_package] }
+      let_it_be(:conan_package) { create(:conan_package, project: project, name: 'zzz', created_at: 1.day.ago, version: '1.0.0') }
+      let_it_be(:maven_package) { create(:maven_package, project: second_project, name: 'aaa', created_at: 2.days.ago, version: '2.0.0') }
+      let_it_be(:packages) { [conan_package, maven_package] }
 
       it_behaves_like 'packages list', check_project_name: true
 
@@ -208,6 +62,21 @@ describe 'Group Packages' do
         expect(page).to have_current_path(project_path(project))
         expect(page).to have_content(project.name)
       end
+
+      context 'sorting' do
+        it_behaves_like 'shared package sorting' do
+          let_it_be(:package_one) { maven_package }
+          let_it_be(:package_two) { conan_package }
+        end
+
+        it_behaves_like 'correctly sorted packages list', 'Project' do
+          let(:packages) { [maven_package, conan_package] }
+        end
+
+        it_behaves_like 'correctly sorted packages list', 'Project', ascending: true do
+          let(:packages) { [conan_package, maven_package] }
+        end
+      end
     end
 
     it_behaves_like 'when there are no packages'
@@ -216,16 +85,4 @@ describe 'Group Packages' do
   def visit_group_packages
     visit group_packages_path(group)
   end
-
-  def first_package
-    page.all('[data-qa-selector="package-row"]').first.text
-  end
-
-  def last_package
-    page.all('[data-qa-selector="package-row"]').last.text
-  end
-
-  def sort_dropdown_button_text
-    page.find('[data-qa-selector="sort-dropdown-button"]').text
-  end
 end

ee/spec/features/projects/packages_spec.rb

@@ -3,8 +3,6 @@
 require 'spec_helper'
 
 describe 'Packages' do
-  include SortingHelper
-
   let_it_be(:user) { create(:user) }
   let_it_be(:project) { create(:project) }
 
@@ -14,11 +12,7 @@ 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 'when feature is not available' do
     context 'packages feature is not available because of license' do
       before do
         stub_licensed_features(packages: false)
@@ -42,135 +36,17 @@ describe 'Packages' do
         expect(status_code).to eq(404)
       end
     end
-
-    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'
-      end
-    end
-
-    context 'when there are packages' do
-      let!(:package) { create(:maven_package, project: project) }
-
-      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 'hides a package without a version from the list' do
-        package.update!(version: nil)
-
-        visit_project_packages
-
-        expect(page).not_to have_content(package.name)
-      end
-
-      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)
-
-        package.package_files.each do |package_file|
-          expect(page).to have_content(package_file.file_name)
-        end
-      end
-
-      it 'removes package' do
-        click_link 'Delete Package'
-
-        expect(page).to have_content 'Package was removed'
-        expect(page).not_to have_content(package.name)
-      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
-
-      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 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 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 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
-
-    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 'wtih vue_package_list ff enabled', :js do
+  context 'when feature is available', :js do
     before do
       visit_project_packages
     end
 
     context 'when there are packages' do
-      let_it_be(:conan_package) { create(:conan_package, project: project) }
-      let_it_be(:maven_package) { create(:maven_package, project: project) }
-      let_it_be(:packages) { [maven_package, conan_package] }
+      let_it_be(:conan_package) { create(:conan_package, project: project, name: 'zzz', created_at: 1.day.ago, version: '1.0.0') }
+      let_it_be(:maven_package) { create(:maven_package, project: project, name: 'aaa', created_at: 2.days.ago, version: '2.0.0') }
+      let_it_be(:packages) { [conan_package, maven_package] }
 
       it_behaves_like 'packages list'
 
@@ -188,6 +64,11 @@ describe 'Packages' do
           expect(page).not_to have_content(package.name)
         end
       end
+
+      it_behaves_like 'shared package sorting' do
+        let_it_be(:package_one) { maven_package }
+        let_it_be(:package_two) { conan_package }
+      end
     end
 
     it_behaves_like 'when there are no packages'
@@ -196,12 +77,4 @@ describe 'Packages' do
   def visit_project_packages
     visit project_packages_path(project)
   end
-
-  def first_package
-    page.all('.table-holder .package-row').first.text
-  end
-
-  def last_package
-    page.all('.table-holder .package-row').last.text
-  end
 end

ee/spec/support/shared_examples/features/packages_shared_examples.rb

@@ -45,6 +45,65 @@ RSpec.shared_examples 'when there are no packages' do
   end
 end
 
+RSpec.shared_examples 'correctly sorted packages list' do |order_by, ascending: false|
+  context "ordered by #{order_by} and ascending #{ascending}" do
+    before do
+      click_sort_option(order_by, ascending)
+    end
+
+    it_behaves_like 'packages list'
+  end
+end
+
+RSpec.shared_examples 'shared package sorting' do
+  it_behaves_like 'correctly sorted packages list', 'Type' do
+    let(:packages) { [package_two, package_one] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Type', ascending: true do
+    let(:packages) { [package_one, package_two] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Name' do
+    let(:packages) { [package_two, package_one] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Name', ascending: true do
+    let(:packages) { [package_one, package_two] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Version' do
+    let(:packages) { [package_one, package_two] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Version', ascending: true do
+    let(:packages) { [package_two, package_one] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Created' do
+    let(:packages) { [package_two, package_one] }
+  end
+
+  it_behaves_like 'correctly sorted packages list', 'Created', ascending: true do
+    let(:packages) { [package_one, package_two] }
+  end
+end
+
 def packages_table_selector
   '[data-qa-selector="packages-table"]'
 end
+
+def click_sort_option(option, ascending)
+  page.within('.gl-sorting') do
+    # Reset the sort direction
+    click_button 'Sort direction' if page.has_selector?('svg[aria-label="Sorting Direction: Ascending"]', wait: 0)
+
+    find('button.dropdown-menu-toggle').click
+
+    page.within('.dropdown-menu') do
+      click_button option
+    end
+
+    click_button 'Sort direction' if ascending
+  end
+end