JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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

Resolves #5964

Change-Id: Ife0eb8f6cabbe85eaedae1d94d97694f3c677a3e
This commit is contained in:
Jeremy Wharton 2023-07-11 05:07:36 -05:00 committed by Storj Robot
parent 465941b345
commit 062ca285a0
6 changed files with 52 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/satellite/src/components/modals/OpenBucketModal.vue → web/satellite/src/components/modals/EnterBucketPassphraseModal.vue
View File

@ -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">

2
web/satellite/src/components/objects/BucketDetails.vue
View File

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

25
web/satellite/src/components/objects/BucketItem.vue
View File

@ -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();
});

2
web/satellite/src/components/objects/BucketsTable.vue
View File

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

7
web/satellite/src/store/modules/bucketsStore.ts
View File

@ -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,

6
web/satellite/src/utils/constants/appStatePopUps.ts
View File

@ -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,