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,
@@ -39,14 +39,14 @@ export interface TreeViewProps {
     resetDirtyNode?: () => void;
     hasUnsavedChanges?: boolean;
     unsavedChangesConfirmationMessage?: string;
+    selectedLibraryItem: string;
 }
 
 const TreeView = ({
     rootNodes,
     dirtyNodeId,
     resetDirtyNode,
-    hasUnsavedChanges = false,
-    unsavedChangesConfirmationMessage = 'You have unsaved changes. Are you sure you want to continue?',
+    selectedLibraryItem,
 }: TreeViewProps): JSX.Element => {
     const [treeData, setTreeData] = useState<NodeData[]>(rootNodes);
     const [loading, setLoading] = useState<number | string | null>();
@@ -56,7 +56,6 @@ const TreeView = ({
     const [isNodeExpanded, setIsNodeExpanded] = useState(false);
     const [executionCount, setExecutionCount] = useState(0);
     const { pathname } = useLocation();
-
     const getNodeChildCountAndCollapse = (
         parentNodeId: string | number
     ): number => {
@@ -249,12 +248,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];
@@ -287,7 +280,6 @@ const TreeView = ({
             return basePath;
         };
         const baseLibraryPath = getBasePath(pathname);
-
         const parentPath = constructPath(node, treeData);
         const finalPath = `${baseLibraryPath}/${parentPath}`;
 
@@ -296,17 +288,14 @@ const TreeView = ({
                 hasChildren={node.getChildren ? true : false}
                 isExpanded={node.isExpanded === true}
                 isVoided={node.isVoided === true}
-                isSelected={node.isSelected === true}
+                isSelected={node.id.toString().includes(selectedLibraryItem)}
                 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>
@@ -457,7 +446,6 @@ const TreeView = ({
 
     useEffect(() => {
         let isMounted = true;
-
         const nodeNames = pathname
             .split('/')
             .filter((name) => name.trim() !== '')

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;
@@ -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

src/modules/PlantConfig/views/Library/Library.tsx

@@ -7,7 +7,7 @@ import LibraryItemDetails from './LibraryItemDetails';
 import LibraryTreeview from './LibraryTreeview/LibraryTreeview';
 import { hot } from 'react-hot-loader';
 
-import { Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 
 export enum LibraryType {
     TAG_FUNCTION = 'TagFunction',
@@ -34,7 +34,7 @@ const Library = (): JSX.Element => {
     const [selectedLibraryItem, setSelectedLibraryItem] = useState('');
     const [dirtyLibraryType, setDirtyLibraryType] = useState('');
     const [update, forceUpdate] = useReducer((x) => x + 1, 0); // Used to force an update on library content pane for top level tree nodes
-
+    const { pathname } = useLocation();
     useEffect(() => {
         const pathSegments = window.location.pathname
             .split('/')
@@ -54,7 +54,7 @@ const Library = (): JSX.Element => {
 
             extractAndSetItemId(segmentsAfterLibraryV2);
         }
-    }, []);
+    }, [pathname]);
 
     const mapSegmentsToLibraryType = (segments: string[]): string => {
         const firstSegment = segments[0]?.toLowerCase().replace(/%20/g, ' ');
@@ -118,6 +118,7 @@ const Library = (): JSX.Element => {
                 </Helmet>
             )}
             <LibraryTreeview
+                selectedLibraryItem={selectedLibraryItem}
                 forceUpdate={forceUpdate}
                 setSelectedLibraryType={setSelectedLibraryType}
                 setSelectedLibraryItem={setSelectedLibraryItem}

src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.tsx

@@ -18,11 +18,11 @@ type LibraryTreeviewProps = {
     setSelectedLibraryItem: (libraryItem: string) => void;
     dirtyLibraryType: string;
     resetDirtyLibraryType: () => void;
+    selectedLibraryItem: string;
 };
 
 const LibraryTreeview = (props: LibraryTreeviewProps): JSX.Element => {
     const { isDirty } = useDirtyContext();
-
     const { libraryApiClient, preservationApiClient } = usePlantConfigContext();
 
     const handleTreeviewClick = (
@@ -270,6 +270,7 @@ const LibraryTreeview = (props: LibraryTreeviewProps): JSX.Element => {
         <Container>
             <TreeView
                 rootNodes={rootNodes}
+                selectedLibraryItem={props.selectedLibraryItem}
                 dirtyNodeId={props.dirtyLibraryType}
                 resetDirtyNode={props.resetDirtyLibraryType}
                 hasUnsavedChanges={isDirty}