Update to React 17

Signed-off-by: Anish Asthana <[email protected]>

frontend/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.0.0",
-    "@material-ui/core": "^3.9.1",
-    "@material-ui/icons": "^3.0.1",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
     "@types/lodash.groupby": "^4.6.6",
     "@types/pako": "^1.0.3",
     "brace": "^0.11.1",
@@ -29,17 +29,16 @@
     "proto3-json-serializer": "^0.1.6",
     "protobufjs": "~6.11.2",
     "re-resizable": "^4.9.0",
-    "react": "^16.12.0",
-    "react-ace": "^7.0.2",
-    "react-dom": "^16.12.0",
+    "react": "^17.0.2",
+    "react-ace": "^9.5.0",
+    "react-dom": "^17.0.2",
     "react-dropzone": "^5.1.0",
     "react-flow-renderer": "^9.6.3",
     "react-query": "^3.16.0",
     "react-router-dom": "^4.3.1",
-    "react-svg-line-chart": "^2.0.2",
     "react-textarea-autosize": "^8.3.3",
-    "react-virtualized": "^9.20.1",
-    "react-vis": "^1.11.2",
+    "react-virtualized": "^9.22.3",
+    "recharts": "^2.10.4",
     "request": "^2.88.2",
     "runtypes": "^6.3.0",
     "ts-proto": "^1.95.0",
@@ -110,7 +109,7 @@
     "@types/d3-dsv": "^1.0.33",
     "@types/dagre": "^0.7.40",
     "@types/enzyme": "^3.10.3",
-    "@types/enzyme-adapter-react-16": "^1.0.5",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
     "@types/express": "^4.16.0",
     "@types/google-protobuf": "^3.7.2",
     "@types/http-proxy-middleware": "^0.17.5",
@@ -120,24 +119,23 @@
     "@types/markdown-to-jsx": "^6.9.0",
     "@types/node": "^10.17.60",
     "@types/prettier": "^1.19.0",
-    "@types/react": "^16.9.22",
-    "@types/react-dom": "^16.9.5",
+    "@types/react": "^17.0.2",
+    "@types/react-dom": "^17.0.2",
     "@types/react-router-dom": "^4.3.1",
     "@types/react-test-renderer": "^16.0.2",
     "@types/react-virtualized": "^9.18.7",
     "autoprefixer": "^10.4.1",
     "browserslist": "4.16.5",
     "coveralls": "^3.0.2",
     "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.3.4",
     "fs": "0.0.1-security",
     "jest-environment-jsdom-sixteen": "^2.0.0",
     "postcss": "^8.4.5",
     "prettier": "1.19.1",
     "react-router-test-context": "^0.1.0",
     "react-scripts": "^5.0.0",
-    "react-test-renderer": "^16.5.2",
+    "react-test-renderer": "^17.0.2",
     "snapshot-diff": "^0.6.1",
     "swagger-ts-client": "^0.9.6",
     "tailwindcss": "^3.0.11",

frontend/src/Css.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { createTheme } from '@material-ui/core/styles';
 import { style, stylesheet } from 'typestyle';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
@@ -109,32 +109,24 @@ const palette = {
   },
 };
 
