Allow setting a class for top nav items (#30103)

src/legacy/core_plugins/kibana/public/dashboard/top_nav/get_top_nav_config.js

@@ -81,6 +81,9 @@ function getEditConfig(action) {
       defaultMessage: 'Switch to edit mode',
     }),
     testId: 'dashboardEditMode',
+    // We want to hide the "edit" button on small screens, since those have a responsive
+    // layout, which is not tied to the grid anymore, so we cannot edit the grid on that screens.
+    className: 'eui-hideFor--s eui-hideFor--xs',
     run: action
   };
 }

src/ui/public/kbn_top_nav/__tests__/kbn_top_nav.js

@@ -72,4 +72,17 @@ describe('kbnTopNav directive', function () {
     const { $scope } = build({ controller }, { config: 'controller' });
     expect($scope.kbnTopNav).to.be(controller);
   });
+
+  it('should allow setting CSS classes via className', () => {
+    const scope = {
+      config: [
+        { key: 'foo', testId: 'foo', className: 'fooClass' },
+        { key: 'test', testId: 'test', className: 'class1 class2' },
+      ],
+    };
+    const { $el } = build(scope, { config: 'config' });
+    expect($el.find('[data-test-subj="foo"]').hasClass('fooClass')).to.be(true);
+    expect($el.find('[data-test-subj="test"]').hasClass('class1')).to.be(true);
+    expect($el.find('[data-test-subj="test"]').hasClass('class2')).to.be(true);
+  });
 });

src/ui/public/kbn_top_nav/kbn_top_nav.html

@@ -11,7 +11,7 @@
 
     <div class="kuiLocalMenu kbnTopNav__mainMenu" ng-if="kbnTopNav.menuItems.length">
       <button
-        class="kuiLocalMenuItem"
+        class="kuiLocalMenuItem {{menuItem.className}}"
         ng-repeat="menuItem in kbnTopNav.menuItems"
         aria-label="{{::menuItem.description}}"
         aria-haspopup="{{!menuItem.hasFunction}}"