From 2b4d60486c189c33dd79893e0d1626b84d19db78 Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Fri, 13 Dec 2024 10:00:21 +0100
Subject: [PATCH] fix(components): update AsyncComponent TS interface

---
 packages/components/src/AsyncComponent/index.tsx   | 14 +++++++++-----
 .../components/src/Inventory/TagWithDialog.tsx     |  2 +-
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/AsyncComponent/index.tsx b/packages/components/src/AsyncComponent/index.tsx
index e65ce1b44..827200cd8 100644
--- a/packages/components/src/AsyncComponent/index.tsx
+++ b/packages/components/src/AsyncComponent/index.tsx
@@ -7,16 +7,17 @@ import { ChromeAPI } from '@redhat-cloud-services/types';
 
 export type ExcludeModulesKeys = 'module' | 'scope';
 
-export type AsyncComponentProps = {
+export type AsyncComponentProps<T extends object = object> = {
   /** Loaded module, it has to start with `./`. */
   module: string;
   /** Optional scope, if not passed appName is used. */
   scope: string;
   /** React Suspense fallback component. <a href="https://reactjs.org/docs/code-splitting.html#reactlazy" target="_blank">Learn more</a>. */
-  fallback: React.ReactElement;
+  fallback?: React.ReactElement;
   /** Optional wrapper component */
-  component: keyof JSX.IntrinsicElements;
-} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+  component?: keyof JSX.IntrinsicElements;
+} & React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> &
+  T;
 
 type BaseAsyncComponentProps = AsyncComponentProps & {
   innerRef: React.MutableRefObject<HTMLElement | null> | ((instance: HTMLElement | null) => void) | null;
@@ -56,6 +57,9 @@ const BaseAsyncComponent: React.FunctionComponent<BaseAsyncComponentProps> = ({
  * This component uses fallback as ErrorComponent, if you want to show different
  * component for error pass it as ErrorComponent prop.
  */
-export const AsyncComponent = React.forwardRef<HTMLElement, AsyncComponentProps>((props, ref) => <BaseAsyncComponent innerRef={ref} {...props} />);
+const InternalSyncComponent = React.forwardRef<HTMLElement, AsyncComponentProps>((props, ref) => <BaseAsyncComponent innerRef={ref} {...props} />);
+export function AsyncComponent<T extends object = object>(props: AsyncComponentProps & T) {
+  return <InternalSyncComponent {...props} />;
+}
 
 export default AsyncComponent;
diff --git a/packages/components/src/Inventory/TagWithDialog.tsx b/packages/components/src/Inventory/TagWithDialog.tsx
index f3eba7531..cfcc1cda8 100644
--- a/packages/components/src/Inventory/TagWithDialog.tsx
+++ b/packages/components/src/Inventory/TagWithDialog.tsx
@@ -18,7 +18,7 @@ export type TagWithDialogProps = Omit<AsyncComponentProps, ExcludeModulesKeys>;
  */
 const BaseTagWithDialog: React.FC<TagWithDialogProps & { innerRef?: React.Ref<HTMLElement>; history?: unknown; store?: unknown }> = (props) => {
   const store = useStore();
-  const Cmp = props.component;
+  const Cmp = props.component ?? 'section';
   const SCProps: ScalprumComponentProps<ChromeAPI, TagWithDialogProps> = {
     history: props.history,
     store,