Tabs: Hide Tabs on Page header on small screens (#21489)

* Adding className to hide tabs on small screens

* update snapshot

* Readd border on pageheader

* update snap

packages/grafana-ui/src/components/Tabs/TabsBar.tsx

 import React, { FC, ReactNode } from 'react';
 import React, { FC, ReactNode } from 'react';
 import { stylesFactory, useTheme } from '../../themes';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 
 
 export interface Props {
 export interface Props {
   /** Children should be a single <Tab /> or an array of <Tab /> */
   /** Children should be a single <Tab /> or an array of <Tab /> */
   children: ReactNode;
   children: ReactNode;
+  className?: string;
+  /** For hiding the bottom border (on PageHeader for example) */
+  hideBorder?: boolean;
 }
 }
 
 
-const getTabsBarStyles = stylesFactory((theme: GrafanaTheme) => {
+const getTabsBarStyles = stylesFactory((theme: GrafanaTheme, hideBorder = false) => {
   const colors = theme.colors;
   const colors = theme.colors;
 
 
   return {
   return {
-    tabsWrapper: css`
+    tabsWrapper:
+      !hideBorder &&
+      css`
         border-bottom: 1px solid ${colors.pageHeaderBorder};
         border-bottom: 1px solid ${colors.pageHeaderBorder};
       `,
       `,
     tabs: css`
     tabs: css`
@@ -23,12 +28,12 @@ const getTabsBarStyles = stylesFactory((theme: GrafanaTheme) => {
   };
   };
 });
 });
 
 
-export const TabsBar: FC<Props> = ({ children }) => {
+export const TabsBar: FC<Props> = ({ children, className, hideBorder }) => {
   const theme = useTheme();
   const theme = useTheme();
-  const tabsStyles = getTabsBarStyles(theme);
+  const tabsStyles = getTabsBarStyles(theme, hideBorder);
 
 
   return (
   return (
-    <div className={tabsStyles.tabsWrapper}>
+    <div className={cx(tabsStyles.tabsWrapper, className)}>
       <ul className={tabsStyles.tabs}>{children}</ul>
       <ul className={tabsStyles.tabs}>{children}</ul>
     </div>
     </div>
   );
   );

public/app/core/components/PageHeader/PageHeader.tsx

@@ -57,7 +57,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
   return (
   return (
     <nav>
     <nav>
       <SelectNav customCss="page-header__select-nav" main={main} />
       <SelectNav customCss="page-header__select-nav" main={main} />
-      <TabsBar>
+      <TabsBar className="page-header__tabs" hideBorder={true}>
         {main.children.map((child, index) => {
         {main.children.map((child, index) => {
           return (
           return (
             <Tab
             <Tab

public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap

@@ -94,7 +94,7 @@ exports[`ServerStats Should render table with stats 1`] = `
                   </select>
                   </select>
                 </div>
                 </div>
                 <div
                 <div
-                  className="css-yuafq3"
+                  className="page-header__tabs"
                 >
                 >
                   <ul
                   <ul
                     className="css-13jkosq"
                     className="css-13jkosq"