web/satellite: add object browser page actions

This change adds a dropdown menu action to the object browser with options; delete bucket, share bucket and toggle versioning. Issue: #6811 Change-Id: If2934e9e48332793698665ffd80823eadcb02518
storj · Mar 21, 2024 · 09137e9 · 09137e9
1 parent 72b1c2a
commit 09137e9
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 24 deletions.
diff --git a/web/satellite/src/api/buckets.ts b/web/satellite/src/api/buckets.ts
@@ -1,10 +1,17 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { Bucket, BucketCursor, BucketPage, BucketPlacement, BucketsApi } from '@/types/buckets';
+import {
+    Bucket,
+    BucketCursor,
+    BucketMetadata,
+    BucketPage,
+    BucketsApi,
+} from '@/types/buckets';
 import { HttpClient } from '@/utils/httpClient';
 import { APIError } from '@/utils/error';
 import { getVersioning } from '@/types/versioning';
+import { Placement } from '@/types/placements.js';
 
 /**
  * BucketsHttpApi is an HTTP implementation of the Buckets API.
@@ -90,25 +97,32 @@ export class BucketsHttpApi implements BucketsApi {
     }
 
     /**
-     * Fetch all bucket placements.
+     * Fetch all bucket metadata.
      *
-     * @returns BucketPlacement[]
+     * @returns BucketMetadata[]
      * @throws Error
      */
-    public async getAllBucketPlacements(projectId: string): Promise<BucketPlacement[]> {
-        const path = `${this.ROOT_PATH}/bucket-placements?publicID=${projectId}`;
+    public async getAllBucketMetadata(projectId: string): Promise<BucketMetadata[]> {
+        const path = `${this.ROOT_PATH}/bucket-metadata?publicID=${projectId}`;
         const response = await this.client.get(path);
 
         if (!response.ok) {
             throw new APIError({
                 status: response.status,
-                message: 'Can not get bucket placements',
+                message: 'Can not get bucket metadata',
                 requestID: response.headers.get('x-request-id'),
             });
         }
 
         const result = await response.json();
 
-        return result ? result : [];
+        return result?.map(bVersioning => new BucketMetadata(
+            bVersioning.name,
+            getVersioning(bVersioning.versioning),
+            new Placement(
+                bVersioning.placement.defaultPlacement,
+                bVersioning.placement.location,
+            ),
+        )) || [];
     }
 }
