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>

diff --git a/src/store/navigation/navigation-action.ts b/src/store/navigation/navigation-action.ts
index c8811bf43955a92ad493ddc6e2acc28e8846b1b3..146530cae8e3ffaf530da19ca3be07743026c78f 100644 (file)
--- 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';
 
 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,
     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 92e4ffba02b4cbf53d158c4cef627f3a08960c10..2b7391c294ec0ac2ffd120fac25085b00b574e5c 100644 (file)
--- 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 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 { 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';
 
 
 type CssRules = 'root' | 'wordWrap' | 'logText';
 


@@ -58,7 +60,11 @@ interface ProcessLogCodeSnippetProps {
     wordWrap?: boolean;
 }
 
     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);
     // 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] &&
         <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>}
                 style={ {cursor: 'pointer'} }>
                 {links[index]}
             </Link>}


@@ -79,8 +92,12 @@ const renderLinks = (fontSize: number, dispatch: Dispatch) => (text: string) =>
     </Typography>;
 };
 
     </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);
 
         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)}>
                 { 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>
                 </Typography>
                 ) }
             </div>