Skip to content

Commit ac75ef7

Browse files
harunurhanharunurhan
committed
ui: upgrade to ant-design v4
* upgrades to antd to v4 * upgrades to react@16.13.10 * upgrades to react-router to v5 Unresolved: * `componentWillReceiveProps` warnings from `react-vis` uber/react-vis#1253 * search name space truncates some options like `conferen...` ant-design/ant-design#21754 * `componentWillMount` warnings from `react-helmet` nfl/react-helmet#413 * `componentWillMount` warnings from `react-loadable` jamiebuilds/react-loadable#220 * `Cannot update a component from inside the function body of a different component.` worning from `antd` ant-design/ant-design#21800
1 parent d37787f commit ac75ef7

File tree

82 files changed

+663
-720
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+663
-720
lines changed

‎e2e/utils/form.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,9 @@ class FormSubmitter {
6363
case 'string':
6464
await this.fillNumberOrStringField(path, data);
6565
break;
66+
case 'suggester':
67+
await this.fillSuggesterField(path, data);
68+
break;
6669
case 'single-select':
6770
await this.fillSingleSelectField(path, data);
6871
break;
@@ -142,6 +145,12 @@ class FormSubmitter {
142145
}
143146
}
144147

148+
async fillSuggesterField(path, value) {
149+
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"]`;
150+
const innerInputSelector = `${fieldSelector} input`;
151+
await this.page.type(innerInputSelector, value);
152+
}
153+
145154
async fillNumberOrStringField(path, value) {
146155
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"]`;
147156
await this.page.type(fieldSelector, value);

‎ui/package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "inspire-next-react",
33
"license": "GPL-2.0",
44
"version": "0.1.19",
5-
"proxy": "localhost:8000",
5+
"proxy": "http://locahost:8000",
66
"bundlesize": [
77
{
88
"path": "./build/**/*.js",
@@ -23,10 +23,11 @@
2323
"./node_modules/eslint/bin/eslint.js ./src --ext .js,.jsx --config .eslintrc"
2424
},
2525
"dependencies": {
26+
"@ant-design/icons": "^4.0.0",
2627
"@babel/runtime": "7.0.0-beta.55",
2728
"@craco/craco": "^3.1.0",
2829
"@sentry/browser": "^4.3.0",
29-
"antd": "^3.4.1",
30+
"antd": "^4.0.0",
3031
"axios": "^0.18.0",
3132
"classnames": "^2.2.6",
3233
"connected-react-router": "^6.4.0",
@@ -58,7 +59,7 @@
5859
"react-piwik": "^1.6.0",
5960
"react-quill": "^1.3.3",
6061
"react-redux": "^6.0.0",
61-
"react-router-dom": "^4.2.2",
62+
"react-router-dom": "^5.1.0",
6263
"react-sanitized-html": "^2.0.0",
6364
"react-scripts": "2.0.3",
6465
"react-vis": "^1.9.2",

‎ui/src/App.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,6 @@
4646
}
4747
}
4848

49-
.mb4-important {
50-
margin-bottom: 4px !important;
51-
}
52-
5349
.secondary-color {
5450
color: $secondary-color;
5551
}
@@ -119,6 +115,10 @@
119115
}
120116
}
121117

