From 20db7a9d2d78f9ae91ee20b5a5552cf22e45ee12 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Tue, 13 Jun 2023 08:25:35 +0200
Subject: [PATCH] [Lens] Remove deprecated componentWillReceiveProps usage
 (#159502)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

### Testing
The `componentWillReceiveProps` method added to `ErrorBoundary` was
making sure that when we change the errored state of the visualization
to the correct one, the UI will recover. To make sure it works with the
new solution I followed the following steps:
1. Open Lens and React dev tools.
2. In React dev tools, search for WorkspacePanel and select surrounding
it `ErrorBoundary`.
3. In dev tools, modify the state of originalError to any string - the
UI will reflect it.
4. change the state of the UI by dropping the field to dimension.
5. The UI recovered. WorkspacePanel displays again 🎉


https://github.com/elastic/kibana/assets/4283304/af6198da-cc97-40a8-9cfc-763edec67bf1


Fixes #159501
---
 .../lens/public/lens_ui_errors/error_boundary.tsx      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/lens/public/lens_ui_errors/error_boundary.tsx b/x-pack/plugins/lens/public/lens_ui_errors/error_boundary.tsx
index ff62171d42df7..d86415ee65525 100644
--- a/x-pack/plugins/lens/public/lens_ui_errors/error_boundary.tsx
+++ b/x-pack/plugins/lens/public/lens_ui_errors/error_boundary.tsx
@@ -23,9 +23,9 @@ const RecallError = ({ error }: { error: Error }) => {
 };
 
 export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  constructor(props: ErrorBoundaryProps) {
-    super(props);
-  }
+  state = {
+    originalError: undefined,
+  };
 
   static getDerivedStateFromError(error: Error) {
     // Update state so the next render will show the fallback UI.
@@ -36,8 +36,8 @@ export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoun
     this.props.onError?.(error);
   }
 
-  componentWillReceiveProps() {
-    this.setState({ originalError: undefined });
+  static getDerivedStateFromProps() {
+    return { originalError: undefined };
   }
 
   render() {