From f88b2b58ef67a43b6558a69b4150151d184bf049 Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Tue, 30 Jul 2024 15:55:06 +0200 Subject: [PATCH 1/5] Fix user table text overflow. --- projects/mercury/src/users/UserRolesPage.js | 35 +++++++++++++++++---- 1 file changed, 29 insertions(+), 6 deletions(-) diff --git a/projects/mercury/src/users/UserRolesPage.js b/projects/mercury/src/users/UserRolesPage.js index bd0561dda..d76e1f2cb 100644 --- a/projects/mercury/src/users/UserRolesPage.js +++ b/projects/mercury/src/users/UserRolesPage.js @@ -6,6 +6,7 @@ import {Table, TableBody, TableCell, TableHead, TablePagination, TableRow, Table import Checkbox from '@mui/material/Checkbox'; import TableContainer from '@mui/material/TableContainer'; import Paper from '@mui/material/Paper'; +import withStyles from '@mui/styles/withStyles'; import UsersContext from './UsersContext'; import useSorting from '../common/hooks/UseSorting'; import usePagination from '../common/hooks/UsePagination'; @@ -66,7 +67,15 @@ const roleSelectionColumns = [ columns.canAddSharedMetadata ]; -const UserRolesPage = () => { +const styles = () => ({ + userDataCell: { + whiteSpace: 'normal', + wordWrap: 'break-word', + maxWidth: 260 + } +}); + +const UserRolesPage = ({classes = {}}) => { usePageTitleUpdater('Users'); const {currentUser} = useContext(UserContext); @@ -174,19 +183,33 @@ const UserRolesPage = () => { )) } - {pagedItems.map(u => ( - + {u.name} - + {u.username} - + {u.email} @@ -245,4 +268,4 @@ const UserRolesPage = () => { ); }; -export default UserRolesPage; +export default withStyles(styles)(UserRolesPage); From 3f2cbf482c86bb1574984fcf3f6422b89200f4a9 Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Tue, 30 Jul 2024 16:31:23 +0200 Subject: [PATCH 2/5] Add date selection improvements. --- .../src/metadata/views/facets/DateSelectionFacet.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/mercury/src/metadata/views/facets/DateSelectionFacet.js b/projects/mercury/src/metadata/views/facets/DateSelectionFacet.js index 98a540bf3..5dc899e80 100644 --- a/projects/mercury/src/metadata/views/facets/DateSelectionFacet.js +++ b/projects/mercury/src/metadata/views/facets/DateSelectionFacet.js @@ -91,6 +91,7 @@ const DateSelectionFacet = (props: MetadataViewFacetProperties) => { disableToolbar variant="inline" inputFormat={DATE_FORMAT} + views={['year', 'month', 'day']} invalidDateMessage="Invalid date format" margin="normal" label={label} @@ -117,10 +118,8 @@ const DateSelectionFacet = (props: MetadataViewFacetProperties) => { return ( - - {renderDatePicker(value[0], handleMinDateChange, 'Start date', minDate, value[1], minDate)} - - {renderDatePicker(value[1], handleMaxDateChange, 'End date', value[0], maxDate, maxDate)} + {renderDatePicker(value[0], handleMinDateChange, 'Date from', minDate, value[1], minDate)} + {renderDatePicker(value[1], handleMaxDateChange, 'Date to', value[0], maxDate, maxDate)} ); }; From 383a3c281c4aef87d0b62e62dc75240f2dbb098a Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Wed, 31 Jul 2024 09:20:37 +0200 Subject: [PATCH 3/5] Fix user permission table padding. --- projects/mercury/src/permissions/UserPermissionsTable.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/mercury/src/permissions/UserPermissionsTable.js b/projects/mercury/src/permissions/UserPermissionsTable.js index 9f2469d0a..9d668ea3f 100644 --- a/projects/mercury/src/permissions/UserPermissionsTable.js +++ b/projects/mercury/src/permissions/UserPermissionsTable.js @@ -26,7 +26,7 @@ const styles = { width: '100%' }, iconCell: { - padding: '0 0 0 8px', + padding: 0, textAlign: 'right' }, emptyPermissions: { From 6309ea2a6005af11de1b6ff69711a4c3e1bca7a1 Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Wed, 31 Jul 2024 09:55:43 +0200 Subject: [PATCH 4/5] Add tabs font size adjustment. --- projects/mercury/src/App.theme.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/projects/mercury/src/App.theme.js b/projects/mercury/src/App.theme.js index 07a6e01a3..db5153ed6 100644 --- a/projects/mercury/src/App.theme.js +++ b/projects/mercury/src/App.theme.js @@ -276,6 +276,13 @@ export default createTheme({ borderColor: globalTheme.palette.mellow.main } } + }, + MuiTab: { + styleOverrides: { + root: { + fontSize: 15 + } + } } } }); From dda15c70c6443881e11977d0e2522b8994cbc7bf Mon Sep 17 00:00:00 2001 From: ewelinagr Date: Wed, 31 Jul 2024 14:23:08 +0200 Subject: [PATCH 5/5] FAIRSPC-107 - fix metadata redirection link. --- .../src/metadata/views/MetadataView.js | 30 +++++-- .../metadata/views/__tests__/MetadataView.js | 88 +++++++++++++++++++ 2 files changed, 109 insertions(+), 9 deletions(-) create mode 100644 projects/mercury/src/metadata/views/__tests__/MetadataView.js diff --git a/projects/mercury/src/metadata/views/MetadataView.js b/projects/mercury/src/metadata/views/MetadataView.js index 8fc4b243c..5bf908525 100644 --- a/projects/mercury/src/metadata/views/MetadataView.js +++ b/projects/mercury/src/metadata/views/MetadataView.js @@ -52,15 +52,18 @@ type MetadataViewProperties = ContextualMetadataViewProperties & { export const MetadataView = (props: MetadataViewProperties) => { const { - views, - facets, - filters, + views = [], + facets = [], + filters = [], currentViewName, metadataLabel, locationContext, classes, handleViewChangeRedirect, - pathPrefix + pathPrefix = '/metadata-views', + updateFilters, + clearFilter, + clearAllFilters } = props; usePageTitleUpdater(metadataLabel); @@ -68,7 +71,6 @@ export const MetadataView = (props: MetadataViewProperties) => { const {collections} = useContext(CollectionsContext); const {toggle, selected} = useSingleSelection(); - const {updateFilters, clearFilter, clearAllFilters} = useContext(MetadataViewContext); const [filterCandidates, setFilterCandidates] = useState([]); const [textFiltersObject, setTextFiltersObject] = useState({}); const [isClosedPanel, setIsClosedPanel] = useState(true); @@ -81,7 +83,7 @@ export const MetadataView = (props: MetadataViewProperties) => { const currentViewIndex = Math.max(0, views.map(v => v.name).indexOf(currentViewName)); const currentView = views[currentViewIndex]; - const currentViewIdColumn = currentView.columns.find(c => c.type === 'Identifier' && c.name === currentView.name); + const currentViewIdColumn = currentView?.columns.find(c => c.type === 'Identifier' && c.name === currentView.name); const changeTab = useCallback( (event, tabIndex) => { @@ -209,12 +211,11 @@ export const MetadataView = (props: MetadataViewProperties) => { if (!selected) { return ''; } - const metadataURL = window.location.host + getMetadataViewsPath(currentView.name, pathPrefix); const prefilteringQueryString = queryString.stringify({ view: currentView.name, [currentViewIdColumn.name.toLowerCase()]: selected.label }); - return metadataURL + '?' + prefilteringQueryString; + return `${window.location.host}${pathPrefix}?${prefilteringQueryString}`; }; return ( @@ -306,7 +307,15 @@ export const MetadataView = (props: MetadataViewProperties) => { }; export const ContextualMetadataView = (props: ContextualMetadataViewProperties) => { - const {views = [], filters, loading, error} = useContext(MetadataViewContext); + const { + views = [], + filters, + loading, + error, + updateFilters, + clearFilter, + clearAllFilters + } = useContext(MetadataViewContext); const {facets = [], facetsLoading, facetsError, initialLoad} = useContext(MetadataViewFacetsContext); const {internalMetadataLabel} = useContext(InternalMetadataSourceContext); const currentViewName = getMetadataViewNameFromString(window.location.search); @@ -348,6 +357,9 @@ export const ContextualMetadataView = (props: ContextualMetadataViewProperties) locationContext={currentViewName === RESOURCES_VIEW && locationContext} currentViewName={currentViewName} handleViewChangeRedirect={handleViewChangeRedirect} + updateFilters={updateFilters} + clearFilter={clearFilter} + clearAllFilters={clearAllFilters} /> ); }; diff --git a/projects/mercury/src/metadata/views/__tests__/MetadataView.js b/projects/mercury/src/metadata/views/__tests__/MetadataView.js new file mode 100644 index 000000000..65ef75962 --- /dev/null +++ b/projects/mercury/src/metadata/views/__tests__/MetadataView.js @@ -0,0 +1,88 @@ +import React from 'react'; +import {render, screen} from '@testing-library/react'; +import {MemoryRouter} from 'react-router-dom'; +import {ThemeProvider} from '@mui/material/styles'; +import MetadataView from '../MetadataView'; +import MetadataViewContext from '../MetadataViewContext'; +import MetadataViewFacetsContext from '../MetadataViewFacetsContext'; +import InternalMetadataSourceContext from '../../metadata-sources/InternalMetadataSourceContext'; +import CollectionsContext from '../../../collections/CollectionsContext'; +import FeaturesContext from '../../../common/contexts/FeaturesContext'; +import theme from '../../../App.theme'; + +jest.mock('react-router-dom', () => ({ + ...jest.requireActual('react-router-dom'), + useHistory: () => ({ + push: jest.fn() + }) +})); + +const mockMetadataViewContext = { + views: [{title: 'view1', name: 'view1', columns: [{type: 'Identifier', name: 'view1'}]}], + filters: [], + loading: false, + error: null +}; + +const mockMetadataViewFacetsContext = { + facets: [], + facetsLoading: false, + facetsError: null, + initialLoad: jest.fn() +}; + +const mockInternalMetadataSourceContext = { + internalMetadataLabel: 'Test Metadata Label' +}; + +const mockCollectionsContext = { + collections: [] +}; + +const mockFeatureContext = { + isFeatureEnabled: jest.fn() +}; + +describe('MetadataView', () => { + const renderComponent = (props = {}) => { + return render( + + + + + + + + + + + + + + + + ); + }; + + it('renders without crashing', () => { + renderComponent(); + expect(screen.getByText('Test Metadata Label')).toBeInTheDocument(); + }); + + it('displays views correctly', () => { + renderComponent(); + expect(screen.getByText('view1')).toBeInTheDocument(); + }); + + it('displays loading state correctly', () => { + mockMetadataViewContext.loading = true; + renderComponent(); + expect(screen.getByTestId('loading')).toBeInTheDocument(); + }); + + it('displays error state correctly', () => { + mockMetadataViewContext.error = {message: 'Error loading data'}; + renderComponent(); + expect(screen.getByText('Error loading data')).toBeInTheDocument(); + }); +});