From 9ae74b6dd7f14cd244a6c283b87aca0638e08a27 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 7 Jul 2022 19:16:17 -0300
Subject: [PATCH] 18975: Makes UUID & PDH clicking on log viewer to open a new
 tab.

In those cases where there isn't a valid route, it'll still show a
snackbar with an error.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 src/store/navigation/navigation-action.ts     |  2 +-
 .../process-log-code-snippet.tsx              | 29 +++++++++++++++----
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index c8811bf4..146530ca 100644
--- a/src/store/navigation/navigation-action.ts
+++ b/src/store/navigation/navigation-action.ts
@@ -14,7 +14,7 @@ import { pluginConfig } from 'plugins';
 import { snackbarActions, SnackbarKind } from 'store/snackbar/snackbar-actions';
 import { USERS_PANEL_LABEL, MY_ACCOUNT_PANEL_LABEL } from 'store/breadcrumbs/breadcrumbs-actions';
 
-const navigationNotAvailable = (id: string) =>
+export const navigationNotAvailable = (id: string) =>
     snackbarActions.OPEN_SNACKBAR({
         message: `${id} not available`,
         hideDuration: 3000,
diff --git a/src/views/process-panel/process-log-code-snippet.tsx b/src/views/process-panel/process-log-code-snippet.tsx
index 92e4ffba..2b7391c2 100644
--- a/src/views/process-panel/process-log-code-snippet.tsx
+++ b/src/views/process-panel/process-log-code-snippet.tsx
@@ -13,10 +13,12 @@ import {
 import grey from '@material-ui/core/colors/grey';
 import { ArvadosTheme } from 'common/custom-theme';
 import { Link, Typography } from '@material-ui/core';
-import { navigateTo } from 'store/navigation/navigation-action';
+import { navigationNotAvailable } from 'store/navigation/navigation-action';
 import { Dispatch } from 'redux';
 import { connect, DispatchProp } from 'react-redux';
 import classNames from 'classnames';
+import { FederationConfig, getNavUrl } from 'routes/routes';
+import { RootState } from 'store/store';
 
 type CssRules = 'root' | 'wordWrap' | 'logText';
 
@@ -58,7 +60,11 @@ interface ProcessLogCodeSnippetProps {
     wordWrap?: boolean;
 }
 
-const renderLinks = (fontSize: number, dispatch: Dispatch) => (text: string) => {
+interface ProcessLogCodeSnippetAuthProps {
+    auth: FederationConfig;
+}
+
+const renderLinks = (fontSize: number, auth: FederationConfig, dispatch: Dispatch) => (text: string) => {
     // Matches UUIDs & PDHs
     const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
     const links = text.match(REGEX);
@@ -70,7 +76,14 @@ const renderLinks = (fontSize: number, dispatch: Dispatch) => (text: string) =>
         <React.Fragment key={index}>
             {part}
             {links[index] &&
-            <Link onClick={() => dispatch<any>(navigateTo(links[index]))}
+            <Link onClick={() => {
+                const url = getNavUrl(links[index], auth)
+                if (url) {
+                    window.open(`${window.location.origin}${url}`, '_blank');
+                } else {
+                    dispatch(navigationNotAvailable(links[index]));
+                }
+            }}
                 style={ {cursor: 'pointer'} }>
                 {links[index]}
             </Link>}
@@ -79,8 +92,12 @@ const renderLinks = (fontSize: number, dispatch: Dispatch) => (text: string) =>
     </Typography>;
 };
 
-export const ProcessLogCodeSnippet = withStyles(styles)(connect()(
-    ({classes, lines, fontSize, dispatch, wordWrap}: ProcessLogCodeSnippetProps & WithStyles<CssRules> & DispatchProp) => {
+const mapStateToProps = (state: RootState): ProcessLogCodeSnippetAuthProps => ({
+    auth: state.auth,
+});
+
+export const ProcessLogCodeSnippet = withStyles(styles)(connect(mapStateToProps)(
+    ({classes, lines, fontSize, auth, dispatch, wordWrap}: ProcessLogCodeSnippetProps & WithStyles<CssRules> & ProcessLogCodeSnippetAuthProps & DispatchProp) => {
         const [followMode, setFollowMode] = useState<boolean>(true);
         const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -104,7 +121,7 @@ export const ProcessLogCodeSnippet = withStyles(styles)(connect()(
                 { lines.map((line: string, index: number) =>
                 <Typography key={index} component="pre"
                     className={classNames(classes.logText, wordWrap ? classes.wordWrap : undefined)}>
-                    {renderLinks(fontSize, dispatch)(line)}
+                    {renderLinks(fontSize, auth, dispatch)(line)}
                 </Typography>
                 ) }
             </div>
-- 
2.30.2