Add feature flag to load new markup

- move old code to legacy
- fix feature tests

ee/app/assets/javascripts/packages/list/components/packages_list_app.vue

@@ -11,7 +11,13 @@ export default {
   props: {
     projectId: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
+    },
+    groupId: {
+      type: String,
+      required: false,
+      default: '',
     },
     canDestroyPackage: {
       type: Boolean,

ee/app/assets/javascripts/packages/list/packages_list_app_bundle.js

@@ -11,14 +11,17 @@ export default () =>
       PackagesListApp,
     },
     data() {
-      const { dataset } = document.querySelector(this.$options.el);
+      const {
+        dataset: { projectId, groupId, emptyListIllustration, emptyListHelpUrl, canDestroyPackage },
+      } = document.querySelector(this.$options.el);
 
       return {
         packageListAttrs: {
-          projectId: dataset.projectId,
-          emptyListIllustration: dataset.emptyListIllustration,
-          emptyListHelpUrl: dataset.emptyListHelpUrl,
-          canDestroyPackage: dataset.canDestroyPackage,
+          projectId,
+          groupId,
+          emptyListIllustration,
+          emptyListHelpUrl,
+          canDestroyPackage,
         },
       };
     },

ee/app/assets/javascripts/pages/groups/packages/index/index.js

+import initPackageList from 'ee/packages/list/packages_list_app_bundle';
+
+document.addEventListener('DOMContentLoaded', initPackageList);

ee/app/views/groups/packages/_legacy_package_list.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', 'qa-selector': 'sort-dropdown-button' }, 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_project_name,      package_sort_path(sort: sort_value_project_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' }
+        = _('Project')
+      .table-section.section-20{ role: 'rowheader' }
+        = _('Version')
+      .table-section.section-10{ role: 'rowheader' }
+        = _('Type')
+      .table-section.section-20{ role: 'rowheader' }
+        = _('Created')
+    - @packages.each do |package|
+      .gl-responsive-table-row{ 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(package.project, package), class: 'flex-truncate-child'
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Project")
+          .table-mobile-content
+            = link_to_project(package.project)
+        .table-section.section-20
+          .table-mobile-header{ role: "rowheader" }= _("Version")
+          .table-mobile-content
+            = package.version
+        .table-section.section-10
+          .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)
+    = paginate @packages, theme: "gitlab"
+- else
+  .row.empty-state
+    .col-12
+      = render 'shared/packages/no_packages'

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

 - page_title _("Packages")
-- 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', 'qa-selector': 'sort-dropdown-button' }, 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_project_name,      package_sort_path(sort: sort_value_project_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?(@group)
+  .row
+    .col-12
+      #js-vue-packages-list{ data: { group_id: @group.id,
+        empty_list_help_url: help_page_path('administration/packages/index'),
+        empty_list_illustration: image_path('illustrations/no-packages.svg') } }
 
-  .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' }
-        = _('Project')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Version')
-      .table-section.section-10{ role: 'rowheader' }
-        = _('Type')
-      .table-section.section-20{ role: 'rowheader' }
-        = _('Created')
-    - @packages.each do |package|
-      .gl-responsive-table-row{ 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(package.project, package), class: 'flex-truncate-child'
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Project")
-          .table-mobile-content
-            = link_to_project(package.project)
-        .table-section.section-20
-          .table-mobile-header{ role: "rowheader" }= _("Version")
-          .table-mobile-content
-            = package.version
-        .table-section.section-10
-          .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)
-    = paginate @packages, theme: "gitlab"
 - else
-  .row.empty-state
-    .col-12
-      = render 'shared/packages/no_packages'
+  = render "legacy_package_list"
+

ee/spec/features/groups/packages_spec.rb

@@ -15,167 +15,184 @@ describe 'Group 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_group_packages
+    context 'packages feature is not available because of license' do
+      before do
+        stub_licensed_features(packages: false)
+      end
 
-      expect(page).to have_gitlab_http_status(404)
-    end
-  end
+      it 'gives 404' do
+        visit_group_packages
 
-  context 'packages feature is disabled by config' do
-    before do
-      allow(Gitlab.config.packages).to receive(:enabled).and_return(false)
+        expect(page).to have_gitlab_http_status(404)
+      end
     end
 
-    it 'gives 404' do
-      visit_group_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_group_packages
 
-      expect(page).to have_gitlab_http_status(404)
+        expect(page).to have_gitlab_http_status(404)
+      end
     end
-  end
 
-  context 'when there are no packages' do
-    it 'shows no packages message' do
-      visit_group_packages
+    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'
+        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) }
 
-    it 'shows list of packages' do
-      visit_group_packages
+      it 'shows list of packages' do
+        visit_group_packages
 
-      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)
+      end
     end
-  end
 
-  context 'sorting when there are packages' do
-    let!(:second_project) { create(:project, name: 'second-project', group: group) }
+    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!(: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
+      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)
+      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
+        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
+      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
+        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)
+      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
+        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)
+      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
+        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)
+      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
+        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)
+      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
+        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)
+      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
+        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)
+      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
+        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)
+      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
+        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)
+      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)
+        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
-  end
 
-  context 'sorting different types of packages' do
-    let!(:maven_package) { create(:maven_package, project: project) }
-    let!(:npm_package) { create(:npm_package, project: project) }
+    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)
 
-    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
 
-      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)
+      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
 
-    it 'sorts by type ascending' do
-      visit group_packages_path(group, sort: sort_value_type_asc)
+  context 'wtih vue_package_list feature flag enabled' do
+    before do
+      stub_feature_flags(vue_package_list: true)
+      visit_group_packages
+    end
 
-      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)
+    it 'load an empty placeholder' do
+      expect(page.has_selector?('#js-vue-packages-list')).to be_truthy
     end
   end