MWB-888: make arrow work for source and target

meaningfy-ws · Dec 6, 2024 · b3b4620 · b3b4620
1 parent 0325147
commit b3b4620
Showing 1 changed file with 56 additions and 5 deletions.
diff --git a/mapping_workbench/frontend/src/sections/components/arrow-buttons/arrow-buttons.js b/mapping_workbench/frontend/src/sections/components/arrow-buttons/arrow-buttons.js
@@ -1,8 +1,20 @@
-export const ArrowButton = ({children, icon, style, active}) => {
-    return <button style={style}
-                   className={`btn-arrow btn-arrow-right ${active ? 'active' : ''}`}>
-        <span style={{display: 'flex', alignItems: 'center'}}>{icon}{children}</span>
-    </button>
+import ArchiveIcon from '@mui/icons-material/Archive';
+import DvrIcon from '@mui/icons-material/Dvr';
+import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
+import LightbulbCircleIcon from '@mui/icons-material/LightbulbCircle';
+import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
+import VerifiedIcon from '@mui/icons-material/Verified';
+import Link from 'next/link';
+import {useRouter} from 'next/router';
+import {paths} from '../../../paths';
+
+export const ArrowButton = ({children, icon, style, active, href = '#', first, last}) => {
+    return <Link href={href}>
+        <button style={style}
+                className={`btn-arrow btn-arrow-right ${active ? 'active' : ''} ${first ? 'first' : ''} ${last ? 'last' : ''}`}>
+            <span style={{display: 'flex', alignItems: 'center'}}>{icon}{children}</span>
+        </button>
+    </Link>
 }
 
 export const ArrowButtonGroup = ({
@@ -11,4 +23,43 @@ export const ArrowButtonGroup = ({
     return <div className={'btn-group'}>
         {children}
     </div>
+}
+
+const SOURCE_AND_TARGET = ['ontology-terms', 'ontology-files', 'namespaces', 'test-data-suites']
+
+export const ArrowButtons = () => {
+    const router = useRouter()
+    console.log(router)
+    return (<ArrowButtonGroup>
+        <ArrowButton active={SOURCE_AND_TARGET.some(snt => router.pathname.includes(snt))}
+                     href={paths.app.test_data_suites.index}
+                     icon={<ModeStandbyIcon fontSize='small'
+                                            style={{marginRight: '4px'}}/>}
+                     first>
+            Source & Target
+        </ArrowButton>
+        <ArrowButton active={router.pathname.includes('fields-and-nodes')}
+            icon={<InsertDriveFileIcon fontSize='small'
+                                                style={{marginRight: '4px'}}/>}
+                     href={paths.app.fields_and_nodes.develop.index}>
+            Elements Definition
+        </ArrowButton>
+        <ArrowButton icon={<LightbulbCircleIcon fontSize='small'
+                                                style={{marginRight: '4px'}}/>}>
+            Conceptual Mappings
+        </ArrowButton>
+        <ArrowButton icon={<DvrIcon fontSize='small'
+                                    style={{marginRight: '4px'}}/>}>
+            Technical Mappings
+        </ArrowButton>
+        <ArrowButton icon={<VerifiedIcon fontSize='small'
+                                         style={{marginRight: '4px'}}/>}>
+            Quality Control
+        </ArrowButton>
+        <ArrowButton icon={<ArchiveIcon fontSize='small'
+                                        style={{marginRight: '4px'}}/>}
+                     last>
+            Export Mapping
+        </ArrowButton>
+    </ArrowButtonGroup>)
 }