From 3af0070a705c5187497ff95902804d726cd4e712 Mon Sep 17 00:00:00 2001
From: Victor Frunze <silverberserk@gmail.com>
Date: Fri, 6 Dec 2024 10:33:37 +0200
Subject: [PATCH] MWB-888: make arrow work for source and target

---
 .../layouts/app/vertical-layout/top-nav.js    |  67 ++++++-----
 .../src/pages/app/ontology-files/index.js     |  41 -------
 .../src/pages/app/ontology-terms/index.js     | 108 +++++-------------
 .../src/pages/app/test-data-suites/index.js   | 108 ++++++++----------
 .../frontend/src/pages/arrow-buttons.scss     |  14 +--
 .../components/arrow-buttons/arrow-buttons.js |  61 +++++++++-
 6 files changed, 178 insertions(+), 221 deletions(-)

diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js
index 6154edf77..132fa699a 100644
--- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js
+++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/top-nav.js
@@ -1,14 +1,16 @@
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import Menu01Icon from '@untitled-ui/icons-react/build/esm/Menu01';
-import { alpha } from '@mui/system/colorManipulator';
+import {alpha} from '@mui/system/colorManipulator';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Stack from '@mui/material/Stack';
 import SvgIcon from '@mui/material/SvgIcon';
 import useMediaQuery from '@mui/material/useMediaQuery';
+import {ArrowButtons} from '../../../sections/components/arrow-buttons/arrow-buttons';
 
-import { AccountButton } from '../account-button';
-import { LanguageSwitch } from '../language-switch';
+import {AccountButton} from '../account-button';
+import {LanguageSwitch} from '../language-switch';
 import TimeSwitch from "../time-switch/time-switch";
 
 const BREAK_POINT = 1500;
@@ -16,7 +18,7 @@ const TOP_NAV_HEIGHT = 64;
 const SIDE_NAV_WIDTH = 280;
 
 export const TopNav = (props) => {
-    const { onMobileNavOpen, ...other } = props;
+    const {onMobileNavOpen, ...other} = props;
     const breakPointUp = useMediaQuery((theme) => theme.breakpoints.up(BREAK_POINT));
 
     return (
@@ -37,41 +39,52 @@ export const TopNav = (props) => {
                 zIndex: (theme) => theme.zIndex.appBar
             }}
             {...other}>
-            <Stack
-                alignItems="center"
-                direction="row"
-                justifyContent="space-between"
-                spacing={2}
-                sx={{
-                    minHeight: TOP_NAV_HEIGHT,
-                    px: 2
-                }}
-            >
+            <Stack direction='column'>
                 <Stack
                     alignItems="center"
                     direction="row"
+                    // justifyContent="space-between"
                     spacing={2}
+                    sx={{
+                        minHeight: TOP_NAV_HEIGHT,
+                        p: 2,
+                    }}
                 >
-                    {!breakPointUp && (
+                    <Stack
+                        alignItems="center"
+                        direction="row"
+                        spacing={2}
+                    >
                         <IconButton
                             id='open_sidebar'
                             onClick={onMobileNavOpen}>
-                            <SvgIcon>
-                                <Menu01Icon />
-                            </SvgIcon>
+                            <Menu01Icon/>
                         </IconButton>
-                    )}
+                    </Stack>
+                    <Stack direction='row'
+                           width='100%'
+                           alignItems='center'
+                           justifyContent='space-between'>
+                        <Typography variant="h5"
+                                    marginLeft={5}>
+                            Mapping Process
+                        </Typography>
+                        <Stack
+                            alignItems="center"
+                            direction="row"
+                            spacing={2}
+                        >
+                            <TimeSwitch/>
+                            <LanguageSwitch/>
+                            <AccountButton/>
+                        </Stack>
+                    </Stack>
                 </Stack>
-                <Stack
-                    alignItems="center"
-                    direction="row"
-                    spacing={2}
-                >
-                    <TimeSwitch/>
-                    <LanguageSwitch />
-                    <AccountButton />
+                <Stack alignItems="center">
+                    <ArrowButtons/>
                 </Stack>
             </Stack>
+
         </Box>
     );
 };
