fix(code/frontend): replace deprecated react lifecycle methods (#31874)

x-pack/plugins/code/public/components/admin_page/project_tab.tsx

@@ -78,6 +78,13 @@ interface State {
 }
 
 class CodeProjectTab extends React.PureComponent<Props, State> {
+  public static getDerivedStateFromProps(props: Props, state: State) {
+    if (state.showImportProjectModal && !props.importLoading) {
+      return { showImportProjectModal: false };
+    }
+    return null;
+  }
+
   constructor(props: Props) {
     super(props);
     this.state = {
@@ -88,12 +95,6 @@ class CodeProjectTab extends React.PureComponent<Props, State> {
     };
   }
 
-  public componentWillReceiveProps(nextProps: Props) {
-    if (this.props.importLoading && !nextProps.importLoading) {
-      this.closeModal();
-    }
-  }
-
   public closeModal = () => {
     this.setState({ showImportProjectModal: false });
   };

x-pack/plugins/code/public/components/codeblock/codeblock.tsx

@@ -93,16 +93,16 @@ export class CodeBlock extends React.PureComponent<Props> {
     }
   }
 
-  public componentWillReceiveProps(nextProps: Readonly<Props>, nextContext: any): void {
+  public componentDidUpdate(prevProps: Readonly<Props>) {
     if (
-      nextProps.code !== this.props.code ||
-      nextProps.highlightRanges !== this.props.highlightRanges
+      prevProps.code !== this.props.code ||
+      prevProps.highlightRanges !== this.props.highlightRanges
     ) {
       if (this.ed) {
-        this.ed.getModel().setValue(nextProps.code);
+        this.ed.getModel().setValue(this.props.code);
 
-        if (nextProps.highlightRanges) {
-          const decorations = nextProps.highlightRanges!.map((range: IRange) => {
+        if (this.props.highlightRanges) {
+          const decorations = this.props.highlightRanges!.map((range: IRange) => {
             return {
               range,
               options: {

x-pack/plugins/code/public/components/diff_page/diff_editor.tsx

@@ -27,8 +27,10 @@ export class DiffEditor extends React.Component<Props> {
     this.diffEditor.init();
   };
 
-  public componentWillReceiveProps(nextProps: Props) {
-    this.updateLayout(nextProps.renderSideBySide);
+  public componentDidUpdate(prevProps: Props) {
+    if (prevProps.renderSideBySide !== this.props.renderSideBySide) {
+      this.updateLayout(this.props.renderSideBySide);
+    }
   }
 
   public updateLayout(renderSideBySide: boolean) {

x-pack/plugins/code/public/components/editor/editor.tsx

@@ -71,29 +71,29 @@ export class EditorComponent extends React.Component<IProps> {
     }
   }
 
-  public componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.revealPosition && nextProps.revealPosition !== this.props.revealPosition) {
-      this.revealPosition(nextProps.revealPosition);
+  public componentDidUpdate(prevProps: Props) {
+    if (this.props.revealPosition && prevProps.revealPosition !== this.props.revealPosition) {
+      this.revealPosition(this.props.revealPosition);
     }
-    const { file } = nextProps;
+    const { file } = this.props;
     const currentFileContent = this.props.file.content;
     if (file.content && file.content !== currentFileContent) {
       const { uri, path, revision } = file.payload;
       this.loadText(file.content, uri, path, file.lang!, revision).then(() => {
-        if (nextProps.revealPosition) {
-          this.revealPosition(nextProps.revealPosition);
+        if (this.props.revealPosition) {
+          this.revealPosition(this.props.revealPosition);
         }
       });
     }
-    if (nextProps.showBlame !== this.props.showBlame && nextProps.showBlame) {
-      this.loadBlame(nextProps.blames);
+    if (prevProps.showBlame !== this.props.showBlame && this.props.showBlame) {
+      this.loadBlame(this.props.blames);
       this.monaco!.editor!.updateOptions({ lineHeight: 38 });
-    } else if (!nextProps.showBlame) {
+    } else if (!this.props.showBlame) {
       this.destroyBlameWidgets();
       this.monaco!.editor!.updateOptions({ lineHeight: 24 });
     }
-    if (nextProps.blames !== this.props.blames && nextProps.showBlame) {
-      this.loadBlame(nextProps.blames);
+    if (prevProps.blames !== this.props.blames && this.props.showBlame) {
+      this.loadBlame(this.props.blames);
       this.monaco!.editor!.updateOptions({ lineHeight: 38 });
     }
   }

x-pack/plugins/code/public/components/main/version_dropdown.tsx

@@ -53,12 +53,12 @@ export class VersionDropDownComponent extends React.Component<Props, State> {
     this.props.fetchRepoCommits({ uri: this.props.repoUri, revision: this.props.head });
   }
 
-  public componentWillReceiveProps(nextProps: Readonly<Props>): void {
-    if (nextProps.repoUri !== this.props.repoUri) {
-      this.props.fetchRepoBranches({ uri: nextProps.repoUri });
-      this.props.fetchRepoCommits({ uri: nextProps.repoUri, revision: nextProps.head });
-    } else if (nextProps.head !== this.props.head) {
-      this.props.fetchRepoCommits({ uri: nextProps.repoUri, revision: nextProps.head });
+  public componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (this.props.repoUri !== prevProps.repoUri) {
+      this.props.fetchRepoBranches({ uri: this.props.repoUri });
+      this.props.fetchRepoCommits({ uri: this.props.repoUri, revision: this.props.head });
+    } else if (prevProps.head !== this.props.head) {
+      this.props.fetchRepoCommits({ uri: this.props.repoUri, revision: this.props.head });
     }
   }
 

x-pack/plugins/code/public/components/route.ts

@@ -5,7 +5,7 @@
  */
 
 import { connect } from 'react-redux';
-import { Route as ReactRoute, RouteProps } from 'react-router';
+import { Route as ReactRoute, RouteProps } from 'react-router-dom';
 import { Match, routeChange } from '../actions';
 
 interface Props extends RouteProps {