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

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 (