Merge branch '17526-3rd-party-access-ui' into main. Closes #17526

Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen@curii.com>

diff --git a/cypress/integration/collection.spec.js b/cypress/integration/collection.spec.js
index 75031c12f2f36f998b4106dfd8ef8bc6f145c8a1..e45971f46e8267b87ac410c2689d209ee4ff458a 100644 (file)
--- a/cypress/integration/collection.spec.js
+++ b/cypress/integration/collection.spec.js
@@ -43,7 +43,7 @@ describe('Collection panel tests', function () {
             cy.goToPath(`/collections/${testCollection.uuid}`);
 
             cy.get('[data-cy=collection-panel-options-btn]').click();
-            cy.get('[data-cy=context-menu]').contains('Open as network folder or S3 bucket').click();
+            cy.get('[data-cy=context-menu]').contains('Open with 3rd party client').click();
             cy.get('[data-cy=download-button').click();
 
             const filename = path.join(downloadsFolder, `${testCollection.name}.duck`);

diff --git a/src/store/collections/collection-info-actions.ts b/src/store/collections/collection-info-actions.ts
index 9f82975f35c3368a4aa516979381196ce9f7295e..6107c40972d690df30ce36a02ed589f24d67fc13 100644 (file)
--- a/src/store/collections/collection-info-actions.ts
+++ b/src/store/collections/collection-info-actions.ts
@@ -29,7 +29,7 @@ export const openWebDavS3InfoDialog = (uuid: string, activeTab?: number) =>
         dispatch(dialogActions.OPEN_DIALOG({
             id: COLLECTION_WEBDAV_S3_DIALOG_NAME,
             data: {
-                title: 'Access Collection using WebDAV or S3',
+                title: 'Open with 3rd party client',
                 token: getState().auth.extraApiToken || getState().auth.apiToken,
                 downloadUrl: getState().auth.config.keepWebServiceUrl,
                 collectionsUrl: getState().auth.config.keepWebInlineServiceUrl,

diff --git a/src/views-components/context-menu/action-sets/collection-action-set.ts b/src/views-components/context-menu/action-sets/collection-action-set.ts
index 5c66f1280770c56851f91aaf6de6cd2ec3cf5941..9b0efac0409b5787b0c5d28b893441a858ffe475 100644 (file)
--- a/src/views-components/context-menu/action-sets/collection-action-set.ts
+++ b/src/views-components/context-menu/action-sets/collection-action-set.ts
@@ -90,7 +90,7 @@ export const readOnlyCollectionActionSet: ContextMenuActionSet = [[
     toggleFavoriteAction,
     {
         icon: FolderSharedIcon,
-        name: "Open as network folder or S3 bucket",
+        name: "Open with 3rd party client",
         execute: (dispatch, resource) => {
             dispatch<any>(openWebDavS3InfoDialog(resource.uuid));
         }

diff --git a/src/views-components/context-menu/action-sets/project-action-set.ts b/src/views-components/context-menu/action-sets/project-action-set.ts
index c84711384548f3df05e8c9b9979110aac189f537..a079bf4ff3c314b157d9f9bb8977a07a9c8300ee 100644 (file)
--- a/src/views-components/context-menu/action-sets/project-action-set.ts
+++ b/src/views-components/context-menu/action-sets/project-action-set.ts
@@ -59,7 +59,7 @@ export const readOnlyProjectActionSet: ContextMenuActionSet = [[
     },
     {
         icon: FolderSharedIcon,
-        name: "Open as network folder or S3 bucket",
+        name: "Open with 3rd party client",
         execute: (dispatch, resource) => {
             dispatch<any>(openWebDavS3InfoDialog(resource.uuid));
         }

diff --git a/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx b/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx
index 39c1068ecff013992f5e6b4a224b041d0c15eb00..8e9edac11accccfe710877b44c30ab4400c87e45 100644 (file)
--- a/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx
+++ b/src/views-components/webdav-s3-dialog/webdav-s3-dialog.tsx
@@ -10,8 +10,9 @@ import { WithDialogProps } from 'store/dialog/with-dialog';
 import { compose } from 'redux';
 import { DetailsAttribute } from "components/details-attribute/details-attribute";
 import { DownloadIcon } from "components/icon/icon";
+import { DefaultCodeSnippet } from "components/default-code-snippet/default-code-snippet";
 
-export type CssRules = 'details' | 'downloadButton';
+export type CssRules = 'details' | 'downloadButton' | 'detailsAttrValWithCode';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
     details: {
@@ -20,6 +21,10 @@ const styles: StyleRulesCallback<CssRules> = theme => ({
     },
     downloadButton: {
         marginTop: theme.spacing.unit * 2,
+    },
+    detailsAttrValWithCode: {
+        display: "flex",
+        alignItems: "center",
     }
 });
 
@@ -135,25 +140,29 @@ export const WebDavS3InfoDialog = compose(
             tokenSecret = tokenUuid;
         }
 
-        const supportsWebdav = (props.data.uuid.indexOf("-4zz18-") === 5);
+        const isCollection = (props.data.uuid.indexOf("-4zz18-") === 5);
 
         let activeTab = props.data.activeTab;
-        if (!supportsWebdav) {
+        if (!isCollection) {
             activeTab = 2;
         }
 
+        const wgetCommand = `wget --http-user=${props.data.username} --http-passwd=${props.data.token} --mirror --no-parent --no-host --cut-dirs=0 ${winDav.toString()}`;
+        const curlCommand = `curl -O -u ${props.data.username}:${props.data.token} ${winDav.toString()}`;
+
         return <Dialog
             open={props.open}
             maxWidth="md"
             onClose={props.closeDialog}
             style={{ alignSelf: 'stretch' }}>
             <CardHeader
-                title={`Open as Network Folder or S3 Bucket`} />
+                title={`Open with 3rd party client`} />
             <div className={props.classes.details} >
                 <Tabs value={activeTab} onChange={props.data.setActiveTab}>
-                    {supportsWebdav && <Tab value={0} key="cyberduck" label="Cyberduck/Mountain Duck or Gnome Files" />}
-                    {supportsWebdav && <Tab value={1} key="windows" label="Windows or MacOS" />}
+                    {isCollection && <Tab value={0} key="cyberduck" label="WebDAV" />}
+                    {isCollection && <Tab value={1} key="windows" label="Windows or MacOS" />}
                     <Tab value={2} key="s3" label="S3 bucket" />
+                    {isCollection && <Tab value={3} key="cli" label="wget / curl" />}
                 </Tabs>
 
                 <TabPanel index={1} value={activeTab}>
@@ -179,12 +188,14 @@ export const WebDavS3InfoDialog = compose(
                         <li>Open File Explorer</li>
                         <li>Click on "This PC", then go to Computer &rarr; Add a Network Location</li>
                         <li>Click Next, then choose "Add a custom network location", then click Next</li>
+                        <li>Use the "internet address" and credentials listed under Settings, above</li>
                     </ol>
 
                     <h3>MacOS</h3>
                     <ol>
                         <li>Open Finder</li>
                         <li>Click Go &rarr; Connect to server</li>
+                        <li>Use the "internet address" and credentials listed under Settings, above</li>
                     </ol>
                 </TabPanel>
 
@@ -204,6 +215,8 @@ export const WebDavS3InfoDialog = compose(
                         value={props.data.token}
                         copyValue={props.data.token} />
 
+                    <h3>Cyberduck/Mountain Duck</h3>
+
                     <Button
                         data-cy='download-button'
                         className={props.classes.downloadButton}
@@ -215,7 +228,7 @@ export const WebDavS3InfoDialog = compose(
                         Download Cyber/Mountain Duck bookmark
                     </Button>
 
-                    <h3>Gnome</h3>
+                    <h3>GNOME</h3>
                     <ol>
                         <li>Open Files</li>
                         <li>Select +Other Locations</li>
@@ -247,6 +260,31 @@ export const WebDavS3InfoDialog = compose(
 
                 </TabPanel>
 
+                <TabPanel index={3} value={activeTab}>
+
+                    <DetailsAttribute
+                        label='Wget command'
+                        copyValue={wgetCommand}
+                        classValue={props.classes.detailsAttrValWithCode}>
+                        <DefaultCodeSnippet
+                            lines={[wgetCommand]} />
+                    </DetailsAttribute>
+
+                    <DetailsAttribute
+                        label='Curl command'
+                        copyValue={curlCommand}
+                        classValue={props.classes.detailsAttrValWithCode}>
+                        <DefaultCodeSnippet
+                            lines={[curlCommand]} />
+                    </DetailsAttribute>
+
+                    <p>
+                      Note: This curl command downloads single files.
+                      Append the desired filename to the end of the URL.
+                    </p>
+
+                </TabPanel>
+
             </div>
             <DialogActions>
                 <Button