From 09d6461ce5ebc2deace29161c21fc599c7ce853b Mon Sep 17 00:00:00 2001 From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com> Date: Tue, 12 Apr 2022 10:04:28 -0400 Subject: [PATCH] Navigation: Show only + icons in overlay menu for new NavBar (#47347) (#47644) * Nav: Show overlay icons based on allowed list * user essentials mob! :trident: * Navigation: clean up and use new backend prop to show plus icons and improve visual styling * Nav: Fix top padding * refactor to not use showIconInNavbar in NavBarMenuItem * remove a missed bit * refactor icon into const Co-authored-by: Ashley Harrison (cherry picked from commit 85de0d88c7ffa5f6a0f317e763920ab5a04cd95d) Co-authored-by: Maria Alexandra <239999+axelavargas@users.noreply.github.com> --- packages/grafana-data/src/types/navModel.ts | 1 + pkg/api/dtos/index.go | 33 ++++++++++--------- pkg/api/index.go | 6 ++-- .../components/NavBar/Next/NavBarItem.tsx | 3 +- .../components/NavBar/Next/NavBarMenuItem.tsx | 8 ++--- 5 files changed, 27 insertions(+), 24 deletions(-) diff --git a/packages/grafana-data/src/types/navModel.ts b/packages/grafana-data/src/types/navModel.ts index a9cfee1a4e1..e706dde235f 100644 --- a/packages/grafana-data/src/types/navModel.ts +++ b/packages/grafana-data/src/types/navModel.ts @@ -30,6 +30,7 @@ export interface NavModelItem extends NavLinkDTO { highlightId?: string; tabSuffix?: ComponentType<{ className?: string }>; hideFromNavbar?: boolean; + showIconInNavbar?: boolean; } export enum NavSection { diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index 141a7b2f026..caba326a2a8 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -56,22 +56,23 @@ const ( ) type NavLink struct { - Id string `json:"id,omitempty"` - Text string `json:"text"` - Description string `json:"description,omitempty"` - Section string `json:"section,omitempty"` - SubTitle string `json:"subTitle,omitempty"` - Icon string `json:"icon,omitempty"` - Img string `json:"img,omitempty"` - Url string `json:"url,omitempty"` - Target string `json:"target,omitempty"` - SortWeight int64 `json:"sortWeight,omitempty"` - Divider bool `json:"divider,omitempty"` - HideFromMenu bool `json:"hideFromMenu,omitempty"` - HideFromTabs bool `json:"hideFromTabs,omitempty"` - Children []*NavLink `json:"children,omitempty"` - HighlightText string `json:"highlightText,omitempty"` - HighlightID string `json:"highlightId,omitempty"` + Id string `json:"id,omitempty"` + Text string `json:"text"` + Description string `json:"description,omitempty"` + Section string `json:"section,omitempty"` + SubTitle string `json:"subTitle,omitempty"` + Icon string `json:"icon,omitempty"` + Img string `json:"img,omitempty"` + Url string `json:"url,omitempty"` + Target string `json:"target,omitempty"` + SortWeight int64 `json:"sortWeight,omitempty"` + Divider bool `json:"divider,omitempty"` + HideFromMenu bool `json:"hideFromMenu,omitempty"` + HideFromTabs bool `json:"hideFromTabs,omitempty"` + ShowIconInNavbar bool `json:"showIconInNavbar,omitempty"` + Children []*NavLink `json:"children,omitempty"` + HighlightText string `json:"highlightText,omitempty"` + HighlightID string `json:"highlightId,omitempty"` } // NavIDCfg is the id for org configuration navigation node diff --git a/pkg/api/index.go b/pkg/api/index.go index d4e0bc8ce3d..3167a3012e0 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -460,17 +460,17 @@ func (hs *HTTPServer) buildDashboardNavLinks(c *models.ReqContext, hasEditPerm b Text: "Divider", Divider: true, Id: "divider", HideFromTabs: true, }) dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{ - Text: "New dashboard", Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboard/new", HideFromTabs: true, Id: "new-dashboard", + Text: "New dashboard", Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboard/new", HideFromTabs: true, Id: "new-dashboard", ShowIconInNavbar: true, }) if c.OrgRole == models.ROLE_ADMIN || c.OrgRole == models.ROLE_EDITOR { dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{ Text: "New folder", SubTitle: "Create a new folder to organize your dashboards", Id: "new-folder", - Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboards/folder/new", HideFromTabs: true, + Icon: "plus", Url: hs.Cfg.AppSubURL + "/dashboards/folder/new", HideFromTabs: true, ShowIconInNavbar: true, }) } dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{ Text: "Import", SubTitle: "Import dashboard from file or Grafana.com", Id: "import", Icon: "plus", - Url: hs.Cfg.AppSubURL + "/dashboard/import", HideFromTabs: true, + Url: hs.Cfg.AppSubURL + "/dashboard/import", HideFromTabs: true, ShowIconInNavbar: true, }) } return dashboardChildNavs diff --git a/public/app/core/components/NavBar/Next/NavBarItem.tsx b/public/app/core/components/NavBar/Next/NavBarItem.tsx index fb4731ce773..844686b6e00 100644 --- a/public/app/core/components/NavBar/Next/NavBarItem.tsx +++ b/public/app/core/components/NavBar/Next/NavBarItem.tsx @@ -102,12 +102,13 @@ const NavBarItem = ({ const translationKey = item.id && menuItemTranslations[item.id]; const itemText = translationKey ? i18n._(translationKey) : item.text; const isSection = item.menuItemType === NavMenuItemType.Section; + const icon = item.showIconInNavbar && !isSection ? (item.icon as IconName) : undefined; return ( + {icon && } {text} {target === '_blank' && ( @@ -76,7 +76,7 @@ export function NavBarMenuItem({ NavBarMenuItem.displayName = 'NavBarMenuItem'; -const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({ +const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], hasIcon: boolean) => ({ linkContent: css({ display: 'grid', placeItems: 'center', @@ -97,7 +97,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({ fontSize: 'inherit', height: '100%', overflowWrap: 'anywhere', - padding: '5px 12px 5px 10px', + padding: !hasIcon ? `${theme.spacing(0.5, 2)}` : '5px 12px 5px 10px', textAlign: 'left', '&:hover, &:focus-visible': { backgroundColor: theme.colors.action.hover,