frontend: Sidebar: Add support for external urls

frontend/src/components/Sidebar/ListItemLink.tsx

@@ -71,13 +71,27 @@ export default function ListItemLink(props: ListItemLinkProps) {
     [iconOnly]
   );
 
-  const renderLink = React.useMemo(
-    () =>
-      React.forwardRef<any, Omit<RouterLinkProps, 'to'>>((itemProps, ref) => (
-        <RouterLink to={{ pathname: pathname, search: search }} ref={ref} {...itemProps} />
-      )),
-    [pathname, search]
-  );
+  const renderLink = React.useMemo(() => {
+    return React.forwardRef<HTMLAnchorElement, Omit<RouterLinkProps, 'to'>>((itemProps, ref) => {
+      if (pathname.startsWith('http')) {
+        const { children, className } = itemProps;
+        return (
+          <a
+            href={pathname}
+            target="_blank"
+            ref={ref}
+            rel="noopener noreferrer"
+            className={className}
+          >
+            {children}
+          </a>
+        );
+      }
+
+      return <RouterLink to={{ pathname, search }} ref={ref} {...itemProps} />;
+    });
+  }, [pathname, search]);
+
   let listItemLink = null;
 
   if (icon) {

frontend/src/components/Sidebar/SidebarItem.tsx

@@ -86,7 +86,7 @@ const SidebarItem = memo((props: SidebarItemProps) => {
   } = props;
   const clusters = useSelectedClusters();
   let fullURL = url;
-  if (fullURL && useClusterURL && clusters.length) {
+  if (fullURL && useClusterURL && clusters.length && !fullURL.startsWith('http')) {
     fullURL = generatePath(getClusterPrefixedPath(url), {
       cluster: clusters.length ? formatClusterPathParam(clusters) : '',
     });

frontend/src/components/Sidebar/__snapshots__/ListItemLink.NoIcon.stories.storyshot

@@ -12,8 +12,8 @@
           <a
             class="MuiButtonBase-root MuiListItemButton-root MuiListItemButton-gutters MuiListItemButton-root MuiListItemButton-gutters css-1c5v89n-MuiButtonBase-root-MuiListItemButton-root"
             href="https://headlamp.dev"
-            role="button"
-            tabindex="0"
+            rel="noopener noreferrer"
+            target="_blank"
           >
             <div
               class="MuiListItemText-root css-tlelie-MuiListItemText-root"