fix: Don't crash when hovering hotbar menu index

- Remove all uses of React.ReactNode as it is unsafe, replace them with
  usages of SafeReactNode which doesn't contain the '{}' type

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/ui-components/button/src/button.tsx

@@ -6,11 +6,11 @@
 import "./button.scss";
 import type { ButtonHTMLAttributes } from "react";
 import React from "react";
-import { cssNames } from "@k8slens/utilities";
+import { cssNames, SafeReactNode, SingleOrMany } from "@k8slens/utilities";
 import { withTooltip } from "@k8slens/tooltip";
 
 export interface ButtonProps extends ButtonHTMLAttributes<any> {
-  label?: React.ReactNode;
+  label?: SafeReactNode;
   waiting?: boolean;
   primary?: boolean;
   accent?: boolean;
@@ -23,6 +23,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<any> {
   round?: boolean;
   href?: string; // render as hyperlink
   target?: "_blank"; // in case of using @href
+  children?: SingleOrMany<SafeReactNode>;
 }
 
 export const Button = withTooltip((props: ButtonProps) => {

packages/ui-components/error-boundary/src/error-boundary.tsx

@@ -9,7 +9,7 @@ import type { ErrorInfo } from "react";
 import React from "react";
 import { observer } from "mobx-react";
 import { Button } from "@k8slens/button";
-import type { SingleOrMany } from "@k8slens/utilities";
+import type { SafeReactNode, SingleOrMany } from "@k8slens/utilities";
 import type { ObservableHistory } from "mobx-observable-history";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import { observableHistoryInjectionToken } from "@k8slens/routing";
@@ -18,7 +18,7 @@ const issuesTrackerUrl = "https://github.com/lensapp/lens/issues";
 const forumsUrl = "https://forums.k8slens.dev";
 
 export interface ErrorBoundaryProps {
-  children?: SingleOrMany<React.ReactNode>;
+  children?: SingleOrMany<SafeReactNode>;
 }
 
 interface State {

packages/ui-components/tooltip/src/tooltip.tsx

@@ -8,7 +8,7 @@ import "./tooltip.scss";
 import React from "react";
 import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
-import type { IClassName } from "@k8slens/utilities";
+import type { IClassName, SafeReactNode } from "@k8slens/utilities";
 import { cssNames } from "@k8slens/utilities";
 import { observable, makeObservable, action, runInAction } from "mobx";
 import autoBindReact from "auto-bind/react";
@@ -35,7 +35,7 @@ export interface TooltipProps {
   className?: IClassName;
   formatters?: TooltipContentFormatters;
   style?: React.CSSProperties;
-  children?: React.ReactNode;
+  children?: SafeReactNode;
   "data-testid"?: string;
 }
 

packages/ui-components/tooltip/src/withTooltip.test.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type { SingleOrMany } from "@k8slens/utilities";
+import type { SafeReactNode, SingleOrMany } from "@k8slens/utilities";
 import { render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
@@ -12,7 +12,7 @@ import { withTooltip } from "./withTooltip";
 type MyComponentProps = {
   text: string;
   id?: string;
-  children?: SingleOrMany<React.ReactNode>;
+  children?: SingleOrMany<SafeReactNode>;
   "data-testid"?: string;
 };
 

packages/ui-components/tooltip/src/withTooltip.tsx

@@ -3,23 +3,22 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type { ReactNode } from "react";
 import React, { useState } from "react";
 import type { TooltipProps } from "./tooltip";
 import { Tooltip } from "./tooltip";
-import { isReactNode } from "@k8slens/utilities";
+import { isReactNode, SafeReactNode } from "@k8slens/utilities";
 import uniqueId from "lodash/uniqueId";
 import type { SingleOrMany } from "@k8slens/utilities";
 
 export interface TooltipDecoratorProps {
-  tooltip?: ReactNode | Omit<TooltipProps, "targetId">;
+  tooltip?: SafeReactNode | Omit<TooltipProps, "targetId">;
   /**
    * forces tooltip to detect the target's parent for mouse events. This is
    * useful for displaying tooltips even when the target is "disabled"
    */
   tooltipOverrideDisabled?: boolean;
   id?: string;
-  children?: SingleOrMany<React.ReactNode>;
+  children?: SingleOrMany<SafeReactNode>;
 }
 
 export function withTooltip<TargetProps>(