fix(ui): replace deprecated innerRef prop with React.forwardRef (weaveworks#5312)

Signed-off-by: Umegbewe Nwebedu <nwebedujunior55@gmail.com>
Co-authored-by: Charles Sibbald <123247+casibbald@users.noreply.github.com>

Author: umegbewe

ui/components/Link.tsx

@@ -9,7 +9,6 @@ import Text, { TextProps } from "./Text";
 type Props = {
   className?: string;
   to?: string;
-  innerRef?: any;
   children?: any;
   href?: any;
   target?: any;
@@ -28,19 +27,22 @@ const SpacedIcon = ({ icon }: { icon: JSX.Element }) => (
   </>
 );
 
-function Link({
-  children,
-  href,
-  className,
-  to = "",
-  newTab,
-  onClick,
-  textProps,
-  icon,
-  onMouseEnter,
-  onMouseLeave,
-  ...props
-}: Props) {
+const Link = React.forwardRef<HTMLAnchorElement, Props>(function Link(
+  {
+    children,
+    href,
+    className,
+    to = "",
+    newTab,
+    onClick,
+    textProps,
+    icon,
+    onMouseEnter,
+    onMouseLeave,
+    ...props
+  },
+  ref
+) {
   if ((href && !isAllowedLink(href)) || (!href && !to)) {
     return (
       <Text className={className} {...textProps}>
@@ -58,6 +60,7 @@ function Link({
   if (href) {
     return (
       <a
+        ref={ref}
         className={className}
         href={href}
         target={newTab ? "_blank" : ""}
@@ -77,6 +80,7 @@ function Link({
 
   return (
     <RouterLink
+      ref={ref}
       onClick={onClick}
       className={className}
       to={to}
@@ -89,8 +93,10 @@ function Link({
       {txt}
     </RouterLink>
   );
-}
+});
 
-export default styled(Link).attrs({ className: Link.name })`
+Link.displayName = "Link";
+
+export default styled(Link).attrs({ className: Link.displayName })`
   text-decoration: none;
 `;

ui/components/Nav.tsx

@@ -130,7 +130,7 @@ const LinkTabIcon = ({ iconType, color, collapsed, title }) => {
   else return <Spacer padding="small" />;
 };
 
-const LinkTab = React.forwardRef((p: any, ref) => {
+const LinkTab = React.forwardRef<HTMLAnchorElement, any>((p, ref) => {
   const [hovered, setHovered] = React.useState<boolean>(false);
   const item: NavItem = p.navItem;
 
@@ -147,7 +147,7 @@ const LinkTab = React.forwardRef((p: any, ref) => {
   return (
     <Link
       className={className}
-      innerRef={ref}
+      ref={ref}
       to={formatURL(item.link.value)}
       href={item.link.href}
       newTab={item.link.newTab}

ui/components/SubRouterTabs.tsx

@@ -24,8 +24,8 @@ type TabProps = {
 
 type PathConfig = { name: string; path: string };
 
-const ForwardedLink = React.forwardRef((props, ref) => (
-  <Link {...props} innerRef={ref} />
+const ForwardedLink = React.forwardRef<HTMLAnchorElement>((props, ref) => (
+  <Link {...props} ref={ref} />
 ));
 
 function findChildren(childrenProp: any[]) {