ui: upgrade to ant-design v4

* 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 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
harunurhan · Mar 5, 2020 · 238e456 · 238e456
1 parent c0daa3d
commit 238e456
Show file tree

Hide file tree

Showing 153 changed files with 1,061 additions and 1,399 deletions.
diff --git a/e2e/tests/submissions/conference.test.js b/e2e/tests/submissions/conference.test.js
@@ -1,7 +1,7 @@
 const moment = require('moment');
 const { ResponseInterceptor } = require('../../utils/interceptors');
 const { login } = require('../../utils/user');
-const { FormSubmitter } = require('../../utils/form');
+const { FormSubmitter, DATE_FORMAT } = require('../../utils/form');
 const routes = require('../../utils/routes');
 
 describe('conference submissions', () => {
@@ -49,7 +49,6 @@ describe('conference submissions', () => {
       additional_info: 'This is some additional info',
       keywords: ['keyword1', 'keyword2'],
     });
-
     await formSubmitter.waitForSubmissionSuccess();
 
     const submitResponse = interceptor.getFirstResponseByUrl(
@@ -70,8 +69,8 @@ describe('conference submissions', () => {
           country_code: 'CH',
         },
       ],
-      opening_date: startDateMoment.format('YYYY-MM-DD'),
-      closing_date: endDateMoment.format('YYYY-MM-DD'),
+      opening_date: startDateMoment.format(DATE_FORMAT),
+      closing_date: endDateMoment.format(DATE_FORMAT),
       inspire_categories: [{ term: 'Accelerators' }],
       keywords: [{ value: 'keyword1' }, { value: 'keyword2' }],
       public_notes: [{ value: 'This is some additional info' }],
@@ -107,11 +106,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: 'Switzerland',
         },
       ],
       field_of_interest: ['Computing'],

diff --git a/e2e/tests/submissions/job.test.js b/e2e/tests/submissions/job.test.js
@@ -1,7 +1,7 @@
 const moment = require('moment');
 const { ResponseInterceptor } = require('../../utils/interceptors');
 const { login } = require('../../utils/user');
-const { FormSubmitter } = require('../../utils/form');
+const { FormSubmitter, DATE_FORMAT } = require('../../utils/form');
 const routes = require('../../utils/routes');
 
 describe('job submissions', () => {
@@ -70,7 +70,7 @@ describe('job submissions', () => {
       urls: [{ value: 'https://someinfo.com' }],
       deadline_date: moment()
         .add(1, 'day')
-        .format('YYYY-MM-DD'),
+        .format(DATE_FORMAT),
       contact_details: [
         {
           name: 'John Doe',

diff --git a/e2e/utils/dom.js b/e2e/utils/dom.js
@@ -4,9 +4,10 @@ const TYPE_ATTRIBUTE = 'data-test-type';
 async function selectFromSelectBox(page, selectId, value) {
   const selectSelector = `[${ID_ATTRIBUTE}="${selectId}"]`;
   const selectOptionSelector = `[${ID_ATTRIBUTE}="${selectId}-option-${value}"]`;
+  const optionSearchSelector = `${selectSelector} input`;
 
-  // click selecbox to render options into DOM incase not there
-  await page.click(selectSelector);
+  // type optio to selecbox to make sure it is rendered into DOM
+  await page.type(optionSearchSelector, value);
   await page.waitFor(selectOptionSelector);
 
   // close it because puppeteer sometimes clicks on other option accidentally

diff --git a/e2e/utils/form.js b/e2e/utils/form.js
@@ -1,13 +1,21 @@
 /* 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');
 
+const SUBMIT_BUTTON_SELECTOR = 'button[type=submit]';
+const DATE_FORMAT = 'YYYY-MM-DD';
+
 function joinPaths(...paths) {
   return paths.filter(path => path != null).join('.');
 }
 
-const SUBMIT_BUTTON_SELECTOR = 'button[type=submit]';
+async function fillDateInputElement(element, dateValue) {
+  const dateMoment = moment(dateValue);
+  const formattedDate = dateMoment.format(DATE_FORMAT);
+  await element.type(formattedDate);
+}
 
 class FormSubmitter {
   constructor(page) {
@@ -43,6 +51,7 @@ class FormSubmitter {
   }
 
   async fill(data) {
+    await this.page.waitFor('form');
     await this.fillAnyField(null, data);
     await this.page.click('form');
   }
@@ -63,6 +72,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;
@@ -142,6 +154,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);
@@ -157,23 +175,22 @@ 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 [startDateInputElement, endDateInputElement] = await this.page.$$(inputsSelector);
+
+    await fillDateInputElement(startDateInputElement, startDate);
+    await fillDateInputElement(endDateInputElement, endDate);
+
+    await endDateInputElement.press('Enter');
   }
 
   async fillRichTextField(path, value) {
@@ -185,4 +202,5 @@ class FormSubmitter {
 module.exports = {
   FormSubmitter,
   SUBMIT_BUTTON_SELECTOR,
+  DATE_FORMAT,
 };
diff --git a/ui/package.json b/ui/package.json
@@ -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",
@@ -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",
@@ -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",

diff --git a/ui/src/App.scss b/ui/src/App.scss
@@ -46,10 +46,6 @@
     }
   }
 
-  .mb4-important {
-    margin-bottom: 4px !important;
-  }
-
   .secondary-color {
     color: $secondary-color;
   }
@@ -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;

diff --git a/ui/src/authors/components/AuthorEmailsAction.jsx b/ui/src/authors/components/AuthorEmailsAction.jsx
@@ -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';
@@ -26,7 +27,7 @@ function renderEmailAction(email, title) {
 
 const ACTION_TITLE = (
   <Tooltip title="Contact author">
-    <Icon type="mail" />
+    <MailOutlined />
   </Tooltip>
 );
 

diff --git a/ui/src/authors/components/AuthorLinkedinAction.jsx b/ui/src/authors/components/AuthorLinkedinAction.jsx
@@ -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';
@@ -13,7 +14,7 @@ class AuthorLinkedinAction extends Component {
       <ListItemAction>
         <Tooltip title="LinkedIn">
           <ExternalLink href={href}>
-            <Icon type="linkedin" />
+            <LinkedinOutlined />
           </ExternalLink>
         </Tooltip>
       </ListItemAction>

diff --git a/ui/src/authors/components/AuthorOrcid/AuthorOrcid.jsx b/ui/src/authors/components/AuthorOrcid/AuthorOrcid.jsx
@@ -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>
     );
   }
 }

diff --git a/ui/src/authors/components/AuthorOrcid/__tests__/__snapshots__/AuthorOrcid.test.jsx.snap b/ui/src/authors/components/AuthorOrcid/__tests__/__snapshots__/AuthorOrcid.test.jsx.snap
@@ -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>
 `;
diff --git a/ui/src/authors/components/AuthorTwitterAction.jsx b/ui/src/authors/components/AuthorTwitterAction.jsx
@@ -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';
@@ -13,7 +14,7 @@ class AuthorTwitterAction extends Component {
       <ListItemAction>
         <Tooltip title="Twitter">
           <ExternalLink href={href}>
-            <Icon type="twitter" />
+            <TwitterOutlined />
           </ExternalLink>
         </Tooltip>
       </ListItemAction>

diff --git a/ui/src/authors/components/AuthorWebsitesAction.jsx b/ui/src/authors/components/AuthorWebsitesAction.jsx
@@ -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';
@@ -48,7 +49,7 @@ function renderWebsiteAction(website, title) {
 
 const ACTION_TITLE = (
   <Tooltip title="Personal website">
-    <Icon type="link" />
+    <LinkOutlined />
   </Tooltip>
 );
 

diff --git a/ui/src/authors/components/UserSettingsAction.jsx b/ui/src/authors/components/UserSettingsAction.jsx
@@ -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';
@@ -18,7 +19,7 @@ function UserSettingsAction() {
     <>
       <ListItemAction>
         <Button onClick={onClick}>
-          <IconText text="settings" type="setting" />
+          <IconText text="settings" icon={<SettingOutlined />} />
         </Button>
       </ListItemAction>
       <UserSettingsModal

diff --git a/ui/src/authors/components/__tests__/__snapshots__/AuthorBAI.test.jsx.snap b/ui/src/authors/components/__tests__/__snapshots__/AuthorBAI.test.jsx.snap
@@ -5,7 +5,6 @@ exports[`AuthorBAI renders 1`] = `
   Author Identifier:
    
   <Link
-    replace={false}
     to="/literature?q=a%20F.Marchetto.1"
   >
     F.Marchetto.1

diff --git a/ui/src/authors/components/__tests__/__snapshots__/AuthorEmailsAction.test.jsx.snap b/ui/src/authors/components/__tests__/__snapshots__/AuthorEmailsAction.test.jsx.snap
@@ -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>
     }
@@ -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>