app: frontend: plugins: Update typescript version to 5.5.4 and fix type

errors

Signed-off-by: Oleksandr Dubenko <[email protected]>

app/package.json

@@ -161,7 +161,10 @@
     "jest": "^29.7.0",
     "mime-types": "^2.1.35",
     "octokit": "^4.0.2",
-    "typescript": "5.5.3"
+    "typescript": "5.5.4"
+  },
+  "overrides": {
+    "typescript": "5.5.4"
   },
   "dependencies": {
     "copyfiles": "^2.4.1",

frontend/package.json

@@ -87,7 +87,7 @@
     "spacetime": "^7.4.0",
     "stream-browserify": "^3.0.0",
     "stream-http": "^3.2.0",
-    "typescript": "4.5.5",
+    "typescript": "5.5.4",
     "url": "^0.11.0",
     "util": "^0.12.4",
     "vfile": "^5.3.0",
@@ -100,7 +100,8 @@
     "xterm-addon-search": "^0.9.0"
   },
   "overrides": {
-    "domain-browser": "npm:dry-uninstall"
+    "domain-browser": "npm:dry-uninstall",
+    "typescript": "5.5.4"
   },
   "scripts": {
     "prestart": "npm run make-version",

frontend/src/components/cluster/Chooser.tsx

@@ -15,9 +15,10 @@ import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import _ from 'lodash';
-import React, { isValidElement, PropsWithChildren } from 'react';
+import React, { ComponentType, isValidElement, PropsWithChildren } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
+import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { useDispatch } from 'react-redux';
 import { generatePath } from 'react-router';
 import { useHistory } from 'react-router-dom';
@@ -33,7 +34,7 @@ import ActionButton from '../common/ActionButton';
 import { DialogTitle } from '../common/Dialog';
 import ErrorBoundary from '../common/ErrorBoundary';
 import Loader from '../common/Loader';
-import ClusterChooser from './ClusterChooser';
+import ClusterChooser, { ClusterChooserProps } from './ClusterChooser';
 import ClusterChooserPopup from './ClusterChooserPopup';
 
 export interface ClusterTitleProps {
@@ -49,7 +50,8 @@ export function ClusterTitle(props: ClusterTitleProps) {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const buttonRef = React.useRef<HTMLButtonElement>(null);
   const arePluginsLoaded = useTypedSelector(state => state.plugins.loaded);
-  const ChooserButton = useTypedSelector(state => state.ui.clusterChooserButtonComponent);
+  const ChooserButton: ReactElement | ComponentType<ClusterChooserProps> | null | undefined =
+    useTypedSelector(state => state.ui.clusterChooserButtonComponent);
 
   useHotkeys(
     'ctrl+shift+l',

frontend/src/components/common/ErrorBoundary/ErrorBoundary.tsx

@@ -1,4 +1,4 @@
-import { Children, Component, ComponentType, isValidElement, ReactElement } from 'react';
+import { Component, ComponentType, isValidElement, ReactElement } from 'react';
 import { eventAction, HeadlampEventType } from '../../../redux/headlampEventSlice';
 import store from '../../../redux/stores/store';
 
@@ -52,6 +52,10 @@ export default class ErrorBoundary extends Component<ErrorBoundaryProps, State>
     if (isValidElement(this.props.fallback)) {
       return this.props.fallback;
     }
-    return this.props.fallback ? Children.toArray([<this.props.fallback error={error} />]) : null;
+    const FallbackComponent = this.props.fallback as
+      | ComponentType<{ error: Error }>
+      | undefined
+      | null;
+    return FallbackComponent ? <FallbackComponent error={error} /> : null;
   }
 }

plugins/headlamp-plugin/package.json

@@ -144,7 +144,7 @@
     "stream-http": "^3.2.0",
     "style-loader": "^3.3.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
-    "typescript": "4.5.5",
+    "typescript": "5.5.4",
     "url": "^0.11.0",
     "url-loader": "^4.1.1",
     "util": "^0.12.4",
@@ -159,6 +159,9 @@
     "xterm-addon-search": "^0.9.0",
     "yargs": "^16.2.0"
   },
+  "overrides": {
+    "typescript": "5.5.4"
+  },
   "files": [
     "bin",
     "config",