Chore: Convert to functional components (#112951)

* refactor ErrorBoundary so it doesn't trigger the lint rule

* refactor ErrorBoundaryAlert to functional component

* convert StatPanel to a functional component

* convert ServiceAccountPicker to a functional component

* convert UserPicker to a functional component

* don't need displayName when not memoized

* convert TimelineChart to a functional component

* convert UserLdapSyncInfo to a functional component

* convert UserOrgs to functional component

* convert OrgRow to a functional component

* convert UserSessions to a functional component

* convert TimePickerSettings to a functional component

* convert DataSourcePluginSettings to a functional component

* convert ExploreTimeControls to a functional component

* convert SearchBarInput to a functional component

* convert LiveConnectionWarning to a functional component

* convert ConcatenateTransformerEditor

* convert ConstantVariableEditor a functional component

* convert VariableInput to a functional component

* convert ConfigEditor to a functional component

* convert CSVWavesEditor to a functional component

packages/grafana-sql/src/components/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Component, ErrorInfo, PropsWithChildren } from 'react';
 
 import { Trans } from '@grafana/i18n';
 
@@ -6,14 +6,14 @@ type Props = {
   fallBackComponent?: React.ReactNode;
 };
 
-export class ErrorBoundary extends React.Component<React.PropsWithChildren<Props>, { hasError: boolean }> {
-  constructor(props: React.PropsWithChildren<Props>) {
+export class ErrorBoundary extends Component<React.PropsWithChildren<Props>, { hasError: boolean }> {
+  constructor(props: PropsWithChildren<Props>) {
     super(props);
     this.state = { hasError: false };
   }
 
-  static getDerivedStateFromError() {
-    return { hasError: true };
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ hasError: true });
   }
 
   render() {

packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,6 +1,7 @@
-import { PureComponent, ReactNode, ComponentType, ErrorInfo } from 'react';
+import { PureComponent, ReactNode, ComponentType, ErrorInfo, memo } from 'react';
 
 import { faro } from '@grafana/faro-web-sdk';
+import { t } from '@grafana/i18n';
 
 import { Alert } from '../Alert/Alert';
 
@@ -116,15 +117,9 @@ export interface ErrorBoundaryAlertProps {
   errorLogger?: (error: Error) => void;
 }
 
-export class ErrorBoundaryAlert extends PureComponent<ErrorBoundaryAlertProps> {
-  static defaultProps: Partial<ErrorBoundaryAlertProps> = {
-    title: 'An unexpected error happened',
-    style: 'alertbox',
-  };
-
-  render() {
-    const { title, children, style, dependencies, errorLogger, boundaryName } = this.props;
-
+export const ErrorBoundaryAlert = memo(
+  ({ title, children, style = 'alertbox', dependencies, errorLogger, boundaryName }: ErrorBoundaryAlertProps) => {
+    const alertTitle = title ?? t('grafana-ui.error-boundary.title', 'An unexpected error happened');
     return (
       <ErrorBoundary dependencies={dependencies} errorLogger={errorLogger} boundaryName={boundaryName}>
         {({ error, errorInfo }) => {
@@ -134,7 +129,7 @@ export class ErrorBoundaryAlert extends PureComponent<ErrorBoundaryAlertProps> {
 
           if (style === 'alertbox') {
             return (
-              <Alert title={title || ''}>
+              <Alert title={alertTitle}>
                 <details style={{ whiteSpace: 'pre-wrap' }}>
                   {error && error.toString()}
                   <br />
@@ -144,12 +139,14 @@ export class ErrorBoundaryAlert extends PureComponent<ErrorBoundaryAlertProps> {
             );
           }
 
-          return <ErrorWithStack title={title || ''} error={error} errorInfo={errorInfo} />;
+          return <ErrorWithStack title={alertTitle} error={error} errorInfo={errorInfo} />;
         }}
       </ErrorBoundary>
     );
   }
-}
+);
+
+ErrorBoundaryAlert.displayName = 'ErrorBoundaryAlert';
 
 /**
  * HOC for wrapping a component in an error boundary.