src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from "react";
   6 import { Dialog, DialogActions, Button, StyleRulesCallback, WithStyles, withStyles, CardHeader, Tab, Tabs } from '@material-ui/core';
   7 import { withDialog } from "~/store/dialog/with-dialog";
   8 import { COLLECTION_WEBDAV_S3_DIALOG_NAME, WebDavS3InfoDialogData } from '~/store/collections/collection-info-actions';
   9 import { WithDialogProps } from '~/store/dialog/with-dialog';
  10 import { compose } from 'redux';
  11 import { DetailsAttribute } from "~/components/details-attribute/details-attribute";
  12
  13 type CssRules = 'details';
  14
  15 const styles: StyleRulesCallback<CssRules> = theme => ({
  16     details: {
  17         marginLeft: theme.spacing.unit * 3,
  18         marginRight: theme.spacing.unit * 3,
  19     }
  20 });
  21
  22 interface TabPanelData {
  23     children: React.ReactElement<any>[];
  24     value: number;
  25     index: number;
  26 }
  27
  28 function TabPanel(props: TabPanelData) {
  29     const { children, value, index } = props;
  30
  31     return (
  32         <div
  33             role="tabpanel"
  34             hidden={value !== index}
  35             id={`simple-tabpanel-${index}`}
  36             aria-labelledby={`simple-tab-${index}`}
  37         >
  38             {value === index && children}
  39         </div>
  40     );
  41 }
  42
  43 export const WebDavS3InfoDialog = compose(
  44     withDialog(COLLECTION_WEBDAV_S3_DIALOG_NAME),
  45     withStyles(styles),
  46 )(
  47     (props: WithDialogProps<WebDavS3InfoDialogData> & WithStyles<CssRules>) => {
  48         if (!props.data.downloadUrl) { return null; }
  49
  50         const keepwebUrl = props.data.downloadUrl.replace(/\/\*(--[^.]+)?\./, "/");
  51
  52         const winDav = new URL(props.data.downloadUrl.replace("*", props.data.uuid));
  53
  54         const gnomeDav = new URL(keepwebUrl);
  55         gnomeDav.username = props.data.username;
  56         gnomeDav.pathname = `/c=${props.data.uuid}/`;
  57         gnomeDav.protocol = "davs:";
  58
  59         const s3endpoint = new URL(keepwebUrl);
  60
  61         const sp = props.data.token.split("/");
  62         let tokenUuid;
  63         let tokenSecret;
  64         if (sp.length === 3 && sp[0] === "v2" && props.data.homeCluster === props.data.localCluster) {
  65             tokenUuid = sp[1];
  66             tokenSecret = sp[2];
  67         } else {
  68             tokenUuid = props.data.token.replace(/\//g, "_");
  69             tokenSecret = tokenUuid;
  70         }
  71
  72         return <Dialog
  73             open={props.open}
  74             maxWidth="md"
  75             onClose={props.closeDialog}
  76             style={{ alignSelf: 'stretch' }}>
  77             <CardHeader
  78                 title={`WebDAV and S3`} />
  79             <div className={props.classes.details} >
  80                 <Tabs value={props.data.activeTab} onChange={props.data.setActiveTab}>
  81                     <Tab key="windows" label="Add a Network Location in Windows" />
  82                     <Tab key="gnome" label="Connect to Server in GNOME" />
  83                     <Tab key="s3" label="Using an S3 client" />
  84                 </Tabs>
  85
  86                 <TabPanel index={0} value={props.data.activeTab}>
  87                     <ol>
  88                         <li>Open File Explorer</li>
  89                         <li>Click on "This PC", then go to Computer &rarr; Add a Network Location</li>
  90                         <li>Click Next, then choose "Add a custom network location", then click Next</li>
  91                     </ol>
  92
  93                     <DetailsAttribute
  94                         label='Internet address'
  95                         value={winDav.toString()}
  96                         copyValue={winDav.toString()} />
  97
  98                     <DetailsAttribute
  99                         label='Username'
 100                         value={props.data.username}
 101                         copyValue={props.data.username} />
 102
 103                     <DetailsAttribute
 104                         label='Password'
 105                         value={props.data.token}
 106                         copyValue={props.data.token} />
 107                 </TabPanel>
 108
 109                 <TabPanel index={1} value={props.data.activeTab}>
 110                     <ol>
 111                         <li>Open Files</li>
 112                         <li>Select +Other Locations</li>
 113                         <li>Connect to Server &rarr; Enter server address</li>
 114                     </ol>
 115
 116                     <DetailsAttribute
 117                         label='Server address'
 118                         value={gnomeDav.toString()}
 119                         copyValue={gnomeDav.toString()} />
 120
 121                     <DetailsAttribute
 122                         label='Password'
 123                         value={props.data.token}
 124                         copyValue={props.data.token} />
 125                 </TabPanel>
 126
 127                 <TabPanel index={2} value={props.data.activeTab}>
 128                     <DetailsAttribute
 129                         label='Endpoint'
 130                         value={s3endpoint.host}
 131                         copyValue={s3endpoint.host} />
 132
 133                     <DetailsAttribute
 134                         label='Bucket'
 135                         value={props.data.uuid}
 136                         copyValue={props.data.uuid} />
 137
 138                     <DetailsAttribute
 139                         label='Access Key'
 140                         value={tokenUuid}
 141                         copyValue={tokenUuid} />
 142
 143                     <DetailsAttribute
 144                         label='Secret Key'
 145                         value={tokenSecret}
 146                         copyValue={tokenSecret} />
 147
 148                 </TabPanel>
 149
 150             </div>
 151             <DialogActions>
 152                 <Button
 153                     variant='text'
 154                     color='primary'
 155                     onClick={props.closeDialog}>
 156                     Close
 157                 </Button>
 158             </DialogActions>
 159
 160         </Dialog >;
 161     }
 162 );