bug:🐛 fix double confirm dialog

src/components/TreeView/TreeView.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
     TreeContainer,
     NodeContainer,
@@ -45,8 +45,6 @@ const TreeView = ({
     rootNodes,
     dirtyNodeId,
     resetDirtyNode,
-    hasUnsavedChanges = false,
-    unsavedChangesConfirmationMessage = 'You have unsaved changes. Are you sure you want to continue?',
 }: TreeViewProps): JSX.Element => {
     const [treeData, setTreeData] = useState<NodeData[]>(rootNodes);
     const [loading, setLoading] = useState<number | string | null>();
@@ -56,7 +54,7 @@ const TreeView = ({
     const [isNodeExpanded, setIsNodeExpanded] = useState(false);
     const [executionCount, setExecutionCount] = useState(0);
     const { pathname } = useLocation();
-
+    const nodeIdFromPath = pathname.split('/').filter(Boolean).pop() || '';
     const getNodeChildCountAndCollapse = (
         parentNodeId: string | number
     ): number => {
@@ -249,12 +247,6 @@ const TreeView = ({
         node.onClick && node.onClick();
     };
 
-    const handleOnClick = (node: NodeData): void => {
-        if (!hasUnsavedChanges || confirm(unsavedChangesConfirmationMessage)) {
-            selectNode(node);
-        }
-    };
-
     const getParentPath = (node: NodeData, treeData: NodeData[]): any => {
         if (!node.parentId) {
             return [node.name];
@@ -280,14 +272,18 @@ const TreeView = ({
         }
     };
 
+    const node = treeData.find((node) => node.id === nodeIdFromPath);
+    if (node && node.onClick) {
+        node.onClick();
+    }
+
     const getNodeLink = (node: NodeData): JSX.Element => {
         const getBasePath = (pathname: string): string => {
             const segments = pathname.split('/').filter(Boolean);
             const basePath = `/${segments[0]}/${segments[1]}`;
             return basePath;
         };
         const baseLibraryPath = getBasePath(pathname);
-
         const parentPath = constructPath(node, treeData);
         const finalPath = `${baseLibraryPath}/${parentPath}`;
 
@@ -296,17 +292,14 @@ const TreeView = ({
                 hasChildren={node.getChildren ? true : false}
                 isExpanded={node.isExpanded === true}
                 isVoided={node.isVoided === true}
-                isSelected={node.isSelected === true}
+                isSelected={node.id === nodeIdFromPath}
                 title={node.name}
             >
                 {node.onClick ? (
                     <NodeLink
+                        to={finalPath}
                         isExpanded={node.isExpanded === true}
                         isVoided={node.isVoided === true}
-                        onClick={(): void => {
-                            handleOnClick(node);
-                        }}
-                        isSelected={node.isSelected ? true : false}
                     >
                         {node.name}
                     </NodeLink>

src/components/TreeView/style.ts

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { tokens } from '@equinor/eds-tokens';
+import { NavLink } from 'react-router-dom';
 
 export const TreeContainer = styled.div`
     display: flex;
@@ -58,7 +59,7 @@ interface NodeNameProps {
     hasChildren: boolean;
     isExpanded: boolean;
     isVoided: boolean;
-    isSelected: boolean;
+    isSelected?: boolean;
 }
 
 export const NodeName = styled.div<NodeNameProps>`
@@ -96,11 +97,12 @@ export const NodeName = styled.div<NodeNameProps>`
 interface NodeLinkProps {
     isExpanded: boolean;
     isVoided: boolean;
-    isSelected: boolean;
 }
 
-export const NodeLink = styled.span<NodeLinkProps>`
+export const NodeLink = styled(NavLink)<NodeLinkProps>`
     cursor: pointer;
+    text-decoration: none;
+    color: inherit;
 
     ${(props): any =>
         props.isExpanded &&
@@ -114,13 +116,6 @@ export const NodeLink = styled.span<NodeLinkProps>`
             opacity: 0.5;
         `}
 
-    ${(props): any =>
-        props.isSelected &&
-        css`
-            color: ${tokens.colors.interactive.primary__resting.rgba};
-            background: ${tokens.colors.ui.background__light.rgba};
-        `}
-
     :hover {
         color: ${(props): string =>
             !props.isVoided