Merge branch '301143-fix-render-data-and-class-in-menu-item' into 'master'

Fix missing data and class in top_nav_menu_item

See merge request gitlab-org/gitlab!62172

app/assets/javascripts/nav/components/top_nav_menu_item.vue

 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
+import { kebabCase, mapKeys } from 'lodash';
+
+const getDataKey = (key) => `data-${kebabCase(key)}`;
 
 export default {
   components: {
@@ -12,6 +15,11 @@ export default {
       required: true,
     },
   },
+  computed: {
+    dataAttrs() {
+      return mapKeys(this.menuItem.data || {}, (value, key) => getDataKey(key));
+    },
+  },
 };
 </script>
 
@@ -20,6 +28,8 @@ export default {
     category="tertiary"
     :href="menuItem.href"
     class="top-nav-menu-item gl-display-block"
+    :class="menuItem.css_class"
+    v-bind="dataAttrs"
     v-on="$listeners"
   >
     <span class="gl-display-flex">

app/helpers/nav/top_nav_helper.rb

@@ -132,7 +132,7 @@ module Nav
             active: active_nav_link?(controller: 'admin/sessions'),
             icon: 'lock-open',
             href: destroy_admin_session_path,
-            method: :post
+            data: { method: 'post' }
           )
         elsif current_user.admin?
           builder.add_secondary_menu_item(

lib/gitlab/nav/top_nav_menu_item.rb

@@ -8,14 +8,13 @@ module Gitlab
       # this is already :/. We could also take a hash and manually check every
       # entry, but it's much more maintainable to do rely on native Ruby.
       # rubocop: disable Metrics/ParameterLists
-      def self.build(id:, title:, active: false, icon: '', href: '', method: nil, view: '', css_class: '', data: {})
+      def self.build(id:, title:, active: false, icon: '', href: '', view: '', css_class: '', data: {})
         {
           id: id,
           title: title,
           active: active,
           icon: icon,
           href: href,
-          method: method,
           view: view.to_s,
           css_class: css_class,
           data: data

spec/frontend/nav/components/top_nav_menu_item_spec.js

@@ -7,6 +7,8 @@ const TEST_MENU_ITEM = {
   icon: 'search',
   href: '/pretty/good/burger',
   view: 'burger-view',
+  css_class: 'test-super-crazy test-class',
+  data: { qa_selector: 'not-a-real-selector', method: 'post', testFoo: 'test' },
 };
 
 describe('~/nav/components/top_nav_menu_item.vue', () => {
@@ -47,6 +49,22 @@ describe('~/nav/components/top_nav_menu_item.vue', () => {
       expect(button.text()).toBe(TEST_MENU_ITEM.title);
     });
 
+    it('renders button classes', () => {
+      const button = findButton();
+
+      expect(button.classes()).toEqual(expect.arrayContaining(TEST_MENU_ITEM.css_class.split(' ')));
+    });
+
+    it('renders button data attributes', () => {
+      const button = findButton();
+
+      expect(button.attributes()).toMatchObject({
+        'data-qa-selector': TEST_MENU_ITEM.data.qa_selector,
+        'data-method': TEST_MENU_ITEM.data.method,
+        'data-test-foo': TEST_MENU_ITEM.data.testFoo,
+      });
+    });
+
     it('passes listeners to button', () => {
       expect(listener).not.toHaveBeenCalled();
 

spec/helpers/nav/top_nav_helper_spec.rb

@@ -424,7 +424,7 @@ RSpec.describe Nav::TopNavHelper do
             title: 'Leave Admin Mode',
             icon: 'lock-open',
             href: '/admin/session/destroy',
-            method: :post
+            data: { method: 'post' }
           )
           expect(subject[:secondary].last).to eq(expected_leave_admin_mode_item)
         end

spec/lib/gitlab/nav/top_nav_menu_item_spec.rb

@@ -11,7 +11,6 @@ RSpec.describe ::Gitlab::Nav::TopNavMenuItem do
         active: true,
         icon: 'icon',
         href: 'href',
-        method: 'method',
         view: 'view',
         css_class: 'css_class',
         data: {}