118+
.mb2-important {
119+
margin-bottom: 0.5rem !important;
120+
}
121+
122122
.ant-drawer-body {
123123
@media (max-width: $screen-xs-max) {
124124
padding: $drawer-body-padding / 2 !important;

‎ui/src/authors/components/AuthorEmailsAction.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
33
import { List } from 'immutable';
4-
import { Menu, Icon, Tooltip } from 'antd';
4+
import { MailOutlined } from '@ant-design/icons';
5+
import { Menu, Tooltip } from 'antd';
56

67
import ExternalLink from '../../common/components/ExternalLink';
78
import ActionsDropdownOrAction from '../../common/components/ActionsDropdownOrAction';
@@ -26,7 +27,7 @@ function renderEmailAction(email, title) {
2627

2728
const ACTION_TITLE = (
2829
<Tooltip title="Contact author">
29-
<Icon type="mail" />
30+
<MailOutlined />
3031
</Tooltip>
3132
);
3233

‎ui/src/authors/components/AuthorLinkedinAction.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Icon, Tooltip } from 'antd';
3+
import { LinkedinOutlined } from '@ant-design/icons';
4+
import { Tooltip } from 'antd';
45

56
import ListItemAction from '../../common/components/ListItemAction';
67
import ExternalLink from '../../common/components/ExternalLink';
@@ -13,7 +14,7 @@ class AuthorLinkedinAction extends Component {
1314
<ListItemAction>
1415
<Tooltip title="LinkedIn">
1516
<ExternalLink href={href}>
16-
<Icon type="linkedin" />
17+
<LinkedinOutlined />
1718
</ExternalLink>
1819
</Tooltip>
1920
</ListItemAction>

‎ui/src/authors/components/AuthorOrcid/AuthorOrcid.jsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ class AuthorOrcid extends Component {
1010
render() {
1111
const { orcid } = this.props;
1212
return (
13-
<Tooltip title="ORCID">
14-
<OrcidProfileLink className="__AuthorOrcid__" orcid={orcid}>
13+
<OrcidProfileLink className="__AuthorOrcid__" orcid={orcid}>
14+
<Tooltip title="ORCID">
1515
<img src={orcidLogo} alt="ORCID" />
16-
</OrcidProfileLink>
17-
</Tooltip>
16+
</Tooltip>
17+
</OrcidProfileLink>
1818
);
1919
}
2020
}

‎ui/src/authors/components/AuthorTwitterAction.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Icon, Tooltip } from 'antd';
3+
import { TwitterOutlined } from '@ant-design/icons';
4+
import { Tooltip } from 'antd';
45

56
import ListItemAction from '../../common/components/ListItemAction';
67
import ExternalLink from '../../common/components/ExternalLink';
@@ -13,7 +14,7 @@ class AuthorTwitterAction extends Component {
1314
<ListItemAction>
1415
<Tooltip title="Twitter">
1516
<ExternalLink href={href}>
16-
<Icon type="twitter" />
17+
<TwitterOutlined />
1718
</ExternalLink>
1819
</Tooltip>
1920
</ListItemAction>

‎ui/src/authors/components/AuthorWebsitesAction.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { useMemo } from 'react';
22
import PropTypes from 'prop-types';
33
import { List } from 'immutable';
4-
import { Menu, Icon, Tooltip } from 'antd';
4+
import { LinkOutlined } from '@ant-design/icons';
5+
import { Menu, Tooltip } from 'antd';
56

67
import ExternalLink from '../../common/components/ExternalLink';
78
import { removeProtocolAndWwwFromUrl } from '../../common/utils';
@@ -48,7 +49,7 @@ function renderWebsiteAction(website, title) {
4849

4950
const ACTION_TITLE = (
5051
<Tooltip title="Personal website">
51-
<Icon type="link" />
52+
<LinkOutlined />
5253
</Tooltip>
5354
);
5455

‎ui/src/authors/components/UserSettingsAction.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useCallback, useState } from 'react';
22
import { Button } from 'antd';
3+
import { SettingOutlined } from '@ant-design/icons';
34

45
import ListItemAction from '../../common/components/ListItemAction';
56
import IconText from '../../common/components/IconText';
@@ -18,7 +19,7 @@ function UserSettingsAction() {
1819
<>
1920
<ListItemAction>
2021
<Button onClick={onClick}>
21-
<IconText text="settings" type="setting" />
22+
<IconText text="settings" icon={<SettingOutlined />} />
2223
</Button>
2324
</ListItemAction>
2425
<UserSettingsModal

‎ui/src/authors/containers/SearchPageContainer.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import LoadingOrChildren from '../../common/components/LoadingOrChildren';
1111
import DocumentHead from '../../common/components/DocumentHead';
1212
import { AUTHORS_NS } from '../../reducers/search';
1313

14-
const META_DESCRIPTION = "Find authors in High Energy Physics"
15-
const TITLE = "Authors Search"
14+
const META_DESCRIPTION = 'Find authors in High Energy Physics';
15+
const TITLE = 'Authors Search';
1616

1717
class SearchPage extends Component {
1818
static renderAuthorItem(result) {
@@ -27,7 +27,7 @@ class SearchPage extends Component {
2727
<Row className="mt3" gutter={32} type="flex" justify="center">
2828
<Col xs={24} lg={16} xl={16} xxl={14}>
2929
<LoadingOrChildren loading={loading}>
30-
<Row type="flex">
30+
<Row>
3131
<Col>
3232
<NumberOfResultsContainer namespace={AUTHORS_NS} />
3333
</Col>

‎ui/src/common/components/AggregationBox.jsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,14 @@ class AggregationBox extends Component {
99
return (
1010
<div className={classNames('w-100 br1', className)}>
1111
<Row type="flex" justify="space-between">
12-
<Col>
12+
<Col flex="auto">
1313
<h3 className="pb1">{name}</h3>
1414
</Col>
1515
<Col>{headerAction}</Col>
1616
</Row>
17-
<Row className="w-100">{children}</Row>
17+
<Row className="w-100">
18+
<Col flex="auto">{children}</Col>
19+
</Row>
1820
</div>
1921
);
2022
}

‎ui/src/common/components/AggregationFilters.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,6 @@ class AggregationFilters extends Component {
5353
key={aggregationKey}
5454
xs={24}
5555
lg={inline ? 5 : 24}
56-
gutter={32}
5756
>
5857
<EventTracker
5958
eventId={`Facet-${aggregation.getIn(['meta', 'title'])}`}

‎ui/src/common/components/CheckboxAggregation.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,9 @@ class CheckboxAggregation extends Component {
117117
const { selectionMap } = this.state;
118118
const { splitDisplayName, bucketHelp } = this.props;
119119
const bucketKey = bucket.get('key');
120+
const bucketDisplay = splitDisplayName
121+
? bucketKey.split(BUCKET_NAME_SPLITTER)[1]
122+
: bucketKey;
120123

121124
return (
122125
<Row className="mb2" type="flex" justify="space-between" key={bucketKey}>
@@ -127,9 +130,7 @@ class CheckboxAggregation extends Component {
127130
this.onSelectionChange(bucketKey, checked);
128131
}}
129132
>
130-
{splitDisplayName
131-
? bucketKey.split(BUCKET_NAME_SPLITTER)[1]
132-
: bucketKey}
133+
{bucketDisplay}
133134
{bucketHelp &&
134135
CheckboxAggregation.renderBucketHelpTooltip(
135136
bucketHelp.get(bucketKey)

‎ui/src/common/components/EditRecordAction.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3+
import { EditOutlined } from '@ant-design/icons';
34

45
import ListItemAction from './ListItemAction';
56
import IconText from './IconText';
@@ -30,7 +31,7 @@ class EditRecordAction extends Component {
3031
<ExternalLink
3132
href={`${pidTypeToEditRoutePrefix[pidType]}/${pidValue}`}
3233
>
33-
<IconText text="edit" type="edit" />
34+
<IconText text="edit" icon={<EditOutlined />} />
3435
</ExternalLink>
3536
</EventTracker>
3637
</ListItemAction>

‎ui/src/common/components/HelpIconTooltip.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React, { Component } from 'react';
2-
import { Tooltip, Icon } from 'antd';
2+
import { QuestionCircleOutlined } from '@ant-design/icons';
3+
import { Tooltip } from 'antd';
34
import PropTypes from 'prop-types';
45

56
class HelpIconTooltip extends Component {
67
render() {
78
const { help } = this.props;
89
return (
910
<Tooltip title={help}>
10-
<Icon type="question-circle-o" />
11+
<QuestionCircleOutlined />
1112
</Tooltip>
1213
);
1314
}

‎ui/src/common/components/IconText/IconText.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
3-
import { Icon } from 'antd';
43

54
import './IconText.scss';
65

76
class IconText extends Component {
87
render() {
9-
const { type, text } = this.props;
8+
const { icon, text } = this.props;
109
return (
1110
<span className="__IconText__">
12-
<Icon className="icon" type={type} />
11+
<span className="icon">{icon}</span>
1312
{text}
1413
</span>
1514
);
1615
}
1716
}
1817

1918
IconText.propTypes = {
20-
type: PropTypes.string.isRequired,
19+
icon: PropTypes.node.isRequired,
2120
text: PropTypes.string.isRequired,
2221
};
2322

‎ui/src/common/components/IconText/__tests__/IconText.test.jsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
11
import React from 'react';
22
import { shallow } from 'enzyme';
3+
import { InfoOutlined } from '@ant-design/icons';
34

45
import IconText from '../IconText';
56

67
describe('IconText', () => {
78
it('renders with all props set', () => {
8-
const wrapper = shallow((
9-
<IconText
10-
type="info"
11-
text="Test"
12-
/>
13-
));
9+
const wrapper = shallow(<IconText icon={<InfoOutlined />} text="Test" />);
1410
expect(wrapper).toMatchSnapshot();
1511
});
1612
});

‎ui/src/common/components/ListItemAction/__tests__/ListItemAction.test.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { shallow } from 'enzyme';
33
import { Button } from 'antd';
4+
import { ExpandOutlined } from '@ant-design/icons';
45

56
import IconText from '../../IconText';
67
import ListItemAction from '../ListItemAction';
@@ -10,7 +11,7 @@ describe('ListItemAction', () => {
1011
const wrapper = shallow(
1112
<ListItemAction>
1213
<Button>
13-
<IconText text="cite" type="export" />
14+
<IconText text="cite" icon={<ExpandOutlined />} />
1415
</Button>
1516
</ListItemAction>
1617
);

‎ui/src/common/components/ModalSuccessResult.jsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { Icon } from 'antd';
2+
import { CheckCircleTwoTone } from '@ant-design/icons';
33
import PropTypes from 'prop-types';
44

55
import styleVariables from '../../styleVariables';
@@ -11,11 +11,7 @@ class ModalSuccessResult extends Component {
1111
return (
1212
<div>
1313
<div className="mb4 tc f-5">
14-
<Icon
15-
type="check-circle"
16-
theme="twoTone"
17-
twoToneColor={styleVariables['success-color']}
18-
/>
14+
<CheckCircleTwoTone twoToneColor={styleVariables['success-color']} />
1915
</div>
2016
<div className="tc f5">{children}</div>
2117
</div>

‎ui/src/common/components/SelectBox.jsx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@ class SelectBox extends Component {
88
return (
99
<Select dropdownMatchSelectWidth={false} showArrow {...selectProps}>
1010
{options.map(option => (
11-
<Select.Option
12-
data-test-id={
13-
selectProps['data-test-id'] &&
14-
`${selectProps['data-test-id']}-option-${option.value}`
15-
}
16-
key={option.value}
17-
value={option.value}
18-
>
19-
{option.display || option.value}
11+
<Select.Option key={option.value} value={option.value}>
12+
<span
13+
data-test-id={
14+
selectProps['data-test-id'] &&
15+
`${selectProps['data-test-id']}-option-${option.value}`
16+
}
17+
>
18+
{option.display || option.value}
19+
</span>
2020
</Select.Option>
2121
))}
2222
</Select>

0 commit comments

Comments
 (0)