Commit 6fa45134 authored by Viacheslav Pavlov's avatar Viacheslav Pavlov
Browse files

initial fix of material-ui and react-router

- Added common ui interfaces (withButtonVariants, withGridSpacing)

- changed all spacings
- replaced react-router-redux with connected-router
- now dashboard/dashboardEdit pages use connect only in child components

- removed "fab" and "extended-fab" button variants
- several bug fixes related to migration of material ui 3 -> 4
parent f4be760b
......@@ -2,8 +2,8 @@ import * as React from 'react';
import * as ReactDOM from 'react-dom';
import Loadable from 'react-loadable';
import {routerMiddleware, ConnectedRouter} from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import {routerMiddleware, ConnectedRouter} from 'connected-react-router';
import { createBrowserHistory as createHistory } from 'history';
import {Provider} from 'react-redux';
import {applyMiddleware, compose, createStore} from 'redux';
import { checkAccessTokens, refreshAuthTokenAuto } from 'actions/login';
......@@ -39,7 +39,7 @@ const history = createHistory(historyOptions);
const direction = getDir(detectedLang);
const initialState = __PRELOADED_STATE__ === undefined ? {} : __PRELOADED_STATE__;
const store = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history)))(createStore)(rootReducer, initialState);
const store = composeEnhancers(applyMiddleware(thunk, routerMiddleware(history)))(createStore)(rootReducer(history), initialState);
const SsrI18nProvider = withSSR()(I18nextProvider) as any;
......
......@@ -268,9 +268,9 @@
"integrity": "sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw=="
},
"@material-ui/core": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.5.0.tgz",
"integrity": "sha512-UHVAjU+1uDtA+OMBNBHb4RlCZOu514XeYPafNJv+GTdXBDr1SCPK7yqRE6TV1/bulxlDusTgu5Q6BAUgpmO4MA==",
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.5.1.tgz",
"integrity": "sha512-6pyk7diT7bflf4qUpqgPCpKYqjhRHPFwsgEV2Gv71lMqwxuRygFGHE2TdZ+l5T249H66Doj2P/j6fW7yzgxTWw==",
"requires": {
"@babel/runtime": "^7.4.4",
"@material-ui/styles": "^4.5.0",
......@@ -331,9 +331,9 @@
}
},
"@material-ui/icons": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.4.3.tgz",
"integrity": "sha512-HVVvUyc/78kmaBd93LkfWyGkXMM+zOMKzUfulWXxaV/fFAZ3N0pD0oHjWUd94zrOoF3tZP9JC7EPlIpIcZSNow==",
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.5.1.tgz",
"integrity": "sha512-YZ/BgJbXX4a0gOuKWb30mBaHaoXRqPanlePam83JQPZ/y4kl+3aW0Wv9tlR70hB5EGAkEJGW5m4ktJwMgxQAeA==",
"requires": {
"@babel/runtime": "^7.4.4"
},
......@@ -450,9 +450,9 @@
}
},
"@material-ui/system": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.0.tgz",
"integrity": "sha512-vR0PbMTzLnuuVCoYNQ13zyhLa/4s/UA9P9JbNuHBOOkfrHn53ShINiG0v05EgfwizfULLtc7mNvsGAgIyyp/hQ==",
"version": "4.5.1",
"resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.5.1.tgz",
"integrity": "sha512-M72CGz3MYxXTFLet2qWmQDBXZdtF7JKGqYaf7t9MPDYD6WYG6wKM2hUbgUtRKOwls8ZBXQGKsiAX8K4v5pXSPw==",
"requires": {
"@babel/runtime": "^7.4.4",
"deepmerge": "^4.0.0",
......@@ -10653,9 +10653,9 @@
}
},
"popper.js": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.0.tgz",
"integrity": "sha512-+G+EkOPoE5S/zChTpmBSSDYmhXJ5PsW8eMhH8cP/CQHMFPBG/kC9Y5IIw6qNYgdJ+/COf0ddY2li28iHaZRSjw=="
},
"portfinder": {
"version": "1.0.24",
......
......@@ -42,8 +42,9 @@
"bundle:stats3": "webpack --config config/server.config.js --profile --json"
},
"dependencies": {
"@material-ui/core": "^4.5.0",
"@material-ui/icons": "^4.4.3",
"@material-ui/core": "^4.5.1",
"@material-ui/styles": "^4.5.0",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.28",
"autosuggest-highlight": "^3.1.0",
"axios": "^0.19.0",
......
......@@ -8,7 +8,7 @@ import createMemoryHistory from 'history/createMemoryHistory';
import { StaticRouter } from 'react-router-dom';
import { Provider as ReduxProvider } from 'react-redux';
import * as serialize from 'serialize-javascript';
import { routerMiddleware } from 'react-router-redux';
import { routerMiddleware } from 'connected-react-router';
import { createStore, applyMiddleware } from 'redux';
import { I18nextProvider } from 'react-i18next';
import thunk from 'redux-thunk';
......@@ -93,7 +93,7 @@ const prerenderer = (html, errHtml) => (req, res) => {
<Loadable.Capture report={ (moduleName) => modules.push(moduleName) }>
<ReduxProvider store={ store }>
<JssProvider generateId={ generateClassName } registry={ sheets }>
<MuiThemeProvider theme={ theme(direction) } sheetsManager={ new Map() }>
<MuiThemeProvider theme={ theme(direction) }>
<I18nextProvider i18n={ req.i18n }>
<StaticRouter location={ pathWithoutLang } context={ context } basename={ basename }>
{ renderRoutes(routes) }
......
......@@ -58,7 +58,7 @@ const BioClimateDisplay = ({climateData, t, extraFilters, applyClimateFilters, i
</div>
</PageSection>
<PageSection title={ t('accessions.public.p.display.additionalInfo') }>
<Properties spacing={ 16 }>
<Properties spacing={ 8 }>
{ [...Array(19).keys()].map((i) => (
<PropertiesItem md numeric key={ `month-${i}` } title={ t(`accessions.climate.bio${i + 1}`) } className="pt-0 pb-0">
{ climateData[`bio${i + 1}`] && Number(climateData[`bio${i + 1}`]).toFixed(1) }
......
......@@ -10,10 +10,10 @@ import { updateTileLayerInfo } from 'accessions/actions/public';
import MapLayer from 'model/genesys/MapTileLayer';
// ui
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
import { Slider } from '@material-ui/lab';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import { Divider } from '@material-ui/core';
import Slider from '@material-ui/core/Slider';
/*tslint:disable*/
const styles = (theme) => ({
......@@ -137,7 +137,7 @@ class MapLayerConfig extends React.Component<IMapLayerConfigProps> {
max={ 1.0 }
onChange={ this.handleSliderChange }
value={ layer.opacity }
color="#88ba42"
color="primary"
/>
</div>
......
......@@ -63,7 +63,7 @@ class PdciTable extends React.Component<IPdciTableProps, any> {
<Link to="/content/passport-data-completeness-index">{ t('accessions.public.c.pdciTable.readPDCI') }</Link>
</div>
</Grid>
<Grid container justify={ 'center' } spacing={ 16 }>
<Grid container justify={ 'center' } spacing={ 8 }>
<Grid item sm={ 12 } style={ {width: '100%'} }>
<Properties>
{
......
......@@ -22,7 +22,7 @@ export const addFilterCode = (code: string, receivedFilter: object) => (dispatch
export const filterCodeToUrl = (url: string, code: string, qs?, postfix?) => (dispatch, getState) => {
const location = getState().routing.location && getState().routing.location.pathname;
const location = getState().router.location && getState().router.location.pathname;
// console.log(`filterCodeToUrl: {
// Location: ${location},
......
import {push} from 'react-router-redux';
import {push} from 'connected-react-router';
import { stringify } from 'query-string';
const IN_BROWSER = typeof window !== 'undefined';
......@@ -10,8 +10,8 @@ export function navigateTo(path: string, query?: object) {
return;
}
const location = getState().routing.location.pathname;
const search = getState().routing.location.search;
const location = getState().router.location.pathname;
const search = getState().router.location.search;
if (`${location}${search}` !== `${path}${query ? stringify(query) : ''}`) {
if (!query) {
dispatch(push(path ? path : ''));
......
import { push } from 'react-router-redux';
import { push } from 'connected-react-router';
// Actions
import {addFilterCode, filterCodeToUrl} from 'actions/filterCode';
......
......@@ -2,13 +2,14 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import BaseMyDataPage from 'ui/catalog/dashboard/MyDataPage';
import BaseMyDataPage, { parentActionCreators, parentMapStateToProps } from 'ui/catalog/dashboard/MyDataPage';
import { approveDataset, deleteDataset, loadMoreDatasets, applyFilters, unpublishDataset, publishDataset, createNewVersion } from 'datasets/actions/dashboard';
import Dataset from 'model/catalog/Dataset';
import { DatasetLink } from 'ui/genesys/Links';
import { PublishState } from 'model/common.model';
import DashboardDescriptorFilters from 'datasets/ui/dashboard/c/DashboardFilters';
import ActionButton from 'ui/common/buttons/ActionButton';
import { withTranslation } from 'react-i18next';
const renderDataLink = ({ row, children, needCurrent, t }) => (
<span>
......@@ -36,6 +37,7 @@ const mapStateToProps = (state, ownProps) => ({
filterComponent: DashboardDescriptorFilters,
renderDataLink,
renderActions,
...parentMapStateToProps(state, ownProps),
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......@@ -46,6 +48,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
approveOne: approveDataset,
unpublishOne: unpublishDataset,
createNewVersion,
...parentActionCreators,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(DashboardPage as any));
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withTranslation } from 'react-i18next';
// models
import Dataset from 'model/catalog/Dataset';
......@@ -9,14 +10,14 @@ import { approveDataset, deleteDataset, publishDataset, rejectDataset, createDat
import { loadDataset } from 'datasets/actions/dashboard';
// ui
import StepperPageTemplate from 'ui/pages/_base/StepperPage';
import StepperPageTemplate, { parentActionCreators, parentMapStateToProps } from 'ui/pages/_base/StepperPage';
import steps from 'datasets/ui/dashboard/dataset-stepper/steps';
// utilities
import { withPermissionCheck } from 'utilities';
class StepperPage extends StepperPageTemplate<Dataset> {
class StepperPage extends StepperPageTemplate<Dataset, any> {
protected static needs = [
({ params: { uuid } }) => uuid ? withPermissionCheck('write')(loadDataset(uuid)) : null,
];
......@@ -30,6 +31,7 @@ const mapStateToProps = (state, ownProps) => ({
pageTitle: ownProps.route.extraProps.title, // route-configured
location: ownProps.location,
uuid: ownProps.match.params.uuid,
...parentMapStateToProps(state, ownProps),
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......@@ -39,7 +41,8 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
approveItem: approveDataset,
deleteItem: deleteDataset,
createItem: createDataset,
...parentActionCreators,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(StepperPage);
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(StepperPage));
......@@ -35,14 +35,14 @@ class PastingDescriptorsStep extends StepperTemplate<IPastingDescriptorsStepProp
<div>
<h3>{ this.props.t('datasets.dashboard.p.stepper.pastingTraits.parsed', { count: this.state.pastedDescriptors.length }) }</h3>
{ this.state.pastedDescriptors.map((pasted, index) => (
<Grid container key={ pasted.id } spacing={ 24 }>
<Grid container key={ pasted.id } spacing={ 10 }>
<Grid item xs={ 6 }>
<DescriptorCard
descriptor={ pasted }
/>
</Grid>
<Grid item xs={ 6 }>
<Grid container spacing={ 24 }>
<Grid container spacing={ 10 }>
{ !(this.state.matchingDescriptors && this.state.matchingDescriptors.get(pasted.id)) ?
<Grid item xs={ 12 }>
<Loading />
......
import { push } from 'react-router-redux';
import { push } from 'connected-react-router';
// Actions
import {createApiCaller} from 'actions/ApiCall';
......
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withTranslation } from 'react-i18next';
import BaseMyDataPage from 'ui/catalog/dashboard/MyDataPage';
import BaseMyDataPage, { parentActionCreators, parentMapStateToProps } from 'ui/catalog/dashboard/MyDataPage';
import { loadMoreDescriptorLists, applyFilters, approveDescriptorList, deleteDescriptorList, unpublishDescriptorList, publishDescriptorList } from 'descriptorlists/actions/dashboard';
import { DescriptorListLink } from 'ui/catalog/Links';
import { PublishState } from 'model/common.model';
......@@ -18,6 +19,7 @@ const mapStateToProps = (state, ownProps) => ({
dataClassName: DescriptorList.clazz,
filterCode: ownProps.match.params.filterCode,
renderDataLink,
...parentMapStateToProps(state, ownProps),
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......@@ -27,6 +29,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
publishOne: publishDescriptorList,
approveOne: approveDescriptorList,
unpublishOne: unpublishDescriptorList,
...parentActionCreators,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(DashboardPage));
......@@ -40,7 +40,7 @@ class ImportDescriptorsStep extends StepperTemplate<IDescriptorListProps> {
<div style={ { marginTop: '23px' } }>
<h3>{ `Uploaded ${this.state.uploadedDescriptors.length} descriptor definitions` }</h3>
<h3>{ this.props.t('descriptorlists.dashboard.p.stepper.import.uploaded', { count: this.state.uploadedDescriptors.length }) }</h3>
<Grid container spacing={ 24 }>
<Grid container spacing={ 10 }>
{ this.state.uploadedDescriptors.map((d, index) => (
<Grid item key={ index } xs={ 12 } md={ 6 } xl={ 4 }>
<DescriptorCard descriptor={ d }/>
......@@ -60,7 +60,7 @@ class ImportDescriptorsStep extends StepperTemplate<IDescriptorListProps> {
{ ` ${this.props.t('descriptorlists.dashboard.p.stepper.import.uploading')}` }
</h3>
<Grid container spacing={ 24 }>
<Grid container spacing={ 10 }>
{ this.state.nonSavedDescriptors.map((d, index) => (
<Grid item key={ index } xs={ 12 } md={ 6 } xl={ 4 }>
<DescriptorCard
......
import { push } from 'react-router-redux';
import { push } from 'connected-react-router';
// Actions
import {addFilterCode, filterCodeToUrl} from 'actions/filterCode';
......
import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withTranslation } from 'react-i18next';
import BaseMyDataPage from 'ui/catalog/dashboard/MyDataPage';
import BaseMyDataPage, { parentActionCreators, parentMapStateToProps } from 'ui/catalog/dashboard/MyDataPage';
import {approveDescriptor, deleteDescriptor, unpublishDescriptor, publishDescriptor, loadMoreDescriptors, clearDescriptors, applyFilters} from 'descriptors/actions/dashboard';
import Descriptor from 'model/catalog/Descriptor';
import { DescriptorLink } from 'ui/catalog/Links';
......@@ -22,6 +23,7 @@ const mapStateToProps = (state, ownProps) => ({
filterComponent: DashboardDescriptorFilters,
renderDataLink,
shouldClearState: true,
...parentMapStateToProps(state, ownProps),
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......@@ -32,6 +34,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
approveOne: approveDescriptor,
unpublishOne: unpublishDescriptor,
clearState: clearDescriptors,
...parentActionCreators,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(DashboardPage);
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(DashboardPage));
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { withTranslation } from 'react-i18next';
// models
import Descriptor from 'model/catalog/Descriptor';
......@@ -8,14 +9,14 @@ import Descriptor from 'model/catalog/Descriptor';
import { loadDescriptor, publishDescriptor, rejectDescriptor, approveDescriptor, deleteDescriptor, createDescriptor } from 'descriptors/actions/editor';
// ui
import StepperPageTemplate from 'ui/pages/_base/StepperPage';
import StepperPageTemplate, { parentActionCreators, parentMapStateToProps } from 'ui/pages/_base/StepperPage';
import steps from 'descriptors/ui/dashboard/descriptor-stepper/steps';
// utilities
import { withPermissionCheck } from 'utilities';
class StepperPage extends StepperPageTemplate<Descriptor> {
class StepperPage extends StepperPageTemplate<Descriptor, any> {
protected static needs = [
({ params: { uuid } }) => uuid ? withPermissionCheck('write')(loadDescriptor(uuid)) : null,
];
......@@ -28,6 +29,7 @@ const mapStateToProps = (state, ownProps) => ({
pageTitle: ownProps.route.extraProps.title, // route-configured
location: ownProps.location,
uuid: ownProps.match.params.uuid,
...parentMapStateToProps(state, ownProps),
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......@@ -37,7 +39,8 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
approveItem: approveDescriptor,
deleteItem: deleteDescriptor,
createItem: createDescriptor,
...parentActionCreators,
}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(StepperPage);
export default connect(mapStateToProps, mapDispatchToProps)(withTranslation()(StepperPage));
......@@ -6,10 +6,13 @@ import { WithTranslation, withTranslation } from 'react-i18next';
// actions
import { saveExecution, toggleExecutionModal } from 'kpi/actions/admin';
// constants
import { WithButtonVariants } from 'model/commonInterfaces';
// model
import Execution from 'model/kpi/Execution';
import { withStyles } from '@material-ui/core/styles';
import { WithStyles, withStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
......@@ -28,15 +31,12 @@ const styles = (theme) => ({
/*tslint:enable*/
interface IExecutionDialogProps extends React.ClassAttributes<any>, WithTranslation {
interface IExecutionDialogProps extends React.ClassAttributes<any>, WithTranslation, WithStyles, WithButtonVariants {
saveExecution: (execution: Execution) => Promise<Execution>;
toggleExecutionModal: (open: boolean) => void;
execution: Execution;
buttonLabel?: string;
classes: any;
isOpen: boolean;
variant?: 'text' | 'outlined' | 'contained' | 'contained' | 'fab' | 'extendedFab';
t: any;
}
class ExecutionDialog extends React.Component<IExecutionDialogProps, any> {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment