Skip to content

Commit

Permalink
Merge pull request #1544 from thehyve/ui_2_0-improvements
Browse files Browse the repository at this point in the history
Add UI 2 0 improvements
  • Loading branch information
ewelinagr authored Aug 1, 2024
2 parents 972467a + dda15c7 commit 7e696d2
Show file tree
Hide file tree
Showing 6 changed files with 149 additions and 20 deletions.
7 changes: 7 additions & 0 deletions projects/mercury/src/App.theme.js
Original file line number Diff line number Diff line change
Expand Up @@ -276,6 +276,13 @@ export default createTheme({
borderColor: globalTheme.palette.mellow.main
}
}
},
MuiTab: {
styleOverrides: {
root: {
fontSize: 15
}
}
}
}
});
30 changes: 21 additions & 9 deletions projects/mercury/src/metadata/views/MetadataView.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) => {
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -348,6 +357,9 @@ export const ContextualMetadataView = (props: ContextualMetadataViewProperties)
locationContext={currentViewName === RESOURCES_VIEW && locationContext}
currentViewName={currentViewName}
handleViewChangeRedirect={handleViewChangeRedirect}
updateFilters={updateFilters}
clearFilter={clearFilter}
clearAllFilters={clearAllFilters}
/>
);
};
Expand Down
88 changes: 88 additions & 0 deletions projects/mercury/src/metadata/views/__tests__/MetadataView.js
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
);
};
Expand Down
2 changes: 1 addition & 1 deletion projects/mercury/src/permissions/UserPermissionsTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const styles = {
width: '100%'
},
iconCell: {
padding: '0 0 0 8px',
padding: 0,
textAlign: 'right'
},
emptyPermissions: {
Expand Down
35 changes: 29 additions & 6 deletions projects/mercury/src/users/UserRolesPage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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}}>
Expand Down Expand Up @@ -245,4 +268,4 @@ const UserRolesPage = () => {
);
};

export default UserRolesPage;
export default withStyles(styles)(UserRolesPage);

0 comments on commit 7e696d2

Please sign in to comment.