diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx index 0c7b5ce2f07..89978940c2f 100644 --- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx +++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx @@ -1,6 +1,5 @@ import { css } from '@emotion/css'; import { DOMAttributes } from '@react-types/shared'; -import { cloneDeep } from 'lodash'; import React, { forwardRef } from 'react'; import { useLocation } from 'react-router-dom'; @@ -22,14 +21,12 @@ export interface Props extends DOMAttributes { export const MegaMenu = React.memo( forwardRef(({ onClose, ...restProps }, ref) => { - const navBarTree = useSelector((state) => state.navBarTree); + const navTree = useSelector((state) => state.navBarTree); const styles = useStyles2(getStyles); const location = useLocation(); const { chrome } = useGrafana(); const state = chrome.useState(); - const navTree = cloneDeep(navBarTree); - // Remove profile + help from tree const navItems = navTree .filter((item) => item.id !== 'profile' && item.id !== 'help') diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/utils.ts b/public/app/core/components/AppChrome/DockedMegaMenu/utils.ts index 2f180c5e674..89384f0eb6c 100644 --- a/public/app/core/components/AppChrome/DockedMegaMenu/utils.ts +++ b/public/app/core/components/AppChrome/DockedMegaMenu/utils.ts @@ -30,18 +30,20 @@ export const enrichHelpItem = (helpItem: NavModelItem) => { }; export const enrichWithInteractionTracking = (item: NavModelItem, expandedState: boolean) => { - const onClick = item.onClick; - item.onClick = () => { + // creating a new object here to not mutate the original item object + const newItem = { ...item }; + const onClick = newItem.onClick; + newItem.onClick = () => { reportInteraction('grafana_navigation_item_clicked', { - path: item.url ?? item.id, + path: newItem.url ?? newItem.id, state: expandedState ? 'expanded' : 'collapsed', }); onClick?.(); }; - if (item.children) { - item.children = item.children.map((item) => enrichWithInteractionTracking(item, expandedState)); + if (newItem.children) { + newItem.children = newItem.children.map((item) => enrichWithInteractionTracking(item, expandedState)); } - return item; + return newItem; }; export const isMatchOrChildMatch = (itemToCheck: NavModelItem, searchItem?: NavModelItem) => {