Nav: Replace cloneDeep() in MegaMenu (#76607)

* refactor: remove deep clone of nav tree

* refactor: fix mutation issue

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<HTMLDivElement, Props>(({ 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')

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) => {