Merge pull request #2135 from Hyperkid123/async-component-typings

fix(components): update AsyncComponent TS interface

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;

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,