From 987700bbf43df71a98d9c415dd6a1103c7cbb532 Mon Sep 17 00:00:00 2001
From: Rares Mardare <rares.mardare@grafana.com>
Date: Wed, 23 Nov 2022 17:04:27 +0200
Subject: [PATCH] make tabs horizontally scroll if <1500px

---
 grafana-plugin/src/img/grafanaGlobalStyles.css         | 1 +
 grafana-plugin/src/navbar/LegacyNavTabsBar.module.scss | 3 +++
 grafana-plugin/src/navbar/LegacyNavTabsBar.tsx         | 7 ++++++-
 grafana-plugin/src/pages/index.tsx                     | 2 +-
 grafana-plugin/src/plugin.json                         | 1 +
 5 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 grafana-plugin/src/navbar/LegacyNavTabsBar.module.scss

diff --git a/grafana-plugin/src/img/grafanaGlobalStyles.css b/grafana-plugin/src/img/grafanaGlobalStyles.css
index c8a3defd..9e29d7ba 100644
--- a/grafana-plugin/src/img/grafanaGlobalStyles.css
+++ b/grafana-plugin/src/img/grafanaGlobalStyles.css
@@ -21,6 +21,7 @@
   max-width: unset !important;
   flex-grow: unset !important;
   flex-basis: unset !important;
+  overflow-x: auto;
 }
 
 .page-scrollbar-content > div:first-child {
diff --git a/grafana-plugin/src/navbar/LegacyNavTabsBar.module.scss b/grafana-plugin/src/navbar/LegacyNavTabsBar.module.scss
new file mode 100644
index 00000000..c3b2ca3c
--- /dev/null
+++ b/grafana-plugin/src/navbar/LegacyNavTabsBar.module.scss
@@ -0,0 +1,3 @@
+.root {
+  min-width: 1500px;
+}
diff --git a/grafana-plugin/src/navbar/LegacyNavTabsBar.tsx b/grafana-plugin/src/navbar/LegacyNavTabsBar.tsx
index d96ba975..c6564d3c 100644
--- a/grafana-plugin/src/navbar/LegacyNavTabsBar.tsx
+++ b/grafana-plugin/src/navbar/LegacyNavTabsBar.tsx
@@ -2,10 +2,15 @@ import React from 'react';
 
 import { IconName } from '@grafana/data';
 import { Tab, TabsBar } from '@grafana/ui';
+import cn from 'classnames/bind';
 
 import { pages } from 'pages';
 import { useStore } from 'state/useStore';
 
+import styles from './LegacyNavTabsBar.module.scss';
+
+const cx = cn.bind(styles);
+
 export default function LegacyNavTabsBar({ currentPage }: { currentPage: string }): JSX.Element {
   const store = useStore();
 
@@ -14,7 +19,7 @@ export default function LegacyNavTabsBar({ currentPage }: { currentPage: string
     .filter((page) => (page.hideFromTabsFn ? !page.hideFromTabsFn(store) : !page.hideFromTabs));
 
   return (
-    <TabsBar>
+    <TabsBar className={cx('root')}>
       {navigationPages.map((page, index) => (
         <Tab
           key={index}
diff --git a/grafana-plugin/src/pages/index.tsx b/grafana-plugin/src/pages/index.tsx
index b3fa2499..a837581a 100644
--- a/grafana-plugin/src/pages/index.tsx
+++ b/grafana-plugin/src/pages/index.tsx
@@ -101,7 +101,7 @@ export const pages: { [id: string]: PageDefinition } = [
   {
     icon: 'cog',
     id: 'settings',
-    text: 'Organization Settings',
+    text: 'Settings',
     hideFromBreadcrumbs: true,
     path: getPath('settings'),
   },
diff --git a/grafana-plugin/src/plugin.json b/grafana-plugin/src/plugin.json
index d753a8e6..93e971a1 100644
--- a/grafana-plugin/src/plugin.json
+++ b/grafana-plugin/src/plugin.json
@@ -34,6 +34,7 @@
       "name": "Alert Groups",
       "path": "/a/grafana-oncall-app/?page=incidents",
       "role": "Viewer",
+      "defaultNav": true,
       "addToNav": true
     },
     {