ui: upgrade to ant-design v4

* upgrades to antd to v4 * 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
harunurhan · Mar 3, 2020 · ac75ef7 · ac75ef7
1 parent d37787f
commit ac75ef7
Show file tree

Hide file tree

Showing 82 changed files with 663 additions and 720 deletions.
diff --git a/e2e/utils/form.js b/e2e/utils/form.js
@@ -63,6 +63,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 +145,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);

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://locahost: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/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/containers/SearchPageContainer.jsx b/ui/src/authors/containers/SearchPageContainer.jsx
@@ -11,8 +11,8 @@ import LoadingOrChildren from '../../common/components/LoadingOrChildren';
 import DocumentHead from '../../common/components/DocumentHead';
 import { AUTHORS_NS } from '../../reducers/search';
 
-const META_DESCRIPTION = "Find authors in High Energy Physics"
-const TITLE = "Authors Search"
+const META_DESCRIPTION = 'Find authors in High Energy Physics';
+const TITLE = 'Authors Search';
 
 class SearchPage extends Component {
   static renderAuthorItem(result) {
@@ -27,7 +27,7 @@ class SearchPage extends Component {
         <Row className="mt3" gutter={32} type="flex" justify="center">
           <Col xs={24} lg={16} xl={16} xxl={14}>
             <LoadingOrChildren loading={loading}>
-              <Row type="flex">
+              <Row>
                 <Col>
                   <NumberOfResultsContainer namespace={AUTHORS_NS} />
                 </Col>

diff --git a/ui/src/common/components/AggregationBox.jsx b/ui/src/common/components/AggregationBox.jsx
@@ -9,12 +9,14 @@ class AggregationBox extends Component {
     return (
       <div className={classNames('w-100 br1', className)}>
         <Row type="flex" justify="space-between">
-          <Col>
+          <Col flex="auto">
             <h3 className="pb1">{name}</h3>
           </Col>
           <Col>{headerAction}</Col>
         </Row>
-        <Row className="w-100">{children}</Row>
+        <Row className="w-100">
+          <Col flex="auto">{children}</Col>
+        </Row>
       </div>
     );
   }

diff --git a/ui/src/common/components/AggregationFilters.jsx b/ui/src/common/components/AggregationFilters.jsx
@@ -53,7 +53,6 @@ class AggregationFilters extends Component {
                 key={aggregationKey}
                 xs={24}
                 lg={inline ? 5 : 24}
-                gutter={32}
               >
                 <EventTracker
                   eventId={`Facet-${aggregation.getIn(['meta', 'title'])}`}

diff --git a/ui/src/common/components/CheckboxAggregation.jsx b/ui/src/common/components/CheckboxAggregation.jsx
@@ -117,6 +117,9 @@ class CheckboxAggregation extends Component {
     const { selectionMap } = this.state;
     const { splitDisplayName, bucketHelp } = this.props;
     const bucketKey = bucket.get('key');
+    const bucketDisplay = splitDisplayName
+      ? bucketKey.split(BUCKET_NAME_SPLITTER)[1]
+      : bucketKey;
 
     return (
       <Row className="mb2" type="flex" justify="space-between" key={bucketKey}>
@@ -127,9 +130,7 @@ class CheckboxAggregation extends Component {
               this.onSelectionChange(bucketKey, checked);
             }}
           >
-            {splitDisplayName
-              ? bucketKey.split(BUCKET_NAME_SPLITTER)[1]
-              : bucketKey}
+            {bucketDisplay}
             {bucketHelp &&
               CheckboxAggregation.renderBucketHelpTooltip(
                 bucketHelp.get(bucketKey)

diff --git a/ui/src/common/components/EditRecordAction.jsx b/ui/src/common/components/EditRecordAction.jsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { EditOutlined } from '@ant-design/icons';
 
 import ListItemAction from './ListItemAction';
 import IconText from './IconText';
@@ -30,7 +31,7 @@ class EditRecordAction extends Component {
           <ExternalLink
             href={`${pidTypeToEditRoutePrefix[pidType]}/${pidValue}`}
           >
-            <IconText text="edit" type="edit" />
+            <IconText text="edit" icon={<EditOutlined />} />
           </ExternalLink>
         </EventTracker>
       </ListItemAction>

diff --git a/ui/src/common/components/HelpIconTooltip.jsx b/ui/src/common/components/HelpIconTooltip.jsx
@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
-import { Tooltip, Icon } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
 import PropTypes from 'prop-types';
 
 class HelpIconTooltip extends Component {
   render() {
     const { help } = this.props;
     return (
       <Tooltip title={help}>
-        <Icon type="question-circle-o" />
+        <QuestionCircleOutlined />
       </Tooltip>
     );
   }

diff --git a/ui/src/common/components/IconText/IconText.jsx b/ui/src/common/components/IconText/IconText.jsx
@@ -1,23 +1,22 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Icon } from 'antd';
 
 import './IconText.scss';
 
 class IconText extends Component {
   render() {
-    const { type, text } = this.props;
+    const { icon, text } = this.props;
     return (
       <span className="__IconText__">
-        <Icon className="icon" type={type} />
+        <span className="icon">{icon}</span>
         {text}
       </span>
     );
   }
 }
 
 IconText.propTypes = {
-  type: PropTypes.string.isRequired,
+  icon: PropTypes.node.isRequired,
   text: PropTypes.string.isRequired,
 };
 

diff --git a/ui/src/common/components/IconText/__tests__/IconText.test.jsx b/ui/src/common/components/IconText/__tests__/IconText.test.jsx
@@ -1,16 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme';
+import { InfoOutlined } from '@ant-design/icons';
 
 import IconText from '../IconText';
 
 describe('IconText', () => {
   it('renders with all props set', () => {
-    const wrapper = shallow((
-      <IconText
-        type="info"
-        text="Test"
-      />
-    ));
+    const wrapper = shallow(<IconText icon={<InfoOutlined />} text="Test" />);
     expect(wrapper).toMatchSnapshot();
   });
 });
diff --git a/ui/src/common/components/ListItemAction/__tests__/ListItemAction.test.jsx b/ui/src/common/components/ListItemAction/__tests__/ListItemAction.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Button } from 'antd';
+import { ExpandOutlined } from '@ant-design/icons';
 
 import IconText from '../../IconText';
 import ListItemAction from '../ListItemAction';
@@ -10,7 +11,7 @@ describe('ListItemAction', () => {
     const wrapper = shallow(
       <ListItemAction>
         <Button>
-          <IconText text="cite" type="export" />
+          <IconText text="cite" icon={<ExpandOutlined />} />
         </Button>
       </ListItemAction>
     );

diff --git a/ui/src/common/components/ModalSuccessResult.jsx b/ui/src/common/components/ModalSuccessResult.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Icon } from 'antd';
+import { CheckCircleTwoTone } from '@ant-design/icons';
 import PropTypes from 'prop-types';
 
 import styleVariables from '../../styleVariables';
@@ -11,11 +11,7 @@ class ModalSuccessResult extends Component {
     return (
       <div>
         <div className="mb4 tc f-5">
-          <Icon
-            type="check-circle"
-            theme="twoTone"
-            twoToneColor={styleVariables['success-color']}
-          />
+          <CheckCircleTwoTone twoToneColor={styleVariables['success-color']} />
         </div>
         <div className="tc f5">{children}</div>
       </div>

diff --git a/ui/src/common/components/SelectBox.jsx b/ui/src/common/components/SelectBox.jsx
@@ -8,15 +8,15 @@ class SelectBox extends Component {
     return (
       <Select dropdownMatchSelectWidth={false} showArrow {...selectProps}>
         {options.map(option => (
-          <Select.Option
-            data-test-id={
-              selectProps['data-test-id'] &&
-              `${selectProps['data-test-id']}-option-${option.value}`
-            }
-            key={option.value}
-            value={option.value}
-          >
-            {option.display || option.value}
+          <Select.Option key={option.value} value={option.value}>
+            <span
+              data-test-id={
+                selectProps['data-test-id'] &&
+                `${selectProps['data-test-id']}-option-${option.value}`
+              }
+            >
+              {option.display || option.value}
+            </span>
           </Select.Option>
         ))}
       </Select>