Link polymorphic static typing

(cherry picked from commit a2e06e9e650642518b926a61f624a2c7a49c0988)
(cherry picked from commit cfa2f4d4c6e35d7b9ddd2e1da2e59f7287859516)

Closes #10363
Closes #10348

frontend/src/Components/Link/Link.tsx

@@ -1,96 +1,93 @@
 import classNames from 'classnames';
 import React, {
-  ComponentClass,
+  ComponentPropsWithoutRef,
-  FunctionComponent,
+  ElementType,
   SyntheticEvent,
   useCallback,
 } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import styles from './Link.css';
 
-interface ReactRouterLinkProps {
+export type LinkProps<C extends ElementType = 'button'> =
-  to?: string;
+  ComponentPropsWithoutRef<C> & {
-}
+    component?: C;
+    to?: string;
+    target?: string;
+    isDisabled?: LinkProps<C>['disabled'];
+    noRouter?: boolean;
+    onPress?(event: SyntheticEvent): void;
+  };
 
-export interface LinkProps extends React.HTMLProps<HTMLAnchorElement> {
+export default function Link<C extends ElementType = 'button'>({
-  className?: string;
+  className,
-  component?:
+  component,
-    | string
+  to,
-    | FunctionComponent<LinkProps>
+  target,
-    | ComponentClass<LinkProps, unknown>;
+  type,
-  to?: string;
+  isDisabled,
-  target?: string;
+  noRouter,
-  isDisabled?: boolean;
+  onPress,
-  noRouter?: boolean;
+  ...otherProps
-  onPress?(event: SyntheticEvent): void;
+}: LinkProps<C>) {
-}
+  const Component = component || 'button';
-function Link(props: LinkProps) {
-  const {
-    className,
-    component = 'button',
-    to,
-    target,
-    type,
-    isDisabled,
-    noRouter = false,
-    onPress,
-    ...otherProps
-  } = props;
 
   const onClick = useCallback(
     (event: SyntheticEvent) => {
-      if (!isDisabled && onPress) {
+      if (isDisabled) {
-        onPress(event);
+        return;
       }
+
+      onPress?.(event);
     },
     [isDisabled, onPress]
   );
 
-  const linkProps: React.HTMLProps<HTMLAnchorElement> & ReactRouterLinkProps = {
+  const linkClass = classNames(
-    target,
-  };
-  let el = component;
-
-  if (to) {
-    if (/\w+?:\/\//.test(to)) {
-      el = 'a';
-      linkProps.href = to;
-      linkProps.target = target || '_blank';
-      linkProps.rel = 'noreferrer';
-    } else if (noRouter) {
-      el = 'a';
-      linkProps.href = to;
-      linkProps.target = target || '_self';
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      el = RouterLink;
-      linkProps.to = `${window.Radarr.urlBase}/${to.replace(/^\//, '')}`;
-      linkProps.target = target;
-    }
-  }
-
-  if (el === 'button' || el === 'input') {
-    linkProps.type = type || 'button';
-    linkProps.disabled = isDisabled;
-  }
-
-  linkProps.className = classNames(
     className,
     styles.link,
     to && styles.to,
     isDisabled && 'isDisabled'
   );
 
-  const elementProps = {
+  if (to) {
-    ...otherProps,
+    const toLink = /\w+?:\/\//.test(to);
-    type,
-    ...linkProps,
-  };
 
-  elementProps.onClick = onClick;
+    if (toLink || noRouter) {
+      return (
+        <a
+          href={to}
+          target={target || (toLink ? '_blank' : '_self')}
+          rel={toLink ? 'noreferrer' : undefined}
+          className={linkClass}
+          onClick={onClick}
+          {...otherProps}
+        />
+      );
+    }
 
-  return React.createElement(el, elementProps);
+    return (
+      <RouterLink
+        to={`${window.Radarr.urlBase}/${to.replace(/^\//, '')}`}
+        target={target}
+        className={linkClass}
+        onClick={onClick}
+        {...otherProps}
+      />
+    );
+  }
+
+  return (
+    <Component
+      type={
+        component === 'button' || component === 'input'
+          ? type || 'button'
+          : type
+      }
+      target={target}
+      className={linkClass}
+      disabled={isDisabled}
+      onClick={onClick}
+      {...otherProps}
+    />
+  );
 }
-
-export default Link;