X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/ee9d1e39b5d469a827be5a719c9c0860914ab2a8..79d2927c497c924e9b15545d44b860627e8f8a7c:/services/workbench2/src/components/code-snippet/code-snippet.tsx

diff --git a/services/workbench2/src/components/code-snippet/code-snippet.tsx b/services/workbench2/src/components/code-snippet/code-snippet.tsx
index 5a5a7041d8..47d8fe1bf0 100644
--- a/services/workbench2/src/components/code-snippet/code-snippet.tsx
+++ b/services/workbench2/src/components/code-snippet/code-snippet.tsx
@@ -12,17 +12,24 @@ import { FederationConfig, getNavUrl } from 'routes/routes';
 import { Dispatch } from 'redux';
 import { navigationNotAvailable } from 'store/navigation/navigation-action';
 
-type CssRules = 'root' | 'space';
+type CssRules = 'root' | 'inlineRoot' | 'space' | 'inline';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
         boxSizing: 'border-box',
         overflow: 'auto',
-        padding: theme.spacing.unit
+        padding: theme.spacing.unit,
+    },
+    inlineRoot: {
+        padding: "3px",
+        display: "inline",
     },
     space: {
-        marginLeft: '15px'
-    }
+        marginLeft: '15px',
+    },
+    inline: {
+        display: 'inline',
+    },
 });
 
 export interface CodeSnippetDataProps {
@@ -31,6 +38,7 @@ export interface CodeSnippetDataProps {
     apiResponse?: boolean;
     linked?: boolean;
     children?: JSX.Element;
+    inline?: boolean;
 }
 
 interface CodeSnippetAuthProps {
@@ -44,11 +52,11 @@ const mapStateToProps = (state: RootState): CodeSnippetAuthProps => ({
 });
 
 export const CodeSnippet = withStyles(styles)(connect(mapStateToProps)(
-    ({ classes, lines, linked, className, apiResponse, dispatch, auth, children }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
+    ({ classes, lines, linked, className, apiResponse, dispatch, auth, children, inline }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
         <Typography
-        component="div"
-        className={classNames(classes.root, className)}>
-            <Typography className={apiResponse ? classes.space : className} component="pre">
+            component="div"
+            className={classNames([classes.root, className, inline ? classes.inlineRoot : undefined])}>
+            <Typography className={apiResponse ? classes.space : classNames([className, inline ? classes.inline : undefined])} component="pre">
                 {children}
                 {linked ?
                     lines.map((line, index) => <React.Fragment key={index}>{renderLinks(auth, dispatch)(line)}{`\n`}</React.Fragment>) :
@@ -56,7 +64,7 @@ export const CodeSnippet = withStyles(styles)(connect(mapStateToProps)(
                 }
             </Typography>
         </Typography>
-    ));
+));
 
 const renderLinks = (auth: FederationConfig, dispatch: Dispatch) => (text: string): JSX.Element => {
     // Matches UUIDs & PDHs
@@ -70,18 +78,18 @@ const renderLinks = (auth: FederationConfig, dispatch: Dispatch) => (text: strin
             <React.Fragment key={index}>
                 {part}
                 {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>}
+                    <Link onClick={() => {
+                        const url = getNavUrl(links[index], auth)
+                        if (url) {
+                            window.open(`${window.location.origin}${url}`, '_blank', "noopener");
+                        } else {
+                            dispatch(navigationNotAvailable(links[index]));
+                        }
+                    }}
+                        style={{ cursor: 'pointer' }}>
+                        {links[index]}
+                    </Link>}
             </React.Fragment>
         )}
     </>;
-  };
+};