web/satellite: add sharing option to dropdown in buckets page

This change adds a sharing option to the dropdown menu for bucket rows
in the Buckets page.

Resolves #5964

Change-Id: Ife0eb8f6cabbe85eaedae1d94d97694f3c677a3e

web/satellite/src/components/modals/EnterBucketPassphraseModal.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { computed, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { RouteConfig } from '@/types/router';
@@ -120,12 +120,16 @@ const bucketObjectCount = computed((): number => {
 async function onContinue(): Promise<void> {
     if (isLoading.value) return;
 
+    const callback = bucketsStore.state.enterPassphraseCallback || ((): void => {
+        analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
+        router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
+    });
+
     if (isWarningState.value) {
         bucketsStore.setPromptForPassphrase(false);
 
         closeModal();
-        analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
-        await router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
+        callback();
 
         return;
     }
@@ -150,14 +154,14 @@ async function onContinue(): Promise<void> {
         }
         bucketsStore.setPromptForPassphrase(false);
         isLoading.value = false;
-
-        closeModal();
-        analytics.pageVisit(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
-        router.push(RouteConfig.Buckets.with(RouteConfig.UploadFile).path);
     } catch (error) {
         notify.error(error.message, AnalyticsErrorEventSource.OPEN_BUCKET_MODAL);
         isLoading.value = false;
+        return;
     }
+
+    closeModal();
+    callback();
 }
 
 /**
@@ -178,6 +182,10 @@ function setPassphrase(value: string): void {
 
     passphrase.value = value;
 }
+
+onUnmounted((): void => {
+    bucketsStore.setEnterPassphraseCallback(null);
+});
 </script>
 
 <style scoped lang="scss">

web/satellite/src/components/objects/BucketDetails.vue

@@ -130,7 +130,7 @@ async function openBucket(): Promise<void> {
         return;
     }
 
-    appStore.updateActiveModal(MODALS.openBucket);
+    appStore.updateActiveModal(MODALS.enterBucketPassphrase);
 }
 
 /**

web/satellite/src/components/objects/BucketItem.vue

@@ -18,6 +18,10 @@
                         <details-icon />
                         <p class="bucket-item__functional__dropdown__item__label">View Bucket Details</p>
                     </div>
+                    <div class="bucket-item__functional__dropdown__item" @click.stop="onShareClick">
+                        <share-icon />
+                        <p class="bucket-item__functional__dropdown__item__label">Share Bucket</p>
+                    </div>
                     <div class="bucket-item__functional__dropdown__item delete" @click.stop="onDeleteClick">
                         <delete-icon />
                         <p class="bucket-item__functional__dropdown__item__label">Delete Bucket</p>
@@ -38,14 +42,18 @@ import { LocalData } from '@/utils/localData';
 import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useResize } from '@/composables/resize';
 import { useAppStore } from '@/store/modules/appStore';
+import { useBucketsStore } from '@/store/modules/bucketsStore';
+import { ShareType } from '@/types/browser';
 
 import TableItem from '@/components/common/TableItem.vue';
 
 import DeleteIcon from '@/../static/images/objects/delete.svg';
 import DetailsIcon from '@/../static/images/objects/details.svg';
+import ShareIcon from '@/../static/images/objects/share.svg';
 import DotsIcon from '@/../static/images/objects/dots.svg';
 
 const appStore = useAppStore();
+const bucketsStore = useBucketsStore();
 const router = useRouter();
 const route = useRoute();
 const { screenWidth } = useResize();
@@ -137,6 +145,23 @@ function onDetailsClick(): void {
     closeDropdown();
 }
 
+/**
+ * Opens the Share modal for this bucket.
+ */
+function onShareClick(): void {
+    bucketsStore.setFileComponentBucketName(props.itemData.name);
+    appStore.setShareModalType(ShareType.Bucket);
+
+    if (bucketsStore.state.promptForPassphrase) {
+        appStore.updateActiveModal(MODALS.enterBucketPassphrase);
+        bucketsStore.setEnterPassphraseCallback((): void => {
+            appStore.updateActiveModal(MODALS.share);
+        });
+        return;
+    }
+    appStore.updateActiveModal(MODALS.share);
+}
+
 onMounted((): void => {
     isGuideShown.value = !LocalData.getBucketGuideHidden();
 });

web/satellite/src/components/objects/BucketsTable.vue

@@ -226,7 +226,7 @@ async function openBucket(bucketName: string): Promise<void> {
         return;
     }
 
-    appStore.updateActiveModal(MODALS.openBucket);
+    appStore.updateActiveModal(MODALS.enterBucketPassphrase);
 }
 
 onBeforeUnmount(() => {

web/satellite/src/store/modules/bucketsStore.ts

@@ -47,6 +47,7 @@ export class BucketsState {
     public promptForPassphrase = true;
     public fileComponentBucketName = '';
     public leaveRoute = '';
+    public enterPassphraseCallback: (() => void) | null = null;
 }
 
 export const useBucketsStore = defineStore('buckets', () => {
@@ -201,6 +202,10 @@ export const useBucketsStore = defineStore('buckets', () => {
         state.fileComponentBucketName = bucketName;
     }
 
+    function setEnterPassphraseCallback(fn: (() => void) | null): void {
+        state.enterPassphraseCallback = fn;
+    }
+
     async function createBucket(name: string): Promise<void> {
         await state.s3Client.send(new CreateBucketCommand({
             Bucket: name,
@@ -274,6 +279,7 @@ export const useBucketsStore = defineStore('buckets', () => {
         state.allBucketNames = [];
         state.cursor = new BucketCursor('', DEFAULT_PAGE_LIMIT, FIRST_PAGE);
         state.page = new BucketPage([], '', DEFAULT_PAGE_LIMIT, 0, 1, 1, 0);
+        state.enterPassphraseCallback = null;
         clearS3Data();
     }
 
@@ -290,6 +296,7 @@ export const useBucketsStore = defineStore('buckets', () => {
         setPassphrase,
         setApiKey,
         setFileComponentBucketName,
+        setEnterPassphraseCallback,
         createBucket,
         createBucketWithNoPassphrase,
         deleteBucket,

web/satellite/src/utils/constants/appStatePopUps.ts

@@ -9,7 +9,7 @@ import EditProfileModal from '@/components/modals/EditProfileModal.vue';
 import ChangePasswordModal from '@/components/modals/ChangePasswordModal.vue';
 import ChangeProjectLimitModal from '@/components/modals/ChangeProjectLimitModal.vue';
 import CreateProjectModal from '@/components/modals/CreateProjectModal.vue';
-import OpenBucketModal from '@/components/modals/OpenBucketModal.vue';
+import EnterBucketPassphraseModal from '@/components/modals/EnterBucketPassphraseModal.vue';
 import MFARecoveryCodesModal from '@/components/modals/MFARecoveryCodesModal.vue';
 import EnableMFAModal from '@/components/modals/EnableMFAModal.vue';
 import DisableMFAModal from '@/components/modals/DisableMFAModal.vue';
@@ -61,7 +61,7 @@ enum Modals {
     EDIT_PROFILE = 'editProfile',
     CHANGE_PASSWORD = 'changePassword',
     CREATE_PROJECT = 'createProject',
-    OPEN_BUCKET = 'openBucket',
+    ENTER_BUCKET_PASSPHRASE = 'enterBucketPassphrase',
     MFA_RECOVERY = 'mfaRecovery',
     ENABLE_MFA = 'enableMFA',
     DISABLE_MFA = 'disableMFA',
@@ -94,7 +94,7 @@ export const MODALS: Record<Modals, Component> = {
     [Modals.EDIT_PROFILE]: EditProfileModal,
     [Modals.CHANGE_PASSWORD]: ChangePasswordModal,
     [Modals.CREATE_PROJECT]: CreateProjectModal,
-    [Modals.OPEN_BUCKET]: OpenBucketModal,
+    [Modals.ENTER_BUCKET_PASSPHRASE]: EnterBucketPassphraseModal,
     [Modals.MFA_RECOVERY]: MFARecoveryCodesModal,
     [Modals.ENABLE_MFA]: EnableMFAModal,
     [Modals.DISABLE_MFA]: DisableMFAModal,