From e486cd40a21a895852f97846839b0e62705c7841 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Tue, 8 Oct 2024 18:45:57 +0100 Subject: [PATCH 01/12] feature: add intercom to grafana --- .../core/components/AppChrome/AppChrome.tsx | 41 ++++++++++- public/app/intergral/intercom.ts | 71 +++++++++++++++++++ 2 files changed, 110 insertions(+), 2 deletions(-) create mode 100644 public/app/intergral/intercom.ts diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx index 79d177e7f7..0ec34b6dd8 100644 --- a/public/app/core/components/AppChrome/AppChrome.tsx +++ b/public/app/core/components/AppChrome/AppChrome.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; import classNames from 'classnames'; -import { PropsWithChildren, useEffect } from 'react'; +import {PropsWithChildren, useEffect, useState} from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import { config, locationSearchToObject, locationService } from '@grafana/runtime'; +import {config, getBackendSrv, locationSearchToObject, locationService} from '@grafana/runtime'; import { useStyles2, LinkButton, useTheme2 } from '@grafana/ui'; import { useGrafana } from 'app/core/context/GrafanaContext'; import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange'; @@ -12,6 +12,8 @@ import { CommandPalette } from 'app/features/commandPalette/CommandPalette'; import { useOpspilotMetadata } from 'app/intergral/useOpspilotMetadata'; import { KioskMode } from 'app/types'; +import { useIntercom } from '../../../intergral/intercom'; + import { AppChromeMenu } from './AppChromeMenu'; import { DOCKED_LOCAL_STORAGE_KEY, DOCKED_MENU_OPEN_LOCAL_STORAGE_KEY } from './AppChromeService'; import { MegaMenu } from './MegaMenu/MegaMenu'; @@ -29,6 +31,41 @@ export function AppChrome({ children, hideSearchBar }: Props) { const theme = useTheme2(); const styles = useStyles2(getStyles, searchBarHidden); + const hideIntercomStyle = css` + #intercom-container { + display: none !important; + } +`; + + // Add state for user info + const [user, setUser] = useState<{ name?: string; email?: string } | null>(null); + + // Fetch user info + useEffect(() => { + const fetchUser = async () => { + try { + console.log('Fetching user info in AppChrome...'); + const userInfo = await getBackendSrv().get('/api/user'); + console.log('User info received in AppChrome:', userInfo); + setUser(userInfo); + } catch (error) { + console.error('Failed to fetch user info in AppChrome:', error); + } + }; + + fetchUser(); + }, []); + + // Use the Intercom hook + useIntercom(user?.name || '', user?.email || ''); + + useEffect(() => { + document.body.classList.add(hideIntercomStyle); + return () => { + document.body.classList.remove(hideIntercomStyle); + }; + }, [hideIntercomStyle]); + const dockedMenuBreakpoint = theme.breakpoints.values.xl; const dockedMenuLocalStorageState = store.getBool(DOCKED_LOCAL_STORAGE_KEY, true); const menuDockedAndOpen = !state.chromeless && state.megaMenuDocked && state.megaMenuOpen; diff --git a/public/app/intergral/intercom.ts b/public/app/intergral/intercom.ts new file mode 100644 index 0000000000..4e150f4b89 --- /dev/null +++ b/public/app/intergral/intercom.ts @@ -0,0 +1,71 @@ +import { useEffect } from 'react'; + +// Declare Intercom as a global function +declare global { + interface Window { + Intercom: any; + } +} + +export function useIntercom(userName: string, userEmail: string) { + useEffect(() => { + // Check if we're in a browser environment + if (typeof window === 'undefined' || typeof document === 'undefined') { + console.warn('Intercom setup aborted: Not in a browser environment'); + return; + } + + // Intercom setup function + const setupIntercom = () => { + (function() { + var w = window as any; + var ic = w.Intercom; + if (typeof ic === "function") { + ic('reattach_activator'); + ic('update', w.intercomSettings); + } else { + var d = document; + var i = function() { + (i as any).c(arguments); + }; + (i as any).q = []; + (i as any).c = function(args: any) { + (i as any).q.push(args); + }; + w.Intercom = i; + var l = function() { + var s = d.createElement('script'); + s.type = 'text/javascript'; + s.async = true; + s.src = 'https://widget.intercom.io/widget/ok1wowgi'; + var x = d.getElementsByTagName('script')[0]; + x.parentNode?.insertBefore(s, x); + }; + if (document.readyState === 'complete') { + l(); + } else if (w.attachEvent) { + w.attachEvent('onload', l); + } else { + w.addEventListener('load', l, false); + } + } + })(); + + window.Intercom("boot", { + api_base: "https://api-iam.intercom.io", + app_id: "ok1wowgi", + name: userName, + email: userEmail, + }); + }; + + setupIntercom(); + + // Cleanup function + return () => { + if (window.Intercom) { + window.Intercom('shutdown'); + } + }; + }, [userName, userEmail]); // Re-run if userName or userEmail changes +} From ae44f0b3fb2faf7daa7a7978a63d358c6cb20717 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Wed, 9 Oct 2024 10:05:05 +0100 Subject: [PATCH 02/12] fix: change var to let --- public/app/intergral/intercom.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/public/app/intergral/intercom.ts b/public/app/intergral/intercom.ts index 4e150f4b89..7696f7b13e 100644 --- a/public/app/intergral/intercom.ts +++ b/public/app/intergral/intercom.ts @@ -18,14 +18,14 @@ export function useIntercom(userName: string, userEmail: string) { // Intercom setup function const setupIntercom = () => { (function() { - var w = window as any; - var ic = w.Intercom; + let w = window as any; + let ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', w.intercomSettings); } else { - var d = document; - var i = function() { + let d = document; + let i = function () { (i as any).c(arguments); }; (i as any).q = []; @@ -33,12 +33,12 @@ export function useIntercom(userName: string, userEmail: string) { (i as any).q.push(args); }; w.Intercom = i; - var l = function() { - var s = d.createElement('script'); + let l = function () { + let s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/ok1wowgi'; - var x = d.getElementsByTagName('script')[0]; + let x = d.getElementsByTagName('script')[0]; x.parentNode?.insertBefore(s, x); }; if (document.readyState === 'complete') { From e801d4ed5be9549dc07fe0acaca97def44f718ca Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Wed, 9 Oct 2024 11:17:56 +0100 Subject: [PATCH 03/12] fix: get emaul and user more directly --- .../core/components/AppChrome/AppChrome.tsx | 28 ++++++------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx index 0ec34b6dd8..625ea3e4d7 100644 --- a/public/app/core/components/AppChrome/AppChrome.tsx +++ b/public/app/core/components/AppChrome/AppChrome.tsx @@ -1,12 +1,13 @@ import { css, cx } from '@emotion/css'; import classNames from 'classnames'; -import {PropsWithChildren, useEffect, useState} from 'react'; +import {PropsWithChildren, useEffect} from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import {config, getBackendSrv, locationSearchToObject, locationService} from '@grafana/runtime'; +import {config, locationSearchToObject, locationService} from '@grafana/runtime'; import { useStyles2, LinkButton, useTheme2 } from '@grafana/ui'; import { useGrafana } from 'app/core/context/GrafanaContext'; import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange'; +import { contextSrv } from 'app/core/services/context_srv'; import store from 'app/core/store'; import { CommandPalette } from 'app/features/commandPalette/CommandPalette'; import { useOpspilotMetadata } from 'app/intergral/useOpspilotMetadata'; @@ -37,27 +38,14 @@ export function AppChrome({ children, hideSearchBar }: Props) { } `; - // Add state for user info - const [user, setUser] = useState<{ name?: string; email?: string } | null>(null); - // Fetch user info - useEffect(() => { - const fetchUser = async () => { - try { - console.log('Fetching user info in AppChrome...'); - const userInfo = await getBackendSrv().get('/api/user'); - console.log('User info received in AppChrome:', userInfo); - setUser(userInfo); - } catch (error) { - console.error('Failed to fetch user info in AppChrome:', error); - } - }; - - fetchUser(); - }, []); + const user = { + name: contextSrv.user?.name || '', + email: contextSrv.user?.email || '', + }; // Use the Intercom hook - useIntercom(user?.name || '', user?.email || ''); + useIntercom(user.name, user.email); useEffect(() => { document.body.classList.add(hideIntercomStyle); From d503202f999dce1652beb92b6937522277e4b08e Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Wed, 9 Oct 2024 11:59:08 +0100 Subject: [PATCH 04/12] fix: re apply intercom changes to base file --- .../app/core/components/AppChrome/AppChrome.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx index 625ea3e4d7..53894398fc 100644 --- a/public/app/core/components/AppChrome/AppChrome.tsx +++ b/public/app/core/components/AppChrome/AppChrome.tsx @@ -1,9 +1,9 @@ import { css, cx } from '@emotion/css'; import classNames from 'classnames'; -import {PropsWithChildren, useEffect} from 'react'; +import { PropsWithChildren, useEffect } from 'react'; import { GrafanaTheme2 } from '@grafana/data'; -import {config, locationSearchToObject, locationService} from '@grafana/runtime'; +import { config, locationSearchToObject, locationService } from '@grafana/runtime'; import { useStyles2, LinkButton, useTheme2 } from '@grafana/ui'; import { useGrafana } from 'app/core/context/GrafanaContext'; import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange'; @@ -180,13 +180,13 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden: boolean) => { }, config.featureToggles.bodyScrolling ? { - position: 'fixed', - height: `calc(100% - ${searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2}px)`, - zIndex: 1, - } + position: 'fixed', + height: `calc(100% - ${searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2}px)`, + zIndex: 1, + } : { - zIndex: theme.zIndex.navbarFixed, - } + zIndex: theme.zIndex.navbarFixed, + } ), topNav: css({ display: 'flex', From fc4288c13a5c6e16e18a42c6878bdcc6ebba8df4 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Tue, 15 Oct 2024 16:42:47 +0100 Subject: [PATCH 05/12] feat: add searchbar to navbar --- .../components/AppChrome/NavToolbar/NavToolbar.tsx | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx index a642dff063..b9ee078ae6 100644 --- a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx +++ b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx @@ -10,6 +10,7 @@ import { useSelector } from 'app/types'; import { Breadcrumbs } from '../../Breadcrumbs/Breadcrumbs'; import { buildBreadcrumbs } from '../../Breadcrumbs/utils'; +import { TopSearchBarCommandPaletteTrigger } from '../TopBar/TopSearchBarCommandPaletteTrigger'; import { TOP_BAR_LEVEL_HEIGHT } from '../types'; export const TOGGLE_BUTTON_ID = 'mega-menu-toggle'; @@ -39,6 +40,9 @@ export function NavToolbar({
+
+ +
{actions} {searchBarHidden && ( { alignItems: 'center', marginRight: theme.spacing(1), }), + commandPalette: css({ + width: '100%', + maxWidth: '550px', + display: 'flex', + alignItems: 'center', + + [theme.breakpoints.down('sm')]: { + maxWidth: 'none', + }, + }), actions: css({ label: 'NavToolbar-actions', display: 'flex', From ec4c212f1897281ec7809814e2f3e73e6877e93e Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Tue, 15 Oct 2024 17:11:36 +0100 Subject: [PATCH 06/12] fix: center the search bar --- .../AppChrome/NavToolbar/NavToolbar.tsx | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx index b9ee078ae6..4fe0201284 100644 --- a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx +++ b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx @@ -40,8 +40,10 @@ export function NavToolbar({
-
- +
+
+ +
{actions} {searchBarHidden && ( @@ -68,8 +70,9 @@ const getStyles = (theme: GrafanaTheme2) => { }), pageToolbar: css({ height: TOP_BAR_LEVEL_HEIGHT, - display: 'flex', - padding: theme.spacing(0, 1, 0, 2), + display: 'grid', + gridTemplateColumns: 'auto 1fr auto', // This creates a three-column layout + padding: theme.spacing(0, 2), alignItems: 'center', borderBottom: `1px solid ${theme.colors.border.weak}`, }), @@ -78,16 +81,6 @@ const getStyles = (theme: GrafanaTheme2) => { alignItems: 'center', marginRight: theme.spacing(1), }), - commandPalette: css({ - width: '100%', - maxWidth: '550px', - display: 'flex', - alignItems: 'center', - - [theme.breakpoints.down('sm')]: { - maxWidth: 'none', - }, - }), actions: css({ label: 'NavToolbar-actions', display: 'flex', @@ -103,5 +96,18 @@ const getStyles = (theme: GrafanaTheme2) => { display: 'none', }, }), + searchWrapper: css({ + display: 'flex', + justifyContent: 'center', // Center the search bar + width: '100%', + maxWidth: '550px', // Adjust as needed + margin: '0 auto', // Center the wrapper itself + }), + centerWrapper: css({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '100%', + }), }; }; From 242a4f7a53027938ad90038893506c8739d63976 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Tue, 22 Oct 2024 13:51:32 +0100 Subject: [PATCH 07/12] fix: tests failing on undefined --- public/app/intergral/intercom.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/app/intergral/intercom.ts b/public/app/intergral/intercom.ts index 7696f7b13e..2c4edb8cc7 100644 --- a/public/app/intergral/intercom.ts +++ b/public/app/intergral/intercom.ts @@ -39,7 +39,8 @@ export function useIntercom(userName: string, userEmail: string) { s.async = true; s.src = 'https://widget.intercom.io/widget/ok1wowgi'; let x = d.getElementsByTagName('script')[0]; - x.parentNode?.insertBefore(s, x); + let parent = x?.parentNode || document.body + parent.insertBefore(s, x || null); }; if (document.readyState === 'complete') { l(); From bd46af6092a7abb72054234df1c8da5950faac8f Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Thu, 24 Oct 2024 15:55:10 +0100 Subject: [PATCH 08/12] fix: remove some search bar results --- pkg/services/navtree/navtreeimpl/navtree.go | 27 --------------------- 1 file changed, 27 deletions(-) diff --git a/pkg/services/navtree/navtreeimpl/navtree.go b/pkg/services/navtree/navtreeimpl/navtree.go index c626890566..de41bcddf9 100644 --- a/pkg/services/navtree/navtreeimpl/navtree.go +++ b/pkg/services/navtree/navtreeimpl/navtree.go @@ -132,33 +132,6 @@ func (s *ServiceImpl) GetNavTree(c *contextmodel.ReqContext, prefs *pref.Prefere }) } - if s.cfg.ProfileEnabled && c.IsSignedIn { - treeRoot.AddSection(s.getProfileNode(c)) - } - - _, uaIsDisabledForOrg := s.cfg.UnifiedAlerting.DisabledOrgs[c.SignedInUser.GetOrgID()] - uaVisibleForOrg := s.cfg.UnifiedAlerting.IsEnabled() && !uaIsDisabledForOrg - - if uaVisibleForOrg { - if alertingSection := s.buildAlertNavLinks(c); alertingSection != nil { - treeRoot.AddSection(alertingSection) - } - } - - if connectionsSection := s.buildDataConnectionsNavLink(c); connectionsSection != nil { - treeRoot.AddSection(connectionsSection) - } - - orgAdminNode, err := s.getAdminNode(c) - - if orgAdminNode != nil && len(orgAdminNode.Children) > 0 { - treeRoot.AddSection(orgAdminNode) - } else if err != nil { - return nil, err - } - - s.addHelpLinks(treeRoot, c) - if err := s.addAppLinks(treeRoot, c); err != nil { return nil, err } From 663f436777e35d7b623e061fb417248eacecbdb4 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Thu, 24 Oct 2024 16:35:55 +0100 Subject: [PATCH 09/12] fix: change method of removal for search results --- pkg/services/navtree/navtreeimpl/navtree.go | 25 +++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/pkg/services/navtree/navtreeimpl/navtree.go b/pkg/services/navtree/navtreeimpl/navtree.go index de41bcddf9..16ee498765 100644 --- a/pkg/services/navtree/navtreeimpl/navtree.go +++ b/pkg/services/navtree/navtreeimpl/navtree.go @@ -132,6 +132,31 @@ func (s *ServiceImpl) GetNavTree(c *contextmodel.ReqContext, prefs *pref.Prefere }) } + if s.cfg.ProfileEnabled && c.IsSignedIn && false { + treeRoot.AddSection(s.getProfileNode(c)) + } + + _, uaIsDisabledForOrg := s.cfg.UnifiedAlerting.DisabledOrgs[c.SignedInUser.GetOrgID()] + uaVisibleForOrg := s.cfg.UnifiedAlerting.IsEnabled() && !uaIsDisabledForOrg + + if uaVisibleForOrg && false { + if alertingSection := s.buildAlertNavLinks(c); alertingSection != nil { + treeRoot.AddSection(alertingSection) + } + } + + if connectionsSection := s.buildDataConnectionsNavLink(c); connectionsSection != nil && false { + treeRoot.AddSection(connectionsSection) + } + + orgAdminNode, err := s.getAdminNode(c) + + if orgAdminNode != nil && len(orgAdminNode.Children) > 0 && false { + treeRoot.AddSection(orgAdminNode) + } else if err != nil { + return nil, err + } + if err := s.addAppLinks(treeRoot, c); err != nil { return nil, err } From 2330af2835fc63a110ade6e54e2844c77feafa89 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Thu, 24 Oct 2024 16:47:43 +0100 Subject: [PATCH 10/12] fix: remove unused functions --- pkg/services/navtree/navtreeimpl/navtree.go | 39 --------------------- 1 file changed, 39 deletions(-) diff --git a/pkg/services/navtree/navtreeimpl/navtree.go b/pkg/services/navtree/navtreeimpl/navtree.go index 16ee498765..71ce06ec79 100644 --- a/pkg/services/navtree/navtreeimpl/navtree.go +++ b/pkg/services/navtree/navtreeimpl/navtree.go @@ -21,7 +21,6 @@ import ( "github.com/grafana/grafana/pkg/services/pluginsintegration/pluginstore" pref "github.com/grafana/grafana/pkg/services/preference" "github.com/grafana/grafana/pkg/services/star" - "github.com/grafana/grafana/pkg/services/supportbundles/supportbundlesimpl" "github.com/grafana/grafana/pkg/setting" ) @@ -203,44 +202,6 @@ func (s *ServiceImpl) getHomeNode(c *contextmodel.ReqContext, prefs *pref.Prefer return homeNode } -func isSupportBundlesEnabled(s *ServiceImpl) bool { - return s.cfg.SectionWithEnvOverrides("support_bundles").Key("enabled").MustBool(true) -} - -func (s *ServiceImpl) addHelpLinks(treeRoot *navtree.NavTreeRoot, c *contextmodel.ReqContext) { - if s.cfg.HelpEnabled { - // The version subtitle is set later by NavTree.ApplyHelpVersion - helpNode := &navtree.NavLink{ - Text: "Help", - Id: "help", - Url: "#", - Icon: "question-circle", - SortWeight: navtree.WeightHelp, - Children: []*navtree.NavLink{}, - } - - treeRoot.AddSection(helpNode) - - hasAccess := ac.HasAccess(s.accessControl, c) - supportBundleAccess := ac.EvalAny( - ac.EvalPermission(supportbundlesimpl.ActionRead), - ac.EvalPermission(supportbundlesimpl.ActionCreate), - ) - - if isSupportBundlesEnabled(s) && hasAccess(supportBundleAccess) { - supportBundleNode := &navtree.NavLink{ - Text: "Support bundles", - Id: "support-bundles", - Url: "/support-bundles", - Icon: "wrench", - SortWeight: navtree.WeightHelp, - } - - helpNode.Children = append(helpNode.Children, supportBundleNode) - } - } -} - func (s *ServiceImpl) getProfileNode(c *contextmodel.ReqContext) *navtree.NavLink { // Only set login if it's different from the name var login string From 1511119606dc2fb384a8e429e7bd2953f48a9e4e Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Tue, 5 Nov 2024 21:00:14 +0000 Subject: [PATCH 11/12] fix: remove toggle search bar button --- .../components/AppChrome/NavToolbar/NavToolbar.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx index 4fe0201284..e301b87728 100644 --- a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx +++ b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx @@ -3,8 +3,8 @@ import * as React from 'react'; import { GrafanaTheme2, NavModelItem } from '@grafana/data'; import { Components } from '@grafana/e2e-selectors'; -import { ToolbarButton, useStyles2 } from '@grafana/ui'; -import { t } from 'app/core/internationalization'; +import { useStyles2 } from '@grafana/ui'; + import { HOME_NAV_ID } from 'app/core/reducers/navModel'; import { useSelector } from 'app/types'; @@ -46,14 +46,6 @@ export function NavToolbar({
{actions} - {searchBarHidden && ( - - )}
); From 63f340e9c7cc44dafd52a5b52f0a3f8757debd81 Mon Sep 17 00:00:00 2001 From: Dan Hodgson Date: Tue, 5 Nov 2024 21:13:28 +0000 Subject: [PATCH 12/12] fix: reorder divs on toolbar --- .../AppChrome/NavToolbar/NavToolbar.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx index e301b87728..81b4522e52 100644 --- a/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx +++ b/public/app/core/components/AppChrome/NavToolbar/NavToolbar.tsx @@ -4,7 +4,6 @@ import * as React from 'react'; import { GrafanaTheme2, NavModelItem } from '@grafana/data'; import { Components } from '@grafana/e2e-selectors'; import { useStyles2 } from '@grafana/ui'; - import { HOME_NAV_ID } from 'app/core/reducers/navModel'; import { useSelector } from 'app/types'; @@ -38,13 +37,13 @@ export function NavToolbar({ return (
- -
-
-
- -
+ +
+
+
+
+
{actions}
@@ -85,7 +84,9 @@ const getStyles = (theme: GrafanaTheme2) => { minWidth: 0, '.body-drawer-open &': { - display: 'none', + [theme.breakpoints.down('md')]: { + display: 'none', + } }, }), searchWrapper: css({