Add UI 2 0 improvements

projects/mercury/src/App.theme.js

@@ -276,6 +276,13 @@ export default createTheme({
                     borderColor: globalTheme.palette.mellow.main
                 }
             }
+        },
+        MuiTab: {
+            styleOverrides: {
+                root: {
+                    fontSize: 15
+                }
+            }
         }
     }
 });

projects/mercury/src/metadata/views/MetadataView.js

@@ -52,23 +52,25 @@ 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);
 
     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}
         />
     );
 };

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(
+            <MemoryRouter>
+                <FeaturesContext.Provider value={mockFeatureContext}>
+                    <MetadataViewContext.Provider value={mockMetadataViewContext}>
+                        <MetadataViewFacetsContext.Provider value={mockMetadataViewFacetsContext}>
+                            <InternalMetadataSourceContext.Provider value={mockInternalMetadataSourceContext}>
+                                <CollectionsContext.Provider value={mockCollectionsContext}>
+                                    <ThemeProvider theme={theme}>
+                                        <MetadataView classes={{}} {...props} />
+                                    </ThemeProvider>
+                                </CollectionsContext.Provider>
+                            </InternalMetadataSourceContext.Provider>
+                        </MetadataViewFacetsContext.Provider>
+                    </MetadataViewContext.Provider>
+                </FeaturesContext.Provider>
+            </MemoryRouter>
+        );
+    };
+
+    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();
+    });
+});

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 (
         <Grid container>
-            <Grid item>
-                {renderDatePicker(value[0], handleMinDateChange, 'Start date', minDate, value[1], minDate)}
-            </Grid>
-            <Grid item>{renderDatePicker(value[1], handleMaxDateChange, 'End date', value[0], maxDate, maxDate)}</Grid>
+            <Grid item>{renderDatePicker(value[0], handleMinDateChange, 'Date from', minDate, value[1], minDate)}</Grid>
+            <Grid item>{renderDatePicker(value[1], handleMaxDateChange, 'Date to', value[0], maxDate, maxDate)}</Grid>
         </Grid>
     );
 };

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: {

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 = () => {
                                     </TableCell>
                                 ))
                             }
-                            <TableCell />
                         </TableRow>
                     </TableHead>
                     <TableBody>
                         {pagedItems.map(u => (
                             <TableRow key={u.iri} hover>
-                                <TableCell style={{minWidth: 220}} component="th" scope="row">
+                                <TableCell
+                                    style={{minWidth: 220}}
+                                    className={classes.userDataCell}
+                                    component="th"
+                                    scope="row"
+                                >
                                     {u.name}
                                 </TableCell>
-                                <TableCell style={{minWidth: 160}} component="th" scope="row">
+                                <TableCell
+                                    style={{minWidth: 160}}
+                                    className={classes.userDataCell}
+                                    component="th"
+                                    scope="row"
+                                >
                                     {u.username}
                                 </TableCell>
-                                <TableCell style={{maxWidth: 180}} component="th" scope="row">
+                                <TableCell
+                                    style={{maxWidth: 180}}
+                                    className={classes.userDataCell}
+                                    component="th"
+                                    scope="row"
+                                >
                                     {u.email}
                                 </TableCell>
                                 <TableCell style={{width: 80}}>
@@ -245,4 +268,4 @@ const UserRolesPage = () => {
     );
 };
 
-export default UserRolesPage;
+export default withStyles(styles)(UserRolesPage);