diff --git a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js
index 2c0992fbf..e1c92fbe3 100644
--- a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js
+++ b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js
@@ -102,47 +102,6 @@ const Page = () => {
             <Grid container
                   spacing={{xs: 3, lg: 4}}
             >
-                <Grid xs={12}
-                      direction="row"
-                      justifyContent="space-between"
-                      spacing={4}
-                >
-                    <Typography variant="h5">
-                        Mapping Process
-                    </Typography>
-                </Grid>
-                <Grid xs={12}>
-                    <Stack justifyContent='center'
-                           direction='row'>
-                        <ArrowButtonGroup>
-                            <ArrowButton active
-                                         icon={<ModeStandbyIcon fontSize='small'
-                                                                style={{marginRight: '4px'}}/>}>
-                                Source & Target
-                            </ArrowButton>
-                            <ArrowButton icon={<InsertDriveFileIcon fontSize='small'
-                                                                    style={{marginRight: '4px'}}/>}>
-                                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'}}/>}>
-                                Export Mapping
-                            </ArrowButton>
-                        </ArrowButtonGroup>
-                    </Stack>
-                </Grid>
                 <Grid xs={12}>
                     <Tabs value={'ontology_files'}
                           onChange={handleTabsChange}>
diff --git a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
index 0bcfa1b1b..7e942e701 100644
--- a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
+++ b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
@@ -1,11 +1,5 @@
 import AddIcon from '@mui/icons-material/Add';
-import DvrIcon from '@mui/icons-material/Dvr';
 import SearchIcon from '@mui/icons-material/Search';
-import ArchiveIcon from '@mui/icons-material/Archive';
-import VerifiedIcon from '@mui/icons-material/Verified';
-import ModeStandbyIcon from '@mui/icons-material/ModeStandby';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import LightbulbCircleIcon from '@mui/icons-material/LightbulbCircle';
 
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
@@ -13,7 +7,6 @@ import Grid from "@mui/material/Unstable_Grid2";
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import SvgIcon from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
 
 import {paths} from 'src/paths';
 import {Seo} from 'src/components/seo';
@@ -26,9 +19,8 @@ import {ontologyTermsApi as sectionApi} from 'src/api/ontology-terms';
 import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
 import OntologyNamespaces from "src/sections/app/ontology-namespace/ontology-namespaces";
 import OntologyNamespacesCustom from "src/sections/app/ontology-namespace-custom/ontology-namespaces-custom";
-import {ArrowButton, ArrowButtonGroup} from '../../../sections/components/arrow-buttons/arrow-buttons';
 
-const TABS = [{label: 'Source Files', value: 'source-files'}, {label: 'Ontology Files', value: 'ontology_files'},
+const TABS = [{label: 'Source Files', value: 'test_data_suites'}, {label: 'Ontology Files', value: 'ontology_files'},
     {label: 'Ontology Terms', value: 'ontology_terms'}, {label: 'Namespaces', value: 'namespaces'}]
 
 
@@ -62,77 +54,37 @@ const Page = () => {
                       justifyContent="space-between"
                       spacing={4}
                 >
-                    <Stack
-                        direction="row"
-                        justifyContent="space-between"
-                        spacing={4}
+
+                    <Stack justifyContent='end'
+                           alignItems="center"
+                           direction="row"
+                           spacing={3}
                     >
-                        <Typography variant="h5">
-                            Mapping Process
-                        </Typography>
-                        <Stack
-                            alignItems="center"
-                            direction="row"
-                            spacing={3}
+                        <Button
+                            id="discover_button"
+                            onClick={handleDiscover}
+                            startIcon={(
+                                <SvgIcon>
+                                    <SearchIcon/>
+                                </SvgIcon>
+                            )}
+                            variant="text"
                         >
-                            <Button
-                                id="discover_button"
-                                onClick={handleDiscover}
-                                startIcon={(
-                                    <SvgIcon>
-                                        <SearchIcon/>
-                                    </SvgIcon>
-                                )}
-                                variant="contained"
-                            >
-                                Discover Terms
-                            </Button>
-                            <Button
-                                id="add_term_button"
-                                component={RouterLink}
-                                href={paths.app[sectionApi.section].create}
-                                startIcon={(
-                                    <SvgIcon>
-                                        <AddIcon/>
-                                    </SvgIcon>
-                                )}
-                                variant="contained"
-                            >
-                                Add Term
-                            </Button>
-                        </Stack>
-                    </Stack>
-                </Grid>
-                <Grid xs={12}>
-                    <Stack justifyContent='center'
-                           direction='row'>
-                        <ArrowButtonGroup>
-                            <ArrowButton active
-                                         icon={<ModeStandbyIcon fontSize='small'
-                                                                style={{marginRight: '4px'}}/>}>
-                                Source & Target
-                            </ArrowButton>
-                            <ArrowButton icon={<InsertDriveFileIcon fontSize='small'
-                                                                    style={{marginRight: '4px'}}/>}>
-                                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'}}/>}>
-                                Export Mapping
-                            </ArrowButton>
-                        </ArrowButtonGroup>
+                            Discover Terms
+                        </Button>
+                        <Button
+                            id="add_term_button"
+                            component={RouterLink}
+                            href={paths.app[sectionApi.section].create}
+                            startIcon={(
+                                <SvgIcon>
+                                    <AddIcon/>
+                                </SvgIcon>
+                            )}
+                            variant="contained"
+                        >
+                            Add Term
+                        </Button>
                     </Stack>
                 </Grid>
                 <Grid xs={12}>
diff --git a/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js b/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js
index 97148c068..29bbe7fd8 100644
--- a/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js
+++ b/mapping_workbench/frontend/src/pages/app/test-data-suites/index.js
@@ -1,14 +1,15 @@
+import {useEffect, useState} from "react";
+import {useRouter} from 'next/router';
+
 import AddIcon from '@mui/icons-material/Add';
 import UploadIcon from '@mui/icons-material/Upload';
 
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
 import Card from '@mui/material/Card';
-import Link from '@mui/material/Link';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import Divider from "@mui/material/Divider";
-import SvgIcon from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
 
 import {paths} from 'src/paths';
 import {Seo} from 'src/components/seo';
@@ -19,10 +20,8 @@ import {RouterLink} from 'src/components/router-link';
 import useItemsSearch from 'src/hooks/use-items-search';
 import {TableSearchBar} from "src/sections/components/table-search-bar";
 import {testDataSuitesApi as sectionApi} from 'src/api/test-data-suites';
-import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator';
 import {FileCollectionUploader} from "src/sections/app/file-manager/file-collection-uploader";
 import {TestDataCollectionListTable} from "src/sections/app/file-manager/test-data-collection-list-table";
-import {useEffect, useState} from "react";
 
 const useItemsStore = () => {
     const [state, setState] = useState({
@@ -54,11 +53,20 @@ const useItemsStore = () => {
     };
 };
 
+const TABS = [{label: 'Source Files', value: 'test_data_suites'}, {label: 'Ontology Files', value: 'ontology_files'},
+    {label: 'Ontology Terms', value: 'ontology_terms'}, {label: 'Namespaces', value: 'namespaces'}]
+
+
 const Page = () => {
     const uploadDialog = useDialog()
+    const router = useRouter()
     const itemsStore = useItemsStore(sectionApi);
     const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ['title', 'package']);
 
+    const handleTabsChange = (event, value) => {
+        return router.push(paths.app[value].index)
+    }
+
     usePageView();
 
     return (
@@ -66,65 +74,41 @@ const Page = () => {
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
             <Stack spacing={4}>
                 <Stack
+                    alignItems="center"
                     direction="row"
-                    justifyContent="space-between"
-                    spacing={4}
+                    justifyContent='end'
+                    spacing={3}
                 >
-                    <Stack spacing={1}>
-                        <Typography variant="h4">
-                            {sectionApi.SECTION_TITLE}
-                        </Typography>
-
-                        <Breadcrumbs separator={<BreadcrumbsSeparator/>}>
-                            <Link
-                                color="text.primary"
-                                component={RouterLink}
-                                href={paths.index}
-                                variant="subtitle2"
-                            >
-                                App
-                            </Link>
-                            <Typography
-                                color="text.secondary"
-                                variant="subtitle2"
-                            >
-                                {sectionApi.SECTION_TITLE}
-                            </Typography>
-                        </Breadcrumbs>
-                    </Stack>
-                    <Stack
-                        alignItems="center"
-                        direction="row"
-                        spacing={3}
+                    <Button
+                        type='link'
+                        onClick={uploadDialog.handleOpen}
+                        startIcon={(
+                            <UploadIcon/>
+                        )}
+                        id="import-test-data_button"
+                    >
+                        Import Test Data Suites
+                    </Button>
+                    <Button
+                        component={RouterLink}
+                        href={paths.app[sectionApi.section].create}
+                        startIcon={(
+                            <AddIcon/>
+                        )}
+                        variant="contained"
+                        id="add_button"
                     >
-                        <Button
-                            component={RouterLink}
-                            href={paths.app[sectionApi.section].create}
-                            startIcon={(
-                                <SvgIcon>
-                                    <AddIcon/>
-                                </SvgIcon>
-                            )}
-                            variant="contained"
-                            id="add_button"
-                        >
-                            Create Test Data Suite
-                        </Button>
-                        <Button
-                            type='link'
-                            onClick={uploadDialog.handleOpen}
-                            startIcon={(
-                                <SvgIcon>
-                                    <UploadIcon/>
-                                </SvgIcon>
-                            )}
-                            variant="contained"
-                            id="import-test-data_button"
-                        >
-                            Import Test Data Suites
-                        </Button>
-
-                    </Stack>
+                        Create Test Data Suite
+                    </Button>
+
+                </Stack>
+                <Stack>
+                    <Tabs value={'test_data_suites'}
+                          onChange={handleTabsChange}>
+                        {TABS.map(tab => <Tab key={tab.value}
+                                              label={tab.label}
+                                              value={tab.value}/>)}
+                    </Tabs>
                 </Stack>
                 <Card>
                     <TableSearchBar onChange={e => itemsSearch.handleSearchItems([e])}
diff --git a/mapping_workbench/frontend/src/pages/arrow-buttons.scss b/mapping_workbench/frontend/src/pages/arrow-buttons.scss
index 3aca9ec18..95bd5f9a1 100644
--- a/mapping_workbench/frontend/src/pages/arrow-buttons.scss
+++ b/mapping_workbench/frontend/src/pages/arrow-buttons.scss
@@ -12,8 +12,6 @@
   background-color: #fff;
   border: 1px solid #101828;
   border-radius: 0 !important;
-  border-top-left-radius: 7px !important;
-  border-bottom-left-radius: 7px !important;
   margin-right: 1px;
 
   &:hover {
@@ -64,12 +62,12 @@
 
 .btn-arrow-right:before,
 .btn-arrow-left:before {
-  left: -13px;
+  left: -18px;
 }
 
 .btn-arrow-right:after,
 .btn-arrow-left:after {
-  right: -15.5px;
+  right: -16px;
 }
 
 .btn-arrow-right.btn-arrow-left,
@@ -112,21 +110,21 @@
   background-color: white;
 }
 
-.btn-arrow-right:first-child {
+.btn-arrow-right.first {
   border-top-left-radius: 8px !important;
   border-bottom-left-radius: 8px !important;
 }
 
-.btn-arrow-right:first-child:before {
+.btn-arrow-right.first:before {
   display: none;
 }
 
-.btn-arrow-right:last-child {
+.btn-arrow-right.last {
   border-top-right-radius: 8px !important;
   border-bottom-right-radius: 8px !important;
 }
 
-.btn-arrow-right:last-child:after {
+.btn-arrow-right.last:after {
   display: none;
 }
 
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
index 66642eec8..fc270df9f 100644
--- 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>)
 }
\ No newline at end of file