fix(compass-connections-navigation): use updated reference of required props while rendering NavigationItem (#5955)

Author: himanshusinghs

packages/compass-connections-navigation/src/connections-navigation-tree.tsx

@@ -182,9 +182,18 @@ const ConnectionsNavigationTree: React.FunctionComponent<
             height={height}
             itemHeight={ROW_HEIGHT}
             onDefaultAction={onDefaultAction}
-            onExpandedChange={onItemExpand}
+            onItemAction={onItemAction}
+            onItemExpand={onItemExpand}
+            getItemActions={getItemActions}
             getItemKey={(item) => item.id}
-            renderItem={({ item, isActive, isFocused }) => {
+            renderItem={({
+              item,
+              isActive,
+              isFocused,
+              onItemAction,
+              onItemExpand,
+              getItemActions,
+            }) => {
               return (
                 <NavigationItem
                   item={item}

packages/compass-connections-navigation/src/navigation-item.tsx

@@ -5,7 +5,6 @@ import { PlaceholderItem } from './placeholder';
 import StyledNavigationItem from './styled-navigation-item';
 import { NavigationBaseItem } from './base-navigation-item';
 import type { NavigationItemActions } from './item-actions';
-import type { OnExpandedChange } from './virtual-list/virtual-list';
 import type { SidebarTreeItem, SidebarActionableItem } from './tree-data';
 import { getTreeItemStyles } from './utils';
 import { ConnectionStatus } from '@mongodb-js/compass-connections/provider';
@@ -18,7 +17,7 @@ type NavigationItemProps = {
   isFocused: boolean;
   getItemActions: (item: SidebarTreeItem) => NavigationItemActions;
   onItemAction: (item: SidebarActionableItem, action: Actions) => void;
-  onItemExpand: OnExpandedChange<SidebarActionableItem>;
+  onItemExpand(item: SidebarActionableItem, isExpanded: boolean): void;
 };
 
 export function NavigationItem({

packages/compass-connections-navigation/src/virtual-list/virtual-list.spec.tsx

@@ -91,7 +91,9 @@ function NavigationTree({
       height={400}
       itemHeight={30}
       onDefaultAction={() => {}}
-      onExpandedChange={onExpandedChange}
+      onItemExpand={onExpandedChange}
+      onItemAction={() => {}}
+      getItemActions={() => []}
       width={100}
       renderItem={({ item }) => item.name}
       __TEST_OVER_SCAN_COUNT={Infinity}

packages/compass-connections-navigation/src/virtual-list/virtual-list.tsx

@@ -15,6 +15,9 @@ import {
   useFocusRing,
   useId,
 } from '@mongodb-js/compass-components';
+import { type SidebarActionableItem, type SidebarTreeItem } from '../tree-data';
+import { type Actions } from '../constants';
+import { type NavigationItemActions } from '../item-actions';
 
 function useDefaultAction<T extends VirtualTreeItem>(
   item: T,
@@ -55,12 +58,18 @@ type RenderItem<T> = (props: {
   isActive: boolean;
   isFocused: boolean;
   item: T;
+  onItemAction(this: void, item: SidebarActionableItem, action: Actions): void;
+  onItemExpand(
+    this: void,
+    item: SidebarActionableItem,
+    isExpanded: boolean
+  ): void;
+  getItemActions(this: void, item: SidebarTreeItem): NavigationItemActions;
 }) => React.ReactNode;
 export type OnDefaultAction<T> = (
   item: T,
   evt: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>
 ) => void;
-export type OnExpandedChange<T> = (item: T, expanded: boolean) => void;
 
 type VirtualTreeProps<T extends VirtualItem> = {
   dataTestId?: string;
@@ -72,7 +81,13 @@ type VirtualTreeProps<T extends VirtualItem> = {
   renderItem: RenderItem<T>;
   getItemKey?: (item: T) => string;
   onDefaultAction: OnDefaultAction<NotPlaceholderTreeItem<T>>;
-  onExpandedChange: OnExpandedChange<NotPlaceholderTreeItem<T>>;
+  onItemExpand(
+    this: void,
+    item: SidebarActionableItem,
+    isExpanded: boolean
+  ): void;
+  onItemAction(this: void, item: SidebarActionableItem, action: Actions): void;
+  getItemActions(this: void, item: SidebarTreeItem): NavigationItemActions;
 
   __TEST_OVER_SCAN_COUNT?: number;
 };
@@ -99,7 +114,9 @@ export function VirtualTree<T extends VirtualItem>({
   getItemKey: _getItemKey,
   renderItem: _renderItem,
   onDefaultAction,
-  onExpandedChange,
+  onItemExpand,
+  onItemAction,
+  getItemActions,
   __TEST_OVER_SCAN_COUNT,
 }: VirtualTreeProps<T>) {
   const listRef = useRef<List | null>(null);
@@ -122,7 +139,7 @@ export function VirtualTree<T extends VirtualItem>({
     useVirtualNavigationTree<HTMLDivElement>({
       items,
       activeItemId,
-      onExpandedChange,
+      onExpandedChange: onItemExpand,
       onFocusMove,
     });
 
@@ -136,6 +153,9 @@ export function VirtualTree<T extends VirtualItem>({
       activeItemId,
       renderItem,
       onDefaultAction,
+      onItemAction,
+      onItemExpand,
+      getItemActions,
     };
   }, [
     items,
@@ -144,6 +164,9 @@ export function VirtualTree<T extends VirtualItem>({
     onDefaultAction,
     activeItemId,
     isTreeItemFocused,
+    onItemAction,
+    getItemActions,
+    onItemExpand,
   ]);
 
   const getItemKey = useCallback(
@@ -187,6 +210,13 @@ type VirtualItemData<T extends VirtualItem> = {
   activeItemId?: string;
   renderItem: RenderItem<T>;
   onDefaultAction: OnDefaultAction<NotPlaceholderTreeItem<T>>;
+  onItemAction(this: void, item: SidebarActionableItem, action: Actions): void;
+  onItemExpand(
+    this: void,
+    item: SidebarActionableItem,
+    isExpanded: boolean
+  ): void;
+  getItemActions(this: void, item: SidebarTreeItem): NavigationItemActions;
 };
 function TreeItem<T extends VirtualItem>({
   index,
@@ -206,6 +236,9 @@ function TreeItem<T extends VirtualItem>({
         data.isTreeItemFocused &&
         !isPlaceholderItem(item) &&
         item.id === data.currentTabbable,
+      onItemAction: data.onItemAction,
+      onItemExpand: data.onItemExpand,
+      getItemActions: data.getItemActions,
     });
   }, [
     renderItem,
@@ -214,6 +247,9 @@ function TreeItem<T extends VirtualItem>({
     activeItemId,
     data.currentTabbable,
     data.isTreeItemFocused,
+    data.onItemAction,
+    data.getItemActions,
+    data.onItemExpand,
   ]);
 
   const actionProps = useDefaultAction(