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,6 +15,11 @@ 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 'packages feature is not available because of license' do
       before do
         stub_licensed_features(packages: false)
@@ -178,6 +183,18 @@ describe 'Group Packages' do
         expect(last_package).to include(npm_package.name)
       end
     end
+  end
+
+  context 'wtih vue_package_list feature flag enabled' do
+    before do
+      stub_feature_flags(vue_package_list: true)
+      visit_group_packages
+    end
+
+    it 'load an empty placeholder' do
+      expect(page.has_selector?('#js-vue-packages-list')).to be_truthy
+    end
+  end
 
   def visit_group_packages
     visit group_packages_path(group)