-export const theme = createMuiTheme({
+export const theme = createTheme({
   overrides: {
     MuiButton: {
-      flat: {
+      text: {
         fontSize: fontsize.base,
         fontWeight: 'bold',
         minHeight: dimension.tiny,
         textTransform: 'none',
       },
-      flatPrimary: {
+      contained: {
         border: '1px solid #ddd',
         cursor: 'pointer',
         fontSize: fontsize.base,
         marginRight: 10,
         textTransform: 'none',
       },
-      flatSecondary: {
-        color: color.theme,
-      },
       root: {
-        '&$disabled': {
-          backgroundColor: 'initial',
-        },
-        color: color.theme,
-        marginRight: 10,
-        padding: '0 8px',
+        minWidth: 0,
       },
     },
     MuiDialogActions: {
@@ -193,8 +185,7 @@ export const theme = createMuiTheme({
   palette,
   typography: {
     fontFamily: fonts.main,
-    fontSize: (fontsize.base + ' !important') as any,
-    useNextVariants: true,
+    fontSize: 14, // base font size in pixels
   },
 });
 

frontend/src/components/Editor.tsx

@@ -16,28 +16,37 @@
 
 import AceEditor from 'react-ace';
 
+// Extend the AceEditor types to include the internal editor object
+interface ExtendedAceEditor extends AceEditor {
+  editor: any; // Using any here as the Ace editor types are complex
+}
+
 // Modified AceEditor that supports HTML within provided placeholder. This is
 // important because it allows for the usage of multi-line placeholders.
 class Editor extends AceEditor {
   public updatePlaceholder(): void {
-    const editor = this.editor;
+    const editor = (this as ExtendedAceEditor).editor;
     const { placeholder } = this.props;
 
     const showPlaceholder = !editor.session.getValue().length;
-    let node = editor.renderer.placeholderNode;
+    let node = editor.renderer.placeholderNode as HTMLDivElement | null;
+
     if (!showPlaceholder && node) {
-      editor.renderer.scroller.removeChild(editor.renderer.placeholderNode);
+      if (editor.renderer.scroller.contains(node)) {
+        editor.renderer.scroller.removeChild(node);
+      }
       editor.renderer.placeholderNode = null;
     } else if (showPlaceholder && !node) {
-      node = editor.renderer.placeholderNode = document.createElement('div');
+      node = document.createElement('div');
       node.innerHTML = placeholder || '';
       node.className = 'ace_comment ace_placeholder';
       node.style.padding = '0 9px';
       node.style.position = 'absolute';
       node.style.zIndex = '3';
+      editor.renderer.placeholderNode = node;
       editor.renderer.scroller.appendChild(node);
     } else if (showPlaceholder && node) {
-      node.innerHTML = placeholder;
+      node.innerHTML = placeholder || '';
     }
   }
 }

frontend/src/components/ExperimentList.tsx

@@ -109,7 +109,7 @@ export class ExperimentList extends React.PureComponent<ExperimentListProps, Exp
     props: CustomRendererProps<string>,
   ) => {
     return (
-      <Tooltip title={props.value} enterDelay={300} placement='top-start'>
+      <Tooltip title={props.value || ''} enterDelay={300} placement='top-start'>
         <Link
           className={commonCss.link}
           onClick={e => e.stopPropagation()}

frontend/src/components/Trigger.tsx

@@ -355,8 +355,8 @@ export default class Trigger extends React.Component<TriggerProps, TriggerState>
                 <Separator />
                 {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
                   <Button
-                    variant='fab'
-                    mini={true}
+                    variant='contained'
+                    size='small'
                     key={i}
                     onClick={() => this._toggleDay(i)}
                     color={selectedDays[i] ? 'primary' : 'secondary'}

frontend/src/components/graph/SubDagLayer.tsx

@@ -41,10 +41,9 @@ const baseLinkButton: React.CSSProperties = {
   padding: 0,
 };
 const baseBreadcrumb = {
-  ...baseLinkButton,
   fontFamily: fonts.secondary,
   fontWeight: 500,
-};
+} as const;
 const actionBarCss = stylesheet({
   actionButton: {
     color: color.strong,

frontend/src/components/navigators/PipelineVersionCard.tsx

@@ -67,7 +67,8 @@ export function PipelineVersionCard({
                       aria-label='version_selector'
                       data-testid='version_selector'
                       value={selectedVersion!.pipeline_version_id}
-                      onChange={event => handleVersionSelected(event.target.value)}
+                      onChange={(event: React.ChangeEvent<{ value: unknown }>) =>
+                        handleVersionSelected(event.target.value as string)}
                       inputProps={{ id: 'version-selector', name: 'selectedVersion' }}
                     >
                       {versions.map((v, _) => (

frontend/src/components/viewers/PagedTable.tsx

@@ -152,8 +152,8 @@ class PagedTable extends Viewer<PagedTableProps, PagedTableState> {
           count={data.length}
           rowsPerPage={rowsPerPage}
           page={page}
-          onChangePage={this._handleChangePage}
-          onChangeRowsPerPage={this._handleChangeRowsPerPage}
+          onPageChange={this._handleChangePage}
+          onRowsPerPageChange={this._handleChangeRowsPerPage}
         />
       </div>
     );