Skip to content

Commit

Permalink
ui: upgrade to ant-design v4
Browse files Browse the repository at this point in the history
* upgrades to antd to v4
 * fixes UX problems with date range picker: INSPIR-3203
 * reduces bundle size by removing unnecessary icons: INSPIR-3228
* upgrades to [email protected]
* 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
  • Loading branch information
harunurhan committed Mar 5, 2020
1 parent c0daa3d commit 54fc843
Show file tree
Hide file tree
Showing 149 changed files with 1,039 additions and 1,392 deletions.
11 changes: 6 additions & 5 deletions e2e/tests/submissions/conference.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ describe('conference submissions', () => {
addresses: [
{
city: 'Geneva',
country: 'Switzerland',
// Rest of the options are lazily rendered
country: 'Albania',
},
],
field_of_interest: ['Accelerators'],
Expand Down Expand Up @@ -66,8 +67,8 @@ describe('conference submissions', () => {
addresses: [
{
cities: ['Geneva'],
country: 'Switzerland',
country_code: 'CH',
country: 'Albaina',
country_code: 'AL',
},
],
opening_date: startDateMoment.format('YYYY-MM-DD'),
Expand Down Expand Up @@ -107,11 +108,11 @@ describe('conference submissions', () => {

await formSubmitter.fill({
name: 'Please come to my conference',
dates: [moment().add(20, 'day'), moment().add(24, 'day')],
dates: [moment().add(1, 'day'), moment().add(7, 'day')],
addresses: [
{
city: 'Stockholm',
country: 'Sweden',
country: 'Albania',
},
],
field_of_interest: ['Computing'],
Expand Down
36 changes: 26 additions & 10 deletions e2e/utils/form.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
/* eslint-disable no-await-in-loop, no-restricted-syntax */
const moment = require('moment');

const routes = require('./routes');
const { selectFromSelectBox, ID_ATTRIBUTE, TYPE_ATTRIBUTE } = require('./dom');

function joinPaths(...paths) {
return paths.filter(path => path != null).join('.');
}

async function fillDateInputElement(element, dateValue) {
const dateMoment = moment(dateValue);
const formattedDate = dateMoment.format('YYYY-MM-DD');
await element.type(formattedDate);
}

const SUBMIT_BUTTON_SELECTOR = 'button[type=submit]';

class FormSubmitter {
Expand Down Expand Up @@ -43,6 +50,7 @@ class FormSubmitter {
}

async fill(data) {
await this.page.waitFor('form');
await this.fillAnyField(null, data);
await this.page.click('form');
}
Expand All @@ -63,6 +71,9 @@ class FormSubmitter {
case 'string':
await this.fillNumberOrStringField(path, data);
break;
case 'suggester':
await this.fillSuggesterField(path, data);
break;
case 'single-select':
await this.fillSingleSelectField(path, data);
break;
Expand Down Expand Up @@ -142,6 +153,12 @@ class FormSubmitter {
}
}

async fillSuggesterField(path, value) {
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"]`;
const innerInputSelector = `${fieldSelector} input`;
await this.page.type(innerInputSelector, value);
}

async fillNumberOrStringField(path, value) {
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"]`;
await this.page.type(fieldSelector, value);
Expand All @@ -157,25 +174,24 @@ class FormSubmitter {
}
}

async selectDateOnActivePicker(date) {
const dateSelector = `[title="${moment(date).format('MMMM D, YYYY')}"]`;
await this.page.waitFor(dateSelector);
await this.page.click(dateSelector);
}

async fillDateField(path, value) {
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"]`;
await this.page.click(fieldSelector);
await this.selectDateOnActivePicker(value);
const fieldElement = await this.page.$(fieldSelector);
await fillDateInputElement(fieldElement, value);
}

async fillDateRangeField(path, [startDate, endDate]) {
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"]`;
await this.page.click(fieldSelector);
await this.selectDateOnActivePicker(startDate);
await this.selectDateOnActivePicker(endDate);
const inputsSelector = `${fieldSelector} input`;
const [startDateElement, endDateElement] = await this.page.$$(inputsSelector);
await fillDateInputElement(startDateElement, startDate);
await fillDateInputElement(endDateElement, endDate);
}




async fillRichTextField(path, value) {
const fieldSelector = `[${ID_ATTRIBUTE}="${path}"] [contenteditable=true]`;
await this.page.type(fieldSelector, value);
Expand Down
7 changes: 4 additions & 3 deletions ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "inspire-next-react",
"license": "GPL-2.0",
"version": "0.1.19",
"proxy": "localhost:8000",
"proxy": "http://localhost:8000",
"bundlesize": [
{
"path": "./build/**/*.js",
Expand All @@ -23,10 +23,11 @@
"./node_modules/eslint/bin/eslint.js ./src --ext .js,.jsx --config .eslintrc"
},
"dependencies": {
"@ant-design/icons": "^4.0.0",
"@babel/runtime": "7.0.0-beta.55",
"@craco/craco": "^3.1.0",
"@sentry/browser": "^4.3.0",
"antd": "^3.4.1",
"antd": "^4.0.0",
"axios": "^0.18.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.4.0",
Expand Down Expand Up @@ -58,7 +59,7 @@
"react-piwik": "^1.6.0",
"react-quill": "^1.3.3",
"react-redux": "^6.0.0",
"react-router-dom": "^4.2.2",
"react-router-dom": "^5.1.0",
"react-sanitized-html": "^2.0.0",
"react-scripts": "2.0.3",
"react-vis": "^1.9.2",
Expand Down
8 changes: 4 additions & 4 deletions ui/src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,6 @@
}
}

.mb4-important {
margin-bottom: 4px !important;
}

.secondary-color {
color: $secondary-color;
}
Expand Down Expand Up @@ -119,6 +115,10 @@
}
}

.mb2-important {
margin-bottom: 0.5rem !important;
}

.ant-drawer-body {
@media (max-width: $screen-xs-max) {
padding: $drawer-body-padding / 2 !important;
Expand Down
5 changes: 3 additions & 2 deletions ui/src/authors/components/AuthorEmailsAction.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { List } from 'immutable';
import { Menu, Icon, Tooltip } from 'antd';
import { MailOutlined } from '@ant-design/icons';
import { Menu, Tooltip } from 'antd';

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

const ACTION_TITLE = (
<Tooltip title="Contact author">
<Icon type="mail" />
<MailOutlined />
</Tooltip>
);

Expand Down
5 changes: 3 additions & 2 deletions ui/src/authors/components/AuthorLinkedinAction.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, Tooltip } from 'antd';
import { LinkedinOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';

import ListItemAction from '../../common/components/ListItemAction';
import ExternalLink from '../../common/components/ExternalLink';
Expand All @@ -13,7 +14,7 @@ class AuthorLinkedinAction extends Component {
<ListItemAction>
<Tooltip title="LinkedIn">
<ExternalLink href={href}>
<Icon type="linkedin" />
<LinkedinOutlined />
</ExternalLink>
</Tooltip>
</ListItemAction>
Expand Down
8 changes: 4 additions & 4 deletions ui/src/authors/components/AuthorOrcid/AuthorOrcid.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ class AuthorOrcid extends Component {
render() {
const { orcid } = this.props;
return (
<Tooltip title="ORCID">
<OrcidProfileLink className="__AuthorOrcid__" orcid={orcid}>
<OrcidProfileLink className="__AuthorOrcid__" orcid={orcid}>
<Tooltip title="ORCID">
<img src={orcidLogo} alt="ORCID" />
</OrcidProfileLink>
</Tooltip>
</Tooltip>
</OrcidProfileLink>
);
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AuthorOrcid renders with orcid 1`] = `
<Tooltip
arrowPointAtCenter={false}
autoAdjustOverflow={true}
mouseEnterDelay={0.1}
mouseLeaveDelay={0.1}
placement="top"
title="ORCID"
transitionName="zoom-big-fast"
<OrcidProfileLink
className="__AuthorOrcid__"
orcid="0000-0001-8058-0014"
>
<OrcidProfileLink
className="__AuthorOrcid__"
orcid="0000-0001-8058-0014"
<Tooltip
arrowPointAtCenter={false}
autoAdjustOverflow={true}
mouseEnterDelay={0.1}
mouseLeaveDelay={0.1}
placement="top"
title="ORCID"
transitionName="zoom-big-fast"
>
<img
alt="ORCID"
src="orcid.svg"
/>
</OrcidProfileLink>
</Tooltip>
</Tooltip>
</OrcidProfileLink>
`;
5 changes: 3 additions & 2 deletions ui/src/authors/components/AuthorTwitterAction.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Icon, Tooltip } from 'antd';
import { TwitterOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';

import ListItemAction from '../../common/components/ListItemAction';
import ExternalLink from '../../common/components/ExternalLink';
Expand All @@ -13,7 +14,7 @@ class AuthorTwitterAction extends Component {
<ListItemAction>
<Tooltip title="Twitter">
<ExternalLink href={href}>
<Icon type="twitter" />
<TwitterOutlined />
</ExternalLink>
</Tooltip>
</ListItemAction>
Expand Down
5 changes: 3 additions & 2 deletions ui/src/authors/components/AuthorWebsitesAction.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import React, { useMemo } from 'react';
import PropTypes from 'prop-types';
import { List } from 'immutable';
import { Menu, Icon, Tooltip } from 'antd';
import { LinkOutlined } from '@ant-design/icons';
import { Menu, Tooltip } from 'antd';

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

const ACTION_TITLE = (
<Tooltip title="Personal website">
<Icon type="link" />
<LinkOutlined />
</Tooltip>
);

Expand Down
3 changes: 2 additions & 1 deletion ui/src/authors/components/UserSettingsAction.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React, { useCallback, useState } from 'react';
import { Button } from 'antd';
import { SettingOutlined } from '@ant-design/icons';

import ListItemAction from '../../common/components/ListItemAction';
import IconText from '../../common/components/IconText';
Expand All @@ -18,7 +19,7 @@ function UserSettingsAction() {
<>
<ListItemAction>
<Button onClick={onClick}>
<IconText text="settings" type="setting" />
<IconText text="settings" icon={<SettingOutlined />} />
</Button>
</ListItemAction>
<UserSettingsModal
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ exports[`AuthorBAI renders 1`] = `
Author Identifier:
<Link
replace={false}
to="/literature?q=a%20F.Marchetto.1"
>
F.Marchetto.1
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@ exports[`AuthorEmailsAction renders multiple current emails in a dropdown 1`] =
title="Contact author"
transitionName="zoom-big-fast"
>
<Icon
type="mail"
/>
<ForwardRef(MailOutlined) />
</Tooltip>
</Button>
}
Expand Down Expand Up @@ -63,9 +61,7 @@ exports[`AuthorEmailsAction renders single email 1`] = `
title="Contact author"
transitionName="zoom-big-fast"
>
<Icon
type="mail"
/>
<ForwardRef(MailOutlined) />
</Tooltip>
</ExternalLink>
</ListItemAction>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ exports[`AuthorLinkedinAction renders with linkedin 1`] = `
<ExternalLink
href="//linkedin.com/in/harunurhan"
>
<Icon
type="linkedin"
/>
<ForwardRef(LinkedinOutlined) />
</ExternalLink>
</Tooltip>
</ListItemAction>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ exports[`AuthorResultItem renders full author result 1`] = `
>
<Link
className="f4"
replace={false}
to="/authors/12345"
>
<AuthorName
Expand Down Expand Up @@ -71,7 +70,6 @@ exports[`AuthorResultItem renders with only name 1`] = `
>
<Link
className="f4"
replace={false}
to="/authors/12345"
>
<AuthorName
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ exports[`AuthorTwitterAction renders with twitter 1`] = `
<ExternalLink
href="//twitter.com/harunurhan"
>
<Icon
type="twitter"
/>
<ForwardRef(TwitterOutlined) />
</ExternalLink>
</Tooltip>
</ListItemAction>
Expand Down
Loading

0 comments on commit 54fc843

Please sign in to comment.