MWB-888: move source and target tabs to separate file

meaningfy-ws · Dec 6, 2024 · 00baf79 · 00baf79
1 parent f699d56
commit 00baf79
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 88 deletions.
diff --git a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js
@@ -1,5 +1,3 @@
-
-import {useRouter} from 'next/router';
 import {useEffect, useState} from 'react';
 import {turtle} from 'codemirror-lang-turtle';
 import CodeMirror from '@uiw/react-codemirror';
@@ -8,8 +6,6 @@ import {githubDark, githubLight} from '@uiw/codemirror-themes-all';
 import UploadIcon from '@mui/icons-material/Upload';
 
 import {Box} from "@mui/system";
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
 import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import Dialog from "@mui/material/Dialog";
@@ -30,14 +26,10 @@ import useItemsSearch from 'src/hooks/use-items-search';
 import {ItemList} from "src/sections/app/files-form/item-list";
 import {ItemSearch} from 'src/sections/app/files-form/item-search';
 import {ontologyFilesApi as sectionApi} from 'src/api/ontology-files';
+import {SourceAndTargetTabs} from 'src/sections/app/source-and-target';
 import {FileUploader} from 'src/sections/app/files-form//file-uploader';
 import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
 import {ontologyFileResourcesApi as fileResourcesApi} from "src/api/ontology-files/file-resources";
