refactor: update link to support secure blank targets (determined-ai#612

)

webui/react/src/components/DeterminedAuth.tsx

@@ -2,6 +2,7 @@ import { Button, Form, Input } from 'antd';
 import React, { useCallback, useState } from 'react';
 
 import Icon from 'components/Icon';
+import Link from 'components/Link';
 import Auth from 'contexts/Auth';
 import FullPageSpinner from 'contexts/FullPageSpinner';
 import handleError, { ErrorType } from 'ErrorHandler';
@@ -85,7 +86,7 @@ const DeterminedAuth: React.FC = () => {
       {loginForm}
       <p className={css.message}>
         Forgot your password, or need to manage users? Check out our&nbsp;
-        <a href="/docs/topic-guides/users.html" rel="noreferrer noopener" target="_blank">docs</a>
+        <Link path={'/docs/topic-guides/users.html'} popout>docs</Link>
       </p>
     </div>
   );

webui/react/src/components/Link.module.scss

@@ -1,7 +1,14 @@
 .base {
-  color: inherit;
   cursor: pointer;
 
   &:focus { box-shadow: var(--theme-outline); }
-  &:hover { color: inherit; }
+  &:hover { text-decoration: underline; }
+}
+.inherit {
+  color: inherit;
+
+  &:hover {
+    color: inherit;
+    text-decoration: none;
+  }
 }

webui/react/src/components/Link.tsx

@@ -1,3 +1,5 @@
+import { inherits } from 'util';
+
 import React, { PropsWithChildren, useCallback } from 'react';
 
 import { routeAll, setupUrlForDev } from 'routes';
@@ -6,17 +8,22 @@ import css from './Link.module.scss';
 
 interface Props {
   disabled?: boolean;
+  inherit?: boolean;
   path: string;
   popout?: boolean;
   onClick?: (event: React.MouseEvent) => void;
 }
 
+const windowFeatures = [ 'noopener', 'noreferrer' ];
+
 const Link: React.FC<Props> = ({
-  disabled, path, popout, onClick, children,
+  disabled, inherit, path, popout, onClick, children,
 }: PropsWithChildren<Props>) => {
   const classes = [ css.base ];
+  const rel = windowFeatures.join(' ');
 
   if (!disabled) classes.push(css.link);
+  if (inherit) classes.push(css.inherit);
 
   const handleClick = useCallback((event: React.MouseEvent): void => {
     const url = setupUrlForDev(path);
@@ -27,13 +34,17 @@ const Link: React.FC<Props> = ({
     if (onClick) {
       onClick(event);
     } else if (event.metaKey || event.ctrlKey || popout) {
-      window.open(url, '_blank');
+      window.open(url, '_blank', windowFeatures.join(','));
     } else {
       routeAll(url);
     }
   }, [ onClick, path, popout ]);
 
-  return <a className={classes.join(' ')} href={path} onClick={handleClick}>{children}</a>;
+  return (
+    <a className={classes.join(' ')} href={path} rel={rel} onClick={handleClick}>
+      {children}
+    </a>
+  );
 };
 
 export default Link;

webui/react/src/components/NavItem.tsx

@@ -51,6 +51,7 @@ const NavItem: React.FC<Props> = (props: PropsWithChildren<Props>) => {
 
   if (props.path) return (
     <Link
+      inherit
       path={props.path}
       popout={props.popout}
       onClick={props.onClick}>{navItem}</Link>

webui/react/src/components/TaskCard.tsx

@@ -20,7 +20,7 @@ const TaskCard: React.FC<RecentTask> = (props: RecentTask) => {
 
   return (
     <div className={classes.join(' ')}>
-      <Link disabled={!props.url} path={props.url || '#'}>
+      <Link disabled={!props.url} inherit path={props.url || '#'}>
         {hasProgress && <div className={css.progressBar}>
           <ProgressBar percent={(props.progress || 0) * 100} state={props.state} />
         </div>}