Commit 79d5cc47 authored by Matija Obreza's avatar Matija Obreza

Upgraded to @material-ui

parent 61aff575
......@@ -131,7 +131,7 @@ deploy for review:
- echo "Deploying ${CI_REGISTRY_IMAGE}:${IMAGE_TAG} for review as ${FRONTEND_URL}"
# - echo "Settings CLIENT_ID=${CLIENT_ID} CLIENT_SECRET=${CLIENT_SECRET}"
- envsubst < docker/review-compose-template.yml > review-composed.yml
- cat review-composed.yml
# - cat review-composed.yml
- ${DOCKER_CMD} stack rm ${CI_ENVIRONMENT_SLUG} || true
- ${DOCKER_CMD} stack deploy -c review-composed.yml ${CI_ENVIRONMENT_SLUG}
......
......@@ -16,7 +16,7 @@ import detectLocaleFromPath from '../server/middleware/detectLocaleFromPath';
import getDir from '../server/middleware/detectDirection';
// JSS & MUI
import {MuiThemeProvider} from 'material-ui/styles';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from 'ui/theme';
declare const __PRELOADED_STATE__: any;
......
......@@ -28,7 +28,7 @@ const i18nClient = i18n
order: ['catalogLangDetector'],
lookupFromPathIndex: 0,
},
...optionsBase
...optionsBase,
});
export default i18nClient;
......@@ -2,7 +2,7 @@ import * as i18n from 'i18next';
import * as path from 'path';
import optionsBase from './options-base';
const Backend = require('i18next-node-fs-backend');
const Backend = require('i18next-sync-fs-backend'); // has no proper import yet
const i18nextMiddleware = require('i18next-express-middleware'); // has no proper import yet
const backend = {
......@@ -22,7 +22,7 @@ const i18nServer = i18n
order: ['path'],
lookupFromPathIndex: 0,
},
...optionsBase
...optionsBase,
});
export default i18nServer;
This diff is collapsed.
......@@ -29,107 +29,108 @@
"i18nscan": "i18next-scanner --config i18next-scanner.config.js 'src/**/*.tsx'"
},
"dependencies": {
"@material-ui/core": "^1.3.1",
"@material-ui/icons": "^1.1.0",
"autosuggest-highlight": "^3.1.0",
"axios": "^0.17.0",
"classnames": "^2.2.5",
"compression": "^1.7.0",
"classnames": "^2.2.6",
"coffeescript": "^2.3.1",
"compression": "^1.7.2",
"cookie-parser": "^1.4.3",
"csvtojson": "^1.1.9",
"csvtojson": "^1.1.12",
"debug": "^3.1.0",
"es-cookie": "^1.1.1",
"express": "^4.15.2",
"express-http-proxy": "^1.0.3",
"es-cookie": "^1.2.0",
"express": "^4.16.3",
"express-http-proxy": "^1.2.0",
"flattenjs": "^1.0.4",
"form-data": "^2.3.1",
"form-data": "^2.3.2",
"history": "^4.7.2",
"i18next": "^11.0.0",
"i18next-browser-languagedetector": "^2.2.0",
"i18next-express-middleware": "^1.1.1",
"i18next-node-fs-backend": "^1.0.0",
"i18next": "^11.3.6",
"i18next-browser-languagedetector": "^2.2.1",
"i18next-express-middleware": "^1.2.0",
"i18next-sync-fs-backend": "^1.1.0",
"i18next-xhr-backend": "^1.5.0",
"immutability-helper": "^2.6.4",
"immutability-helper": "^2.7.1",
"leaflet": "^1.3.1",
"lodash": "^4.17.10",
"material-ui": "1.0.0-beta.24",
"material-ui-icons": "1.0.0-beta.17",
"minimist": "^1.2.0",
"moment": "^2.19.3",
"moment": "^2.22.2",
"normalize.css": "^7.0.0",
"prop-types": "^15.5.10",
"query-string": "^5.1.0",
"react": "^16.0.0",
"react-autosuggest": "^9.3.1",
"prop-types": "^15.6.2",
"query-string": "^5.1.1",
"react": "^16.4.1",
"react-autosuggest": "^9.3.4",
"react-dnd": "^2.5.4",
"react-dnd-html5-backend": "^2.5.4",
"react-dom": "^16.0.0",
"react-dnd-html5-backend": "^2.6.0",
"react-dom": "^16.4.1",
"react-fontawesome": "^1.6.1",
"react-i18next": "^7.0.0",
"react-leaflet": "^1.8.0",
"react-markdown": "^3.0.0",
"react-redux": "^5.0.0",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-i18next": "^7.8.1",
"react-leaflet": "^1.9.1",
"react-markdown": "^3.3.4",
"react-redux": "^5.0.7",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-time-ago": "^1.0.11",
"react-virtualized": "^9.18.5",
"react-virtualized": "^9.20.1",
"react-visibility-sensor": "^3.11.0",
"redux": "^3.0.0",
"redux-form": "^7.3.0",
"redux": "^4.0.0",
"redux-form": "^7.4.2",
"redux-logger": "^3.0.0",
"redux-thunk": "^2.0.0",
"redux-thunk": "^2.3.0",
"roboto-fontface": "^0.8.0",
"serialize-javascript": "^1.3.0",
"serialize-javascript": "^1.5.0",
"string-natural-compare": "^2.0.2"
},
"devDependencies": {
"@types/react": "^16.0.0",
"awesome-typescript-loader": "^3.0.0",
"@types/react": "^16.4.6",
"awesome-typescript-loader": "^3.5.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.0.0",
"babel-loader": "^7.1.5",
"babel-plugin-react-transform": "^3.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-polyfill": "^6.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.0.0",
"copy-webpack-plugin": "^4.0.0",
"cross-env": "^5.0.0",
"css-loader": "^0.28.9",
"copy-webpack-plugin": "^4.5.2",
"cross-env": "^5.2.0",
"css-loader": "^0.28.11",
"del": "^3.0.0",
"es6-promise": "^4.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.0.0",
"file-loader": "^1.1.11",
"html-webpack-exclude-assets-plugin": "0.0.5",
"html-webpack-plugin": "^2.0.0",
"i18next-scanner": "^2.4.6",
"i18next-scanner": "^2.6.3",
"immutable": "^3.0.0",
"isomorphic-fetch": "^2.0.0",
"node-sass": "^4.9.0",
"node-sass": "^4.9.2",
"object-assign": "^4.0.0",
"optimize-css-assets-webpack-plugin": "^3.0.0",
"postcss-assets": "^5.0.0",
"postcss-cssnext": "^3.1.0",
"postcss-each": "^0.10.0",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.0",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.6",
"postcss-mixins": "^6.0.0",
"precss": "^1.0.0",
"react-hot-loader": "^4.0.0-beta.17",
"resolve-url-loader": "^2.0.0",
"sass-loader": "^6.0.0",
"react-hot-loader": "^4.3.3",
"resolve-url-loader": "^2.3.0",
"sass-loader": "^6.0.7",
"script-ext-html-webpack-plugin": "^1.8.8",
"source-map-loader": "^0.2.0",
"style-loader": "^0.19.0",
"stylelint": "^8.0.0",
"tslint": "^5.0.0",
"tslint-loader": "^3.0.0",
"tslint-react": "^3.0.0",
"typescript": "^2.7.2",
"tslint": "^5.10.0",
"tslint-loader": "^3.6.0",
"tslint-react": "^3.6.0",
"typescript": "^2.9.2",
"url-loader": "^0.6.0",
"webpack": "^3.0.0",
"webpack": "^3.12.0",
"webpack-chunk-hash": "^0.5.0",
"webpack-dev-server": "^2.11.1",
"webpack-hot-middleware": "^2.0.0",
"webpack-dev-server": "^2.11.2",
"webpack-hot-middleware": "^2.22.2",
"webpack-manifest-plugin": "^1.0.0",
"webpack-merge": "^4.0.0"
"webpack-merge": "^4.1.3"
}
}
......@@ -13,8 +13,8 @@ import rootReducer from 'reducers';
// import { create as createJss } from 'jss';
// import jssPreset from 'jss-preset-default';
import { JssProvider, SheetsRegistry } from 'react-jss';
import createGenerateClassName from 'material-ui/styles/createGenerateClassName';
import { MuiThemeProvider } from 'material-ui/styles';
import createGenerateClassName from '@material-ui/core/styles/createGenerateClassName';
import { MuiThemeProvider } from '@material-ui/core/styles';
import theme from 'ui/theme';
// import checkAuthToken from './checkAuthToken';
......@@ -49,13 +49,14 @@ const prerenderer = (html) => (req, res) => {
const generateClassName = createGenerateClassName();
const initialLanguage = req.i18n.language;
const initialI18nStore = {};
const defaultLanguage = 'en';
initialI18nStore[initialLanguage] = req.i18n.services.resourceStore.data[initialLanguage];
if (initialLanguage !== 'en') {
if (initialLanguage !== defaultLanguage) {
// So that we have missing translations
initialI18nStore['en'] = req.i18n.services.resourceStore.data['en'];
initialI18nStore[defaultLanguage] = req.i18n.services.resourceStore.data[defaultLanguage];
}
const basename = initialLanguage !== 'en' ? `${config.frontendPath}/${initialLanguage}` : `${config.frontendPath}`;
const pathWithoutLang = req.url.substr(initialLanguage !== 'en' ? 3 : 0, req.url.length);
const basename = initialLanguage !== defaultLanguage ? `${config.frontendPath}/${initialLanguage}` : `${config.frontendPath}`;
const pathWithoutLang = req.url.substr(initialLanguage !== defaultLanguage ? 3 : 0, req.url.length);
console.log(`<StaticRouter location="${pathWithoutLang}" basename="${basename}"`);
......
import * as update from 'immutability-helper';
import update from 'immutability-helper';
import {ADD_FILTER_CODE} from 'constants/filterCode';
const INITIAL_STATE: {
......
import * as update from 'immutability-helper';
import update from 'immutability-helper';
import { UPDATE_HISTORY } from 'constants/history';
......
import * as update from 'immutability-helper';
import update from 'immutability-helper';
import { SET_PAGE_TITLE } from 'constants/pageTitle';
......
import * as update from 'immutability-helper';
import update from 'immutability-helper';
import { SHOW_SNACKBAR } from 'constants/snackbar';
const INITIAL_STATE: {
......
import * as React from 'react';
import { withStyles, WithStyles } from 'material-ui/styles';
import { withStyles, WithStyles } from '@material-ui/core/styles';
import Grid from 'material-ui/Grid';
import Grid from '@material-ui/core/Grid';
const styles = (theme) => ({
propertiesContainer: {
......
import * as React from 'react';
import { withStyles } from 'material-ui/styles';
import { withStyles } from '@material-ui/core/styles';
import { AccessionIdentifier } from 'model/dataset.model';
import { Table as VTable, Column as VColumn, AutoSizer } from 'react-virtualized';
import DOI from 'ui/common/DOI';
// import Hidden from 'material-ui/Hidden';
// import Hidden from '@material-ui/core/Hidden';
const styles = (theme) => ({
......
......@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import Markdown from 'ui/common/markdown';
import OriginalMarkdownField from 'ui/common/markdown/MarkdownField';
import FormControl from 'ui/common/forms/FormControl';
import Input from 'material-ui/Input';
import Input from '@material-ui/core/Input';
class MarkdownField extends OriginalMarkdownField {
......
import * as React from 'react';
import MuiCard, { CardHeader as MuiCardHeader, CardContent as MuiCardContent, CardActions as MuiCardActions } from 'material-ui/Card';
import MuiCard from '@material-ui/core/Card';
import MuiCardHeader from '@material-ui/core/CardHeader';
import MuiCardContent from '@material-ui/core/CardContent';
import MuiCardActions from '@material-ui/core/CardActions';
const header = {
padding: '1.143rem 1.429rem',
......@@ -17,19 +21,19 @@ const action = {
};
const Card = ({ ...props }) => (
<MuiCard { ...props }/>
<MuiCard { ...props }/>
);
const CardHeader = ({ ...props }) => (
<MuiCardHeader { ...props } style={ header }/>
<MuiCardHeader { ...props } style={ header }/>
);
const CardContent = ({ ...props }) => (
<MuiCardContent { ...props } style={ content }/>
<MuiCardContent { ...props } style={ content }/>
);
const CardActions = ({ ...props }) => (
<MuiCardActions { ...props } style={ action }/>
<MuiCardActions { ...props } style={ action }/>
);
export { Card as default, CardHeader, CardContent, CardActions };
import * as React from 'react';
import { FieldArray } from 'redux-form';
import Button from 'material-ui/Button';
import Grid from 'material-ui/Grid';
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import {log} from 'utilities/debug';
const renderMembers = ({ fields, itemLabel, itemEditor, addItem, removeItem }) => {
const onAddMember = (e) => {
const item = addItem();
log(`Adding new ${itemLabel}`, item);
fields.push(item);
};
const onRemoveMember = (member, index) => (e) => {
log(`Removing ${itemLabel} #${index}`);
fields.remove(index);
removeItem(member);
};
if (! fields) {
return null;
}
if (fields.length > 100) {
return <div className="error">Don't use the ItemsEditor for more than 100 items!</div>;
}
return (
<div>
{ fields && fields.map((member, index, fields) => (
<div key={ index } className="items-editor-item">
<Grid container justify="space-between" alignItems="baseline">
<Grid item xs={ 10 } md={ 11 }>
{ itemEditor(member, index, fields, itemLabel) }
</Grid>
<Grid item xs={ 2 } md={ 1 }>
<Button type="button" onClick={ onRemoveMember(member, index) }>Remove</Button>
</Grid>
</Grid>
</div>
)) }
<Grid container className="items-editor-additem">
<Grid item xs={ 12 }>
<Button raised type="button" onClick={ onAddMember }>Add { itemLabel }</Button>
</Grid>
const onAddMember = (e) => {
const item = addItem();
log(`Adding new ${itemLabel}`, item);
fields.push(item);
};
const onRemoveMember = (member, index) => (e) => {
log(`Removing ${itemLabel} #${index}`);
fields.remove(index);
removeItem(member);
};
if (! fields) {
return null;
}
if (fields.length > 100) {
return <div className="error">Don't use the ItemsEditor for more than 100 items!</div>;
}
return (
<div>
{ fields && fields.map((member, index, fields) => (
<div key={ index } className="items-editor-item">
<Grid container justify="space-between" alignItems="baseline">
<Grid item xs={ 10 } md={ 11 }>
{ itemEditor(member, index, fields, itemLabel) }
</Grid>
<Grid item xs={ 2 } md={ 1 }>
<Button type="button" onClick={ onRemoveMember(member, index) }>Remove</Button>
</Grid>
</Grid>
</div>
);
)) }
<Grid container className="items-editor-additem">
<Grid item xs={ 12 }>
<Button variant="raised" type="button" onClick={ onAddMember }>Add { itemLabel }</Button>
</Grid>
</Grid>
</div>
);
};
const ItemsEditor = ({ name, itemLabel, addItem, removeItem, component }) => {
return (
<FieldArray name={ name } itemLabel={ itemLabel } addItem={ addItem } removeItem={ removeItem } itemEditor={ component } component={ renderMembers } />
);
return (
<FieldArray name={ name } itemLabel={ itemLabel } addItem={ addItem } removeItem={ removeItem } itemEditor={ component } component={ renderMembers } />
);
};
export default ItemsEditor;
import * as React from 'react';
import { CircularProgress } from 'material-ui/Progress';
import CircularProgress from '@material-ui/core/CircularProgress';
export default ({message = 'Loading data...', className}: {message?: string, className?: string}) => (
<div className={ className } style={ { textAlign: 'center', padding: '5rem' } }>
......
......@@ -9,54 +9,55 @@ import { Link } from 'react-router-dom';
import {bindActionCreators} from 'redux';
import { navigateTo } from 'actions/navigation';
import MuiTabs, {Tab as MuiTab} from 'material-ui/Tabs';
import MuiTabs from '@material-ui/core/Tabs';
import MuiTab from '@material-ui/core/Tab';
interface ITabProps extends React.Props<any> {
name?: string;
to: string;
children: any;
name?: string;
to: string;
children: any;
}
class Tab extends React.Component<ITabProps, any> {
public render() {
const { to, children } = this.props;
return (
<Link to={ to }>{ children }</Link>
);
}
public render() {
const { to, children } = this.props;
return (
<Link to={ to }>{ children }</Link>
);
}
}
class Tabs extends React.Component<any> {
public render() {
const { tab, children, navigateTo } = this.props;
public render() {
const { tab, children, navigateTo } = this.props;
const tabs = (children as Tab[]).map((ch) => {
return {
to: ch.props.to,
name: ch.props.name || '',
label: ch.props.children,
};
});
const tabs = (children as Tab[]).map((ch) => {
return {
to: ch.props.to,
name: ch.props.name || '',
label: ch.props.children,
};
});
const currentTab: number = tabs.findIndex((t) => {
return t.name === tab;
}) || 0;
const currentTab: number = tabs.findIndex((t) => {
return t.name === tab;
}) || 0;
const tabChange = (e, index) => {
navigateTo(tabs[index].to);
};
const tabChange = (e, index) => {
navigateTo(tabs[index].to);
};
return (
<MuiTabs value={ currentTab } indicatorColor="#88B943" onChange={ tabChange }>
{ tabs.map((tab) => <MuiTab key={ tab.to } label={ tab.label } />) }
</MuiTabs>
);
}
return (
<MuiTabs value={ currentTab } indicatorColor="primary" onChange={ tabChange }>
{ tabs.map((tab) => <MuiTab key={ tab.to } label={ tab.label } />) }
</MuiTabs>
);
}
}
const mapStateToProps = (state, ownProps) => ({
tab: ownProps.tab || '',
foo: ownProps,
tab: ownProps.tab || '',
foo: ownProps,
});
const mapDispatchToProps = (dispatch) => bindActionCreators({
......
import * as React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Button from 'material-ui/Button';
import Button from '@material-ui/core/Button';
import { navigateTo } from 'actions/navigation';
interface IBackButtonProps extends React.ClassAttributes<any> {
......@@ -36,7 +36,7 @@ class BackButton extends React.Component<IBackButtonProps, any> {
public render() {
const { defaultBackText} = this.props;
return (
<Button raised onClick={ this.onGoBack }>
<Button variant="raised" onClick={ this.onGoBack }>
{ defaultBackText || 'BACK' }
</Button>
);
......
import * as React from 'react';
import { FormControlLabel } from 'material-ui/Form';
import Checkbox from 'material-ui/Checkbox';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
const ReduxCheckbox = ({input: {value, onChange}, label = null, style = {height: '40px'}, ...rest}) => (
<FormControlLabel
......
......@@ -2,12 +2,15 @@ import * as React from 'react';
import { ICsvConfiguration } from 'utilities/CSV';
import { FormControlLabel, FormLabel, FormControl } from 'material-ui/Form';
import Radio, {RadioGroup} from 'material-ui/Radio';
import Input from 'material-ui/Input';
import InputLabel from 'material-ui/Input/InputLabel';
import Checkbox from 'material-ui/Checkbox';
import Grid from 'material-ui/Grid';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Grid from '@material-ui/core/Grid';
import CollapsibleComponentSearch from 'ui/common/filter/CollapsibleComponentSearch';
class CSVConfig implements ICsvConfiguration {
......
import * as React from 'react';
import { Field } from 'redux-form';
import Radio, { RadioGroup } from 'material-ui/Radio';
import { FormLabel, FormControl, FormControlLabel } from 'material-ui/Form';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
interface IBooleanFilterInternal extends React.ClassAttributes<any> {
input: any;
......
import * as React from 'react';
import PlayArrow from 'material-ui-icons/PlayArrow';
import {withStyles} from 'material-ui/styles';
import Collapse from 'material-ui/transitions/Collapse';
import Divider from 'material-ui/Divider';
import PlayArrow from '@material-ui/icons/PlayArrow';
import {withStyles} from '@material-ui/core/styles';
import Collapse from '@material-ui/core/Collapse';
import Divider from '@material-ui/core/Divider';
interface ICollapsibleComponentSearch extends React.ClassAttributes<any> {
classes: any;
......
import * as React from 'react';
import {withStyles} from 'material-ui/styles';
import {withStyles} from '@material-ui/core/styles';
import compose from 'recompose/compose';
import withWidth from 'material-ui/utils/withWidth';
import Hidden from 'material-ui/Hidden';
import Collapse from 'material-ui/transitions/Collapse';
import PlayArrow from 'material-ui-icons/PlayArrow';
import Divider from 'material-ui/Divider';
import withWidth from '@material-ui/core/withWidth';
import Hidden from '@material-ui/core/Hidden';
import Collapse from '@material-ui/core/Collapse';
import PlayArrow from '@material-ui/icons/PlayArrow';
import Divider from '@material-ui/core/Divider';
interface IExpandFiltersComponentProps extends React.ClassAttributes<any> {
classes: any;
......
import * as React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {withStyles} from 'material-ui/styles';
import {withStyles} from '@material-ui/core/styles';
import {log} from 'utilities/debug';
import { showSnackbar } from 'actions/snackbar';
import ExpandFiltersComponent from './ExpandFiltersComponent';
import Button from 'material-ui/Button';
import Button from '@material-ui/core/Button';
import {cleanFilters} from 'utilities';