refactor(chrome): migrate class components to function components

Rewrite LoadingIndicator, HeaderBadge, HeaderExtension, and
HeaderHelpMenu as function components with hooks. Extract shared
breadcrumb mapping into prepareBreadcrumbs utility and duplicate
hasBeta$ observable logic into useHasAppMenuConfig hook. Narrow
BehaviorSubject to Observable in GridLayoutProjectSideNav props.

Closes elastic/kibana-team#2651

Author: Dosant

src/core/packages/chrome/browser-internal/src/ui/breadcrumb_utils.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import classNames from 'classnames';
+import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
+
+/** Maps raw ChromeBreadcrumb[] to EUI-compatible breadcrumb props */
+export function prepareBreadcrumbs(breadcrumbs: ChromeBreadcrumb[]) {
+  const crumbs = breadcrumbs.length === 0 ? [{ text: 'Kibana' } as ChromeBreadcrumb] : breadcrumbs;
+
+  return crumbs.map((breadcrumb, i) => {
+    const isLast = i === crumbs.length - 1;
+    const { deepLinkId, ...rest } = breadcrumb;
+
+    return {
+      ...rest,
+      href: isLast ? undefined : breadcrumb.href,
+      onClick: isLast ? undefined : breadcrumb.onClick,
+      'data-test-subj': classNames(
+        'breadcrumb',
+        deepLinkId && `breadcrumb-deepLinkId-${deepLinkId}`,
+        breadcrumb['data-test-subj'],
+        i === 0 && 'first',
+        isLast && 'last'
+      ),
+    };
+  });
+}

src/core/packages/chrome/browser-internal/src/ui/header/header.tsx

@@ -17,10 +17,9 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import classnames from 'classnames';
-import React, { createRef, useState, useMemo } from 'react';
+import React, { createRef, useState } from 'react';
 import type { Observable } from 'rxjs';
