Fix crash when moving between VMs from different namespaces

src/views/virtualmachines/list/components/VirtualMachineRow/VirtualMachineRowLayout.tsx

@@ -12,7 +12,6 @@ import { Checkbox } from '@patternfly/react-core';
 import VirtualMachineActions from '@virtualmachines/actions/components/VirtualMachineActions/VirtualMachineActions';
 import useVirtualMachineActionsProvider from '@virtualmachines/actions/hooks/useVirtualMachineActionsProvider';
 import { deselectVM, isVMSelected, selectVM } from '@virtualmachines/list/selectedVMs';
-import { setSelectedTreeItem, treeDataMap } from '@virtualmachines/tree/utils/utils';
 
 import VirtualMachineStatus from '../VirtualMachineStatus/VirtualMachineStatus';
 import { VMStatusConditionLabelList } from '../VMStatusConditionLabel';
@@ -39,7 +38,6 @@ const VirtualMachineRowLayout: FC<
 
   const vmName = useMemo(() => getName(obj), [obj]);
   const vmNamespace = useMemo(() => getNamespace(obj), [obj]);
-
   const [actions] = useVirtualMachineActionsProvider(obj, vmim, isSingleNodeCluster);
   return (
     <>
@@ -52,9 +50,6 @@ const VirtualMachineRowLayout: FC<
       </TableData>
       <TableData activeColumnIDs={activeColumnIDs} className="pf-m-width-20 vm-column" id="name">
         <ResourceLink
-          onClick={() => {
-            setSelectedTreeItem(treeDataMap.value[`${vmNamespace}/${vmName}`]);
-          }}
           groupVersionKind={VirtualMachineModelGroupVersionKind}
           name={vmName}
           namespace={vmNamespace}

src/views/virtualmachines/tree/VirtualMachineTreeView.tsx

@@ -14,7 +14,6 @@ import {
 
 import TreeViewContent from './components/TreeViewContent';
 import { useHideNamespaceBar } from './hooks/useHideNamespaceBar';
-import { useSyncClicksEffects } from './hooks/useSyncClicksEffects';
 import { useTreeViewData } from './hooks/useTreeViewData';
 import useTreeViewSelect from './hooks/useTreeViewSelect';
 import {
@@ -42,13 +41,12 @@ const VirtualMachineTreeView: FC<VirtualMachineTreeViewProps> = ({ children, onF
 
   const { featureEnabled: treeViewEnabled, loading } = useFeatures(TREE_VIEW);
 
-  const { loaded, loadError, treeData, vms } = useTreeViewData(activeNamespace);
+  const { loaded, loadError, selectedTreeItem, treeData, vms } = useTreeViewData(activeNamespace);
 
   const onSelect = useTreeViewSelect(onFilterChange, vms);
 
   const isOpen = useMemo(() => drawerOpen === SHOW, [drawerOpen]);
 
-  useSyncClicksEffects(activeNamespace, loaded);
   useHideNamespaceBar();
   useEffect(() => {
     const drawerPanel = document.getElementById(TREE_VIEW_PANEL_ID);
@@ -87,6 +85,7 @@ const VirtualMachineTreeView: FC<VirtualMachineTreeViewProps> = ({ children, onF
               isOpen={isOpen}
               loaded={loaded}
               onSelect={onSelect}
+              selectedTreeItem={selectedTreeItem}
               toggleDrawer={toggleDrawer}
               treeData={treeData}
             />

src/views/virtualmachines/tree/components/CreateProject.tsx

@@ -1,16 +1,19 @@
 import React, { FC } from 'react';
 
 import CreateProjectModal from '@kubevirt-utils/components/CreateProjectModal/CreateProjectModal';
+import { useQueryParamsMethods } from '@kubevirt-utils/components/ListPageFilter/hooks/useQueryParamsMethods';
 import { useModal } from '@kubevirt-utils/components/ModalProvider/ModalProvider';
 import { useKubevirtTranslation } from '@kubevirt-utils/hooks/useKubevirtTranslation';
 import { getName } from '@kubevirt-utils/resources/shared';
 import { useActiveNamespace } from '@openshift-console/dynamic-plugin-sdk';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { PlusCircleIcon } from '@patternfly/react-icons';
+import { TEXT_FILTER_LABELS_ID } from '@virtualmachines/list/hooks/constants';
 
 const CreateProject: FC = () => {
   const { t } = useKubevirtTranslation();
   const [_, setActiveNamespace] = useActiveNamespace();
+  const { removeQueryArguments } = useQueryParamsMethods();
   const { createModal } = useModal();
   return (
     <Button
@@ -19,8 +22,8 @@ const CreateProject: FC = () => {
           <CreateProjectModal
             {...props}
             createdProject={(namespace) => {
-              const nsName = getName(namespace);
-              setActiveNamespace(nsName);
+              removeQueryArguments(TEXT_FILTER_LABELS_ID);
+              setActiveNamespace(getName(namespace));
             }}
           />
         ))

src/views/virtualmachines/tree/components/TreeViewContent.tsx

@@ -11,7 +11,6 @@ import {
 } from '@patternfly/react-core';
 
 import UseFilteredTreeView from '../hooks/UseFilteredTreeView';
-import { selectedTreeItem } from '../utils/utils';
 
 import CreateProject from './CreateProject';
 import PanelToggleButton from './PanelToggleButton';
@@ -22,6 +21,7 @@ type TreeViewContentProps = {
   isOpen: boolean;
   loaded: boolean;
   onSelect: (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => void;
+  selectedTreeItem: TreeViewDataItem;
   toggleDrawer: () => void;
   treeData: TreeViewDataItem[];
 };
@@ -30,12 +30,12 @@ const TreeViewContent: FC<TreeViewContentProps> = ({
   isOpen,
   loaded,
   onSelect,
+  selectedTreeItem,
   toggleDrawer,
   treeData,
 }) => {
   const { t } = useKubevirtTranslation();
   const [showAll, setShowAll] = useState<boolean>();
-
   const { filteredTreeData, onSearch } = UseFilteredTreeView(treeData, setShowAll);
   if (!isOpen) {
     return (
@@ -69,7 +69,7 @@ const TreeViewContent: FC<TreeViewContentProps> = ({
       </DrawerHead>
       <DrawerPanelBody className="vms-tree-view-body">
         <TreeView
-          activeItems={selectedTreeItem.value}
+          activeItems={[selectedTreeItem]}
           allExpanded={showAll}
           data={filteredTreeData}
           hasBadges={loaded}

src/views/virtualmachines/tree/hooks/useTreeViewData.ts

@@ -16,14 +16,14 @@ type UseTreeViewData = {
   isAdmin: boolean;
   loaded: boolean;
   loadError: any;
+  selectedTreeItem: TreeViewDataItem;
   treeData: TreeViewDataItem[];
   vms: V1VirtualMachine[];
 };
 
 export const useTreeViewData = (activeNamespace: string): UseTreeViewData => {
   const isAdmin = useIsAdmin();
   const { featureEnabled: treeViewFoldersEnabled } = useFeatures(TREE_VIEW_FOLDERS);
-
   const [projectNames, projectNamesLoaded, projectNamesError] = useProjects();
 
   const [allVMs, allVMsLoaded] = useK8sWatchResource<V1VirtualMachine[]>({
@@ -53,7 +53,7 @@ export const useTreeViewData = (activeNamespace: string): UseTreeViewData => {
     [allVMs, allowedResources, isAdmin],
   );
 
-  const treeData = useMemo(
+  const [treeData, selectedTreeItem] = useMemo(
     () =>
       createTreeViewData(
         projectNames,
@@ -74,6 +74,7 @@ export const useTreeViewData = (activeNamespace: string): UseTreeViewData => {
         ? allVMsLoaded
         : Object.values(allowedResources).some((resource) => resource.loaded)),
     loadError: projectNamesError,
+    selectedTreeItem,
     treeData,
     vms: memoizedVMs,
   };

src/views/virtualmachines/tree/hooks/useTreeViewSelect.ts

@@ -14,23 +14,22 @@ import {
   PROJECT_SELECTOR_PREFIX,
   VM_FOLDER_LABEL,
 } from '../utils/constants';
-import { setSelectedTreeItem } from '../utils/utils';
 
 const useTreeViewSelect = (
   onFilterChange: (type: string, value: FilterValue) => void,
   vms: V1VirtualMachine[],
 ) => {
   const navigate = useNavigate();
   const { setOrRemoveQueryArgument } = useQueryParamsMethods();
+
   const vmsMapper = useMemo(() => convertResourceArrayToMap(vms, true), [vms]);
 
   const onSelect = (_event: MouseEvent, treeViewItem: TreeViewDataItem) => {
-    setSelectedTreeItem(treeViewItem);
     onFilterChange?.(TEXT_FILTER_LABELS_ID, null);
 
     const treeItemName = treeViewItem.name as string;
     if (treeViewItem.id.startsWith(FOLDER_SELECTOR_PREFIX)) {
-      const [_, folderNamespace] = treeViewItem.id.split('/');
+      const [__, folderNamespace] = treeViewItem.id.split('/');
       navigate(
         getResourceUrl({
           activeNamespace: folderNamespace,

src/views/virtualmachines/tree/utils/constants.ts

@@ -13,5 +13,6 @@ export const SYSTEM_NAMESPACES = ['default', 'openshift'];
 export const SHOW_EMPTY_PROJECTS_KEY = 'showEmptyProjects';
 export const TREE_VIEW_LAST_WIDTH = 'treeViewLastWidth';
 export const SHOW_TREE_VIEW = 'showTreeView';
+export const SELECTED_ITEM = 'selectedItem';
 export const SHOW = 'show';
 export const HIDE = 'hide';

src/views/virtualmachines/tree/utils/utils.tsx

@@ -18,9 +18,6 @@ import {
 } from './constants';
 
 export const treeDataMap = signal<Record<string, TreeViewDataItem>>(null);
-export const selectedTreeItem = signal<TreeViewDataItem[]>(null);
-export const setSelectedTreeItem = (selected: TreeViewDataItem) =>
-  (selectedTreeItem.value = [selected]);
 
 const buildProjectMap = (
   vms: V1VirtualMachine[],
@@ -161,7 +158,7 @@ export const createTreeViewData = (
   isAdmin: boolean,
   pathname: string,
   foldersEnabled: boolean,
-): TreeViewDataItem[] => {
+): [TreeViewDataItem[], TreeViewDataItem] => {
   const currentPageVMName = pathname.split('/')[5];
   const treeViewDataMap: Record<string, TreeViewDataItem> = {};
   const projectMap = buildProjectMap(vms, currentPageVMName, treeViewDataMap, foldersEnabled);
@@ -170,17 +167,29 @@ export const createTreeViewData = (
     createProjectTreeItem(project, projectMap, activeNamespace, currentPageVMName, treeViewDataMap),
   );
 
-  if (isAdmin) {
-    const allNamespacesTreeItem = createAllNamespacesTreeItem(
-      treeViewData,
-      treeViewDataMap,
-      projectMap,
-    );
-    return [allNamespacesTreeItem];
-  }
+  const allNamespacesTreeItem = isAdmin
+    ? createAllNamespacesTreeItem(treeViewData, treeViewDataMap, projectMap)
+    : null;
+
+  const getSelectedTreeItem = (): TreeViewDataItem => {
+    if (activeNamespace === ALL_NAMESPACES_SESSION_KEY) return allNamespacesTreeItem;
+
+    if (currentPageVMName) return treeViewDataMap[`${activeNamespace}/${currentPageVMName}`];
+
+    const params = new URLSearchParams(window.location.search);
+
+    if (!params?.has('labels'))
+      return treeViewDataMap[`${PROJECT_SELECTOR_PREFIX}/${activeNamespace}`];
+
+    const folderLabel: string = params.values().next().value;
+    const folder = folderLabel.split('=')?.[1];
+
+    return treeViewDataMap[`${FOLDER_SELECTOR_PREFIX}/${activeNamespace}/${folder}`];
+  };
 
   treeDataMap.value = treeViewDataMap;
-  return treeViewData;
+
+  return [[allNamespacesTreeItem] ?? treeViewData, getSelectedTreeItem()];
 };
 
 export const filterItems = (item: TreeViewDataItem, input: string) => {