chore(deps): upgrade typescript [EE-4841] (#8247)

.storybook/main.js

@@ -52,4 +52,7 @@ module.exports = {
     builder: 'webpack5',
   },
   staticDirs: ['./public'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
 };

app/portainer/helpers/promise-utils.ts

@@ -3,10 +3,10 @@
  *
  * @param promises a list of functions that return promises
  */
-export function promiseSequence<T>(promises: (() => Promise<T>)[]) {
+export function promiseSequence(promises: (() => Promise<unknown>)[]) {
   return promises.reduce(
-    (promise, nextPromise) => promise.then(() => nextPromise()),
-    Promise.resolve<T>(undefined as unknown as T)
+    (promise, nextPromise) => promise.then(nextPromise),
+    Promise.resolve(undefined as unknown)
   );
 }
 

app/react-tools/react-query.ts

@@ -64,7 +64,7 @@ function mergeOptions<T>(options: T[]) {
       ...acc,
       ...option,
     }),
-    {}
+    {} as T
   );
 }
 

app/react-tools/react2angular.tsx

@@ -35,7 +35,7 @@ type PropNames<T> = Exclude<keyof T, number | symbol>;
  * if the second parameter has any ts errors check that the component has the correct props
  */
 export function react2angular<T, U extends PropNames<T>[]>(
-  Component: React.ComponentType<T>,
+  Component: React.ComponentType<T & JSX.IntrinsicAttributes>,
   propNames: U & ([PropNames<T>] extends [U[number]] ? unknown : PropNames<T>)
 ): IComponentOptions & { name: string } {
   const bindings = Object.fromEntries(propNames.map((key) => [key, '<']));
@@ -61,7 +61,7 @@ export function react2angular<T, U extends PropNames<T>[]>(
         ReactDOM.render(
           <StrictMode>
             {/* eslint-disable-next-line react/jsx-props-no-spreading */}
-            <Component {...(props as T)} />
+            <Component {...(props as T & JSX.IntrinsicAttributes)} />
           </StrictMode>,
 
           el

app/react-tools/withCurrentUser.tsx

@@ -5,13 +5,13 @@ import { UserProvider } from '@/react/hooks/useUser';
 import { withReactQuery } from './withReactQuery';
 
 export function withCurrentUser<T>(
-  WrappedComponent: ComponentType<T>
-): ComponentType<T> {
+  WrappedComponent: ComponentType<T & JSX.IntrinsicAttributes>
+): ComponentType<T & JSX.IntrinsicAttributes> {
   // Try to create a nice displayName for React Dev Tools.
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     return (
       <UserProvider>
         <WrappedComponent {...props} />

app/react-tools/withI18nSuspense.tsx

@@ -7,7 +7,7 @@ export function withI18nSuspense<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     return (
       <Suspense fallback="Loading translations...">
         <WrappedComponent {...props} />

app/react-tools/withReactQuery.tsx

@@ -4,14 +4,14 @@ import { QueryClientProvider } from 'react-query';
 import { queryClient as defaultQueryClient } from './react-query';
 
 export function withReactQuery<T>(
-  WrappedComponent: ComponentType<T>,
+  WrappedComponent: ComponentType<T & JSX.IntrinsicAttributes>,
   queryClient = defaultQueryClient
-): ComponentType<T> {
+): ComponentType<T & JSX.IntrinsicAttributes> {
   // Try to create a nice displayName for React Dev Tools.
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     return (
       <QueryClientProvider client={queryClient}>
         <WrappedComponent {...props} />

app/react-tools/withUIRouter.tsx

@@ -8,7 +8,7 @@ export function withUIRouter<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     return (
       <UIRouterContextComponent>
         <WrappedComponent {...props} />

app/react/components/datatables/types.ts

@@ -13,12 +13,12 @@ export type ZustandSetFunc<T> = (
   replace?: boolean | undefined
 ) => void;
 
-export function paginationSettings(
-  set: ZustandSetFunc<PaginationTableSettings>
+export function paginationSettings<T extends PaginationTableSettings>(
+  set: ZustandSetFunc<T>
 ): PaginationTableSettings {
   return {
     pageSize: 10,
-    setPageSize: (pageSize: number) => set({ pageSize }),
+    setPageSize: (pageSize: number) => set((s) => ({ ...s, pageSize })),
   };
 }
 
@@ -27,8 +27,8 @@ export interface SortableTableSettings {
   setSortBy: (id: string, desc: boolean) => void;
 }
 
-export function sortableSettings(
-  set: ZustandSetFunc<SortableTableSettings>,
+export function sortableSettings<T extends SortableTableSettings>(
+  set: ZustandSetFunc<T>,
   initialSortBy: string | { id: string; desc: boolean }
 ): SortableTableSettings {
   return {
@@ -36,7 +36,8 @@ export function sortableSettings(
       typeof initialSortBy === 'string'
         ? { id: initialSortBy, desc: false }
         : initialSortBy,
-    setSortBy: (id: string, desc: boolean) => set({ sortBy: { id, desc } }),
+    setSortBy: (id: string, desc: boolean) =>
+      set((s) => ({ ...s, sortBy: { id, desc } })),
   };
 }
 
@@ -45,12 +46,13 @@ export interface SettableColumnsTableSettings {
   setHiddenColumns: (hiddenColumns: string[]) => void;
 }
 
-export function hiddenColumnsSettings(
-  set: ZustandSetFunc<SettableColumnsTableSettings>
+export function hiddenColumnsSettings<T extends SettableColumnsTableSettings>(
+  set: ZustandSetFunc<T>
 ): SettableColumnsTableSettings {
   return {
     hiddenColumns: [],
-    setHiddenColumns: (hiddenColumns: string[]) => set({ hiddenColumns }),
+    setHiddenColumns: (hiddenColumns: string[]) =>
+      set((s) => ({ ...s, hiddenColumns })),
   };
 }
 
@@ -59,12 +61,13 @@ export interface RefreshableTableSettings {
   setAutoRefreshRate: (autoRefreshRate: number) => void;
 }
 
-export function refreshableSettings(
-  set: ZustandSetFunc<RefreshableTableSettings>
+export function refreshableSettings<T extends RefreshableTableSettings>(
+  set: ZustandSetFunc<T>
 ): RefreshableTableSettings {
   return {
     autoRefreshRate: 0,
-    setAutoRefreshRate: (autoRefreshRate: number) => set({ autoRefreshRate }),
+    setAutoRefreshRate: (autoRefreshRate: number) =>
+      set((s) => ({ ...s, autoRefreshRate })),
   };
 }
 

app/react/hooks/useLimitToBE.tsx

@@ -21,7 +21,7 @@ export function withLimitToBE<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     const isLimitedToBE = useLimitToBE(defaultPath);
 
     if (isLimitedToBE) {

app/react/hooks/withHideOnExtension.tsx

@@ -10,7 +10,7 @@ export function withHideOnExtension<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     if (window.ddExtension) {
       return null;
     }

app/react/kubernetes/datatables/DefaultDatatableSettings.tsx

@@ -16,15 +16,16 @@ export interface TableSettings
     RefreshableTableSettings,
     SystemResourcesTableSettings {}
 
-export function systemResourcesSettings(
-  set: ZustandSetFunc<SystemResourcesTableSettings>
+export function systemResourcesSettings<T extends SystemResourcesTableSettings>(
+  set: ZustandSetFunc<T>
 ): SystemResourcesTableSettings {
   return {
     showSystemResources: false,
     setShowSystemResources(showSystemResources: boolean) {
-      set({
+      set((s) => ({
+        ...s,
         showSystemResources,
-      });
+      }));
     },
   };
 }

app/react/portainer/feature-flags/withEdition.tsx

@@ -8,7 +8,7 @@ export function withEdition<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     if (process.env.PORTAINER_EDITION !== edition) {
       return null;
     }

app/react/portainer/feature-flags/withFeatureFlag.tsx

@@ -10,7 +10,7 @@ export function withFeatureFlag<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     const featureFlagQuery = useFeatureFlag(flag);
 
     if (!featureFlagQuery.data) {

app/react/test-utils/withUserProvider.tsx

@@ -21,7 +21,7 @@ export function withUserProvider<T>(
   const displayName =
     WrappedComponent.displayName || WrappedComponent.name || 'Component';
 
-  function WrapperComponent(props: T) {
+  function WrapperComponent(props: T & JSX.IntrinsicAttributes) {
     const state = useMemo(() => ({ user }), []);
 
     return (

package.json

@@ -199,6 +199,7 @@
     "postcss-loader": "^6.2.1",
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.1",
+    "react-docgen-typescript-plugin": "^1.0.5",
     "react-test-renderer": "^17.0.2",
     "source-map-loader": "^3.0.0",
     "speed-measure-webpack-plugin": "^1.5.0",
@@ -207,7 +208,7 @@
     "swagger2openapi": "^7.0.8",
     "tailwindcss": "^3.1.4",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.5.2",
+    "typescript": "^5.0.4",
     "webpack": "^5.65.0",
     "webpack-build-notifier": "^2.3.0",
     "webpack-bundle-analyzer": "^4.5.0",

yarn.lock

@@ -15016,7 +15016,20 @@ react-datetime-picker@^4.2.0:
     react-fit "^1.4.0"
     react-time-picker "^5.2.0"
 
-react-docgen-typescript@^2.1.1:
+react-docgen-typescript-plugin@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-docgen-typescript-plugin/-/react-docgen-typescript-plugin-1.0.5.tgz#015d8350b06a450d98000080d8ae5eac475e9f79"
+  integrity sha512-Ds6s2ioyIlH45XSfEVMNwRcDkzuff3xQCPxDFOzTc8GEshy+hksas8RYlmV4JEQREI+OGEGybhMCJk3vFbQZNQ==
+  dependencies:
+    debug "^4.1.1"
+    endent "^2.0.1"
+    find-cache-dir "^3.3.1"
+    flat-cache "^3.0.4"
+    micromatch "^4.0.2"
+    react-docgen-typescript "^2.2.2"
+    tslib "^2.0.0"
+
+react-docgen-typescript@^2.1.1, react-docgen-typescript@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c"
   integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==
@@ -17381,10 +17394,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.5.2:
-  version "4.5.5"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
-  integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==
+typescript@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
+  integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==
 
 uglify-js@3.4.x:
   version "3.4.10"