diff --git a/web/satellite/src/components/BrowserBreadcrumbsComponent.vue b/web/satellite/src/components/BrowserBreadcrumbsComponent.vue
@@ -40,7 +40,7 @@ const bucketName = computed<string>(() => bucketsStore.state.fileComponentBucket
  * Returns the location of the selected bucket.
  */
 const bucketLocation = computed((): string => {
-    const bucket = bucketsStore.state.allBucketPlacements.find((el) => el.name === bucketName.value);
+    const bucket = bucketsStore.state.allBucketMetadata.find((el) => el.name === bucketName.value);
     if (!bucket) {
         return '';
     }

diff --git a/web/satellite/src/components/dialogs/DeleteBucketDialog.vue b/web/satellite/src/components/dialogs/DeleteBucketDialog.vue
@@ -100,6 +100,8 @@ const props = defineProps<{
 
 const model = defineModel<boolean>({ required: true });
 
+const emit = defineEmits(['deleted']);
+
 const analyticsStore = useAnalyticsStore();
 const configStore = useConfigStore();
 const bucketsStore = useBucketsStore();
@@ -197,6 +199,7 @@ async function onDelete(): Promise<void> {
 
         notify.success('Bucket deleted.');
         model.value = false;
+        emit('deleted');
     });
 }
 

diff --git a/web/satellite/src/components/icons/IconDropdown.vue b/web/satellite/src/components/icons/IconDropdown.vue
@@ -0,0 +1,9 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <!-- Dropdown Icon -->
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M5.26677 7.26676C5.12303 7.4105 4.89216 7.41401 4.74418 7.27728L4.73323 7.26676L0.610498 3.14403C0.463168 2.9967 0.463168 2.75783 0.610498 2.6105C0.754235 2.46676 0.985101 2.46325 1.13309 2.59998L1.14403 2.6105L4.99996 6.46651L8.85597 2.6105C8.99971 2.46676 9.23057 2.46326 9.37856 2.59998L9.3895 2.6105C9.53324 2.75423 9.53674 2.9851 9.40002 3.13309L9.3895 3.14403L5.26677 7.26676Z" fill="#56606D" />
+    </svg>
+</template>
diff --git a/web/satellite/src/store/modules/bucketsStore.ts b/web/satellite/src/store/modules/bucketsStore.ts
@@ -14,7 +14,13 @@ import {
 } from '@aws-sdk/client-s3';
 import { SignatureV4 } from '@smithy/signature-v4';
 
-import { Bucket, BucketCursor, BucketPlacement, BucketPage, BucketsApi } from '@/types/buckets';
+import {
+    Bucket,
+    BucketCursor,
+    BucketPage,
+    BucketsApi,
+    BucketMetadata,
+} from '@/types/buckets';
 import { BucketsHttpApi } from '@/api/buckets';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
@@ -27,7 +33,7 @@ export const FILE_BROWSER_AG_NAME = 'Web file browser API key';
 
 export class BucketsState {
     public allBucketNames: string[] = [];
-    public allBucketPlacements: BucketPlacement[] = [];
+    public allBucketMetadata: BucketMetadata[] = [];
     public cursor: BucketCursor = { limit: DEFAULT_PAGE_LIMIT, search: '', page: FIRST_PAGE };
     public page: BucketPage = { buckets: new Array<Bucket>(), currentPage: 1, pageCount: 1, offset: 0, limit: DEFAULT_PAGE_LIMIT, search: '', totalCount: 0 };
     public edgeCredentials: EdgeCredentials = new EdgeCredentials();
@@ -81,8 +87,8 @@ export const useBucketsStore = defineStore('buckets', () => {
         state.allBucketNames = await api.getAllBucketNames(projectID);
     }
 
-    async function getAllBucketsPlacements(projectID: string): Promise<void> {
-        state.allBucketPlacements = await api.getAllBucketPlacements(projectID);
+    async function getAllBucketsMetadata(projectID: string): Promise<void> {
+        state.allBucketMetadata = await api.getAllBucketMetadata(projectID);
     }
 
     function setPromptForPassphrase(value: boolean): void {
@@ -347,7 +353,7 @@ export const useBucketsStore = defineStore('buckets', () => {
         setBucketsSearch,
         getBuckets,
         getAllBucketsNames,
-        getAllBucketsPlacements,
+        getAllBucketsMetadata,
         setPromptForPassphrase,
         setEdgeCredentials,
         setEdgeCredentialsForDelete,

diff --git a/web/satellite/src/types/buckets.ts b/web/satellite/src/types/buckets.ts
@@ -27,12 +27,12 @@ export interface BucketsApi {
 
     /**
      *
-     * Fetch all bucket placements
+     * Fetch all bucket metadata
      *
-     * @returns BucketPlacement[]
+     * @returns BucketMetadata[]
      * @throws Error
      */
-    getAllBucketPlacements(projectId: string): Promise<BucketPlacement[]>
+    getAllBucketMetadata(projectId: string): Promise<BucketMetadata[]>
 }
 
 /**
@@ -80,11 +80,12 @@ export class BucketCursor {
 }
 
 /**
- * BucketPlacement class holds bucket name, placement ID, and location.
+ * BucketMeta class holds misc bucket metadata.
  */
-export class BucketPlacement {
+export class BucketMetadata {
     public constructor(
         public name: string = '',
+        public versioning: Versioning = Versioning.NotSupported,
         public placement: Placement = new Placement(),
     ) { }
 }