web/satellite: fixes for linksharing paths

By this change we stopped encoding delimiter slashes '/' between bucket names, prefixes and object keys. Fixed prefix linksharing itself as it requires trailing '/' to be provided. Issue: storj/customer-issues#1713 Change-Id: I2933a684e168a96e6d22689a65321c17078432d1
storj · May 13, 2024 · 0760a03 · 0760a03
1 parent 44c8bd7
commit 0760a03
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 21 deletions.
diff --git a/web/satellite/src/components/dialogs/ShareDialog.vue b/web/satellite/src/components/dialogs/ShareDialog.vue
@@ -107,29 +107,29 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, Component } from 'vue';
+import { Component, computed, ref, watch } from 'vue';
 import {
-    VDialog,
+    VAlert,
+    VBtn,
     VCard,
+    VCardActions,
     VCardItem,
-    VSheet,
     VCardTitle,
+    VChip,
+    VChipGroup,
+    VCol,
+    VDialog,
     VDivider,
-    VCardActions,
     VRow,
-    VCol,
-    VBtn,
-    VChip,
+    VSheet,
     VTextarea,
-    VAlert,
-    VChipGroup,
 } from 'vuetify/components';
 import { mdiCheck, mdiContentCopy } from '@mdi/js';
 
 import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import { useNotify } from '@/utils/hooks';
-import { useLinksharing } from '@/composables/useLinksharing';
+import { ShareType, useLinksharing } from '@/composables/useLinksharing';
 import { SHARE_BUTTON_CONFIGS, ShareOptions } from '@/types/browser';
 import { BrowserObject } from '@/store/modules/objectBrowserStore';
 import { useBucketsStore } from '@/store/modules/bucketsStore';
@@ -197,8 +197,10 @@ watch(() => innerContent.value, async (comp: Component | null): Promise<void> =>
         } else {
             link.value = await generateFileOrFolderShareURL(
                 props.bucketName,
-                `${filePath.value ? filePath.value + '/' : ''}${props.file.Key}`,
-                props.file.type === 'folder',
+                filePath.value,
+                props.file.Key,
+                // TODO: replace magic string type of BrowserObject.type with some constant/enum.
+                props.file.type === 'folder' ? ShareType.Folder : ShareType.Object,
             );
         }
     } catch (error) {

diff --git a/web/satellite/src/composables/useLinksharing.ts b/web/satellite/src/composables/useLinksharing.ts
@@ -12,6 +12,12 @@ import { Project } from '@/types/projects';
 
 const WORKER_ERR_MSG = 'Worker is not defined';
 
+export enum ShareType {
+    Object = 'object',
+    Folder = 'folder',
+    Bucket = 'bucket',
+}
+
 export function useLinksharing() {
     const agStore = useAccessGrantsStore();
     const configStore = useConfigStore();
@@ -30,24 +36,32 @@ export function useLinksharing() {
         return selectedProject.value.edgeURLOverrides?.publicLinksharing || configStore.state.config.publicLinksharingURL;
     });
 
-    async function generateFileOrFolderShareURL(bucketName: string, path: string, isFolder = false): Promise<string> {
-        const fullPath = `${bucketName}/${path}`;
-        const type = isFolder ? 'folder' : 'object';
-        return generateShareURL(fullPath, type);
+    async function generateFileOrFolderShareURL(bucketName: string, prefix: string, objectKey: string, type: ShareType): Promise<string> {
+        return generateShareURL(bucketName, prefix, objectKey, type);
     }
 
     async function generateBucketShareURL(bucketName: string): Promise<string> {
-        return generateShareURL(bucketName, 'bucket');
+        return generateShareURL(bucketName, '', '', ShareType.Bucket);
     }
 
-    async function generateShareURL(path: string, type: string): Promise<string> {
+    async function generateShareURL(bucketName: string, prefix: string, objectKey: string, type: ShareType): Promise<string> {
         if (!worker.value) throw new Error(WORKER_ERR_MSG);
 
-        const LINK_SHARING_AG_NAME = `${path}_shared-${type}_${new Date().toISOString()}`;
+        let fullPath = bucketName;
+        if (prefix) fullPath = `${fullPath}/${prefix}`;
+        if (objectKey) fullPath = `${fullPath}/${objectKey}`;
+        if (type === ShareType.Folder) fullPath = `${fullPath}/`;
+
+        const LINK_SHARING_AG_NAME = `${fullPath}_shared-${type}_${new Date().toISOString()}`;
         const grant: AccessGrant = await agStore.createAccessGrant(LINK_SHARING_AG_NAME, selectedProject.value.id);
-        const creds: EdgeCredentials = await generateCredentials(grant.secret, path, null);
+        const creds: EdgeCredentials = await generateCredentials(grant.secret, fullPath, null);
+
+        let url = `${publicLinksharingURL.value}/s/${creds.accessKeyId}/${bucketName}`;
+        if (prefix) url = `${url}/${encodeURIComponent(prefix.trim())}`;
+        if (objectKey) url = `${url}/${encodeURIComponent(objectKey.trim())}`;
+        if (type === ShareType.Folder) url = `${url}/`;
 
-        return `${publicLinksharingURL.value}/s/${creds.accessKeyId}/${encodeURIComponent(path.trim())}`;
+        return url;
     }
 
     async function generateObjectPreviewAndMapURL(bucketName: string, path: string): Promise<string> {