-import {paths} from '../../../paths';
-
-
-const TABS = [{label: 'Source Files', value: 'test_data_suites'}, {label: 'Ontology Files', value: 'ontology_files'},
-    {label: 'Ontology Terms', value: 'ontology_terms'}, {label: 'Namespaces', value: 'ontology_namespaces'}]
 
 const Page = () => {
     const [view, setView] = useState('grid');
@@ -49,8 +41,6 @@ const Page = () => {
 
     const theme = useTheme();
 
-    const router = useRouter();
-
     usePageView();
 
     useEffect(() => {
@@ -85,23 +75,14 @@ const Page = () => {
             .catch(err => console.log(err));
     }
 
-    const handleTabsChange = (event, value) => {
-        return router.push(paths.app[value].index)
-    }
-
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE}`}/>
             <Grid container
                   spacing={{xs: 3, lg: 4}}
             >
                 <Grid xs={12}>
-                    <Tabs value={'ontology_files'}
-                          onChange={handleTabsChange}>
-                        {TABS.map(tab => <Tab key={tab.value}
-                                              label={tab.label}
-                                              value={tab.value}/>)}
-                    </Tabs>
+                   <SourceAndTargetTabs/>
                 </Grid>
                 <Grid xs={12}>
                     <Stack

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js
@@ -1,55 +1,40 @@
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import Grid from '@mui/material/Unstable_Grid2';
-import PlusIcon from '@untitled-ui/icons-react/build/esm/Plus';
-import Breadcrumbs from '@mui/material/Breadcrumbs';
-import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+
 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 SvgIcon from '@mui/material/SvgIcon';
+import Grid from '@mui/material/Unstable_Grid2';
 import Typography from '@mui/material/Typography';
-import {useRouter} from 'next/router';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
 
 import {paths} from 'src/paths';
 import {Seo} from 'src/components/seo';
 import {usePageView} from 'src/hooks/use-page-view';
 import {Layout as AppLayout} from 'src/layouts/app';
 import {RouterLink} from 'src/components/router-link';
-import useItemsSearch from '../../../hooks/use-items-search';
-import {useItemsStore} from '../../../hooks/use-items-store';
+import useItemsSearch from 'src/hooks/use-items-search';
+import {useItemsStore} from 'src/hooks/use-items-store';
+import {SourceAndTargetTabs} from 'src/sections/app/source-and-target';
+import {ListTable} from "src/sections/app/ontology-namespace/list-table";
 import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator';
+import {ListSearch} from "src/sections/app/ontology-namespace/list-search";
 import {ontologyNamespacesApi as sectionApi} from 'src/api/ontology-namespaces';
-import {ListSearch} from "../../../sections/app/ontology-namespace/list-search";
-import {ListTable} from "../../../sections/app/ontology-namespace/list-table";
-import OntologyNamespacesCustom from '../ontology-namespaces-custom';
-
-const TABS = [{label: 'Source Files', value: 'test_data_suites'}, {label: 'Ontology Files', value: 'ontology_files'},
-    {label: 'Ontology Terms', value: 'ontology_terms'}, {label: 'Namespaces', value: 'ontology_namespaces'}]
-
+import OntologyNamespacesCustom from 'src/pages/app/ontology-namespaces-custom';
 
 const Page = () => {
-    const router = useRouter()
     const itemsStore = useItemsStore(sectionApi);
     const itemsSearch = useItemsSearch(itemsStore.items, sectionApi);
 
-    const handleTabsChange = (event, value) => {
-        return router.push(paths.app[value].index)
-    }
-
     usePageView();
 
     return (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
             <Stack spacing={4}>
                 <Grid xs={12}>
-                    <Tabs value={'ontology_namespaces'}
-                          onChange={handleTabsChange}>
-                        {TABS.map(tab => <Tab key={tab.value}
-                                              label={tab.label}
-                                              value={tab.value}/>)}
-                    </Tabs>
+                    <SourceAndTargetTabs/>
                 </Grid>
                 <Stack
                     direction="row"
@@ -96,7 +81,7 @@ const Page = () => {
                             href={paths.app[sectionApi.section].create}
                             startIcon={(
                                 <SvgIcon>
-                                    <PlusIcon/>
+                                    <AddIcon/>
                                 </SvgIcon>
                             )}
                             variant="contained"

diff --git a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js
@@ -1,27 +1,22 @@
 import AddIcon from '@mui/icons-material/Add';
 import SearchIcon from '@mui/icons-material/Search';
 
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-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 Grid from "@mui/material/Unstable_Grid2";
 
 import {paths} from 'src/paths';
 import {Seo} from 'src/components/seo';
 import {useRouter} from "src/hooks/use-router";
 import {Layout as AppLayout} from 'src/layouts/app';
-import {RouterLink} from 'src/components/router-link';
 import {usePageView} from 'src/hooks/use-page-view';
+import {RouterLink} from 'src/components/router-link';
 import OntologyTerms from "src/sections/app/ontology/ontology-terms";
 import {ontologyTermsApi as sectionApi} from 'src/api/ontology-terms';
+import {SourceAndTargetTabs} from 'src/sections/app/source-and-target';
 import {toastError, toastLoad, toastSuccess} from "src/components/app-toast";
 
-const TABS = [{label: 'Source Files', value: 'test_data_suites'}, {label: 'Ontology Files', value: 'ontology_files'},
-    {label: 'Ontology Terms', value: 'ontology_terms'}, {label: 'Namespaces', value: 'ontology_namespaces'}]
-
-
 const Page = () => {
     const router = useRouter()
 
@@ -35,10 +30,6 @@ const Page = () => {
             .catch(err => toastError(`Discovering terms failed: ${err.message}.`, toastId))
     };
 
-    const handleTabsChange = (event, value) => {
-        return router.push(paths.app[value].index)
-    }
-
     usePageView();
 
     return (
@@ -49,12 +40,7 @@ const Page = () => {
             >
 
                 <Grid xs={12}>
-                    <Tabs value={'ontology_terms'}
-                          onChange={handleTabsChange}>
-                        {TABS.map(tab => <Tab key={tab.value}
-                                              label={tab.label}
-                                              value={tab.value}/>)}
-                    </Tabs>
+                    <SourceAndTargetTabs/>
                 </Grid>
                 <Grid xs={12}
                       direction="row"

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
@@ -1,11 +1,8 @@
 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 Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
@@ -18,6 +15,7 @@ import {Layout as AppLayout} from 'src/layouts/app';
 import {usePageView} from 'src/hooks/use-page-view';
 import {RouterLink} from 'src/components/router-link';
 import useItemsSearch from 'src/hooks/use-items-search';
+import {SourceAndTargetTabs} from 'src/sections/app/source-and-target';
 import {TableSearchBar} from "src/sections/components/table-search-bar";
 import {testDataSuitesApi as sectionApi} from 'src/api/test-data-suites';
 import {FileCollectionUploader} from "src/sections/app/file-manager/file-collection-uploader";
@@ -53,25 +51,19 @@ 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: 'ontology_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 (
         <>
             <Seo title={`App: ${sectionApi.SECTION_TITLE} List`}/>
+            <Stack>
+                <SourceAndTargetTabs/>
+            </Stack>
             <Stack spacing={4}>
                 <Stack
                     alignItems="center"
@@ -100,15 +92,6 @@ const Page = () => {
                     >
                         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/sections/app/source-and-target/index.js b/mapping_workbench/frontend/src/sections/app/source-and-target/index.js
@@ -0,0 +1,37 @@
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import {useRouter} from 'next/router';
+import {paths} from '../../../paths';
+
+export const SourceAndTargetTabs = () => {
+    const router = useRouter()
+
+    const TABS = [
+        {
+            label: 'Source Files',
+            value: paths.app.test_data_suites.index
+        }, {
+            label: 'Ontology Files',
+            value: paths.app.ontology_files.index
+        },
+        {
+            label: 'Ontology Terms',
+            value: paths.app.ontology_terms.index
+        }, {
+            label: 'Namespaces',
+            value: paths.app.ontology_namespaces.index
+        }]
+
+    const handleTabsChange = (event, value) => {
+        return router.push(value)
+    }
+
+    console.log(router)
+
+    return <Tabs value={router.pathname}
+                 onChange={handleTabsChange}>
+        {TABS.map(tab => <Tab key={tab.value}
+                              label={tab.label}
+                              value={tab.value}/>)}
+    </Tabs>
+}