Feat/preservation journey

src/components/TreeView/TreeView.tsx

@@ -8,7 +8,8 @@ import {
 } from './style';
 import Spinner from '../Spinner';
 import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useLibraryContext } from '@procosys/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview';
 
 /**
  * @param id Unique identifier across all nodes in the tree (number or string).
@@ -56,6 +57,29 @@ const TreeView = ({
     const [isNodeExpanded, setIsNodeExpanded] = useState(false);
     const [executionCount, setExecutionCount] = useState(0);
     const { pathname } = useLocation();
+    const navigate = useNavigate();
+
+    const { newJourney } = useLibraryContext();
+
+    // useEffect(() => {
+    //     const getBasePath = (pathname: string): string => {
+    //         const segments = pathname.split('/').filter(Boolean);
+    //         if (segments.length < 2) return '';
+    //         return `/${segments[0]}/${segments[1]}`;
+    //     };
+
+    //     const baseLibraryPath = getBasePath(pathname);
+
+    //     if (newJourney?.project?.description && newJourney?.title) {
+    //         const updatedPath = `${baseLibraryPath}/Preservation%20journeys/${encodeURIComponent(
+    //             newJourney.project.description
+    //         )}/${encodeURIComponent(newJourney.title)}`;
+
+    //         if (pathname !== updatedPath) {
+    //             navigate(updatedPath, { replace: true });
+    //         }
+    //     }
+    // }, [newJourney, pathname, navigate]);
 
     const getNodeChildCountAndCollapse = (
         parentNodeId: string | number
@@ -307,6 +331,7 @@ const TreeView = ({
                             handleOnClick(node);
                         }}
                         isSelected={node.isSelected ? true : false}
+                        title={node.name}
                     >
                         {node.name}
                     </NodeLink>
@@ -319,7 +344,12 @@ const TreeView = ({
             return (
                 <Link
                     to={finalPath}
-                    style={{ textDecoration: 'none', color: 'inherit' }}
+                    title={node.name}
+                    style={{
+                        textDecoration: 'none',
+                        color: 'inherit',
+                        width: '100%',
+                    }}
                 >
                     {linkContent}
                 </Link>

src/components/TreeView/style.ts

@@ -4,6 +4,7 @@ import { tokens } from '@equinor/eds-tokens';
 export const TreeContainer = styled.div`
     display: flex;
     flex-direction: column;
+    max-width: 100%;
 `;
 
 interface NodeContainerProps {
@@ -17,6 +18,8 @@ export const NodeContainer = styled.div<NodeContainerProps>`
 
     margin-left: ${(props): string =>
         `calc(var(--grid-unit) * ${props.indentMultiplier} - 4px)`};
+    margin-left: ${(props): string =>
+        `calc(var(--grid-unit) * ${props.indentMultiplier} - 4px)`};
 `;
 
 interface ExpandCollapseIconProps {

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

@@ -4,7 +4,9 @@ import React, { useEffect, useReducer, useState } from 'react';
 import { Helmet } from 'react-helmet';
 //import withAccessControl from '../../../../core/security/withAccessControl';
 import LibraryItemDetails from './LibraryItemDetails';
-import LibraryTreeview from './LibraryTreeview/LibraryTreeview';
+import LibraryTreeview, {
+    LibraryProvider,
+} from './LibraryTreeview/LibraryTreeview';
 import { hot } from 'react-hot-loader';
 
 import { Route, Routes } from 'react-router-dom';
@@ -111,43 +113,50 @@ const Library = (): JSX.Element => {
     };
 
     return (
-        <Container>
-            {selectedLibraryType && (
-                <Helmet>
-                    <title>{` - ${selectedLibraryType}`}</title>
-                </Helmet>
-            )}
-            <LibraryTreeview
-                forceUpdate={forceUpdate}
-                setSelectedLibraryType={setSelectedLibraryType}
-                setSelectedLibraryItem={setSelectedLibraryItem}
-                dirtyLibraryType={dirtyLibraryType}
-                resetDirtyLibraryType={(): void => setDirtyLibraryType('')}
-            />
-
-            <Divider />
-            <Routes>
-                <Route
-                    path="/"
-                    element={
-                        <LibraryItemContainer
-                            addPaddingRight={
-                                selectedLibraryType !== LibraryType.TAG_FUNCTION
-                            }
-                        >
-                            <LibraryItemDetails
-                                forceUpdate={update}
-                                libraryType={selectedLibraryType}
-                                libraryItem={selectedLibraryItem}
-                                setSelectedLibraryType={setSelectedLibraryType}
-                                setSelectedLibraryItem={setSelectedLibraryItem}
-                                setDirtyLibraryType={setDirtyLibraryType}
-                            />
-                        </LibraryItemContainer>
-                    }
+        <LibraryProvider>
+            <Container>
+                {selectedLibraryType && (
+                    <Helmet>
+                        <title>{` - ${selectedLibraryType}`}</title>
+                    </Helmet>
+                )}
+                <LibraryTreeview
+                    forceUpdate={forceUpdate}
+                    setSelectedLibraryType={setSelectedLibraryType}
+                    setSelectedLibraryItem={setSelectedLibraryItem}
+                    dirtyLibraryType={dirtyLibraryType}
+                    resetDirtyLibraryType={(): void => setDirtyLibraryType('')}
                 />
-            </Routes>
-        </Container>
+
+                <Divider />
+                <Routes>
+                    <Route
+                        path="/"
+                        element={
+                            <LibraryItemContainer
+                                addPaddingRight={
+                                    selectedLibraryType !==
+                                    LibraryType.TAG_FUNCTION
+                                }
+                            >
+                                <LibraryItemDetails
+                                    forceUpdate={update}
+                                    libraryType={selectedLibraryType}
+                                    libraryItem={selectedLibraryItem}
+                                    setSelectedLibraryType={
+                                        setSelectedLibraryType
+                                    }
+                                    setSelectedLibraryItem={
+                                        setSelectedLibraryItem
+                                    }
+                                    setDirtyLibraryType={setDirtyLibraryType}
+                                />
+                            </LibraryItemContainer>
+                        }
+                    />
+                </Routes>
+            </Container>
+        </LibraryProvider>
     );
 };
 

src/modules/PlantConfig/views/Library/LibraryTreeview/LibraryTreeview.style.ts

@@ -7,4 +7,5 @@ export const Container = styled.div`
     padding-top: var(--margin-module--top);
     padding-right: calc(var(--grid-unit) * 5);
     padding-left: calc(var(--grid-unit) * 5);
+    width: 20vw;
 `;

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

@@ -4,7 +4,7 @@ import TreeView, {
 
 import { Container } from './LibraryTreeview.style';
 import { LibraryType } from '../Library';
-import React from 'react';
+import React, { createContext, useContext, useState } from 'react';
 import { showSnackbarNotification } from '../../../../../core/services/NotificationService';
 import { usePlantConfigContext } from '../../../context/PlantConfigContext';
 import {
@@ -282,3 +282,39 @@ const LibraryTreeview = (props: LibraryTreeviewProps): JSX.Element => {
 };
 
 export default LibraryTreeview;
+
+interface LibraryContextType {
+    newJourney: Journey;
+    setNewJourney: (journey: Journey) => void;
+}
+
+const LibraryContext = createContext<LibraryContextType | undefined>(undefined);
+
+export const LibraryProvider: React.FC<{ children: React.ReactNode }> = ({
+    children,
+}) => {
+    const [newJourney, setNewJourney] = useState<Journey>({
+        id: -1,
+        title: '',
+        isVoided: false,
+        isInUse: false,
+        steps: [],
+        rowVersion: '',
+    });
+
+    return (
+        <LibraryContext.Provider value={{ newJourney, setNewJourney }}>
+            {children}
+        </LibraryContext.Provider>
+    );
+};
+
+export const useLibraryContext = (): LibraryContextType => {
+    const context = useContext(LibraryContext);
+    if (!context) {
+        throw new Error(
+            'useLibraryContext must be used within a LibraryProvider'
+        );
+    }
+    return context;
+};