From 16ded9fe6ead98fad4dcd77df7c2eb0f3914422c Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peterholmberg@users.noreply.github.com>
Date: Wed, 15 Jan 2020 12:54:35 +0100
Subject: [PATCH] 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
---
 .../src/components/Tabs/TabsBar.tsx           | 21 ++++++++++++-------
 .../core/components/PageHeader/PageHeader.tsx |  2 +-
 .../__snapshots__/ServerStats.test.tsx.snap   |  2 +-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index dd21e055e80..a953c2615c6 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -1,20 +1,25 @@
 import React, { FC, ReactNode } from 'react';
 import { stylesFactory, useTheme } from '../../themes';
 import { GrafanaTheme } from '@grafana/data';
-import { css } from 'emotion';
+import { css, cx } from 'emotion';
 
 export interface Props {
   /** Children should be a single <Tab /> or an array of <Tab /> */
   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;
 
   return {
-    tabsWrapper: css`
-      border-bottom: 1px solid ${colors.pageHeaderBorder};
-    `,
+    tabsWrapper:
+      !hideBorder &&
+      css`
+        border-bottom: 1px solid ${colors.pageHeaderBorder};
+      `,
     tabs: css`
       position: relative;
       top: 1px;
@@ -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 tabsStyles = getTabsBarStyles(theme);
+  const tabsStyles = getTabsBarStyles(theme, hideBorder);
 
   return (
-    <div className={tabsStyles.tabsWrapper}>
+    <div className={cx(tabsStyles.tabsWrapper, className)}>
       <ul className={tabsStyles.tabs}>{children}</ul>
     </div>
   );
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index 430a52bd3ec..7c1df0b7d37 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -57,7 +57,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => {
   return (
     <nav>
       <SelectNav customCss="page-header__select-nav" main={main} />
-      <TabsBar>
+      <TabsBar className="page-header__tabs" hideBorder={true}>
         {main.children.map((child, index) => {
           return (
             <Tab
diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
index 07cd9a4ce21..262d8a1c373 100644
--- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
+++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`ServerStats Should render table with stats 1`] = `
                   </select>
                 </div>
                 <div
-                  className="css-yuafq3"
+                  className="page-header__tabs"
                 >
                   <ul
                     className="css-13jkosq"