From 84251e46e375cf55130456743d0d38c647b7d0c4 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Wed, 11 Dec 2024 20:49:24 +0200 Subject: [PATCH 01/25] MWB-906: update source file search --- .../src/pages/app/test-data-suites/index.js | 63 ++++++++++--------- .../sections/app/files-form/item-search.js | 2 - .../sections/components/table-search-bar.js | 3 +- 3 files changed, 35 insertions(+), 33 deletions(-) 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 7f8fb01ee..15967d7a2 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 @@ -61,41 +61,46 @@ const Page = () => { return ( <> + - - - - + + + - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> { placeholder="Search" startAdornment={( - - )} /> diff --git a/mapping_workbench/frontend/src/sections/components/table-search-bar.js b/mapping_workbench/frontend/src/sections/components/table-search-bar.js index 5a7cf5e09..1e0711500 100644 --- a/mapping_workbench/frontend/src/sections/components/table-search-bar.js +++ b/mapping_workbench/frontend/src/sections/components/table-search-bar.js @@ -23,7 +23,6 @@ export const TableSearchBar = (props) => { onChange('') } - return ( { direction="row" onSubmit={(event) => handleChange(event, localValue)} spacing={2} - sx={{p: 1}} + sx={{p: '3px'}} > onChange(localValue)} disabled={value === localValue}> From 12b330cafb5a13d04e831b55d0ede37e60548369 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 10:48:35 +0200 Subject: [PATCH 02/25] MWB-906: update ontology namespaces --- .../app/ontology-namespaces-custom/index.js | 69 ++---- .../pages/app/ontology-namespaces/index.js | 54 +---- .../src/pages/app/ontology-terms/index.js | 108 ++++++---- .../sections/app/files-form/item-search.js | 203 +++++++----------- .../sections/app/ontology/ontology-terms.js | 48 ----- 5 files changed, 184 insertions(+), 298 deletions(-) delete mode 100644 mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js index 174017e61..7fb51866f 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js @@ -1,25 +1,20 @@ -import {useEffect, useState} from 'react'; -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 SvgIcon from '@mui/material/SvgIcon'; +import Button from '@mui/material/Button'; import Typography from '@mui/material/Typography'; -import {ontologyNamespacesCustomApi as sectionApi} from 'src/api/ontology-namespaces-custom'; -import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; -import {RouterLink} from 'src/components/router-link'; +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 {paths} from 'src/paths'; -import useItemsSearch from '../../../hooks/use-items-search'; -import {useItemsStore} from '../../../hooks/use-items-store'; -import {ListSearch} from "../../../sections/app/ontology-namespace-custom/list-search"; -import {ListTable} from "../../../sections/app/ontology-namespace-custom/list-table"; -import {TableSearchBar} from '../../../sections/components/table-search-bar'; +import {RouterLink} from 'src/components/router-link'; +import useItemsSearch from 'src/hooks/use-items-search'; +import {useItemsStore} from 'src/hooks/use-items-store'; +import {TableSearchBar} from 'src/sections/components/table-search-bar'; +import {ListTable} from "src/sections/app/ontology-namespace-custom/list-table"; +import {ontologyNamespacesCustomApi as sectionApi} from 'src/api/ontology-namespaces-custom'; const Page = () => { const itemsStore = useItemsStore(sectionApi); @@ -32,40 +27,18 @@ const Page = () => { + + {sectionApi.SECTION_TITLE} + - - - {sectionApi.SECTION_TITLE} - - }> - - App - - - {sectionApi.SECTION_TITLE} - - - List - - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { id="add_namespace_button" component={RouterLink} href={paths.app[sectionApi.section].create} - startIcon={( - - - - )} + startIcon={} variant="contained" > Add @@ -87,8 +56,6 @@ const Page = () => { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> { const itemsStore = useItemsStore(sectionApi); - const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ['prefix','uri']); + const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ['prefix', 'uri']); usePageView(); - console.log(itemsStore.items) - console.log(itemsSearch) - return ( <> @@ -39,39 +32,20 @@ const Page = () => { + + {sectionApi.SECTION_TITLE} + + - - {sectionApi.SECTION_TITLE} - - }> - - App - - - {sectionApi.SECTION_TITLE} - - - List - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { id="add_button" component={RouterLink} href={paths.app[sectionApi.section].create} - startIcon={( - - - - )} + startIcon={} variant="contained" > Add @@ -94,8 +64,6 @@ const Page = () => { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> { const router = useRouter() + const itemsStore = useItemsStore(sectionApi); + const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ["short_term", "term"], {type: ''}); + const handleDiscover = () => { const toastId = toastLoad('Discovering terms ...') sectionApi.discoverTerms() @@ -42,46 +55,69 @@ const Page = () => { - - - + - - + + + - + + + itemsSearch.handleFiltersChange({type: e})}/> + + + + diff --git a/mapping_workbench/frontend/src/sections/app/files-form/item-search.js b/mapping_workbench/frontend/src/sections/app/files-form/item-search.js index e71212d5d..d6fdc6e99 100644 --- a/mapping_workbench/frontend/src/sections/app/files-form/item-search.js +++ b/mapping_workbench/frontend/src/sections/app/files-form/item-search.js @@ -1,136 +1,99 @@ -import { useRef } from 'react'; +import {useRef} from 'react'; import PropTypes from 'prop-types'; -import Grid01Icon from '@untitled-ui/icons-react/build/esm/Grid01'; -import ListIcon from '@untitled-ui/icons-react/build/esm/List'; + import SearchMdIcon from '@untitled-ui/icons-react/build/esm/SearchMd'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import GridViewIcon from '@mui/icons-material/GridView'; + import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; -import InputAdornment from '@mui/material/InputAdornment'; -import OutlinedInput from '@mui/material/OutlinedInput'; import Stack from '@mui/material/Stack'; -import SvgIcon from '@mui/material/SvgIcon'; import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup'; - -const sortOptions = [ - { - label: 'Latest', - value: 'desc' - }, - { - label: 'Oldest', - value: 'asc' - } -]; +import OutlinedInput from '@mui/material/OutlinedInput'; +import InputAdornment from '@mui/material/InputAdornment'; +import ToggleButtonGroup, {toggleButtonGroupClasses} from '@mui/material/ToggleButtonGroup'; +import {TableSearchBar} from '../../components/table-search-bar'; export const ItemSearch = (props) => { - const { - onFiltersChange, onSortChange, onViewChange, view = 'grid', - sortBy = 'createdAt', - sortDir = 'asc' - } = props; - const queryRef = useRef(null); - - const handleQueryChange = (event) => { - event.preventDefault(); - const query = queryRef.current?.value || ''; + const { + onFiltersChange, onSortChange, onViewChange, view = 'grid' + } = props; + const queryRef = useRef(null); - onFiltersChange?.(query); - } + const handleQueryChange = (event) => { + event.preventDefault(); + const query = queryRef.current?.value || ''; - const handleSortChange = (event) => { - const sortDir = event.target.value; - onSortChange?.(sortDir); - } + onFiltersChange?.(query); + } - const handleViewChange = (event, value) => { - onViewChange?.(value); - } + const handleViewChange = (event, value) => { + onViewChange?.(value); + } - return ( - - - - - - - )} - /> - - - - - - - - - - - - - - {/**/} - {/* {sortOptions.map((option) => (*/} - {/* */} - {/* {option.label}*/} - {/* */} - {/* ))}*/} - {/**/} - - - ); + return ( + + + + + + + )} + /> + + + + + + + + + + + + ); }; ItemSearch.propTypes = { - onFiltersChange: PropTypes.func, - onSortChange: PropTypes.func, - onViewChange: PropTypes.func, - sortBy: PropTypes.string, - sortDir: PropTypes.oneOf(['asc', 'desc']), - view: PropTypes.oneOf(['grid', 'list']) + onFiltersChange: PropTypes.func, + onSortChange: PropTypes.func, + onViewChange: PropTypes.func, + sortBy: PropTypes.string, + sortDir: PropTypes.oneOf(['asc', 'desc']), + view: PropTypes.oneOf(['grid', 'list']) }; diff --git a/mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js b/mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js deleted file mode 100644 index 278a940d2..000000000 --- a/mapping_workbench/frontend/src/sections/app/ontology/ontology-terms.js +++ /dev/null @@ -1,48 +0,0 @@ -import Card from "@mui/material/Card"; -import Stack from "@mui/material/Stack"; -import Divider from "@mui/material/Divider"; - -import {Filter} from "src/sections/components/filter"; -import useItemsSearch from 'src/hooks/use-items-search'; -import {useItemsStore} from 'src/hooks/use-items-store'; -import {ListTable} from "src/sections/app/ontology-term/list-table"; -import {ontologyTermsApi as sectionApi} from "src/api/ontology-terms"; -import {TableSearchBar} from "src/sections/components/table-search-bar"; - -const filterValues = [{label: 'All', value: ''}, - {label: 'CLASS', value: 'CLASS'}, - {label: 'PROPERTY', value: 'PROPERTY'}] - -const OntologyTerms = () => { - const itemsStore = useItemsStore(sectionApi); - const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ["short_term", "term"], {type: ''}); - - return ( - - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search Terms'/> - - itemsSearch.handleFiltersChange({type: e})}/> - - - - - ) -} - -export default OntologyTerms \ No newline at end of file From 9807fe8de942556dfc43506b2ba22c1b283e933c Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 10:58:16 +0200 Subject: [PATCH 03/25] MWB-906: update fields and nodes and conceptual-mappings --- .../conceptual-mapping-rules/develop/index.js | 14 +++-- .../overview/index.js | 25 +++----- .../app/fields-and-nodes/overview/index.js | 63 ++++++++++--------- .../sections/app/files-form/item-search.js | 7 +-- 4 files changed, 50 insertions(+), 59 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js index a4b1ddb2c..127f74aa4 100644 --- a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js +++ b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js @@ -97,25 +97,27 @@ export const Page = () => { <> + + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]} + placeholder='Search Terms'/> + - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search Terms'/> - { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { component={RouterLink} href={paths.app[sectionApi.section].overview.create} id="add-mapping-rules-button" - startIcon={( - - - - )} + startIcon={} variant="contained" > Add @@ -123,11 +119,7 @@ const Page = () => { id="generate_button" component={RouterLink} href={paths.app[sectionApi.section].tasks.generate_cm_assertions_queries} - startIcon={( - - - - )} + startIcon={} variant="contained" > {t(tokens.nav.generate_cm_assertions_queries)} @@ -135,9 +127,6 @@ const Page = () => { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - { - - - - + + + + + - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - itemsSearch.handleFiltersChange({element_type: e})}/> diff --git a/mapping_workbench/frontend/src/sections/app/files-form/item-search.js b/mapping_workbench/frontend/src/sections/app/files-form/item-search.js index d6fdc6e99..6c267060d 100644 --- a/mapping_workbench/frontend/src/sections/app/files-form/item-search.js +++ b/mapping_workbench/frontend/src/sections/app/files-form/item-search.js @@ -1,9 +1,9 @@ import {useRef} from 'react'; import PropTypes from 'prop-types'; -import SearchMdIcon from '@untitled-ui/icons-react/build/esm/SearchMd'; -import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; +import SearchIcon from '@mui/icons-material/Search'; import GridViewIcon from '@mui/icons-material/GridView'; +import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted'; import Box from '@mui/material/Box'; import Card from '@mui/material/Card'; @@ -12,7 +12,6 @@ import ToggleButton from '@mui/material/ToggleButton'; import OutlinedInput from '@mui/material/OutlinedInput'; import InputAdornment from '@mui/material/InputAdornment'; import ToggleButtonGroup, {toggleButtonGroupClasses} from '@mui/material/ToggleButtonGroup'; -import {TableSearchBar} from '../../components/table-search-bar'; export const ItemSearch = (props) => { const { @@ -52,7 +51,7 @@ export const ItemSearch = (props) => { placeholder="Search" startAdornment={( - + )} /> From 1afc9f0de395356682ea9aa61d64e10cd03e02d6 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 11:06:13 +0200 Subject: [PATCH 04/25] MWB-906: update technical mappings --- .../src/pages/app/triple-map-fragments/index.js | 17 ++++++----------- .../pages/app/value-mapping-resources/index.js | 17 ++++++----------- 2 files changed, 12 insertions(+), 22 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js b/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js index f0e1d6dfa..384ec5710 100644 --- a/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js +++ b/mapping_workbench/frontend/src/pages/app/triple-map-fragments/index.js @@ -5,13 +5,8 @@ import AddIcon from '@mui/icons-material/Add'; import UploadIcon from '@mui/icons-material/Upload'; 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 Divider from '@mui/material/Divider'; -import Typography from '@mui/material/Typography'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; import {paths} from 'src/paths'; import {Seo} from 'src/components/seo'; @@ -22,11 +17,10 @@ import {RouterLink} from 'src/components/router-link'; import useItemsSearch from 'src/hooks/use-items-search'; import {useItemsStore} from 'src/hooks/use-items-store'; import {TableSearchBar} from "src/sections/components/table-search-bar"; -import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; +import {TechnicalMappingsTabs} from 'src/sections/app/technical-mappings'; import {ListTable} from "src/sections/app/generic-triple-map-fragment/list-table"; import {FileUploader} from "src/sections/app/generic-triple-map-fragment/file-uploader"; import {genericTripleMapFragmentsApi as sectionApi} from 'src/api/triple-map-fragments/generic'; -import {TechnicalMappingsTabs} from '../../../sections/app/technical-mappings'; const Page = () => { const uploadDialog = useDialog(); @@ -50,12 +44,16 @@ const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - { const [state, setState] = useState({ @@ -66,12 +60,16 @@ const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - Date: Thu, 12 Dec 2024 11:08:49 +0200 Subject: [PATCH 05/25] MWB-906: update quality control --- .../frontend/src/pages/app/shacl-test-suites/index.js | 11 ++++++----- .../src/pages/app/sparql-test-suites/index.js | 10 +++++----- 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js index 0ef28a078..c50599319 100644 --- a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js +++ b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js @@ -5,7 +5,6 @@ import AddIcon from '@mui/icons-material/Add'; import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import Divider from '@mui/material/Divider'; import {paths} from 'src/paths'; import {Seo} from 'src/components/seo'; @@ -59,12 +58,16 @@ const Page = () => { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - + { <> + - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - Date: Thu, 12 Dec 2024 11:31:46 +0200 Subject: [PATCH 06/25] MWB-906: update mapping packages --- .../src/pages/app/mapping-packages/index.js | 33 +++---------------- 1 file changed, 5 insertions(+), 28 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js b/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js index 908b5c079..03b0d3dcf 100644 --- a/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js +++ b/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js @@ -1,19 +1,17 @@ import {useEffect, useState} from 'react'; import {saveAs} from 'file-saver'; + import AddIcon from '@mui/icons-material/Add'; import ClearIcon from '@mui/icons-material/Clear'; import UploadIcon from '@mui/icons-material/Upload'; import DownloadIcon from '@mui/icons-material/Download'; -import Link from '@mui/material/Link'; import Card from '@mui/material/Card'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; import Dialog from "@mui/material/Dialog"; -import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import IconButton from "@mui/material/IconButton"; -import Breadcrumbs from '@mui/material/Breadcrumbs'; import DialogContent from "@mui/material/DialogContent"; import {paths} from 'src/paths'; @@ -26,7 +24,6 @@ import {RouterLink} from 'src/components/router-link'; import useItemsSearch from 'src/hooks/use-items-search'; import {ListTable} from "src/sections/app/mapping-package/list-table"; import {TableSearchBar} from "src/sections/components/table-search-bar"; -import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; import {mappingPackagesApi as sectionApi} from 'src/api/mapping-packages'; import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; import {PackageImporter} from 'src/sections/app/mapping-package/package-importer'; @@ -89,27 +86,10 @@ const Page = () => { justifyContent="space-between" spacing={4} > - - - {sectionApi.SECTION_TITLE} - - }> - - App - - - {sectionApi.SECTION_TITLE} - - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + { - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - Date: Thu, 12 Dec 2024 12:04:44 +0200 Subject: [PATCH 07/25] MWB-906: update filtering --- .../overview/index.js | 45 ++++++++++++---- .../app/fields-and-nodes/overview/index.js | 47 +++++++++++++---- .../src/pages/app/ontology-terms/index.js | 52 +++++++++++++------ 3 files changed, 107 insertions(+), 37 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js index 03e03be06..034137a41 100644 --- a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js +++ b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js @@ -1,3 +1,5 @@ +import FilterListIcon from '@mui/icons-material/FilterList'; +import Popover from '@mui/material/Popover'; import {useState} from 'react'; import {useFormik} from 'formik'; import {useTranslation} from "react-i18next"; @@ -36,7 +38,7 @@ import {conceptualMappingRulesApi as sectionApi} from 'src/api/conceptual-mappin import {MappingPackageFormSelect} from 'src/sections/app/mapping-package/components/mapping-package-form-select'; import {ConceptualMappingTabs} from '../../../../sections/app/conceptual-mapping-rule/conceptual-mapping-tabs'; -const filterValues = [{label: 'All', value: ''}, +const FILTER_VALUES = [{label: 'All', value: ''}, {label: 'Valid', value: 'valid'}, {label: 'Invalid', value: 'invalid'}] @@ -44,6 +46,7 @@ const Page = () => { const [detailedView, setDetailedView] = useState(true) const {t} = useTranslation(); + const [filterPopover, setFilterPopover] = useState(null) const itemsStore = useItemsStore(sectionApi); const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ['source_structural_element_sdk_element_id', 'target_class_path', 'target_property_path'], @@ -93,10 +96,36 @@ const Page = () => { justifyContent="space-between" spacing={4} > - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - + + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + itemsSearch.handleFiltersChange({terms: e})}/> + + + { setDetailedView(e.target.checked)}/>} label='Detailed View'/> - - itemsSearch.handleFiltersChange({terms: e})}/> - { }; }; - const Page = () => { const itemsStore = useItemsStore(); const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, SEARCH_COLUMNS, {element_type: ''}); + const [filterPopover, setFilterPopover] = useState(null) usePageView(); @@ -68,13 +70,38 @@ const Page = () => { - - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> - + + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + itemsSearch.handleFiltersChange({element_type: e})}/> + + + { - itemsSearch.handleFiltersChange({element_type: e})}/> + { const itemsStore = useItemsStore(sectionApi); const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, ["short_term", "term"], {type: ''}); + const [filterPopover, setFilterPopover] = useState(null) + const handleDiscover = () => { const toastId = toastLoad('Discovering terms ...') sectionApi.discoverTerms() @@ -58,16 +63,38 @@ const Page = () => { - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search Terms'/> - - + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]} + placeholder='Search Terms'/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + itemsSearch.handleFiltersChange({type: e})}/> + + + + + spacing={3}> - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]} - placeholder='Search by Project Title'/> - + @@ -164,7 +162,7 @@ export const Page = () => { onDeleteAction={handleDeleteAction} /> - + ) 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 4680ac206..ee53ec0dc 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 @@ -20,9 +20,7 @@ const ArrowButton = ({children, id, icon, style, active, href = '#', first, last } -const ArrowButtonGroup = ({ - children - }) => { +const ArrowButtonGroup = ({children}) => { return
{children} diff --git a/mapping_workbench/frontend/src/sections/components/table-search-bar.js b/mapping_workbench/frontend/src/sections/components/table-search-bar.js index 1e0711500..efeac8b39 100644 --- a/mapping_workbench/frontend/src/sections/components/table-search-bar.js +++ b/mapping_workbench/frontend/src/sections/components/table-search-bar.js @@ -7,8 +7,7 @@ import ClearIcon from '@mui/icons-material/Clear'; import IconButton from '@mui/material/IconButton'; import SearchIcon from '@mui/icons-material/Search'; -export const TableSearchBar = (props) => { - const {onChange, value, placeholder} = props; +export const TableSearchBar = ({onChange, value, placeholder}) => { const [localValue, setLocalValue] = useState(value ?? '') const queryRef = useRef(null); From 4c525bf66565eaee8400cb0724c5bda33f02cb7f Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 14:50:20 +0200 Subject: [PATCH 09/25] MWB-906: update pagination --- .../app/ontology-namespaces-custom/index.js | 24 ++-- .../pages/app/ontology-namespaces/index.js | 24 ++-- .../src/pages/app/ontology-terms/index.js | 25 ++-- .../src/pages/app/test-data-suites/index.js | 37 +++--- .../test-data-collection-list-table.js | 60 +++++---- .../src/sections/app/files-form/item-list.js | 33 +++-- .../ontology-namespace-custom/list-table.js | 117 ++++++++---------- .../app/ontology-namespace/list-table.js | 29 ++--- .../sections/app/ontology-term/list-table.js | 29 ++--- .../frontend/src/theme/colors.js | 1 + .../src/theme/light/create-components.js | 2 +- 11 files changed, 182 insertions(+), 199 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js index 7fb51866f..9ff4e1dd6 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-namespaces-custom/index.js @@ -55,19 +55,17 @@ const Page = () => { - - - + ) diff --git a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js index c2c8becf5..59305a1c3 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-namespaces/index.js @@ -62,19 +62,17 @@ const Page = () => { - - - + 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 23c22d0f8..a4d29f0a4 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-terms/index.js @@ -116,20 +116,17 @@ const Page = () => { - - - - + 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 15967d7a2..13ab2d022 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 @@ -62,12 +62,12 @@ const Page = () => { <> - - - + + + - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> @@ -100,22 +100,19 @@ const Page = () => { - - - - + { ) } - return (<> - - - - - + return ( + + + + + + + @@ -368,16 +371,11 @@ export const TestDataCollectionListTable = (props) => { onChange={(event) => handleItemsSelectAll(event.target.checked)} /> - - {/**/} - {/* Title*/} - {/**/} + Packages - {/**/} - {/* Created*/} - {/**/} @@ -408,8 +406,8 @@ export const TestDataCollectionListTable = (props) => {
- - + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/files-form/item-list.js b/mapping_workbench/frontend/src/sections/app/files-form/item-list.js index c1e12ed5b..d84ecbe89 100644 --- a/mapping_workbench/frontend/src/sections/app/files-form/item-list.js +++ b/mapping_workbench/frontend/src/sections/app/files-form/item-list.js @@ -84,24 +84,23 @@ export const ItemList = (props) => { : return ( - - - + + + {content} - - - - + + + ); } ; diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js index 1117dac85..0a3f3a15d 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js @@ -1,18 +1,18 @@ import PropTypes from 'prop-types'; + +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; +import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import TableSortLabel from '@mui/material/TableSortLabel'; import TableHead from '@mui/material/TableHead'; -import TablePagination from '@mui/material/TablePagination'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; -import Tooltip from "@mui/material/Tooltip"; import {Scrollbar} from 'src/components/scrollbar'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; +import TablePagination from '../../components/table-pagination'; import TableSorterHeader from '../../components/table-sorter-header'; export const ListTable = (props) => { @@ -55,65 +55,58 @@ export const ListTable = (props) => { } return ( -
- - - - - - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; + + + +
+ + + + + + Actions + + + + + {items.map((item) => { + const item_id = item._id; - return ( - - - - {item.prefix} - - - - {item.uri} - - - handleDeleteAction(item_id)} - /> - - - ); - })} - -
- - -
+ return ( + + + + {item.prefix} + + + + {item.uri} + + + handleDeleteAction(item_id)} + /> + + + ); + })} + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js index 178d9ab60..1241f9122 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js @@ -1,3 +1,4 @@ +import Paper from '@mui/material/Paper'; import PropTypes from 'prop-types'; import Table from '@mui/material/Table'; @@ -54,18 +55,18 @@ export const ListTable = (props) => { } return ( -
- + + @@ -116,8 +117,8 @@ export const ListTable = (props) => {
- -
+ + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js index dbd9fe439..d2757479d 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js @@ -1,3 +1,4 @@ +import Paper from '@mui/material/Paper'; import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; @@ -57,18 +58,18 @@ export const ListTable = (props) => { } return ( -
- + + @@ -164,8 +165,8 @@ export const ListTable = (props) => {
- -
+ + ); }; diff --git a/mapping_workbench/frontend/src/theme/colors.js b/mapping_workbench/frontend/src/theme/colors.js index 4160ac766..67d0b89f4 100644 --- a/mapping_workbench/frontend/src/theme/colors.js +++ b/mapping_workbench/frontend/src/theme/colors.js @@ -12,6 +12,7 @@ const withAlphas = (color) => { }; export const neutral = { + 0: '#FFF', 50: '#F8F9FA', 100: '#F3F4F6', 200: '#E5E7EB', diff --git a/mapping_workbench/frontend/src/theme/light/create-components.js b/mapping_workbench/frontend/src/theme/light/create-components.js index ad4a0174f..2466d1566 100644 --- a/mapping_workbench/frontend/src/theme/light/create-components.js +++ b/mapping_workbench/frontend/src/theme/light/create-components.js @@ -143,7 +143,7 @@ export const createComponents = ({ palette }) => { styleOverrides: { root: { [`& .${tableCellClasses.root}`]: { - backgroundColor: palette.neutral[50], + backgroundColor: palette.neutral[0], color: palette.neutral[700] } } From 1d93db06da0c7b5c7b50618e414687cf0c046526 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 15:47:15 +0200 Subject: [PATCH 10/25] MWB-906: update pagination overview --- .../app/fields-and-nodes/overview/index.js | 26 +++++----- .../app/fields-registry/list-table.js | 48 ++++++++----------- .../test-data-collection-list-table.js | 18 +++---- .../sections/app/ontology-term/list-table.js | 21 +++----- .../src/sections/components/chevron-button.js | 11 +++++ .../components/table-pagination-pages.js | 16 +++++++ 6 files changed, 71 insertions(+), 69 deletions(-) create mode 100644 mapping_workbench/frontend/src/sections/components/chevron-button.js create mode 100644 mapping_workbench/frontend/src/sections/components/table-pagination-pages.js diff --git a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js index 8bb3136b5..ec72e74f0 100644 --- a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js +++ b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js @@ -129,21 +129,17 @@ const Page = () => { - - - - - + ); diff --git a/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js b/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js index 32d707456..e8d7b13fb 100644 --- a/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js @@ -1,19 +1,17 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; - -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; import List from "@mui/material/List"; import Grid from "@mui/material/Grid"; import Table from '@mui/material/Table'; +import Paper from '@mui/material/Paper'; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import TableRow from '@mui/material/TableRow'; import ListItem from "@mui/material/ListItem"; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; @@ -21,12 +19,12 @@ import {paths} from "src/paths"; import {Scrollbar} from 'src/components/scrollbar'; import {PropertyList} from "src/components/property-list"; import {PropertyListItem} from "src/components/property-list-item"; -import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; +import {useHighlighterTheme} from "src/hooks/use-highlighter-theme"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {useHighlighterTheme} from "../../../hooks/use-highlighter-theme"; export const ListTable = (props) => { @@ -63,18 +61,18 @@ export const ListTable = (props) => { } return ( -
- + + @@ -123,14 +121,8 @@ export const ListTable = (props) => { }} width="25%" > - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -258,8 +250,8 @@ export const ListTable = (props) => {
- -
+ + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js index 3882ceac8..0f51e1776 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js @@ -1,27 +1,21 @@ -import Paper from '@mui/material/Paper'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronDownIcon from '@untitled-ui/icons-react/build/esm/ChevronDown'; -import ChevronRightIcon from '@untitled-ui/icons-react/build/esm/ChevronRight'; - import {Box} from "@mui/system"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Stack from "@mui/material/Stack"; import Table from '@mui/material/Table'; import Button from "@mui/material/Button"; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import Checkbox from "@mui/material/Checkbox"; import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; import CardContent from '@mui/material/CardContent'; -import TableSorterHeader from '../../components/table-sorter-header'; import {FileUploader} from "./file-uploader"; @@ -29,6 +23,7 @@ import {paths} from "src/paths"; import {useRouter} from "src/hooks/use-router"; import {useDialog} from "src/hooks/use-dialog"; import {Scrollbar} from 'src/components/scrollbar'; +import {ChevronButton} from 'src/sections/components/chevron-button'; import timeTransformer from "src/utils/time-transformer"; import {PropertyList} from "src/components/property-list"; import {useGlobalState} from "src/hooks/use-global-state"; @@ -37,10 +32,12 @@ import {PropertyListItem} from "src/components/property-list-item"; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from "src/components/app/list/list-item-actions"; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {testDataFileResourcesApi as fileResourcesApi} from "src/api/test-data-suites/file-resources"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; + export const ListTableRow = (props) => { const { item, @@ -131,11 +128,8 @@ export const ListTableRow = (props) => { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)}> - - {isCurrent ? : } - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> diff --git a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js index d2757479d..e6fe294af 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js @@ -1,24 +1,20 @@ -import Paper from '@mui/material/Paper'; import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronDownIcon from '@untitled-ui/icons-react/build/esm/ChevronDown'; -import ChevronRightIcon from '@untitled-ui/icons-react/build/esm/ChevronRight'; -import CardContent from '@mui/material/CardContent'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import SvgIcon from '@mui/material/SvgIcon'; import Table from '@mui/material/Table'; +import Paper from '@mui/material/Paper'; +import Divider from '@mui/material/Divider'; +import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; +import CardContent from '@mui/material/CardContent'; import {Scrollbar} from 'src/components/scrollbar'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; - import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {ChevronButton} from '../../components/chevron-button'; import TablePagination from "../../components/table-pagination"; import TableSorterHeader from "../../components/table-sorter-header"; @@ -113,11 +109,8 @@ export const ListTable = (props) => { }} width="25%" > - handleItemToggle(item_id)}> - - {isCurrent ? : } - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> diff --git a/mapping_workbench/frontend/src/sections/components/chevron-button.js b/mapping_workbench/frontend/src/sections/components/chevron-button.js new file mode 100644 index 000000000..35cb307ec --- /dev/null +++ b/mapping_workbench/frontend/src/sections/components/chevron-button.js @@ -0,0 +1,11 @@ +import ChevronRightIcon from '@mui/icons-material/ChevronRight'; +import IconButton from '@mui/material/IconButton'; + +export const ChevronButton = ({isCurrent, onClick}) => { + return + + +} \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js b/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js new file mode 100644 index 000000000..2311bab93 --- /dev/null +++ b/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js @@ -0,0 +1,16 @@ +import {Pagination} from '@mui/material'; + + +const TablePagination = (props) => { + const {children, ...otherProps} = props + return ( + <> + + {children} + + + ) +} + +export default TablePagination + From 46951648eb007d2082ce513f40fbdd35a1a3020a Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 16:18:52 +0200 Subject: [PATCH 11/25] MWB-906: update pagination cm and tm --- .../conceptual-mapping-rules/develop/index.js | 39 ++- .../overview/index.js | 52 ++-- .../app/fields-and-nodes/overview/index.js | 12 +- .../app/ontology-namespaces-custom/index.js | 6 +- .../pages/app/ontology-namespaces/index.js | 12 +- .../src/pages/app/ontology-terms/index.js | 12 +- .../src/pages/app/test-data-suites/index.js | 7 +- .../pages/app/triple-map-fragments/index.js | 30 +-- .../app/value-mapping-resources/index.js | 34 ++- .../develop/list-table.js | 107 ++++---- .../app/conceptual-mapping-rule/list-table.js | 249 +++++++++--------- .../file-collection-list-table.js | 109 ++++---- .../generic-triple-map-fragment/list-table.js | 228 ++++++++-------- 13 files changed, 435 insertions(+), 462 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js index 127f74aa4..f2faffa50 100644 --- a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js +++ b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/develop/index.js @@ -1,10 +1,10 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Button from '@mui/material/Button'; -import Card from '@mui/material/Card'; + +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; -import Divider from "@mui/material/Divider"; +import Button from '@mui/material/Button'; import {Seo} from 'src/components/seo'; import {Layout as AppLayout} from 'src/layouts/app'; @@ -97,18 +97,17 @@ export const Page = () => { <> - - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]} placeholder='Search Terms'/> - + - - - + { > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - - + + - - - setDetailedView(e.target.checked)}/>} - label='Detailed View'/> - - - - + + setDetailedView(e.target.checked)}/>} + label='Detailed View'/> + + { justifyContent='space-between'> - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - - + + - - - + { justifyContent="space-between" spacing={4} > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - + { - - - + ) diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js index bfe22a169..1265a18ee 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js @@ -3,6 +3,7 @@ import {Prism as SyntaxHighlighter} from "react-syntax-highlighter"; import PropTypes from 'prop-types'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Dialog from "@mui/material/Dialog"; import Button from "@mui/material/Button"; @@ -47,11 +48,7 @@ export const ListTableRow = (props) => { {item.source_structural_element_sdk_element_id} - + { size="small" color="error" onClick={() => setConfirmOpen(true)} - sx={{ - whiteSpace: "nowrap" - }} + sx={{whiteSpace: "nowrap"}} > Delete @@ -171,54 +166,56 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ + + + + + + + + + + + + + + + + + + + + + + - - Actions - - - - - {items.map(item => )} - -
- + + Actions + + + + + {items.map(item => )} + + + + ); diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js index 54999d477..2ac309e38 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js @@ -7,7 +7,6 @@ import parse from "html-react-parser"; import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'; import EditIcon from '@untitled-ui/icons-react/build/esm/Edit05'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import CheckIcon from "@mui/icons-material/Check"; import CloseIcon from "@mui/icons-material/Close"; import InfoIcon from '@mui/icons-material/Info'; @@ -17,6 +16,7 @@ import Card from "@mui/material/Card"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; import Link from "@mui/material/Link"; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from "@mui/material/Stack"; import Alert from "@mui/material/Alert"; @@ -36,7 +36,6 @@ import TableHead from '@mui/material/TableHead'; import TextField from "@mui/material/TextField"; import FormLabel from "@mui/material/FormLabel"; import CardHeader from "@mui/material/CardHeader"; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; import FormControl from "@mui/material/FormControl"; @@ -62,6 +61,7 @@ import {ListSelectorSelect as ResourceListSelector} from "src/components/app/lis import { MappingPackageCheckboxList } from 'src/sections/app/mapping-package/components/mapping-package-real-checkbox-list'; +import {ChevronButton} from '../../components/chevron-button'; import TableSorterHeader from '../../components/table-sorter-header'; @@ -724,14 +724,8 @@ export const ListTableRow = (props) => { }) }} > - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> {item.sort_order} { showFirstButton showLastButton > - - - - - - - - Conceptual Field/Group - - - Min XSD - - - Max XSD - - - Ontology Fragment Class path - - - Ontology Fragment Property path - - - RML Triple Map - - - Mapping Package - - - SPARQL assertions - - - Notes - - + +
+ + + + + + Conceptual Field/Group + + + Min XSD + + + Max XSD + + + Ontology Fragment Class path + + + Ontology Fragment Property path + + + RML Triple Map + + + Mapping Package + + + SPARQL assertions + + + Notes + + + Actions + + + + + {items.map(item => { + const item_id = item._id; + const isCurrent = item_id === currentItem; + const isHovered = item_id === hoveredItem; + + return ( + ) + })} + - Actions - - - - - {items.map(item => { - const item_id = item._id; - const isCurrent = item_id === currentItem; - const isHovered = item_id === hoveredItem; - - return ( - ) - })} - - - - - - - {notesDialog.data?.mapping_notes && <> - Mapping Notes: - {notesDialog.data.mapping_notes.map((mapping_note, i) => - )} - } - - {notesDialog.data?.editorial_notes && <> - Editorial Notes: - {notesDialog.data.editorial_notes.map((editorial_note, i) => - )} - } - - {notesDialog.data?.feedback_notes && <> - Feedback Notes: - {notesDialog.data.feedback_notes.map((feedback_note, i) => - - )} - } - - - - - -
- + + + + + + {notesDialog.data?.mapping_notes && <> + Mapping Notes: + {notesDialog.data.mapping_notes.map((mapping_note, i) => + )} + } + + {notesDialog.data?.editorial_notes && <> + Editorial Notes: + {notesDialog.data.editorial_notes.map((editorial_note, i) => + + )} + } + + {notesDialog.data?.feedback_notes && <> + Feedback Notes: + {notesDialog.data.feedback_notes.map((feedback_note, i) => + + )} + } + + + + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index dbb699fe6..775abd8de 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -1,3 +1,4 @@ +import Paper from '@mui/material/Paper'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; @@ -34,6 +35,7 @@ import {FileUploader} from "src/sections/app/file-manager/file-uploader"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {ListFileCollectionActions} from "src/components/app/list/list-file-collection-actions"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; +import {ChevronButton} from '../../components/chevron-button'; import TableSorterHeader from '../../components/table-sorter-header'; export const ListTableRow = (props) => { @@ -96,14 +98,8 @@ export const ListTableRow = (props) => { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)}> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -318,7 +314,6 @@ export const FileCollectionListTable = (props) => { onMappingPackagesAssign={onMappingPackagesAssign} /> - { showFirstButton showLastButton > - - - - - - handleItemsSelectAll(event.target.checked)} - /> - - - - Packages - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + +
+ + + + handleItemsSelectAll(event.target.checked)} + /> + + + + Packages + + + + Actions + + + + + {items.map((item) => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - return ( - - ) - })} - -
- + return ( + + ) + })} + + + + { @@ -170,7 +170,7 @@ export const ListTable = (props) => { return a }, {}) - return (
+ return ( { showFirstButton showLastButton > - - - - - - - - - - Packages - - - - - - Actions - - - - - {items.map(item => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + +
+ + + + + + + + Packages + + + + + + Actions + + + + + {items.map(item => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - return ( - - + + + {item.triple_map_content && + handleItemToggle(item_id)} + isCurrent={isCurrent}/>} + + + + + {item.triple_map_uri} + + + setHoveredItem(item._id)} + onMouseLeave={() => setHoveredItem(null)}> + {projectMappingPackagesMap && } + + + {timeTransformer(item.created_at, timeSetting)} + + + + + + {isCurrent && ( + { width: 3, height: 'calc(100% + 1px)' } - }) - }} - width="25%" - > - {item.triple_map_content && - handleItemToggle(item_id)}> - - {} - - } - - - - - {item.triple_map_uri} - - - setHoveredItem(item._id)} - onMouseLeave={() => setHoveredItem(null)}> - {projectMappingPackagesMap && } - - - {timeTransformer(item.created_at, timeSetting)} - - - - - - {isCurrent && ( - - - - - Content: - + }} + > + + + + Content: + + - - - - )} - ); - })} - -
- + + + )} + ); + })} + + + + -
); + ); }; ListTable.propTypes = { From 3131b127ffb9227af1f47c0b5236ac6b82df7233 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 16:37:50 +0200 Subject: [PATCH 12/25] MWB-906: update pagination tasks and projects --- .../src/pages/app/mapping-packages/index.js | 29 +- .../frontend/src/pages/app/projects/index.js | 32 +- .../src/pages/app/shacl-test-suites/index.js | 37 +- .../src/pages/app/sparql-test-suites/index.js | 38 +- .../frontend/src/pages/app/tasks/index.js | 36 +- .../file-collection-list-table.js | 4 - .../app/mapping-package/list-table.js | 114 +++-- .../src/sections/app/project/list-table.js | 65 ++- .../src/sections/app/tasks/list-table.js | 399 +++++++++--------- .../src/sections/components/chevron-button.js | 3 +- 10 files changed, 361 insertions(+), 396 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js b/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js index 03b0d3dcf..c8f5c5c70 100644 --- a/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js +++ b/mapping_workbench/frontend/src/pages/app/mapping-packages/index.js @@ -1,3 +1,4 @@ +import Paper from '@mui/material/Paper'; import {useEffect, useState} from 'react'; import {saveAs} from 'file-saver'; @@ -86,10 +87,10 @@ const Page = () => { justifyContent="space-between" spacing={4} > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - + { - - - + { justifyContent="space-between" spacing={4} > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]} - placeholder='Search by Project Title'/> - + placeholder='Search by Project Title'/> + { - - - + ) diff --git a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js index c50599319..e02b51811 100644 --- a/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js +++ b/mapping_workbench/frontend/src/pages/app/shacl-test-suites/index.js @@ -2,7 +2,7 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Card from '@mui/material/Card'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; @@ -64,10 +64,10 @@ const Page = () => { justifyContent="space-between" spacing={4} > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - + { - - - - + ); diff --git a/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js b/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js index 301cb7fa9..73066b4dc 100644 --- a/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js +++ b/mapping_workbench/frontend/src/pages/app/sparql-test-suites/index.js @@ -2,7 +2,7 @@ import {useEffect, useState} from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Card from '@mui/material/Card'; +import Paper from '@mui/material/Paper'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; @@ -63,10 +63,10 @@ const Page = () => { justifyContent="space-between" spacing={4} > - + itemsSearch.handleSearchItems([e])} value={itemsSearch.state.search[0]}/> - + { - - - + ) diff --git a/mapping_workbench/frontend/src/pages/app/tasks/index.js b/mapping_workbench/frontend/src/pages/app/tasks/index.js index 599a5e212..b06e3f71a 100644 --- a/mapping_workbench/frontend/src/pages/app/tasks/index.js +++ b/mapping_workbench/frontend/src/pages/app/tasks/index.js @@ -144,25 +144,23 @@ export const Page = () => { - - - - - + + + ) diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index 775abd8de..5a24171b8 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -2,8 +2,6 @@ import Paper from '@mui/material/Paper'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; - import Box from "@mui/system/Box"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; @@ -11,13 +9,11 @@ import Table from '@mui/material/Table'; 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 Checkbox from "@mui/material/Checkbox"; import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import IconButton from '@mui/material/IconButton'; import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/Typography'; diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js index ace4da9f3..a8ebc19fe 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js @@ -2,22 +2,19 @@ import {Fragment, useState} from 'react'; import {useRouter} from "next/router"; import PropTypes from 'prop-types'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; - import Box from "@mui/system/Box"; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; 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 Checkbox from "@mui/material/Checkbox"; import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; import CardContent from '@mui/material/CardContent'; import FormControlLabel from "@mui/material/FormControlLabel"; @@ -32,6 +29,7 @@ import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {ChevronButton} from '../../components/chevron-button'; import TableSorterHeader from '../../components/table-sorter-header'; import {MappingPackageProcessForm} from './components/mapping-package-process-form'; import {MappingPackagesBulkActions} from './components/mapping-packages-bulk-actions'; @@ -87,15 +85,8 @@ const MappingPackageRowFragment = (props) => { checked={isItemSelected(item_id)} onClick={event => handleItemSelect(event.target.checked, item_id)} /> - handleItemToggle(item_id)} - id="expand_button"> - - - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> @@ -247,7 +238,6 @@ export const ListTable = (props) => { setSelectedItems(items => checked ? [...items, itemId] : items.filter(item => item !== itemId)); } - const handleItemToggle = itemId => { setCurrentItem(prevItemId => prevItemId === itemId ? null : itemId); } @@ -282,7 +272,7 @@ export const ListTable = (props) => { } return ( -
+ <> selectedItems.includes(item._id))} disabled={!selectedItems.length}/> @@ -297,54 +287,56 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - handleItemsSelectAll(event.target.checked)} - /> - - - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; - const isCurrent = item_id === currentItem; + + +
+ + + + handleItemsSelectAll(event.target.checked)} + /> + + + + + + Actions + + + + + {items.map((item) => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - return ( - - ); - })} - -
- + return ( + + ); + })} + + + + -
+ ); }; diff --git a/mapping_workbench/frontend/src/sections/app/project/list-table.js b/mapping_workbench/frontend/src/sections/app/project/list-table.js index ed02fc5af..880c23dff 100644 --- a/mapping_workbench/frontend/src/sections/app/project/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/project/list-table.js @@ -1,33 +1,30 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; -import ChevronDownIcon from '@untitled-ui/icons-react/build/esm/ChevronDown'; -import ChevronRightIcon from '@untitled-ui/icons-react/build/esm/ChevronRight'; -import CardContent from '@mui/material/CardContent'; -import Divider from '@mui/material/Divider'; import Grid from '@mui/material/Grid'; -import IconButton from '@mui/material/IconButton'; -import SvgIcon from '@mui/material/SvgIcon'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; +import Button from "@mui/material/Button"; +import Divider from '@mui/material/Divider'; +import TableRow from '@mui/material/TableRow'; +import TableHead from '@mui/material/TableHead'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; -import Button from "@mui/material/Button"; +import CardContent from '@mui/material/CardContent'; +import {useProjects} from "src/hooks/use-projects"; +import {Scrollbar} from 'src/components/scrollbar'; +import timeTransformer from "src/utils/time-transformer"; +import {useGlobalState} from "src/hooks/use-global-state"; import {PropertyList} from 'src/components/property-list'; +import {SeverityPill} from "src/components/severity-pill"; import {PropertyListItem} from 'src/components/property-list-item'; -import {Scrollbar} from 'src/components/scrollbar'; +import {ChevronButton} from 'src/sections/components/chevron-button'; +import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from "src/sections/components/table-sorter-header"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {SeverityPill} from "../../../components/severity-pill"; -import {useProjects} from "../../../hooks/use-projects"; -import TablePagination from "../../components/table-pagination"; -import {useGlobalState} from "../../../hooks/use-global-state"; -import timeTransformer from "../../../utils/time-transformer"; -import TableSorterHeader from "../../components/table-sorter-header"; -import ConfirmDialog from "../../../components/app/dialog/confirm-dialog"; export const ListTable = (props) => { @@ -62,18 +59,17 @@ export const ListTable = (props) => { ) } return ( - <> - + + @@ -125,11 +121,8 @@ export const ListTable = (props) => { }} width="25%" > - handleItemToggle(item_id)}> - - {isCurrent ? : } - - + handleItemToggle(item_id)} + isCurrent={isCurrent}/> {
- - + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js index 571561095..a14e27fa4 100644 --- a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js @@ -2,14 +2,12 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; import moment from "moment"; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; - import List from '@mui/material/List'; import Grid from '@mui/material/Grid'; -import Stack from '@mui/material/Stack'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; +import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; -import SvgIcon from '@mui/material/SvgIcon'; import Popover from '@mui/material/Popover'; import Divider from '@mui/material/Divider'; import ListItem from '@mui/material/ListItem'; @@ -17,7 +15,6 @@ import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; import TableCell from '@mui/material/TableCell'; import TableBody from '@mui/material/TableBody'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; @@ -28,6 +25,7 @@ import {useGlobalState} from "src/hooks/use-global-state"; import {SeverityPill} from "src/components/severity-pill"; import TablePagination from "src/sections/components/table-pagination"; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import {ChevronButton} from '../../components/chevron-button'; import {mapStatusColor, TaskActions, TaskLine, taskProgressStatus as taskStatuses} from "./task-actions"; @@ -88,214 +86,209 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - - - - - - - - - - - Started By - - - - - - Duration - - - - - - Actions - - - - - {items.map((item) => { - const item_id = item.task_id; - const isCurrent = item_id === currentItem; - return ( - - - - {(item.exception_message || !!item.warnings?.length) && - handleItemToggle(item_id)}> - - - - } - - - - {item.task_name} - - - - {timeTransformer(item.created_at, timeSetting)} - - - {timeTransformer(item.started_at, timeSetting)} - - - {item?.created_by} - - - {timeTransformer(item.finished_at, timeSetting)} - - - {item?.finished_at ? moment.utc(moment(item?.finished_at).diff(moment(item?.started_at))).format("HH:mm:ss") : '-'} - - - handlePopoverEnter(event, item)} - onMouseLeave={handlePopoverLeave}> - - {item?.task_status} - - - - - - {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) - && - } - - - - {isCurrent && ( - + + +
+ + + + + + + + + + + + + + Started By + + + + + + Duration + + + + + + Actions + + + + + {items.map((item) => { + const item_id = item.task_id; + const isCurrent = item_id === currentItem; + return ( + + - - handleItemToggle(item_id)} + isCurrent={isCurrent}/>} + + + + {item.task_name} + + + + {timeTransformer(item.created_at, timeSetting)} + + + {timeTransformer(item.started_at, timeSetting)} + + + {item?.created_by} + + + {timeTransformer(item.finished_at, timeSetting)} + + + {item?.finished_at ? moment.utc(moment(item?.finished_at).diff(moment(item?.started_at))).format("HH:mm:ss") : '-'} + + + handlePopoverEnter(event, item)} + onMouseLeave={handlePopoverLeave}> + + {item?.task_status} + + + + + + {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) + && + } + + + + {isCurrent && ( + + + + + {item.exception_message && <> - Warning + color="error"> + Message - - {item.warnings.map((warning, key) => - - {warning} - - )} - + + {nl2br(item.exception_message)} + } - - - - - - )} - - ); - })} - -
- - - - + {!!item.warnings?.length && + <> + + Warning + + + + {item.warnings.map((warning, key) => + + {warning} + + )} + + } + + + + + + )} + + ); + })} + + + + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/components/chevron-button.js b/mapping_workbench/frontend/src/sections/components/chevron-button.js index 35cb307ec..6eafbe096 100644 --- a/mapping_workbench/frontend/src/sections/components/chevron-button.js +++ b/mapping_workbench/frontend/src/sections/components/chevron-button.js @@ -2,7 +2,8 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight'; import IconButton from '@mui/material/IconButton'; export const ChevronButton = ({isCurrent, onClick}) => { - return + return Date: Thu, 12 Dec 2024 17:14:14 +0200 Subject: [PATCH 13/25] MWB-906: update mp states --- .../pages/app/mapping-packages/[id]/view.js | 13 +- .../mapping-package-rules-view.js | 60 +++++--- .../app/mapping-package/state/list-table.js | 139 +++++++++--------- .../app/mapping-package/state/states_view.js | 71 ++------- 4 files changed, 127 insertions(+), 156 deletions(-) diff --git a/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js b/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js index 872a57736..275159dce 100644 --- a/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js +++ b/mapping_workbench/frontend/src/pages/app/mapping-packages/[id]/view.js @@ -1,14 +1,14 @@ import {useEffect, useState} from 'react'; import dynamic from "next/dynamic"; -import ArrowLeftIcon from '@untitled-ui/icons-react/build/esm/ArrowLeft'; +import ArrowBack from '@mui/icons-material/ArrowBack'; + import Tab from '@mui/material/Tab'; import Chip from '@mui/material/Chip'; import Link from '@mui/material/Link'; import Tabs from '@mui/material/Tabs'; import Stack from '@mui/material/Stack'; import Divider from '@mui/material/Divider'; -import SvgIcon from '@mui/material/SvgIcon'; import Typography from '@mui/material/Typography'; import {paths} from 'src/paths'; @@ -29,7 +29,6 @@ const StatesView = dynamic(() => import("src/sections/app/mapping-package/state/states_view")); - const tabs = [ {label: 'Details', value: 'details'}, {label: 'Resources', value: 'resources'}, @@ -60,7 +59,6 @@ const Page = () => { -
{ }} underline="hover" > - - - + {sectionApi.SECTION_TITLE} -
{ spacing={2} > - + {item.title} { handleItemsGet, ...state }; }; -const MappingPackageRulesView = (props) => { +const MappingPackageRulesView = ({id}) => { const [detailedView, setDetailedView] = useState(true) - const {id} = props + const [filterPopover, setFilterPopover] = useState(null) const mappingRulesStore = useMappingRulesStore(id); // const mappingRulesSearch = useMappingRulesSearch(mappingRulesStore); @@ -88,23 +90,41 @@ const MappingPackageRulesView = (props) => { return ( - - mappingRulesSearch.handleSearchItems([e])} - value={mappingRulesSearch.state.search[0]}/> - + <> + spacing={3}> + + mappingRulesSearch.handleSearchItems([e])} + value={mappingRulesSearch.state.search[0]}/> + + + + setFilterPopover(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + mappingRulesSearch.handleFiltersChange({terms: e})}/> + + setDetailedView(e.target.checked)}/>} label='Detailed View'/> - - mappingRulesSearch.handleFiltersChange({terms: e})}/> - + - { onPackagesUpdate={handlePackagesUpdate} detailedView={detailedView} /> - + ) } diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js index d47b23ee7..d17657f1c 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js @@ -2,23 +2,24 @@ import {useState} from 'react'; import PropTypes from 'prop-types'; import Table from '@mui/material/Table'; +import Paper from '@mui/material/Paper'; +import Stack from "@mui/material/Stack"; +import Button from "@mui/material/Button"; +import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; import Typography from '@mui/material/Typography'; -import Stack from "@mui/material/Stack"; -import Button from "@mui/material/Button"; import {paths} from "src/paths"; import {Scrollbar} from 'src/components/scrollbar'; +import timeTransformer from "src/utils/time-transformer"; +import {useGlobalState} from "src/hooks/use-global-state"; +import exportPackage from "src/utils/export-mapping-package"; +import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import exportPackage from "../../../../utils/export-mapping-package"; -import TablePagination from "../../../components/table-pagination"; -import timeTransformer from "../../../../utils/time-transformer"; -import {useGlobalState} from "../../../../hooks/use-global-state"; -import TableSorterHeader from '../../../components/table-sorter-header'; export const ListTable = (props) => { const { @@ -64,67 +65,69 @@ export const ListTable = (props) => { showFirstButton showLastButton > - - - - - - - - - - Actions - - - - - {items?.map(item => { - const item_id = item._id; - return ( - - - - {item.title} - - - - {item.description} - - - {item.mapping_version} - - - {timeTransformer(item.created_at, timeSetting)} - - - - paths.app[sectionApi.section].states.view(id, item_id), - }} - /> - - - - + + +
+ + + + + + + + Actions + + + + + {items?.map(item => { + const item_id = item._id; + return ( + + + + {item.title} + + + + {item.description} + + + {item.mapping_version} + + + {timeTransformer(item.created_at, timeSetting)} + + + + paths.app[sectionApi.section].states.view(id, item_id), + }} + /> + + + + - ); - })} - -
- + ); + })} + + + + ); }; diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js index 584cfdb2a..5262eeae0 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/states_view.js @@ -1,62 +1,13 @@ import {useEffect, useState} from "react"; +import Paper from '@mui/material/Paper'; import Stack from "@mui/material/Stack"; import Alert from "@mui/material/Alert"; -import Card from "@mui/material/Card"; -import CardContent from "@mui/material/CardContent"; -import {mappingPackageStatesApi as sectionApi} from 'src/api/mapping-packages/states'; -import useItemsSearch from '../../../../hooks/use-items-search'; -import {TableSearchBar} from '../../../components/table-search-bar'; import {ListTable} from "./list-table"; -import {FileCollectionListSearch} from "../../file-manager/file-collection-list-search"; - -// -// -// const useItemsSearch = () => { -// const [state, setState] = useState({ -// filters: {}, -// page: sectionApi.DEFAULT_PAGE, -// rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE, -// sortField: "", -// sortDirection: undefined, -// }); -// -// const handleFiltersChange = filters => { -// setState(prevState => ({ -// ...prevState, -// filters, -// page: 0 -// })); -// } -// -// const handlePageChange = (event, page) => { -// setState(prevState => ({ -// ...prevState, -// page -// })); -// }; -// -// const handleRowsPerPageChange = (event) => { -// setState(prevState => ({ -// ...prevState, -// rowsPerPage: parseInt(event.target.value, 10) -// })); -// }; -// -// const handleSort = (sortField) => { -// setState(prevState => ({...prevState, sortField, sortDirection: state.sortField === sortField && prevState.sortDirection === -1 ? 1 : -1 })) -// } -// -// return { -// handleFiltersChange, -// handlePageChange, -// handleRowsPerPageChange, -// handleSort, -// state -// }; -// }; - +import useItemsSearch from 'src/hooks/use-items-search'; +import {TableSearchBar} from 'src/sections/components/table-search-bar'; +import {mappingPackageStatesApi as sectionApi} from 'src/api/mapping-packages/states'; const useItemsStore = (id, searchState) => { const [state, setState] = useState({ @@ -95,10 +46,13 @@ const StatesView = ({id}) => { const itemsSearch = useItemsSearch(itemsStore.items, sectionApi, SEARCH_COLUMNS); return ( - - - itemsSearch.handleSearchItems([e])} - value={itemsSearch.state.search[0]}/> + + + + itemsSearch.handleSearchItems([e])} + value={itemsSearch.state.search[0]}/> + + { itemsStore.itemsCount ? { No Data ! } - - + ) } From 967f28260be011e6ecbebe0204e11875399350b6 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 17:37:12 +0200 Subject: [PATCH 14/25] MWB-906: update menu --- .../frontend/src/layouts/app/config.js | 55 +++++++++++++++---- .../frontend/src/locales/tokens.js | 4 +- .../frontend/src/locales/translations/en.js | 2 + .../file-collection-list-table.js | 25 +++++---- .../app/mapping-package/list-table.js | 7 ++- .../components/arrow-buttons/arrow-buttons.js | 5 +- 6 files changed, 69 insertions(+), 29 deletions(-) diff --git a/mapping_workbench/frontend/src/layouts/app/config.js b/mapping_workbench/frontend/src/layouts/app/config.js index 15297df0e..d3fd32d05 100644 --- a/mapping_workbench/frontend/src/layouts/app/config.js +++ b/mapping_workbench/frontend/src/layouts/app/config.js @@ -1,3 +1,7 @@ +import ArchiveIcon from '@mui/icons-material/Archive'; +import TaskAltIcon from '@mui/icons-material/TaskAlt'; +import ModeStandbyIcon from '@mui/icons-material/ModeStandby'; +import VerifiedIcon from '@mui/icons-material/Verified'; import {useTranslation} from 'react-i18next'; import SvgIcon from '@mui/material/SvgIcon'; @@ -28,22 +32,18 @@ export const useSections = () => { } ] }], - mappingProcess: [ + sourceAndTarget: [ { items: [{ - title: t(tokens.nav.mapping_process), + title: t(tokens.nav.source_and_target), path: paths.app.test_data_suites.index, - icon: ( - - - - ) + icon: () }] } ], - projectFiles: [{ + elementsDefinition: [{ items: [{ - title: t(tokens.nav.project_files), + title: t(tokens.nav.elements_definition), path: paths.app.fields_and_nodes.develop.index, icon: ( @@ -52,6 +52,39 @@ export const useSections = () => { ), }] }], + conceptualMappings: [{ + items: [{ + title: t(tokens.nav.conceptual_mappings), + path: paths.app.conceptual_mapping_rules.develop.index, + icon: ( + + + + ), + }] + }], + technical_mappings: [{ + items: [{ + title: t(tokens.nav.technical_mappings), + path: paths.app.triple_map_fragments.index, + icon: ( + + + + ), + }] + }], + quality_control: [{ + items: [{ + title: t(tokens.nav.quality_control), + path: paths.app.sparql_test_suites.index, + icon: ( + + + + ), + }] + }], mappingPackages: [ { items: [ @@ -60,7 +93,7 @@ export const useSections = () => { path: paths.app.mapping_packages.index, icon: ( - + ), }] @@ -73,7 +106,7 @@ export const useSections = () => { path: paths.app.tasks.index, icon: ( - + ) }] diff --git a/mapping_workbench/frontend/src/locales/tokens.js b/mapping_workbench/frontend/src/locales/tokens.js index dd545e721..f9ab174d4 100644 --- a/mapping_workbench/frontend/src/locales/tokens.js +++ b/mapping_workbench/frontend/src/locales/tokens.js @@ -71,7 +71,9 @@ export const tokens = { terms: 'nav.terms', dissemination: 'nav.dissemination', - mapping_process: 'nav,mapping_process', + elements_definition: 'nav.elements_definition', + source_and_target: 'nav.source_and_target', + mapping_process: 'nav.mapping_process', mapping_packages: 'nav.mapping_packages', conceptual_mapping_rules: 'nav.conceptual_mapping_rules', triple_map_fragments: 'nav.triple_map_fragments', diff --git a/mapping_workbench/frontend/src/locales/translations/en.js b/mapping_workbench/frontend/src/locales/translations/en.js index 48bd6e5f2..531249e68 100644 --- a/mapping_workbench/frontend/src/locales/translations/en.js +++ b/mapping_workbench/frontend/src/locales/translations/en.js @@ -77,6 +77,8 @@ export const en = { [tokens.nav.namespaces_custom]: 'Custom Namespaces', [tokens.nav.terms]: 'Terms', [tokens.nav.resource_collections]: 'Resources', + [tokens.nav.elements_definition]: 'Elements Definition', + [tokens.nav.source_and_target]: 'Source & Target', [tokens.nav.mapping_packages]: 'Mapping Packages', [tokens.nav.mapping_process]: 'Mapping Process', [tokens.nav.conceptual_mapping_rules]: 'Conceptual Mappings', diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index 5a24171b8..53319b0c6 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -1,10 +1,10 @@ -import Paper from '@mui/material/Paper'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; import Box from "@mui/system/Box"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from "@mui/material/Stack"; import Button from "@mui/material/Button"; @@ -26,13 +26,13 @@ import {useGlobalState} from "src/hooks/use-global-state"; import {PropertyList} from "src/components/property-list"; import {mappingPackagesApi} from "src/api/mapping-packages"; import {PropertyListItem} from 'src/components/property-list-item'; +import {ChevronButton} from 'src/sections/components/chevron-button'; import TablePagination from "src/sections/components/table-pagination"; import {FileUploader} from "src/sections/app/file-manager/file-uploader"; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {ListFileCollectionActions} from "src/components/app/list/list-file-collection-actions"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; -import {ChevronButton} from '../../components/chevron-button'; -import TableSorterHeader from '../../components/table-sorter-header'; export const ListTableRow = (props) => { const { @@ -301,15 +301,6 @@ export const FileCollectionListTable = (props) => { return (<> - - - { showLastButton > + + + + diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js index a8ebc19fe..ca35c4b97 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js @@ -273,9 +273,7 @@ export const ListTable = (props) => { return ( <> - selectedItems.includes(item._id))} - disabled={!selectedItems.length}/> - + { showLastButton > + selectedItems.includes(item._id))} + disabled={!selectedItems.length}/> +
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 ee53ec0dc..c18f2f9b1 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,3 +1,4 @@ +import ApiIcon from '@mui/icons-material/Api'; import Link from 'next/link'; import {useRouter} from 'next/router'; @@ -44,7 +45,7 @@ export const ArrowButtons = () => { } href={paths.app.fields_and_nodes.develop.index}> Elements Definition @@ -76,7 +77,7 @@ export const ArrowButtons = () => { style={{marginRight: '4px'}}/>} href={paths.app.mapping_packages.index} last> - Export Mapping + Mapping Packages ) } \ No newline at end of file From b00dfed5c95807feff78c4155807ba7a251e51f5 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Thu, 12 Dec 2024 17:44:45 +0200 Subject: [PATCH 15/25] MWB-906: add tooltip to project-switch --- .../app/project-switch/project-switch.js | 4 +- .../app/project-switch2/project-switch.js | 50 ++++++++++--------- 2 files changed, 29 insertions(+), 25 deletions(-) diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js index 87837329a..56964a75e 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch/project-switch.js @@ -4,9 +4,9 @@ import MenuItem from "@mui/material/MenuItem"; import TextField from "@mui/material/TextField"; import Typography from "@mui/material/Typography"; -import {ProjectsContext} from "../../../contexts/projects"; -import {useRouter} from "../../../hooks/use-router"; import {paths} from 'src/paths'; +import {useRouter} from "next/router"; +import {ProjectsContext} from "src/contexts/projects"; export const ProjectSwitch = () => { diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js index a2a66d208..38a7aaa54 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js @@ -1,11 +1,11 @@ -import Menu from '@mui/material/Menu'; -import {Box} from '@mui/system'; +import Tooltip from '@mui/material/Tooltip'; import {useContext, useState} from "react"; import AddIcon from '@mui/icons-material/Add'; import SearchIcon from '@mui/icons-material/Search'; import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; +import Menu from '@mui/material/Menu'; import Stack from '@mui/material/Stack'; import Divider from '@mui/material/Divider'; import {useTheme} from '@mui/material/styles'; @@ -13,11 +13,11 @@ import MenuItem from "@mui/material/MenuItem"; import Typography from "@mui/material/Typography"; import OutlinedInput from '@mui/material/OutlinedInput'; import InputAdornment from '@mui/material/InputAdornment'; -import {Scrollbar} from '../../../components/scrollbar'; -import {ProjectsContext} from "../../../contexts/projects"; -import {useRouter} from "next/router"; import {paths} from 'src/paths'; +import {useRouter} from "next/router"; +import {Scrollbar} from 'src/components/scrollbar'; +import {ProjectsContext} from "src/contexts/projects"; export const ProjectSwitch = ({small}) => { const [anchorEl, setAnchorEl] = useState(null); @@ -42,26 +42,30 @@ export const ProjectSwitch = ({small}) => { setAnchorEl(null); }; + const projectName = projectsStore.items?.find(project => project._id === projectsStore.sessionProject)?.title return ( - - {!small && projectsStore.items?.find(project => project._id === projectsStore.sessionProject)?.title} - - + + + + {!small && projectName} + + + Date: Thu, 12 Dec 2024 17:50:58 +0200 Subject: [PATCH 16/25] MWB-906: fix side-nav --- .../frontend/src/layouts/app/vertical-layout/side-nav-item.js | 1 + .../frontend/src/layouts/app/vertical-layout/side-nav.js | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js index 98d7e0c65..13a4fd46f 100644 --- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js +++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav-item.js @@ -199,6 +199,7 @@ export const SideNavItem = (props) => { ...(depth >= -1 && { borderTopRightRadius: 0, borderBottomRightRadius: 0, + paddingRight: '12px', borderRight: '4px solid var(--nav-item-icon-active-color)', }) diff --git a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js index 203f05e40..c9c3c167d 100644 --- a/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js +++ b/mapping_workbench/frontend/src/layouts/app/vertical-layout/side-nav.js @@ -167,7 +167,7 @@ export const SideNav = (props) => { backgroundColor: 'var(--nav-bg)', color: 'var(--nav-color)', width: small ? SIDE_NAV_WIDTH_SMALL : SIDE_NAV_WIDTH, - borderRight: '1px solid #E4E7EC' + borderRight: '1px solid var(--nav-border-color)' } }} variant="permanent" From bce928401d22f39f8bf11d8c66d1f8c6945e05ef Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 10:01:32 +0200 Subject: [PATCH 17/25] MWB-906: add project-switch dots --- .../app/project-switch2/project-switch.js | 39 +++++++++++++++---- 1 file changed, 32 insertions(+), 7 deletions(-) diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js index 38a7aaa54..0a017ae79 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js @@ -1,4 +1,3 @@ -import Tooltip from '@mui/material/Tooltip'; import {useContext, useState} from "react"; import AddIcon from '@mui/icons-material/Add'; @@ -7,6 +6,7 @@ import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; import Menu from '@mui/material/Menu'; import Stack from '@mui/material/Stack'; +import Tooltip from '@mui/material/Tooltip'; import Divider from '@mui/material/Divider'; import {useTheme} from '@mui/material/styles'; import MenuItem from "@mui/material/MenuItem"; @@ -19,6 +19,17 @@ import {useRouter} from "next/router"; import {Scrollbar} from 'src/components/scrollbar'; import {ProjectsContext} from "src/contexts/projects"; +const colors = ['error', 'info', 'primary', 'secondary', 'success', 'warning']; + +const getColorForId = (id) => { + const hash = Array.from(id).reduce((sum, char) => sum + char.charCodeAt(0), 0); + return colors[hash % colors.length]; +}; + +const Circle = ({color}) => { + return +} + export const ProjectSwitch = ({small}) => { const [anchorEl, setAnchorEl] = useState(null); const projectsStore = useContext(ProjectsContext) @@ -26,6 +37,8 @@ export const ProjectSwitch = ({small}) => { const router = useRouter(); const theme = useTheme() + console.log(theme) + const handleProjectSelect = (value) => { if (value) @@ -42,17 +55,20 @@ export const ProjectSwitch = ({small}) => { setAnchorEl(null); }; - const projectName = projectsStore.items?.find(project => project._id === projectsStore.sessionProject)?.title + const currentProject = projectsStore.items?.find(project => project._id === projectsStore.sessionProject) + + + console.log(currentProject._id) + return ( - - + { p: '9px', cursor: 'pointer' }}> - {!small && projectName} + {!!currentProject && + + {!small && currentProject.title} + } + sx={{fontSize: '18px'}} + /> { sx={{px: '15px', py: '8px'}} onClick={() => handleProjectSelect(project._id)} > + + {project.title} From e1e8d1540a714eaed913b1df70d67a2985d0341a Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 10:58:01 +0200 Subject: [PATCH 18/25] MWB-906: update source files actions buttons --- .../components/app/list/list-item-actions.js | 124 +++++------------- .../src/components/menu-action-button.js | 18 +++ .../app/project-switch2/project-switch.js | 2 +- .../test-data-collection-list-table.js | 32 +++-- 4 files changed, 69 insertions(+), 107 deletions(-) create mode 100644 mapping_workbench/frontend/src/components/menu-action-button.js diff --git a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js index e792edd38..e76ca4c1c 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js @@ -2,20 +2,28 @@ import {useState} from "react"; import {useRouter} from "next/router"; import PropTypes from 'prop-types'; -import {Button} from '@mui/material'; -import {Box} from "@mui/system"; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + +import {useTheme} from '@mui/material/styles'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; import {paths} from 'src/paths'; -import {usePopover} from 'src/hooks/use-popover'; import {ACTION} from "../../../api/section"; +import {MenuActionButton} from '../../menu-action-button'; import ConfirmDialog from "../dialog/confirm-dialog"; import {toastError} from "../../app-toast"; export const ListItemActions = (props) => { const router = useRouter(); + const theme = useTheme() + + console.log(theme) const {itemctx, pathnames, onDeleteAction, confirmDialogContent, confirmDialogFooter} = props; - const popover = usePopover(); const handleViewAction = () => { if (pathnames?.view) @@ -55,44 +63,27 @@ export const ListItemActions = (props) => { const [confirmOpen, setConfirmOpen] = useState(false); return ( - - {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.VIEW) && } - {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.EDIT) && } + action={handleEditAction} + icon={} + text='Edit' + />} {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.DELETE) && <> - + last + action={() => setConfirmOpen(true)} + icon={} + text='Delete' + /> { <>{confirmDialogContent} } - - {/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */} - + ); }; diff --git a/mapping_workbench/frontend/src/components/menu-action-button.js b/mapping_workbench/frontend/src/components/menu-action-button.js new file mode 100644 index 000000000..2a3a16102 --- /dev/null +++ b/mapping_workbench/frontend/src/components/menu-action-button.js @@ -0,0 +1,18 @@ +import {cloneElement} from 'react'; + +import {useTheme} from '@mui/material/styles'; +import MenuItem from '@mui/material/MenuItem'; +import ListItemIcon from '@mui/material/ListItemIcon'; +import ListItemText from '@mui/material/ListItemText'; + +export const MenuActionButton = ({id, icon, text, action, last}) => { + const theme = useTheme() + return + {icon && + {cloneElement(icon, {color: 'primary'})} + } + {text && {text}} + +} \ No newline at end of file diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js index 0a017ae79..f74383e11 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js @@ -101,7 +101,7 @@ export const ProjectSwitch = ({small}) => { vertical: 'top', horizontal: 'left', }} - width={'250px'} + width='250px' > diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js index 0f51e1776..608d521c7 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js @@ -1,7 +1,11 @@ import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; +import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; +import UploadIcon from '@mui/icons-material/Upload'; + import {Box} from "@mui/system"; +import Menu from '@mui/material/Menu'; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; @@ -14,6 +18,7 @@ import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; +import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; @@ -23,12 +28,13 @@ import {paths} from "src/paths"; import {useRouter} from "src/hooks/use-router"; import {useDialog} from "src/hooks/use-dialog"; import {Scrollbar} from 'src/components/scrollbar'; -import {ChevronButton} from 'src/sections/components/chevron-button'; import timeTransformer from "src/utils/time-transformer"; import {PropertyList} from "src/components/property-list"; import {useGlobalState} from "src/hooks/use-global-state"; import {mappingPackagesApi} from "src/api/mapping-packages"; +import {MenuActionButton} from 'src/components/menu-action-button'; import {PropertyListItem} from "src/components/property-list-item"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from "src/components/app/list/list-item-actions"; @@ -55,6 +61,7 @@ export const ListTableRow = (props) => { const {timeSetting} = useGlobalState() const [collectionResources, setCollectionResources] = useState([]); const [confirmOpen, setConfirmOpen] = useState(false); + const [actionsMenu, setActionsMenu] = useState(null) const uploadDialog = useDialog() useEffect(() => { @@ -101,10 +108,8 @@ export const ListTableRow = (props) => { > Are you sure you want to delete it? - + { {timeTransformer(item.created_at, timeSetting)} - - + setActionsMenu(e.target)}> + + + setActionsMenu(null)}> + uploadDialog.handleOpen({id: item_id})} + icon={} + text='Import test data'/> - + {isCurrent && ( @@ -373,7 +382,6 @@ export const TestDataCollectionListTable = (props) => { - Actions From 276e67fd9602c0bc0a66af27e5ef515219fba099 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 12:48:55 +0200 Subject: [PATCH 19/25] MWB-906: update table actions --- .../app/list/list-file-collection-actions.js | 137 ++++-------------- .../components/app/list/list-item-actions.js | 13 +- ...{menu-action-button.js => menu-actions.js} | 22 ++- .../overview/index.js | 2 +- .../pages/app/triple-map-fragments/index.js | 2 +- .../develop/list-table.js | 34 ++--- .../app/conceptual-mapping-rule/list-table.js | 23 +-- .../app/fields-registry/list-table.js | 23 +-- .../file-collection-list-table.js | 24 +-- .../test-data-collection-list-table.js | 17 +-- .../generic-triple-map-fragment/list-table.js | 11 +- .../ontology-namespace-custom/list-table.js | 21 +-- .../app/ontology-namespace/list-table.js | 23 +-- .../sections/app/ontology-term/list-table.js | 11 +- 14 files changed, 140 insertions(+), 223 deletions(-) rename mapping_workbench/frontend/src/components/{menu-action-button.js => menu-actions.js} (53%) diff --git a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js index d5468fb76..6fa940166 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js @@ -1,17 +1,16 @@ import {Button} from '@mui/material'; - import {usePopover} from 'src/hooks/use-popover'; import {useCallback, useState} from "react"; import {paths} from 'src/paths'; -import {useRouter} from "../../../hooks/use-router"; +import {useRouter} from "next/router"; +import {MenuActionButton} from '../../menu-actions'; import ConfirmDialog from "../dialog/confirm-dialog"; export const ListFileCollectionActions = (props) => { const router = useRouter(); const {itemctx} = props; - const popover = usePopover(); const handleResourceManagerAction = useCallback(async () => { router.push({ @@ -48,116 +47,30 @@ export const ListFileCollectionActions = (props) => { return ( <> -
- {/**/} - - - - - Are you sure you want to delete it? - -
- {/* - - - - - - - + + setConfirmOpen(true)} + text='Delete' + /> + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */} + Are you sure you want to delete it? + ); }; diff --git a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js index e76ca4c1c..dc52c3fd5 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js @@ -6,23 +6,16 @@ import VisibilityIcon from '@mui/icons-material/Visibility'; import BorderColorIcon from '@mui/icons-material/BorderColor'; import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; -import {useTheme} from '@mui/material/styles'; -import MenuItem from '@mui/material/MenuItem'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; import {paths} from 'src/paths'; import {ACTION} from "../../../api/section"; -import {MenuActionButton} from '../../menu-action-button'; +import {MenuActionButton} from '../../menu-actions'; + import ConfirmDialog from "../dialog/confirm-dialog"; import {toastError} from "../../app-toast"; export const ListItemActions = (props) => { const router = useRouter(); - const theme = useTheme() - - console.log(theme) - const {itemctx, pathnames, onDeleteAction, confirmDialogContent, confirmDialogFooter} = props; const handleViewAction = () => { @@ -81,7 +74,7 @@ export const ListItemActions = (props) => { id="delete_button" last action={() => setConfirmOpen(true)} - icon={} + icon={} text='Delete' /> { + const [anchor, setAnchor] = useState(null) + return <> + setAnchor(e.target)}> + + + setAnchor(null)}> + {children} + + +} + export const MenuActionButton = ({id, icon, text, action, last}) => { const theme = useTheme() return { const { @@ -76,25 +79,18 @@ export const ListTableRow = (props) => { {item.target_property_path} - - + + } + action={() => onEdit(item)}/> + } + action={() => setConfirmOpen(true)} + text='Delete'/> + { @@ -810,12 +811,14 @@ export const ListTableRow = (props) => { - paths.app.conceptual_mapping_rules.overview - }} - /> + + paths.app.conceptual_mapping_rules.overview + }} + /> + {isCurrent && ( @@ -1029,9 +1032,7 @@ export const ListTable = (props) => { sx={{ whiteSpace: "nowrap" }} - > - Actions - + /> diff --git a/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js b/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js index e8d7b13fb..db98f3994 100644 --- a/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/fields-registry/list-table.js @@ -25,6 +25,7 @@ import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { @@ -87,9 +88,7 @@ export const ListTable = (props) => { - - Actions - + @@ -156,14 +155,16 @@ export const ListTable = (props) => { {item.element_type} - paths.app.fields_and_nodes.overview.elements, - edit: () => paths.app.fields_and_nodes.overview.elements.edit(item_id), - view: () => paths.app.fields_and_nodes.overview.elements.view(item_id) - }} - /> + + paths.app.fields_and_nodes.overview.elements, + edit: () => paths.app.fields_and_nodes.overview.elements.edit(item_id), + view: () => paths.app.fields_and_nodes.overview.elements.view(item_id) + }} + /> + {isCurrent && ( diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index 53319b0c6..14546d8ac 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -1,3 +1,5 @@ +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import UploadIcon from '@mui/icons-material/Upload'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; @@ -14,8 +16,8 @@ import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/Typography'; +import CardContent from '@mui/material/CardContent'; import {paths} from "src/paths"; import {useDialog} from "src/hooks/use-dialog"; @@ -33,6 +35,7 @@ import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {ListFileCollectionActions} from "src/components/app/list/list-file-collection-actions"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; +import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; export const ListTableRow = (props) => { const { @@ -124,16 +127,15 @@ export const ListTableRow = (props) => { {timeTransformer(item.created_at, timeSetting)} - - + + } + action={() => openUploadModal?.(item._id)} + text='Upload' + /> - + {isCurrent && ( @@ -341,9 +343,7 @@ export const FileCollectionListTable = (props) => { - - Actions - + diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js index 608d521c7..316e57e4c 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js @@ -1,11 +1,9 @@ import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import UploadIcon from '@mui/icons-material/Upload'; import {Box} from "@mui/system"; -import Menu from '@mui/material/Menu'; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; @@ -18,7 +16,6 @@ import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; import TableHead from '@mui/material/TableHead'; -import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CardContent from '@mui/material/CardContent'; @@ -32,11 +29,11 @@ import timeTransformer from "src/utils/time-transformer"; import {PropertyList} from "src/components/property-list"; import {useGlobalState} from "src/hooks/use-global-state"; import {mappingPackagesApi} from "src/api/mapping-packages"; -import {MenuActionButton} from 'src/components/menu-action-button'; import {PropertyListItem} from "src/components/property-list-item"; import {ChevronButton} from 'src/sections/components/chevron-button'; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; import TablePagination from "src/sections/components/table-pagination"; +import {MenuActions, MenuActionButton} from 'src/components/menu-actions'; import {ListItemActions} from "src/components/app/list/list-item-actions"; import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; @@ -61,7 +58,6 @@ export const ListTableRow = (props) => { const {timeSetting} = useGlobalState() const [collectionResources, setCollectionResources] = useState([]); const [confirmOpen, setConfirmOpen] = useState(false); - const [actionsMenu, setActionsMenu] = useState(null) const uploadDialog = useDialog() useEffect(() => { @@ -163,19 +159,14 @@ export const ListTableRow = (props) => { {timeTransformer(item.created_at, timeSetting)} - setActionsMenu(e.target)}> - - - setActionsMenu(null)}> + uploadDialog.handleOpen({id: item_id})} icon={} text='Import test data'/> - + {isCurrent && ( @@ -371,7 +362,7 @@ export const TestDataCollectionListTable = (props) => { handleItemsSelectAll(event.target.checked)} + onChange={event => handleItemsSelectAll(event.target.checked)} /> { - - Actions - + @@ -257,8 +256,10 @@ export const ListTable = (props) => { {timeTransformer(item.created_at, timeSetting)} - + + + {isCurrent && ( diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js index 0a3f3a15d..cd439530e 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js @@ -9,11 +9,12 @@ import TableHead from '@mui/material/TableHead'; import Typography from '@mui/material/Typography'; import {Scrollbar} from 'src/components/scrollbar'; +import TablePagination from 'src/sections/components/table-pagination'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; -import TablePagination from '../../components/table-pagination'; -import TableSorterHeader from '../../components/table-sorter-header'; +import {MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { const { @@ -72,9 +73,7 @@ export const ListTable = (props) => { - - Actions - + @@ -94,10 +93,12 @@ export const ListTable = (props) => { {item.uri} - handleDeleteAction(item_id)} - /> + + handleDeleteAction(item_id)} + /> + ); diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js index 1241f9122..9c2e0c533 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js @@ -1,6 +1,6 @@ -import Paper from '@mui/material/Paper'; import PropTypes from 'prop-types'; +import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Switch from "@mui/material/Switch"; import TableRow from '@mui/material/TableRow'; @@ -10,11 +10,12 @@ import TableHead from '@mui/material/TableHead'; import Typography from '@mui/material/Typography'; import {Scrollbar} from 'src/components/scrollbar'; +import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {toastError, toastLoad, toastSuccess} from "../../../components/app-toast"; -import TablePagination from "../../components/table-pagination"; -import TableSorterHeader from '../../components/table-sorter-header'; +import {MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { const { @@ -76,9 +77,7 @@ export const ListTable = (props) => { Syncable - - Actions - + @@ -106,10 +105,12 @@ export const ListTable = (props) => { /> - handleDeleteAction(item_id)} - /> + + handleDeleteAction(item_id)} + /> + ); diff --git a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js index e6fe294af..1933df310 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js @@ -14,6 +14,7 @@ import CardContent from '@mui/material/CardContent'; import {Scrollbar} from 'src/components/scrollbar'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {MenuActions} from '../../../components/menu-actions'; import {ChevronButton} from '../../components/chevron-button'; import TablePagination from "../../components/table-pagination"; import TableSorterHeader from "../../components/table-sorter-header"; @@ -75,9 +76,7 @@ export const ListTable = (props) => { title='Term'/> - - Actions - + @@ -121,8 +120,10 @@ export const ListTable = (props) => { {item.type} - + + + {isCurrent && ( From 3d67f115c213deaf8eb8d61cf33efb2fd89fc7c6 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 17:03:34 +0200 Subject: [PATCH 20/25] MWB-906: update table actions --- .../app/list/list-file-collection-actions.js | 13 +- .../frontend/src/components/menu-actions.js | 12 +- .../overview/index.js | 9 +- .../app/mapping-packages/[id]/states/index.js | 68 +----- .../frontend/src/pages/app/projects/index.js | 2 +- .../develop/list-table.js | 5 +- .../app/conceptual-mapping-rule/list-table.js | 10 +- .../app/mapping-package/list-table.js | 203 +++++++++--------- .../mapping-package-rules-view.js | 6 - .../app/mapping-package/state/list-table.js | 31 +-- .../src/sections/app/project/list-table.js | 47 ++-- .../src/sections/app/tasks/list-table.js | 47 ++-- 12 files changed, 206 insertions(+), 247 deletions(-) diff --git a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js index 6fa940166..8cae7478c 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js @@ -1,7 +1,9 @@ -import {Button} from '@mui/material'; - -import {usePopover} from 'src/hooks/use-popover'; import {useCallback, useState} from "react"; + +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; +import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined'; + import {paths} from 'src/paths'; import {useRouter} from "next/router"; import {MenuActionButton} from '../../menu-actions'; @@ -51,23 +53,26 @@ export const ListFileCollectionActions = (props) => { id="resources_button" action={handleResourceManagerAction} text='Resources' + icon={} /> } /> setConfirmOpen(true)} text='Delete' + icon={} + last /> Are you sure you want to delete it? diff --git a/mapping_workbench/frontend/src/components/menu-actions.js b/mapping_workbench/frontend/src/components/menu-actions.js index 6cb41852b..8e294d092 100644 --- a/mapping_workbench/frontend/src/components/menu-actions.js +++ b/mapping_workbench/frontend/src/components/menu-actions.js @@ -3,6 +3,7 @@ import {cloneElement, useState} from 'react'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; import Menu from '@mui/material/Menu'; +import Tooltip from '@mui/material/Tooltip'; import MenuItem from '@mui/material/MenuItem'; import {useTheme} from '@mui/material/styles'; import IconButton from '@mui/material/IconButton'; @@ -12,9 +13,11 @@ import ListItemText from '@mui/material/ListItemText'; export const MenuActions = ({children}) => { const [anchor, setAnchor] = useState(null) return <> - setAnchor(e.target)}> - - + + setAnchor(e.target)}> + + + setAnchor(null)}> @@ -23,10 +26,11 @@ export const MenuActions = ({children}) => { } -export const MenuActionButton = ({id, icon, text, action, last}) => { +export const MenuActionButton = ({id, icon, disabled, text, action, last}) => { const theme = useTheme() return {icon && {cloneElement(icon, {color: 'primary'})} diff --git a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js index c429a600d..0a5b91ff0 100644 --- a/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js +++ b/mapping_workbench/frontend/src/pages/app/conceptual-mapping-rules/overview/index.js @@ -42,7 +42,6 @@ const FILTER_VALUES = [{label: 'All', value: ''}, {label: 'Invalid', value: 'invalid'}] const Page = () => { - const [detailedView, setDetailedView] = useState(true) const {t} = useTranslation(); const [filterPopover, setFilterPopover] = useState(null) @@ -154,17 +153,11 @@ const Page = () => { - - setDetailedView(e.target.checked)}/>} - label='Detailed View'/> - + { - const [state, setState] = useState({ - filters: { - name: undefined, - category: [], - status: [], - inStock: undefined, - sortField: "", - sortDirection: undefined, - }, - page: sectionApi.DEFAULT_PAGE, - rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE - }); - - const handleFiltersChange = filters => { - setState(prevState => ({ - ...prevState, - filters, - page: 0 - })); - } - - const handlePageChange = (event, page) => { - setState(prevState => ({ - ...prevState, - page - })); - } - - const handleRowsPerPageChange = event => { - setState(prevState => ({ - ...prevState, - rowsPerPage: parseInt(event.target.value, 10) - })); - } - - const handleSort = (sortField) => { - setState(prevState => ({sortField, sortDirection: state.sortField === sortField && prevState.sortDirection === -1 ? 1 : -1 })) - } - - return { - handleSort, - handleFiltersChange, - handlePageChange, - handleRowsPerPageChange, - state - }; -}; - const Page = () => { const [state, setState] = useState({ items: [], @@ -76,7 +28,7 @@ const Page = () => { }); const router = useRouter(); - const itemsSearch = useItemsSearch(); + const itemsSearch = useItemsSearch(state.items,sectionApi); const {id} = router.query; diff --git a/mapping_workbench/frontend/src/pages/app/projects/index.js b/mapping_workbench/frontend/src/pages/app/projects/index.js index 5bf335d11..5e78b2639 100644 --- a/mapping_workbench/frontend/src/pages/app/projects/index.js +++ b/mapping_workbench/frontend/src/pages/app/projects/index.js @@ -16,7 +16,7 @@ import useItemsSearch from 'src/hooks/use-items-search'; import {projectsApi as sectionApi} from 'src/api/projects'; import {ListTable} from 'src/sections/app/project/list-table'; import {BreadcrumbsSeparator} from 'src/components/breadcrumbs-separator'; -import {TableSearchBar} from '../../../sections/components/table-search-bar'; +import {TableSearchBar} from 'src/sections/components/table-search-bar'; export const Page = () => { diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js index b4cdb76bb..be275f36a 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js @@ -89,6 +89,7 @@ export const ListTableRow = (props) => { id="delete_button" icon={} action={() => setConfirmOpen(true)} + last text='Delete'/> { title="Ontology Property Path"/> - - Actions - + diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js index 20a9604a4..6929c5441 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/list-table.js @@ -930,9 +930,10 @@ export const ListTable = (props) => { const { count = 0, items = [], onPageChange = () => { }, onRowsPerPageChange, page = 0, rowsPerPage = 0, sectionApi, onPackagesUpdate = () => { - }, sort, sortField, onSort, detailedView + }, sort, sortField, onSort } = props; + const [detailedView, setDetailedView] = useState(true) const [currentItem, setCurrentItem] = useState(null); const [hoveredItem, setHoveredItem] = useState(null); const notesDialog = useDialog() @@ -976,6 +977,7 @@ export const ListTable = (props) => { if (!isProjectDataReady) return null; + return ( { showLastButton > + + setDetailedView(e.target.checked)}/>} + label='Detailed View'/> +
diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js index ca35c4b97..96d03af32 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js @@ -2,12 +2,13 @@ import {Fragment, useState} from 'react'; import {useRouter} from "next/router"; import PropTypes from 'prop-types'; +import DownloadDoneOutlinedIcon from '@mui/icons-material/DownloadDoneOutlined'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + import Box from "@mui/system/Box"; import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; -import Stack from "@mui/material/Stack"; -import Button from "@mui/material/Button"; import Divider from '@mui/material/Divider'; import Checkbox from "@mui/material/Checkbox"; import TableRow from '@mui/material/TableRow'; @@ -29,6 +30,7 @@ import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; import {ChevronButton} from '../../components/chevron-button'; import TableSorterHeader from '../../components/table-sorter-header'; import {MappingPackageProcessForm} from './components/mapping-package-process-form'; @@ -101,31 +103,22 @@ const MappingPackageRowFragment = (props) => { {timeTransformer(item.created_at, timeSetting)} - - + + handleGoLastState(item_id)} + text='View Last State' + icon={} + /> - - + action={() => setConfirmOpen(true)} + icon={} + text='Delete'/> + {isCurrent && ( @@ -272,92 +265,100 @@ export const ListTable = (props) => { } return ( - <> + + + selectedItems.includes(item._id))} + disabled={!selectedItems.length}/> + + +
+ + + + handleItemsSelectAll(event.target.checked)} + /> + + + + + + + + + {items.map((item) => { + const item_id = item._id; + const isCurrent = item_id === currentItem; - - - selectedItems.includes(item._id))} - disabled={!selectedItems.length}/> - - -
- - - - handleItemsSelectAll(event.target.checked)} - /> - - - - - - Actions - - - - - {items.map((item) => { - const item_id = item._id; - const isCurrent = item_id === currentItem; - - return ( - - ); - })} - -
- - - - + return ( + + ); + })} + + + + + ); }; ListTable.propTypes = { count: PropTypes.number, - items: PropTypes.array, - onPageChange: PropTypes.func, - onRowsPerPageChange: PropTypes.func, - page: PropTypes.number, - rowsPerPage: PropTypes.number, - sectionApi: PropTypes.object + items: + PropTypes.array, + onPageChange: + PropTypes.func, + onRowsPerPageChange: + PropTypes.func, + page: + PropTypes.number, + rowsPerPage: + PropTypes.number, + sectionApi: + PropTypes.object }; MappingPackageRowFragment.propTypes = { item_id: PropTypes.string, - item: PropTypes.object, - isCurrent: PropTypes.bool, - handleItemToggle: PropTypes.func, - handleGoLastState: PropTypes.func, - handleDeleteAction: PropTypes.func, - timeSetting: PropTypes.number, - sectionApi: PropTypes.object + item: + PropTypes.object, + isCurrent: + PropTypes.bool, + handleItemToggle: + PropTypes.func, + handleGoLastState: + PropTypes.func, + handleDeleteAction: + PropTypes.func, + timeSetting: + PropTypes.number, + sectionApi: + PropTypes.object } \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js b/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js index 5fe47aa4f..c0f41c621 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/mapping-package-rules-view.js @@ -70,7 +70,6 @@ const useMappingRulesStore = (mappingPackage) => { }; }; const MappingPackageRulesView = ({id}) => { - const [detailedView, setDetailedView] = useState(true) const [filterPopover, setFilterPopover] = useState(null) const mappingRulesStore = useMappingRulesStore(id); @@ -120,10 +119,6 @@ const MappingPackageRulesView = ({id}) => { onValueChange={e => mappingRulesSearch.handleFiltersChange({terms: e})}/> - setDetailedView(e.target.checked)}/>} - label='Detailed View'/> - { rowsPerPage={mappingRulesSearch.state.rowsPerPage} sectionApi={conceptualMappingRulesApi} onPackagesUpdate={handlePackagesUpdate} - detailedView={detailedView} /> ) diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js index d17657f1c..5fd3e03b0 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js @@ -1,10 +1,11 @@ import {useState} from 'react'; import PropTypes from 'prop-types'; +import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined'; + import Table from '@mui/material/Table'; import Paper from '@mui/material/Paper'; import Stack from "@mui/material/Stack"; -import Button from "@mui/material/Button"; import TableRow from '@mui/material/TableRow'; import TableBody from '@mui/material/TableBody'; import TableCell from '@mui/material/TableCell'; @@ -20,6 +21,7 @@ import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {MenuActionButton, MenuActions} from '../../../../components/menu-actions'; export const ListTable = (props) => { const { @@ -107,22 +109,25 @@ export const ListTable = (props) => { alignItems="center" direction="row" > - paths.app[sectionApi.section].states.view(id, item_id), - }} - /> - + + paths.app[sectionApi.section].states.view(id, item_id), + }} + /> + handleExport(item)} + icon={} + // disabled={isExporting}> + text={isExporting ? "Exporting..." : "Export"}/> + - ); + ) + ; })} diff --git a/mapping_workbench/frontend/src/sections/app/project/list-table.js b/mapping_workbench/frontend/src/sections/app/project/list-table.js index 880c23dff..9b0a7f29d 100644 --- a/mapping_workbench/frontend/src/sections/app/project/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/project/list-table.js @@ -1,10 +1,12 @@ import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; +import CheckOutlinedIcon from '@mui/icons-material/CheckOutlined'; +import CleaningServicesOutlinedIcon from '@mui/icons-material/CleaningServicesOutlined'; + import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; -import Button from "@mui/material/Button"; import Divider from '@mui/material/Divider'; import TableRow from '@mui/material/TableRow'; import TableHead from '@mui/material/TableHead'; @@ -25,6 +27,7 @@ import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; +import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { @@ -88,9 +91,7 @@ export const ListTable = (props) => { - - Actions - + @@ -147,27 +148,23 @@ export const ListTable = (props) => { {timeTransformer(item.created_at, timeSetting)} - - projectStore.handleDeleteProject(item_id)} - itemctx={new ForListItemAction(item_id, sectionApi)}/> - + + projectStore.handleSessionProjectChange(item_id)} + text='Select' + icon={} + /> + projectStore.handleDeleteProject(item_id)} + itemctx={new ForListItemAction(item_id, sectionApi)}/> + { projectStore.handleProjectCleanup(item_id) }} + icon={} + text='Cleanup' + /> + {isCurrent && ( diff --git a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js index a14e27fa4..e8a7e44e2 100644 --- a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js @@ -1,7 +1,10 @@ +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; import moment from "moment"; +import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; + import List from '@mui/material/List'; import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; @@ -25,6 +28,7 @@ import {useGlobalState} from "src/hooks/use-global-state"; import {SeverityPill} from "src/components/severity-pill"; import TablePagination from "src/sections/components/table-pagination"; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; import {ChevronButton} from '../../components/chevron-button'; import {mapStatusColor, TaskActions, TaskLine, taskProgressStatus as taskStatuses} from "./task-actions"; @@ -118,9 +122,7 @@ export const ListTable = (props) => { - - Actions - + @@ -183,26 +185,25 @@ export const ListTable = (props) => { - {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) - && - } - + + {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) + && onCancelAction(item_id)} + text='Cancel' + icon={} + > + Cancel + + } + onDeleteAction(item_id)} + text='Delete' + last + icon={} + /> + {isCurrent && ( From 46c7850f2b24f3187e3a932fb955e170d36db284 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 17:22:09 +0200 Subject: [PATCH 21/25] MWB-906: small menu-action-button refactor --- .../app/list/list-file-collection-actions.js | 12 ++++++------ .../src/components/app/list/list-item-actions.js | 12 ++++++------ .../frontend/src/components/menu-actions.js | 11 +++++------ .../layouts/app/project-switch2/project-switch.js | 6 ------ .../conceptual-mapping-rule/develop/list-table.js | 8 ++++---- .../app/file-manager/file-collection-list-table.js | 4 ++-- .../test-data-collection-list-table.js | 4 ++-- .../src/sections/app/mapping-package/list-table.js | 9 +++++---- .../app/mapping-package/state/list-table.js | 5 +++-- .../src/sections/app/project/list-table.js | 14 +++++++------- .../frontend/src/sections/app/tasks/list-table.js | 8 ++++---- 11 files changed, 44 insertions(+), 49 deletions(-) diff --git a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js index 8cae7478c..4c11855d4 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js @@ -51,20 +51,20 @@ export const ListFileCollectionActions = (props) => { <> } /> } /> setConfirmOpen(true)} - text='Delete' + onClick={() => setConfirmOpen(true)} + title='Delete' icon={} last /> diff --git a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js index dc52c3fd5..eb8c707ab 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-item-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-item-actions.js @@ -59,23 +59,23 @@ export const ListItemActions = (props) => { <> {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.VIEW) && } - text='View' + title='View' />} {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.EDIT) && } - text='Edit' + title='Edit' />} {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.DELETE) && <> setConfirmOpen(true)} + onClick={() => setConfirmOpen(true)} icon={} - text='Delete' + title='Delete' /> { } -export const MenuActionButton = ({id, icon, disabled, text, action, last}) => { +export const MenuActionButton = ({icon, title, last, ...other}) => { const theme = useTheme() - return + return {icon && {cloneElement(icon, {color: 'primary'})} } - {text && {text}} + {title && {title}} } \ No newline at end of file diff --git a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js index f74383e11..30429ce12 100644 --- a/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js +++ b/mapping_workbench/frontend/src/layouts/app/project-switch2/project-switch.js @@ -37,9 +37,6 @@ export const ProjectSwitch = ({small}) => { const router = useRouter(); const theme = useTheme() - console.log(theme) - - const handleProjectSelect = (value) => { if (value) projectsStore.handleSessionProjectChange(value) @@ -57,9 +54,6 @@ export const ProjectSwitch = ({small}) => { const currentProject = projectsStore.items?.find(project => project._id === projectsStore.sessionProject) - - console.log(currentProject._id) - return ( diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js index be275f36a..03fcb8835 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js @@ -82,15 +82,15 @@ export const ListTableRow = (props) => { } - action={() => onEdit(item)}/> + onClick={() => onEdit(item)}/> } - action={() => setConfirmOpen(true)} + onClick={() => setConfirmOpen(true)} last - text='Delete'/> + title='Delete'/> { } - action={() => openUploadModal?.(item._id)} - text='Upload' + onClick={() => openUploadModal?.(item._id)} + title='Upload' /> diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js index 316e57e4c..e53f49972 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js @@ -160,9 +160,9 @@ export const ListTableRow = (props) => { - uploadDialog.handleOpen({id: item_id})} + uploadDialog.handleOpen({id: item_id})} icon={} - text='Import test data'/> + title='Import test data'/> diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js index 96d03af32..a0f1db2b9 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js @@ -106,8 +106,8 @@ const MappingPackageRowFragment = (props) => { handleGoLastState(item_id)} - text='View Last State' + onClick={() => handleGoLastState(item_id)} + title='View Last State' icon={} /> { /> setConfirmOpen(true)} + onClick={() => setConfirmOpen(true)} icon={} - text='Delete'/> + last + title='Delete'/> diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js index 5fd3e03b0..16b29827f 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js @@ -119,8 +119,9 @@ export const ListTable = (props) => { handleExport(item)} icon={} - // disabled={isExporting}> - text={isExporting ? "Exporting..." : "Export"}/> + disabled={isExporting} + last + title={isExporting ? "Exporting..." : "Export"}/> diff --git a/mapping_workbench/frontend/src/sections/app/project/list-table.js b/mapping_workbench/frontend/src/sections/app/project/list-table.js index 9b0a7f29d..78512b524 100644 --- a/mapping_workbench/frontend/src/sections/app/project/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/project/list-table.js @@ -151,19 +151,19 @@ export const ListTable = (props) => { projectStore.handleSessionProjectChange(item_id)} - text='Select' + onClick={() => projectStore.handleSessionProjectChange(item_id)} + title='Select' icon={} /> - projectStore.handleDeleteProject(item_id)} - itemctx={new ForListItemAction(item_id, sectionApi)}/> { projectStore.handleProjectCleanup(item_id) }} + onClick={() => projectStore.handleProjectCleanup(item_id)} icon={} - text='Cleanup' + title='Cleanup' /> + projectStore.handleDeleteProject(item_id)} + itemctx={new ForListItemAction(item_id, sectionApi)}/> diff --git a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js index e8a7e44e2..239b189b3 100644 --- a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js @@ -189,8 +189,8 @@ export const ListTable = (props) => { {[taskStatuses.QUEUED, taskStatuses.RUNNING].includes(item.task_status) && onCancelAction(item_id)} - text='Cancel' + onClick={() => onCancelAction(item_id)} + title='Cancel' icon={} > Cancel @@ -198,8 +198,8 @@ export const ListTable = (props) => { } onDeleteAction(item_id)} - text='Delete' + onClick={() => onDeleteAction(item_id)} + title='Delete' last icon={} /> From 89261e7b9a97b834650b0cfc9b6befa472c14b1c Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 19:23:59 +0200 Subject: [PATCH 22/25] MWB-906: fix menu actions dividers --- .../frontend/src/components/menu-actions.js | 11 +++++++---- .../file-manager/test-data-collection-list-table.js | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/mapping_workbench/frontend/src/components/menu-actions.js b/mapping_workbench/frontend/src/components/menu-actions.js index 5ff1191a8..03eb8240d 100644 --- a/mapping_workbench/frontend/src/components/menu-actions.js +++ b/mapping_workbench/frontend/src/components/menu-actions.js @@ -26,14 +26,17 @@ export const MenuActions = ({children}) => { } -export const MenuActionButton = ({icon, title, last, ...other}) => { +export const MenuActionButton = ({icon, title, ...other}) => { const theme = useTheme() - return {icon && {cloneElement(icon, {color: 'primary'})} - } - {title && {title}} + + } + { + title && {title} + } } \ No newline at end of file diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js index e53f49972..c4dd02446 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js @@ -149,7 +149,7 @@ export const ListTableRow = (props) => { .map(mapping_package => ) } From 52a93b748a61aa7857edc68a04cd8ca597d22b30 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Fri, 13 Dec 2024 21:21:55 +0200 Subject: [PATCH 23/25] MWB-906: update pagination --- .../app/list/list-file-collection-actions.js | 1 - .../components/app/list/list-item-actions.js | 1 - .../frontend/src/hooks/use-items-search.js | 4 +- .../app/fields-and-nodes/overview/index.js | 2 - .../src/pages/app/ontology-terms/index.js | 4 +- .../develop/list-table.js | 10 +-- .../app/conceptual-mapping-rule/list-table.js | 2 +- .../app/fields-registry/list-table.js | 4 +- .../file-collection-list-table.js | 8 +-- .../test-data-collection-list-table.js | 2 +- .../generic-triple-map-fragment/list-table.js | 8 +-- .../app/mapping-package/list-table.js | 9 ++- .../app/mapping-package/state/list-table.js | 9 +-- .../ontology-namespace-custom/list-table.js | 2 +- .../app/ontology-namespace/list-table.js | 4 +- .../sections/app/ontology-term/list-table.js | 2 +- .../src/sections/app/project/list-table.js | 4 +- .../src/sections/app/tasks/list-table.js | 10 ++- .../components/table-pagination-pages.js | 64 +++++++++++++++++-- 19 files changed, 97 insertions(+), 53 deletions(-) diff --git a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js index 4c11855d4..a14e50e39 100644 --- a/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js +++ b/mapping_workbench/frontend/src/components/app/list/list-file-collection-actions.js @@ -66,7 +66,6 @@ export const ListFileCollectionActions = (props) => { onClick={() => setConfirmOpen(true)} title='Delete' icon={} - last /> { {itemctx.api.SECTION_LIST_ACTIONS.includes(ACTION.DELETE) && <> setConfirmOpen(true)} icon={} title='Delete' diff --git a/mapping_workbench/frontend/src/hooks/use-items-search.js b/mapping_workbench/frontend/src/hooks/use-items-search.js index cd50ce3f1..ad2b4b172 100644 --- a/mapping_workbench/frontend/src/hooks/use-items-search.js +++ b/mapping_workbench/frontend/src/hooks/use-items-search.js @@ -8,7 +8,7 @@ const useItemsSearch = (items, sectionApi, searchColumns, newFilters, sort) => { column: "", direction: "desc" }, - page: sectionApi.DEFAULT_PAGE, + page: sectionApi.DEFAULT_PAGE + 1, rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE }); @@ -58,7 +58,7 @@ const useItemsSearch = (items, sectionApi, searchColumns, newFilters, sort) => { } const pagedItems = sortedItems().filter((item, i) => { - const pageSize = state.page * state.rowsPerPage + const pageSize = (state.page - 1) * state.rowsPerPage if ((pageSize <= i && pageSize + state.rowsPerPage > i) || state.rowsPerPage < 0) return item }) diff --git a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js index b1d660c04..487b7d03e 100644 --- a/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js +++ b/mapping_workbench/frontend/src/pages/app/fields-and-nodes/overview/index.js @@ -1,6 +1,5 @@ import {useEffect, useState} from 'react'; - import AddIcon from '@mui/icons-material/Add'; import UploadIcon from '@mui/icons-material/Upload'; import FilterListIcon from '@mui/icons-material/FilterList'; @@ -126,7 +125,6 @@ const Page = () => { > Import schema from github - { }} > itemsSearch.handleFiltersChange({type: e})}/> diff --git a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js index 03fcb8835..c4789f35f 100644 --- a/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/conceptual-mapping-rule/develop/list-table.js @@ -1,10 +1,11 @@ -import BorderColorIcon from '@mui/icons-material/BorderColor'; -import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import {useState} from "react"; import {Prism as SyntaxHighlighter} from "react-syntax-highlighter"; import PropTypes from 'prop-types'; +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; + import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Dialog from "@mui/material/Dialog"; @@ -21,9 +22,9 @@ import {useDialog} from "src/hooks/use-dialog"; import {Scrollbar} from 'src/components/scrollbar'; import {useHighlighterTheme} from "src/hooks/use-highlighter-theme"; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; -import TablePagination from "src/sections/components/table-pagination"; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; -import {MenuActionButton, MenuActions} from '../../../../components/menu-actions'; +import TablePagination from "src/sections/components/table-pagination-pages"; export const ListTableRow = (props) => { const { @@ -89,7 +90,6 @@ export const ListTableRow = (props) => { id="delete_button" icon={} onClick={() => setConfirmOpen(true)} - last title='Delete'/> { diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js index 6c11cdfb4..295cb85d6 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/file-collection-list-table.js @@ -1,8 +1,8 @@ -import BorderColorIcon from '@mui/icons-material/BorderColor'; -import UploadIcon from '@mui/icons-material/Upload'; import {useEffect, useState} from 'react'; import PropTypes from 'prop-types'; +import UploadIcon from '@mui/icons-material/Upload'; + import Box from "@mui/system/Box"; import Chip from '@mui/material/Chip'; import Grid from '@mui/material/Grid'; @@ -29,13 +29,13 @@ import {PropertyList} from "src/components/property-list"; import {mappingPackagesApi} from "src/api/mapping-packages"; import {PropertyListItem} from 'src/components/property-list-item'; import {ChevronButton} from 'src/sections/components/chevron-button'; -import TablePagination from "src/sections/components/table-pagination"; import {FileUploader} from "src/sections/app/file-manager/file-uploader"; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {ListFileCollectionActions} from "src/components/app/list/list-file-collection-actions"; import {MappingPackagesBulkAssigner} from "src/sections/app/mapping-package/components/mapping-packages-bulk-assigner"; -import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; export const ListTableRow = (props) => { const { diff --git a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js index c4dd02446..b5a7ec72f 100644 --- a/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js +++ b/mapping_workbench/frontend/src/sections/app/file-manager/test-data-collection-list-table.js @@ -32,7 +32,7 @@ import {mappingPackagesApi} from "src/api/mapping-packages"; import {PropertyListItem} from "src/components/property-list-item"; import {ChevronButton} from 'src/sections/components/chevron-button'; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; -import TablePagination from "src/sections/components/table-pagination"; +import TablePagination from "src/sections/components/table-pagination-pages"; import {MenuActions, MenuActionButton} from 'src/components/menu-actions'; import {ListItemActions} from "src/components/app/list/list-item-actions"; import TableSorterHeader from 'src/sections/components/table-sorter-header'; diff --git a/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js b/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js index 2982b4ce0..0f61eee50 100644 --- a/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/generic-triple-map-fragment/list-table.js @@ -23,20 +23,20 @@ import {sessionApi} from 'src/api/session'; import {useDialog} from 'src/hooks/use-dialog'; import {Scrollbar} from 'src/components/scrollbar'; import {toastSuccess} from 'src/components/app-toast'; +import {MenuActions} from 'src/components/menu-actions'; import timeTransformer from "src/utils/time-transformer"; import {useGlobalState} from "src/hooks/use-global-state"; import {mappingPackagesApi} from "src/api/mapping-packages"; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; import CodeMirrorDefault from 'src/components/app/form/codeMirrorDefault'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; -import {genericTripleMapFragmentsApi} from 'src/api/triple-map-fragments/generic'; import TableSorterHeader from "src/sections/components/table-sorter-header"; +import TablePagination from "src/sections/components/table-pagination-pages"; +import {genericTripleMapFragmentsApi} from 'src/api/triple-map-fragments/generic'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import { MappingPackageCheckboxList } from 'src/sections/app/mapping-package/components/mapping-package-real-checkbox-list'; -import {MenuActions} from '../../../components/menu-actions'; -import {ChevronButton} from '../../components/chevron-button'; export const ListTableMappingPackages = (props) => { diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js index a0f1db2b9..0cf061bed 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/list-table.js @@ -27,12 +27,12 @@ import {useGlobalState} from "src/hooks/use-global-state"; import {PropertyList} from 'src/components/property-list'; import {PropertyListItem} from 'src/components/property-list-item'; import ConfirmDialog from "src/components/app/dialog/confirm-dialog"; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; -import {ChevronButton} from '../../components/chevron-button'; -import TableSorterHeader from '../../components/table-sorter-header'; import {MappingPackageProcessForm} from './components/mapping-package-process-form'; import {MappingPackagesBulkActions} from './components/mapping-packages-bulk-actions'; @@ -117,7 +117,6 @@ const MappingPackageRowFragment = (props) => { id="delete_button" onClick={() => setConfirmOpen(true)} icon={} - last title='Delete'/> diff --git a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js index 16b29827f..f5124cf92 100644 --- a/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/mapping-package/state/list-table.js @@ -17,11 +17,11 @@ import {Scrollbar} from 'src/components/scrollbar'; import timeTransformer from "src/utils/time-transformer"; import {useGlobalState} from "src/hooks/use-global-state"; import exportPackage from "src/utils/export-mapping-package"; -import TablePagination from "src/sections/components/table-pagination"; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {MenuActionButton, MenuActions} from '../../../../components/menu-actions'; export const ListTable = (props) => { const { @@ -120,15 +120,12 @@ export const ListTable = (props) => { onClick={() => handleExport(item)} icon={} disabled={isExporting} - last title={isExporting ? "Exporting..." : "Export"}/> - - ) - ; + ); })} diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js index cd439530e..9ff0d7675 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace-custom/list-table.js @@ -9,7 +9,7 @@ import TableHead from '@mui/material/TableHead'; import Typography from '@mui/material/Typography'; import {Scrollbar} from 'src/components/scrollbar'; -import TablePagination from 'src/sections/components/table-pagination'; +import TablePagination from 'src/sections/components/table-pagination-pages'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from 'src/sections/components/table-sorter-header'; import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; diff --git a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js index 9c2e0c533..77abe2ebb 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-namespace/list-table.js @@ -10,12 +10,12 @@ import TableHead from '@mui/material/TableHead'; import Typography from '@mui/material/Typography'; import {Scrollbar} from 'src/components/scrollbar'; -import TablePagination from "src/sections/components/table-pagination"; +import {MenuActions} from 'src/components/menu-actions'; import {ListItemActions} from 'src/components/app/list/list-item-actions'; import TableSorterHeader from 'src/sections/components/table-sorter-header'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {toastError, toastLoad, toastSuccess} from "src/components/app-toast"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { const { diff --git a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js index 1933df310..ad33233fd 100644 --- a/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/ontology-term/list-table.js @@ -16,7 +16,7 @@ import {ListItemActions} from 'src/components/app/list/list-item-actions'; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; import {MenuActions} from '../../../components/menu-actions'; import {ChevronButton} from '../../components/chevron-button'; -import TablePagination from "../../components/table-pagination"; +import TablePagination from "../../components/table-pagination-pages"; import TableSorterHeader from "../../components/table-sorter-header"; diff --git a/mapping_workbench/frontend/src/sections/app/project/list-table.js b/mapping_workbench/frontend/src/sections/app/project/list-table.js index 78512b524..5d29b9e9c 100644 --- a/mapping_workbench/frontend/src/sections/app/project/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/project/list-table.js @@ -23,11 +23,11 @@ import {PropertyList} from 'src/components/property-list'; import {SeverityPill} from "src/components/severity-pill"; import {PropertyListItem} from 'src/components/property-list-item'; import {ChevronButton} from 'src/sections/components/chevron-button'; -import TablePagination from "src/sections/components/table-pagination"; import {ListItemActions} from 'src/components/app/list/list-item-actions'; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; +import TablePagination from "src/sections/components/table-pagination-pages"; import TableSorterHeader from "src/sections/components/table-sorter-header"; import {ForListItemAction} from 'src/contexts/app/section/for-list-item-action'; -import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; export const ListTable = (props) => { diff --git a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js index 239b189b3..ed5889482 100644 --- a/mapping_workbench/frontend/src/sections/app/tasks/list-table.js +++ b/mapping_workbench/frontend/src/sections/app/tasks/list-table.js @@ -1,16 +1,15 @@ -import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import {Fragment, useState} from 'react'; import PropTypes from 'prop-types'; import moment from "moment"; import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined'; +import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline'; import List from '@mui/material/List'; import Grid from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Table from '@mui/material/Table'; import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; import Popover from '@mui/material/Popover'; import Divider from '@mui/material/Divider'; import ListItem from '@mui/material/ListItem'; @@ -26,10 +25,10 @@ import {Scrollbar} from 'src/components/scrollbar'; import timeTransformer from "src/utils/time-transformer"; import {useGlobalState} from "src/hooks/use-global-state"; import {SeverityPill} from "src/components/severity-pill"; -import TablePagination from "src/sections/components/table-pagination"; +import {ChevronButton} from 'src/sections/components/chevron-button'; +import {MenuActionButton, MenuActions} from 'src/components/menu-actions'; import TableSorterHeader from "src/sections/components/table-sorter-header"; -import {MenuActionButton, MenuActions} from '../../../components/menu-actions'; -import {ChevronButton} from '../../components/chevron-button'; +import TablePagination from "src/sections/components/table-pagination-pages"; import {mapStatusColor, TaskActions, TaskLine, taskProgressStatus as taskStatuses} from "./task-actions"; @@ -200,7 +199,6 @@ export const ListTable = (props) => { id="delete_button" onClick={() => onDeleteAction(item_id)} title='Delete' - last icon={} /> diff --git a/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js b/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js index 2311bab93..9314b2350 100644 --- a/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js +++ b/mapping_workbench/frontend/src/sections/components/table-pagination-pages.js @@ -1,13 +1,67 @@ +import {useState} from 'react'; + +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; + +import Stack from '@mui/material/Stack'; import {Pagination} from '@mui/material'; +import Button from '@mui/material/Button'; +import Popover from '@mui/material/Popover'; +import Tooltip from '@mui/material/Tooltip'; +import MenuItem from '@mui/material/MenuItem'; + +const TablePagination = ({ + children, + onRowsPerPageChange, + rowsPerPage, + rowsPerPageOptions, + onPageChange, + count, + ...otherProps + }) => { + const [rppAnchor, setRppAnchor] = useState(null) + const handleChange = (event) => { + onRowsPerPageChange(event) + setRppAnchor(null) + } -const TablePagination = (props) => { - const {children, ...otherProps} = props return ( <> - - {children} - + {/**/} + {children} + + + + + setRppAnchor(null)} + anchorOrigin={{ + vertical: 'bottom', + horizontal: 'left', + }} + > + {rowsPerPageOptions.map(option => + {option.label ?? option} + )} + + 0 ? rowsPerPage : count))} + {...otherProps}/> + ) } From 5b6386cfca34afa3b642c59523284dab0b05e988 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Mon, 16 Dec 2024 15:30:18 +0200 Subject: [PATCH 24/25] MWB-904: fix tests --- .../frontend/cypress/e2e/activities.feature | 9 ++++++--- mapping_workbench/frontend/cypress/e2e/cleanUp.feature | 1 + mapping_workbench/frontend/cypress/e2e/common/common.js | 3 +++ .../frontend/cypress/e2e/mappingPackages.feature | 5 +++-- .../frontend/cypress/e2e/mappingPackagesStates.feature | 9 +++++---- .../frontend/cypress/e2e/ontologyNamespaces.feature | 4 ++++ .../e2e/ontologyNamespaces/ontologyNamespacesSteps.js | 2 +- .../frontend/cypress/e2e/ontologyTerms.feature | 1 + mapping_workbench/frontend/cypress/e2e/projects.feature | 4 ++++ .../frontend/cypress/e2e/shaclTestSuites.feature | 2 ++ .../frontend/cypress/e2e/sparqlTestSuites.feature | 2 ++ .../frontend/cypress/e2e/testDataSuites.feature | 2 ++ .../frontend/cypress/e2e/tripleMapFragments.feature | 2 ++ .../frontend/cypress/e2e/valueMappingResources.feature | 2 ++ .../frontend/src/components/menu-actions.js | 3 ++- 15 files changed, 40 insertions(+), 11 deletions(-) diff --git a/mapping_workbench/frontend/cypress/e2e/activities.feature b/mapping_workbench/frontend/cypress/e2e/activities.feature index 18e057669..78350ec31 100644 --- a/mapping_workbench/frontend/cypress/e2e/activities.feature +++ b/mapping_workbench/frontend/cypress/e2e/activities.feature @@ -5,9 +5,9 @@ Feature: Activities Background: Given Session Login Then Go Home - Then I open side menu Scenario: Import Packages + When I open side menu Then I go to Mapping Packages Then I get redirected to Mapping Packages list page When I click on Mapping Packages import @@ -16,12 +16,13 @@ Feature: Activities Then I get success upload Scenario: View Activities + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks - Scenario: Refresh Activities + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks @@ -29,14 +30,16 @@ Feature: Activities Then I receive Tasks Scenario: Delete Activity + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks + When I open actions menu When I delete Task Then I get success delete - Scenario: Delete all Activities + When I open side menu Then I go to Activities page Then I get redirected to Tasks page Then I receive Tasks diff --git a/mapping_workbench/frontend/cypress/e2e/cleanUp.feature b/mapping_workbench/frontend/cypress/e2e/cleanUp.feature index dd0eb846d..adf6f1ead 100644 --- a/mapping_workbench/frontend/cypress/e2e/cleanUp.feature +++ b/mapping_workbench/frontend/cypress/e2e/cleanUp.feature @@ -12,6 +12,7 @@ Feature: CleanUp after test Then I get redirected to projects list page Then I type project name + When I open actions menu When I click on delete button Then I click yes button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/common/common.js b/mapping_workbench/frontend/cypress/e2e/common/common.js index 45f27a8db..020800756 100644 --- a/mapping_workbench/frontend/cypress/e2e/common/common.js +++ b/mapping_workbench/frontend/cypress/e2e/common/common.js @@ -34,6 +34,9 @@ When('I select project', () => { cy.get('#project_switch').click().get('ul > li > p').contains('TEST_PROJECT').click() }) +When('I open actions menu',() => { + cy.get('#actions-menu-button').click() +}) Then('I expand tasks', () => { cy.get('#nav_tasks').click() diff --git a/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature b/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature index 8ad47f590..3158d24c0 100644 --- a/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature +++ b/mapping_workbench/frontend/cypress/e2e/mappingPackages.feature @@ -15,7 +15,7 @@ Feature: Mapping Packages Then I click on upload button Then I get success upload - Scenario: View Pacakges + Scenario: View Packages Then I receive Mapping Packages When I expand first package details @@ -26,9 +26,9 @@ Feature: Mapping Packages Then I click on submit button Then I get success create - Scenario: Update Package Then I search for Mapping Package + When I open actions menu Then I edit Mapping Package Then I update name Then I click on submit button @@ -36,6 +36,7 @@ Feature: Mapping Packages Scenario: Delete Package Then I search for updated Mapping Package + When I open actions menu When I delete Mapping Package Then I click yes Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature b/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature index 7084de818..d2fac1077 100644 --- a/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature +++ b/mapping_workbench/frontend/cypress/e2e/mappingPackagesStates.feature @@ -9,6 +9,7 @@ Feature: Mapping Packages States Then I go to Mapping Packages Then I get redirected to Mapping Packages list page Then I search for Mapping Package + When I open actions menu Then I click on View Last State Then I receive Mapping Packages State @@ -20,7 +21,7 @@ Feature: Mapping Packages States Then I click on "" Data Then I receive Mapping Packages Test "" Examples: - | tab_name | - | Xpath | - | Sparql | - | Shacl | \ No newline at end of file + | tab_name | + | Xpath | + | Sparql | + | Shacl | \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature index 5e23fec75..d2012aa3d 100644 --- a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature +++ b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces.feature @@ -16,6 +16,7 @@ Feature: Namespaces Scenario: Update Namespace Then I search for Namespaces + When I open actions menu Then I click edit Namespace button Then I get redirected to edit page @@ -24,6 +25,7 @@ Feature: Namespaces Scenario: Delete Namespace Then I search for updated Namespace + When I open actions menu Then I click delete Namespace button Then I get success delete @@ -34,6 +36,8 @@ Feature: Namespaces Then I successfully create Namespace Scenario: Delete Custom Namespace Ontology + Then I search for updated Namespace Then I search for Custom Namespaces + When I open actions menu Then I click delete Custom Namespace button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js index 91be77baa..168c70cd1 100644 --- a/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js +++ b/mapping_workbench/frontend/cypress/e2e/ontologyNamespaces/ontologyNamespacesSteps.js @@ -112,7 +112,7 @@ Then('I search for Custom Namespaces', () => { Then('I click delete Custom Namespace button', () => { cy.intercept('DELETE', appURLPrefix + 'ontology/namespaces_custom/*').as('delete') - cy.get('#ontology_namespaces_custom #delete_button').click() + cy.get('#delete_button').click() cy.get('#yes_dialog_button').click() }) diff --git a/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature b/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature index 80f281d85..94a20036f 100644 --- a/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature +++ b/mapping_workbench/frontend/cypress/e2e/ontologyTerms.feature @@ -20,5 +20,6 @@ Feature: Ontology Terms Scenario: Delete Ontology Term Then I search for Ontology Terms + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/projects.feature b/mapping_workbench/frontend/cypress/e2e/projects.feature index 72f277625..854e9ac15 100644 --- a/mapping_workbench/frontend/cypress/e2e/projects.feature +++ b/mapping_workbench/frontend/cypress/e2e/projects.feature @@ -22,6 +22,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I select project Then I get success select @@ -33,6 +34,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I click on edit button Then I get redirected to project edit page Then I update project description @@ -48,6 +50,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I click on view button Then I get redirected to project view page Then I read description @@ -61,6 +64,7 @@ Feature: Entry Projects Then I get redirected to projects list page Then I search for project + When I open actions menu When I click on delete button Then I click yes button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature b/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature index 705490d6d..611c35159 100644 --- a/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature +++ b/mapping_workbench/frontend/cypress/e2e/shaclTestSuites.feature @@ -19,6 +19,7 @@ Feature: SHACL Test Suite Scenario: Update SHACL Test Suite Then I search for suite + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -28,5 +29,6 @@ Feature: SHACL Test Suite Scenario: Delete SHACL Test Suite Then I search for updated suite + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature b/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature index a5fda81e4..ecefebc4c 100644 --- a/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature +++ b/mapping_workbench/frontend/cypress/e2e/sparqlTestSuites.feature @@ -18,6 +18,7 @@ Feature: SPARQL Test Suites Scenario: Update SPARQL Test Suite Then I search for suite + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -27,5 +28,6 @@ Feature: SPARQL Test Suites Scenario: Delete SPARQL Test Suite Then I search for updated suite + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature b/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature index 40b84f5b9..1988b1dd4 100644 --- a/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature +++ b/mapping_workbench/frontend/cypress/e2e/testDataSuites.feature @@ -16,6 +16,7 @@ Feature: Test Data Suites Scenario: Update Test Data Then I search for suite + When I open actions menu Then I click view button Then I click edit button Then I get redirected to edit page @@ -25,5 +26,6 @@ Feature: Test Data Suites Scenario: Delete Test Data Then I search for updated suite + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature b/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature index 793c8df94..b829dca4f 100644 --- a/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature +++ b/mapping_workbench/frontend/cypress/e2e/tripleMapFragments.feature @@ -20,6 +20,7 @@ Feature: Generic Triple Maps Then I get redirected to Generic Triple Maps Then I search for Generic Triple Map + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -31,5 +32,6 @@ Feature: Generic Triple Maps Then I get redirected to Generic Triple Maps Then I search for updated Generic Triple Map + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature b/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature index 9104be6b4..22ac9197b 100644 --- a/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature +++ b/mapping_workbench/frontend/cypress/e2e/valueMappingResources.feature @@ -20,6 +20,7 @@ Feature: Resources Then I get redirected to Resources Then I search for resource + When I open actions menu Then I click edit button Then I get redirected to edit page @@ -31,5 +32,6 @@ Feature: Resources Then I get redirected to Resources Then I search for updated resource + When I open actions menu Then I click delete button Then I get success delete \ No newline at end of file diff --git a/mapping_workbench/frontend/src/components/menu-actions.js b/mapping_workbench/frontend/src/components/menu-actions.js index 03eb8240d..4d65c8df1 100644 --- a/mapping_workbench/frontend/src/components/menu-actions.js +++ b/mapping_workbench/frontend/src/components/menu-actions.js @@ -14,7 +14,8 @@ export const MenuActions = ({children}) => { const [anchor, setAnchor] = useState(null) return <> - setAnchor(e.target)}> + setAnchor(e.target)}> From 773524ff04f6d9e1a4567b486fdc0850f2a7a592 Mon Sep 17 00:00:00 2001 From: Victor Frunze Date: Mon, 16 Dec 2024 15:42:14 +0200 Subject: [PATCH 25/25] MWB-904: fix pagination --- mapping_workbench/frontend/src/hooks/use-items-search.js | 4 ++-- .../frontend/src/pages/app/ontology-files/index.js | 8 ++------ .../frontend/src/sections/app/files-form/item-list.js | 2 +- .../src/sections/components/table-pagination-pages.js | 4 +++- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/mapping_workbench/frontend/src/hooks/use-items-search.js b/mapping_workbench/frontend/src/hooks/use-items-search.js index ad2b4b172..cd50ce3f1 100644 --- a/mapping_workbench/frontend/src/hooks/use-items-search.js +++ b/mapping_workbench/frontend/src/hooks/use-items-search.js @@ -8,7 +8,7 @@ const useItemsSearch = (items, sectionApi, searchColumns, newFilters, sort) => { column: "", direction: "desc" }, - page: sectionApi.DEFAULT_PAGE + 1, + page: sectionApi.DEFAULT_PAGE, rowsPerPage: sectionApi.DEFAULT_ROWS_PER_PAGE }); @@ -58,7 +58,7 @@ const useItemsSearch = (items, sectionApi, searchColumns, newFilters, sort) => { } const pagedItems = sortedItems().filter((item, i) => { - const pageSize = (state.page - 1) * state.rowsPerPage + const pageSize = state.page * state.rowsPerPage if ((pageSize <= i && pageSize + state.rowsPerPage > i) || state.rowsPerPage < 0) return item }) 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 73ea6a35e..b3db09627 100644 --- a/mapping_workbench/frontend/src/pages/app/ontology-files/index.js +++ b/mapping_workbench/frontend/src/pages/app/ontology-files/index.js @@ -82,7 +82,7 @@ const Page = () => { spacing={{xs: 3, lg: 4}} > - + {