IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Show only + icons in overlay menu for new NavBar (#47347)

Browse Source 
* Nav: Show overlay icons based on allowed list

* user essentials mob! 🔱

* 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 <ashley.harrison@grafana.com>
This commit is contained in:
Maria Alexandra
2022-04-12 14:51:40 +01:00
committed by GitHub
parent f10047b708
commit 85de0d88c7
5 changed files with 27 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-data/src/types/navModel.ts
View File

@@ -30,6 +30,7 @@ export interface NavModelItem extends NavLinkDTO {
highlightId?: string;
tabSuffix?: ComponentType<{ className?: string }>;
hideFromNavbar?: boolean;
showIconInNavbar?: boolean;
}
export enum NavSection {

33
pkg/api/dtos/index.go
View File

@@ -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

6
pkg/api/index.go
View File

@@ -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

3
public/app/core/components/NavBar/Next/NavBarItem.tsx
View File

@@ -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 (
<Item key={getNavModelItemKey(item)} textValue={item.text}>
<NavBarMenuItem
isDivider={!isSection && item.divider}
icon={isSection ? undefined : (item.icon as IconName)}
icon={icon}
target={item.target}
text={itemText}
url={item.url}

8
public/app/core/components/NavBar/Next/NavBarMenuItem.tsx
View File

@@ -28,11 +28,11 @@ export function NavBarMenuItem({
isMobile = false,
}: Props) {
const theme = useTheme2();
const styles = getStyles(theme, isActive);
const styles = getStyles(theme, isActive, Boolean(icon));
const elStyle = cx(styles.element, styleOverrides);
const linkContent = (
<div className={styles.linkContent}>
{icon && <Icon data-testid="dropdown-child-icon" name={icon} />}
<span>{text}</span>
{target === '_blank' && (
<Icon data-testid="external-link-icon" name="external-link-alt" className={styles.externalLinkIcon} />
@@ -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,