web/satellite: fixed multiple passphrases notification for object browser

Fixed notifications link to toggle manage passphrase modal instead of redirecting to buckets screen.

Issue:
https://github.com/storj/storj/issues/5452

Change-Id: I84ce67da7445c6316eb0658606c0129bb4af680e
This commit is contained in:
Vitalii 2023-01-20 11:27:28 +02:00 committed by Storj Robot
parent eab595397f
commit c98ef89311

View File

@ -9,7 +9,12 @@
<info-notification v-if="isMultiplePassphraseNotificationShown"> <info-notification v-if="isMultiplePassphraseNotificationShown">
<template #text> <template #text>
<p class="medium">Do you know a bucket can have multiple passphrases?</p> <p class="medium">Do you know a bucket can have multiple passphrases?</p>
<p>If you dont see the objects youre looking for, <router-link class="link" :to="bucketsManagementPath">try opening the bucket again</router-link> with a different passphrase.</p> <p>
If you dont see the objects youre looking for,
<span v-if="isNewEncryptionPassphraseFlowEnabled" class="link" @click="toggleManagePassphrase">try opening the bucket again</span>
<router-link v-else class="link" :to="bucketsManagementPath">try opening the bucket again</router-link>
with a different passphrase.
</p>
</template> </template>
</info-notification> </info-notification>
<UploadCancelPopup v-if="isCancelUploadPopupVisible" /> <UploadCancelPopup v-if="isCancelUploadPopupVisible" />
@ -27,6 +32,7 @@ import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames'; import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MetaUtils } from '@/utils/meta'; import { MetaUtils } from '@/utils/meta';
import { Bucket } from '@/types/buckets'; import { Bucket } from '@/types/buckets';
import { APP_STATE_MUTATIONS } from '@/store/mutationConstants';
import FileBrowser from '@/components/browser/FileBrowser.vue'; import FileBrowser from '@/components/browser/FileBrowser.vue';
import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue'; import UploadCancelPopup from '@/components/objects/UploadCancelPopup.vue';
@ -47,19 +53,6 @@ export default class UploadFile extends Vue {
public readonly bucketsManagementPath: string = RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path; public readonly bucketsManagementPath: string = RouteConfig.Buckets.with(RouteConfig.BucketsManagement).path;
/**
* Indicates if we have objects in this bucket but not for inputted passphrase.
*/
public get isMultiplePassphraseNotificationShown(): boolean {
const name: string = this.$store.state.files.bucket;
const data: Bucket = this.$store.state.bucketUsageModule.page.buckets.find((bucket: Bucket) => bucket.name === name);
const objectCount: number = data?.objectCount || 0;
const ownObjects = this.$store.getters['files/sortedFiles'];
return objectCount > 0 && !ownObjects.length;
}
/** /**
* Lifecycle hook after vue instance was created. * Lifecycle hook after vue instance was created.
* Initiates file browser. * Initiates file browser.
@ -147,6 +140,13 @@ export default class UploadFile extends Vue {
} }
} }
/**
* Toggles manage project passphrase modal visibility.
*/
public toggleManagePassphrase(): void {
this.$store.commit(APP_STATE_MUTATIONS.TOGGLE_MANAGE_PROJECT_PASSPHRASE_MODAL_SHOWN);
}
/** /**
* Sets local worker with worker instantiated in store. * Sets local worker with worker instantiated in store.
*/ */
@ -210,6 +210,19 @@ export default class UploadFile extends Vue {
return await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: data.value, isPublic: true }); return await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, { accessGrant: data.value, isPublic: true });
} }
/**
* Indicates if we have objects in this bucket but not for inputted passphrase.
*/
public get isMultiplePassphraseNotificationShown(): boolean {
const name: string = this.$store.state.files.bucket;
const data: Bucket = this.$store.state.bucketUsageModule.page.buckets.find((bucket: Bucket) => bucket.name === name);
const objectCount: number = data?.objectCount || 0;
const ownObjects = this.$store.getters['files/sortedFiles'];
return objectCount > 0 && !ownObjects.length;
}
/** /**
* Indicates if upload cancel popup is visible. * Indicates if upload cancel popup is visible.
*/ */
@ -259,4 +272,8 @@ export default class UploadFile extends Vue {
font-family: 'font_regular', sans-serif; font-family: 'font_regular', sans-serif;
padding-bottom: 200px; padding-bottom: 200px;
} }
.link {
cursor: pointer;
}
</style> </style>