Update to React 17 (#4057)

* Update to React 17

* Update network diagram canvas to use `componentDidUpdate` instead of `componentWillReceiveProps`

The latter has been deprecated and will stop working in React 18

* Update network diagram entity viewer to avoid `componentWillReceiveProps`

The `EntityViewer` component displays a list of fields for the following entity properties:

1. Feature properties (no matter whether the property has a value or not)
2. Properties with at least one value
3. Properties manually added by the user using the "Add a property" select

The previous implementation kept a list of all visible properties (1-3) in the component state. It used the `componentWillReceiveProps` hook to reset this list when a user selected a different entity. The new implementation keeps only the selected properties (3) in the component state. Featured and non-empty properties (1+2) can be derived from the `entity` property at render time. In order to reset the list of selected properties when the user selects a different entity, we use the entity ID as a key. When the entity ID changes, React instantiates a new component (with fresh state) rather than reusing the component rendered for the previous entity.

* Compute schema properties at render time

The previous implementation computed this once when the component is instantiated, this type of state is a common source of bugs. The new implementation computes the list at render time which has a small, but negligible overhead, and is simpler.

* Replace `react-truncate` with a CSS-only implementation

… as `react-truncate` hasn’t been updated for a long time and is incompatible with React 17+.

ui/package.json

@@ -31,11 +31,11 @@
     "numeral": "^2.0.6",
     "papaparse": "^5.4.1",
     "query-string": "^9.1.1",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-colorful": "^5.5.1",
     "react-countup": "^6.5.3",
     "react-datasheet": "1.4.12",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-draggable": "^4.4.6",
     "react-dropzone": "^14.3.5",
     "react-helmet": "^6.0.0-beta",
@@ -44,7 +44,6 @@
     "react-pdf": "^7.7.3",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.28.0",
-    "react-truncate": "^2.4.0",
     "react-waypoint": "^10.1.0",
     "recharts": "^2.13.3",
     "redux": "^4.2.1",

ui/src/components/AuthButtons/AuthButtons.jsx

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import Truncate from 'react-truncate';
 import { Button, Classes, Menu, MenuDivider } from '@blueprintjs/core';
 import { Popover2 as Popover } from '@blueprintjs/popover2';
 
@@ -156,9 +155,9 @@ export class AuthButtons extends Component {
             }
           >
             <Button icon="user" minimal rightIcon="caret-down">
-              <Truncate lines={2} width={120}>
+              <span className="AuthButtons__label">
                 {role ? role.name : 'Profile'}
-              </Truncate>
+              </span>
             </Button>
           </Popover>
         </span>

ui/src/components/AuthButtons/AuthButtons.scss

@@ -25,4 +25,11 @@
       }
     }
   }
+
+  &__label {
+    display: -webkit-box;
+    max-width: 120px;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }

ui/src/components/common/Summary.jsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
-import Truncate from 'react-truncate';
 import { Classes } from '@blueprintjs/core';
 import c from 'classnames';
 
+import './Summary.scss';
+
 // formats markdown elements to plain text
 const simpleRenderer = ({ children }) => (
   <>
@@ -28,13 +29,21 @@ const Summary = ({ className, text, truncate }) => {
   return (
     <div
       className={c(
+        'Summary',
         className,
         Classes.RUNNING_TEXT,
         Classes.TEXT_MUTED,
         'text-markdown'
       )}
     >
-      {truncate && <Truncate lines={truncate}>{content}</Truncate>}
+      {truncate && (
+        <span
+          className="Summary__truncate"
+          style={{ '--truncate-lines': truncate }}
+        >
+          {content}
+        </span>
+      )}
       {!truncate && content}
     </div>
   );

ui/src/components/common/Summary.scss

@@ -0,0 +1,5 @@
+.Summary__truncate {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

ui/src/react-ftm/components/NetworkDiagram/renderer/Canvas.tsx

@@ -209,11 +209,11 @@ export class Canvas extends React.Component<ICanvasProps> {
     this.props.actions.addVertex({ initialPosition: gridTarget });
   }
 
-  componentWillReceiveProps(nextProps: Readonly<ICanvasProps>): void {
+  componentDidUpdate(prevProps: Readonly<ICanvasProps>): void {
     this.animationHandler(
-      nextProps.animateTransition,
-      this.props.viewBox || '',
-      nextProps.viewBox || ''
+      this.props.animateTransition,
+      prevProps.viewBox || '',
+      this.props.viewBox || ''
     );
   }
 

ui/src/react-ftm/components/NetworkDiagram/toolbox/EntityViewer.tsx

@@ -28,7 +28,7 @@ interface IEntityViewerProps {
 }
 
 interface IEntityViewerState {
-  visibleProps: FTMProperty[];
+  selectedProperties: FTMProperty[];
   currEditing: FTMProperty | null;
 }
 
@@ -37,17 +37,13 @@ export class EntityViewer extends React.PureComponent<
   IEntityViewerState
 > {
   static contextType = GraphContext;
-  private schemaProperties: FTMProperty[];
 
   constructor(props: IEntityViewerProps) {
     super(props);
-    this.schemaProperties = props.entity.schema
-      .getEditableProperties()
-      .sort((a, b) => a.label.localeCompare(b.label));
 
     this.state = {
-      visibleProps: this.getVisibleProperties(props),
       currEditing: null,
+      selectedProperties: [],
     };
 
     this.onNewPropertySelected = this.onNewPropertySelected.bind(this);
@@ -56,29 +52,27 @@ export class EntityViewer extends React.PureComponent<
     this.onEditPropertyClick = this.onEditPropertyClick.bind(this);
   }
 
-  getVisibleProperties(props = this.props) {
-    const { entity } = props;
+  getSchemaProperties(): FTMProperty[] {
+    return this.props.entity.schema
+      .getEditableProperties()
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }
+
+  getVisibleProperties(): FTMProperty[] {
+    const { entity } = this.props;
 
     return Array.from(
       new Set([
         ...entity.schema.getFeaturedProperties(),
         ...entity.getProperties(),
+        ...this.state.selectedProperties,
       ])
     );
   }
 
-  componentWillReceiveProps(nextProps: Readonly<IEntityViewerProps>): void {
-    if (this.props.entity !== nextProps.entity) {
-      this.schemaProperties = nextProps.entity.schema.getEditableProperties();
-      this.setState({
-        visibleProps: this.getVisibleProperties(nextProps),
-      });
-    }
-  }
-
   onNewPropertySelected(p: FTMProperty) {
-    this.setState(({ visibleProps }) => ({
-      visibleProps: [...visibleProps, ...[p]],
+    this.setState(({ selectedProperties }) => ({
+      selectedProperties: [...selectedProperties, p],
       currEditing: null,
     }));
   }
@@ -127,8 +121,8 @@ export class EntityViewer extends React.PureComponent<
   render() {
     const { writeable } = this.context;
     const { entity, vertexRef } = this.props;
-    const { visibleProps } = this.state;
-    const availableProperties = this.schemaProperties.filter(
+    const visibleProps = this.getVisibleProperties();
+    const availableProperties = this.getSchemaProperties().filter(
       (p) => visibleProps.indexOf(p) < 0
     );
     const hasCaption = entity.getCaption() !== entity.schema.label;

ui/src/react-ftm/components/NetworkDiagram/toolbox/Sidebar.tsx

@@ -137,6 +137,7 @@ export class Sidebar extends React.Component<ISidebarProps> {
       }
       contents = (
         <EntityViewer
+          key={entity.id}
           entity={entity}
           onEntityChanged={this.onEntityChanged}
           vertexRef={vertexRef}