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() {