16812: Added new mechanism to skip token in the url

Arvados-DCO-1.1-Signed-off-by: Daniel Kutyła <daniel.kutyla@contractors.roche.com>

diff --git a/.env b/.env
index fd91b99c6a28f33db092cf50f6405ba42020b17b..fd20583664ecc653fc870f563a96da256e63f55a 100644 (file)
--- a/.env
+++ b/.env
@@ -3,5 +3,5 @@
 # SPDX-License-Identifier: AGPL-3.0
 
 REACT_APP_ARVADOS_CONFIG_URL=/config.json
-REACT_APP_ARVADOS_API_HOST=c97qk.arvadosapi.com
-HTTPS=true
\ No newline at end of file
+REACT_APP_ARVADOS_API_HOST=api.ardev.roche.com
+HTTPS=false
\ No newline at end of file

diff --git a/src/common/redirect-to.ts b/src/common/redirect-to.ts
new file mode 100644 (file)
index 0000000..54268c2
--- /dev/null
+++ b/src/common/redirect-to.ts
@@ -0,0 +1,26 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+const REDIRECT_TO_KEY = 'redirectTo';
+
+export const storeRedirects = () => {
+    if (window.location.href.indexOf(REDIRECT_TO_KEY) > -1) {
+        const { location: { href }, sessionStorage } = window;
+        const redirectUrl = href.split(`${REDIRECT_TO_KEY}=`)[1];
+        
+        if (sessionStorage) {
+            sessionStorage.setItem(REDIRECT_TO_KEY, redirectUrl);
+        }
+    }
+};
+
+export const handleRedirects = (token: string) => {
+    const { sessionStorage } = window;
+
+    if (sessionStorage && sessionStorage.getItem(REDIRECT_TO_KEY)) {
+        const redirectUrl = sessionStorage.getItem(REDIRECT_TO_KEY);
+        sessionStorage.removeItem(REDIRECT_TO_KEY);
+        window.location.href = `${redirectUrl}?api_token=${token}`;
+    }
+};
\ No newline at end of file

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index b3f44824040cd454853f1d35156b66738774f51a..2573d764d5f79207141db7887caf0edcb1f8561e 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -54,6 +54,7 @@ import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import Warning from '@material-ui/icons/Warning';
 import VpnKey from '@material-ui/icons/VpnKey';
+import LinkOutlined from '@material-ui/icons/LinkOutlined';
 
 // Import FontAwesome icons
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -128,3 +129,4 @@ export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 export const WorkflowIcon: IconType = (props) => <Code {...props} />;
 export const WarningIcon: IconType = (props) => <Warning style={{ color: '#fbc02d', height: '30px', width: '30px' }} {...props} />;
+export const Link: IconType = (props) => <LinkOutlined {...props} />;

diff --git a/src/index.tsx b/src/index.tsx
index 0a51ed3c8ab94c9fab61d80325f429428ea098d2..f87ff3843b2f904bc1697d3fd2f1f5521846700c 100644 (file)
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -63,6 +63,7 @@ import { processResourceAdminActionSet } from '~/views-components/context-menu/a
 import { projectAdminActionSet } from '~/views-components/context-menu/action-sets/project-admin-action-set';
 import { snackbarActions, SnackbarKind } from "~/store/snackbar/snackbar-actions";
 import { openNotFoundDialog } from './store/not-found-panel/not-found-panel-action';
+import { storeRedirects } from './common/redirect-to';
 
 console.log(`Starting arvados [${getBuildInfo()}]`);
 
@@ -97,6 +98,8 @@ addMenuActionSet(ContextMenuKind.COLLECTION_ADMIN, collectionAdminActionSet);
 addMenuActionSet(ContextMenuKind.PROCESS_ADMIN, processResourceAdminActionSet);
 addMenuActionSet(ContextMenuKind.PROJECT_ADMIN, projectAdminActionSet);
 