-import { map, EMPTY } from 'rxjs';
-import useObservable from 'react-use/lib/useObservable';
+
 import type { HttpStart } from '@kbn/core-http-browser';
 import type { InternalApplicationStart } from '@kbn/core-application-browser-internal';
 import type {
@@ -49,6 +48,7 @@ import { HeaderActionMenu, useHeaderActionMenuMounter } from './header_action_me
 import { BreadcrumbsWithExtensionsWrapper } from './breadcrumbs_with_extensions';
 import { HeaderMenuButton } from './header_menu_button';
 import { HeaderPageAnnouncer } from './header_page_announcer';
+import { useHasAppMenuConfig } from '../use_has_app_menu_config';
 
 export interface HeaderProps {
   kibanaVersion: string;
@@ -95,14 +95,7 @@ export function Header({
   const [navId] = useState(htmlIdGenerator()());
   const headerActionMenuMounter = useHeaderActionMenuMounter(application.currentActionMenu$);
 
-  const hasBeta$ = useMemo(
-    () =>
-      observables.appMenu$?.pipe(
-        map((config) => !!config && !!config.items && config.items.length > 0)
-      ) ?? EMPTY,
-    [observables.appMenu$]
-  );
-  const hasBetaConfig = useObservable(hasBeta$, false);
+  const hasBetaConfig = useHasAppMenuConfig(observables.appMenu$);
 
   const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const className = classnames('hide-for-sharing', 'headerGlobalNav');

src/core/packages/chrome/browser-internal/src/ui/header/header_badge.tsx

@@ -7,77 +7,34 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { Component } from 'react';
-import type * as Rx from 'rxjs';
+import React from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import type { Observable } from 'rxjs';
 import { EuiBetaBadge } from '@elastic/eui';
 import type { ChromeBadge } from '@kbn/core-chrome-browser';
 
 interface Props {
-  badge$: Rx.Observable<ChromeBadge | undefined>;
+  badge$: Observable<ChromeBadge | undefined>;
 }
 
-interface State {
-  badge: ChromeBadge | undefined;
-}
-
-export class HeaderBadge extends Component<Props, State> {
-  private subscription?: Rx.Subscription;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.state = { badge: undefined };
-  }
+export const HeaderBadge = ({ badge$ }: Props) => {
+  const badge = useObservable(badge$, undefined);
 
-  public componentDidMount() {
-    this.subscribe();
+  if (badge == null) {
+    return null;
   }
 
-  public componentDidUpdate(prevProps: Props) {
-    if (prevProps.badge$ === this.props.badge$) {
-      return;
-    }
-
-    this.unsubscribe();
-    this.subscribe();
-  }
-
-  public componentWillUnmount() {
-    this.unsubscribe();
-  }
-
-  public render() {
-    if (this.state.badge == null) {
-      return null;
-    }
-
-    return (
-      <div css={({ euiTheme }) => ({ alignSelf: 'center', marginRight: euiTheme.size.s })}>
-        <EuiBetaBadge
-          alignment="middle"
-          data-test-subj="headerBadge"
-          data-test-badge-label={this.state.badge.text}
-          tabIndex={0}
-          label={this.state.badge.text}
-          tooltipContent={this.state.badge.tooltip}
-          iconType={this.state.badge.iconType}
-        />
-      </div>
-    );
-  }
-
-  private subscribe() {
-    this.subscription = this.props.badge$.subscribe((badge) => {
-      this.setState({
-        badge,
-      });
-    });
-  }
-
-  private unsubscribe() {
-    if (this.subscription) {
-      this.subscription.unsubscribe();
-      this.subscription = undefined;
-    }
-  }
-}
+  return (
+    <div css={({ euiTheme }) => ({ alignSelf: 'center', marginRight: euiTheme.size.s })}>
+      <EuiBetaBadge
+        alignment="middle"
+        data-test-subj="headerBadge"
+        data-test-badge-label={badge.text}
+        tabIndex={0}
+        label={badge.text}
+        tooltipContent={badge.tooltip}
+        iconType={badge.iconType}
+      />
+    </div>
+  );
+};

src/core/packages/chrome/browser-internal/src/ui/header/header_breadcrumbs.tsx

@@ -8,41 +8,19 @@
  */
 
 import { EuiHeaderBreadcrumbs } from '@elastic/eui';
-import classNames from 'classnames';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import type { Observable } from 'rxjs';
 import type { ChromeBreadcrumb } from '@kbn/core-chrome-browser';
+import { prepareBreadcrumbs } from '../breadcrumb_utils';
 
 interface Props {
   breadcrumbs$: Observable<ChromeBreadcrumb[]>;
 }
 
 export function HeaderBreadcrumbs({ breadcrumbs$ }: Props) {
   const breadcrumbs = useObservable(breadcrumbs$, []);
-  let crumbs = breadcrumbs;
-
-  if (breadcrumbs.length === 0) {
-    crumbs = [{ text: 'Kibana' }];
-  }
-
-  crumbs = crumbs.map((breadcrumb, i) => {
-    const isLast = i === breadcrumbs.length - 1;
-    const { deepLinkId, ...rest } = breadcrumb;
-
-    return {
-      ...rest,
-      href: isLast ? undefined : breadcrumb.href,
-      onClick: isLast ? undefined : breadcrumb.onClick,
-      'data-test-subj': classNames(
-        'breadcrumb',
-        deepLinkId && `breadcrumb-deepLinkId-${deepLinkId}`,
-        breadcrumb['data-test-subj'],
-        i === 0 && 'first',
-        isLast && 'last'
-      ),
-    };
-  });
+  const crumbs = prepareBreadcrumbs(breadcrumbs);
 
   return <EuiHeaderBreadcrumbs breadcrumbs={crumbs} max={10} data-test-subj="breadcrumbs" />;
 }

src/core/packages/chrome/browser-internal/src/ui/header/header_extension.tsx

@@ -8,7 +8,7 @@
  */
 
 import { css } from '@emotion/react';
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import type { MountPoint } from '@kbn/core-mount-utils-browser';
 
 interface Props {
@@ -17,57 +17,28 @@ interface Props {
   containerClassName?: string;
 }
 
-export class HeaderExtension extends React.Component<Props> {
-  private readonly ref = React.createRef<HTMLDivElement>();
-  private unrender?: () => void;
-
-  public componentDidMount() {
-    this.renderExtension();
-  }
-
-  public componentDidUpdate(prevProps: Props) {
-    if (this.props.extension === prevProps.extension) {
-      return;
-    }
-
-    this.unrenderExtension();
-    this.renderExtension();
-  }
-
-  public componentWillUnmount() {
-    this.unrenderExtension();
-  }
-
-  public render() {
-    return (
-      <div
-        css={css`
-          &:empty {
-            // empty containers should be removed from the layout flow
-            display: contents;
-          }
-        `}
-        ref={this.ref}
-        className={this.props.containerClassName}
-        style={{ display: this.props.display === 'inlineBlock' ? 'inline-block' : undefined }}
-      />
-    );
-  }
-
-  private renderExtension() {
-    if (!this.ref.current) {
-      throw new Error('<HeaderExtension /> mounted without ref');
-    }
-
-    if (this.props.extension) {
-      this.unrender = this.props.extension(this.ref.current);
-    }
-  }
-
-  private unrenderExtension() {
-    if (this.unrender) {
-      this.unrender();
-      this.unrender = undefined;
-    }
-  }
-}
+export const HeaderExtension = ({ extension, display, containerClassName }: Props) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current || !extension) return;
+    const unrender = extension(ref.current);
+    return () => {
+      unrender?.();
+    };
+  }, [extension]);
+
+  return (
+    <div
+      css={css`
+        &:empty {
+          // empty containers should be removed from the layout flow
+          display: contents;
+        }
+      `}
+      ref={ref}
+      className={containerClassName}
+      style={{ display: display === 'inlineBlock' ? 'inline-block' : undefined }}
+    />
+  );
+};