+storeRedirects();
+
 fetchConfig()
     .then(({ config, apiHost }) => {
         const history = createBrowserHistory();

diff --git a/src/store/store.ts b/src/store/store.ts
index 030b657662e8b2631f069b18775aa1c97f71f396..0bc351bbe4c6c6aebbc48f22688d78b258e31243 100644 (file)
--- a/src/store/store.ts
+++ b/src/store/store.ts
@@ -6,6 +6,7 @@ import { createStore, applyMiddleware, compose, Middleware, combineReducers, Sto
 import { routerMiddleware, routerReducer } from "react-router-redux";
 import thunkMiddleware from 'redux-thunk';
 import { History } from "history";
+import { handleRedirects } from '../common/redirect-to';
 
 import { authReducer } from "./auth/auth-reducer";
 import { authMiddleware } from "./auth/auth-middleware";
@@ -130,6 +131,16 @@ export function configureStore(history: History, services: ServiceRepository): R
     const subprocessMiddleware = dataExplorerMiddleware(
         new SubprocessMiddlewareService(services, SUBPROCESS_PANEL_ID)
     );
+    const redirectToMiddleware = (store: any) => (next: any) => (action: any) => {
+        const state = store.getState();
+
+        if (state.auth && state.auth.apiToken) {
+            const { apiToken } = state.auth;
+            handleRedirects(apiToken);
+        }
+
+        return next(action);
+    };
 
     const middlewares: Middleware[] = [
         routerMiddleware(history),
@@ -150,9 +161,9 @@ export function configureStore(history: History, services: ServiceRepository): R
         apiClientAuthorizationMiddlewareService,
         publicFavoritesMiddleware,
         collectionsContentAddress,
-        subprocessMiddleware
+        subprocessMiddleware,
     ];
-    const enhancer = composeEnhancers(applyMiddleware(...middlewares));
+    const enhancer = composeEnhancers(applyMiddleware(redirectToMiddleware, ...middlewares));
     return createStore(rootReducer, enhancer);
 }
 

diff --git a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
index 2ded3736b2130b2709667018ddb51d17ff2c7d75..f68994358e5e72bcc60a392642bc920b10903a0d 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-files-item-action-set.ts
@@ -7,7 +7,7 @@ import { RemoveIcon } from "~/components/icon/icon";
 import { DownloadCollectionFileAction } from "../actions/download-collection-file-action";
 import { openFileRemoveDialog } from '~/store/collection-panel/collection-panel-files/collection-panel-files-actions';
 import { CollectionFileViewerAction } from '~/views-components/context-menu/actions/collection-file-viewer-action';
-
+import { CollectionCopyToClipboardAction } from "../actions/collection-copy-to-clipboard-action";
 
 export const readOnlyCollectionFilesItemActionSet: ContextMenuActionSet = [[
     {
@@ -17,6 +17,10 @@ export const readOnlyCollectionFilesItemActionSet: ContextMenuActionSet = [[
     {
         component: CollectionFileViewerAction,
         execute: () => { return; },
+    },
+    {
+        component: CollectionCopyToClipboardAction,
+        execute: () => { return; },
     }
 ]];
 

diff --git a/src/views-components/context-menu/actions/collection-copy-to-clipboard-action.tsx b/src/views-components/context-menu/actions/collection-copy-to-clipboard-action.tsx
new file mode 100644 (file)
index 0000000..4ecdef7
--- /dev/null
+++ b/src/views-components/context-menu/actions/collection-copy-to-clipboard-action.tsx
@@ -0,0 +1,31 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import { connect } from "react-redux";
+import { RootState } from "../../../store/store";
+import { getNodeValue } from "~/models/tree";
+import { CollectionFileType } from "~/models/collection-file";
+import { ContextMenuKind } from '~/views-components/context-menu/context-menu';
+import { CopyToClipboardAction } from "./copy-to-clipboard-action";
+
+const mapStateToProps = (state: RootState) => {
+    const { resource } = state.contextMenu;
+    const currentCollectionUuid = state.collectionPanel.item ? state.collectionPanel.item.uuid : '';
+    if (resource && resource.menuKind === ContextMenuKind.COLLECTION_FILES_ITEM) {
+        const file = getNodeValue(resource.uuid)(state.collectionPanelFiles);
+        if (file) {
+            return {
+                href: file.url,
+                download: file.type === CollectionFileType.DIRECTORY ? undefined : file.name,
+                kind: 'file',
+                currentCollectionUuid
+            };
+        }
+    } else {
+        return ;
+    }
+    return ;
+};
+
+export const CollectionCopyToClipboardAction = connect(mapStateToProps)(CopyToClipboardAction);

diff --git a/src/views-components/context-menu/actions/copy-to-clipboard-action.tsx b/src/views-components/context-menu/actions/copy-to-clipboard-action.tsx
new file mode 100644 (file)
index 0000000..31ef4b9
--- /dev/null
+++ b/src/views-components/context-menu/actions/copy-to-clipboard-action.tsx
@@ -0,0 +1,33 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from "react";
+import * as copy from 'copy-to-clipboard';
+import { ListItemIcon, ListItemText, ListItem } from "@material-ui/core";
+import { Link } from "~/components/icon/icon";
+import { getClipboardUrl } from "./helpers";
+
+export const CopyToClipboardAction = (props: { href?: any, download?: any, onClick?: () => void, kind?: string, currentCollectionUuid?: string; }) => {
+    const copyToClipboard = () => {
+        if (props.href) {
+            const clipboardUrl = getClipboardUrl(props.href);
+            copy(clipboardUrl);
+        }
+
+        if (props.onClick) {
+            props.onClick();
+        }
+    };
+
+    return props.href
+        ? <ListItem button onClick={copyToClipboard}>
+            <ListItemIcon>
+                <Link />
+            </ListItemIcon>
+            <ListItemText>
+                Copy to clipboard
+                </ListItemText>
+        </ListItem>
+        : null;
+};
\ No newline at end of file

diff --git a/src/views-components/context-menu/actions/file-viewer-action.tsx b/src/views-components/context-menu/actions/file-viewer-action.tsx
index 20dcece400a2955aeaeeb42ebe55280464aa8bac..a2c32bea875e32524be04532dd90957e6da06675 100644 (file)
--- a/src/views-components/context-menu/actions/file-viewer-action.tsx
+++ b/src/views-components/context-menu/actions/file-viewer-action.tsx
@@ -5,6 +5,7 @@
 import * as React from "react";
 import { ListItemIcon, ListItemText, ListItem } from "@material-ui/core";
 import { OpenIcon } from "~/components/icon/icon";
+import { sanitizeToken } from "./helpers";
 
 export const FileViewerAction = (props: { href?: any, download?: any, onClick?: () => void, kind?: string, currentCollectionUuid?: string; }) => {
     const fileProps = props.download ? { download: props.download } : {};
@@ -12,7 +13,7 @@ export const FileViewerAction = (props: { href?: any, download?: any, onClick?:
     return props.href
         ? <a
             style={{ textDecoration: 'none' }}
-            href={props.href}
+            href={sanitizeToken(props.href)}
             target="_blank"
             onClick={props.onClick}
             {...fileProps}>

diff --git a/src/views-components/context-menu/actions/helpers.tsx b/src/views-components/context-menu/actions/helpers.tsx
new file mode 100644 (file)
index 0000000..a8cc24b
--- /dev/null
+++ b/src/views-components/context-menu/actions/helpers.tsx
@@ -0,0 +1,16 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+export const sanitizeToken = (href: string, tokenAsQueryParam: boolean = true): string => {
+    const [prefix, suffix] = href.split('/t=');
+    const [token, ...rest] = suffix.split('/');
+
+    return `${[prefix, ...rest].join('/')}${tokenAsQueryParam ? `?api_token=${token}` : ''}`;
+};
+
+export const getClipboardUrl = (href: string): string => {
+    const { origin } = window.location;
+
+    return `${origin}?redirectTo=${sanitizeToken(href, false)}`;
+};
\ No newline at end of file

diff --git a/src/views-components/main-content-bar/main-content-bar.tsx b/src/views-components/main-content-bar/main-content-bar.tsx
index c8565d62b1844c70e3c0eec7459b02e497dc9a28..d5c316f67f1982de661479680d66d2580df4ee04 100644 (file)
--- a/src/views-components/main-content-bar/main-content-bar.tsx
+++ b/src/views-components/main-content-bar/main-content-bar.tsx
@@ -48,8 +48,8 @@ export const MainContentBar =
         withStyles(styles)(
             (props: MainContentBarProps & WithStyles<CssRules> & any) =>
                 <Toolbar>
-                    <Grid container>
-                        <Grid item xs alignItems="center">
+                    <Grid container alignItems="center">
+                        <Grid item xs>
                             <Breadcrumbs />
                         </Grid>
                         <Grid item>