web/satellite: multiple passphrase notification added

after redirecting from bucket page to upload page if we have no files/folders
related to this passphrase but have other objects in bucket we show closable
reminder that we support multiple passphrases per bucket

Change-Id: I6420aedd5605100e4aa35b598771e5298e251f91
This commit is contained in:
NickolaiYurchenko 2022-08-22 17:47:43 +03:00 committed by Nikolay Yurchenko
parent 7e5025cac0
commit f35b4163f9
3 changed files with 109 additions and 4 deletions

View File

@ -0,0 +1,80 @@
// Copyright (C) 2022 Storj Labs, Inc.
// See LICENSE for copying information.
<template>
<div v-if="isShown" class="notification-wrap">
<InfoIcon class="notification-wrap__icon" />
<div class="notification-wrap__text">
<slot name="text" />
</div>
<CloseIcon class="notification-wrap__close" @click="isShown = false" />
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import InfoIcon from '@/../static/images/notifications/info.svg';
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
// @vue/component
@Component({
components: {
CloseIcon,
InfoIcon,
}
})
export default class InfoNotification extends Vue {
public isShown = true;
}
</script>
<style scoped lang="scss">
.notification-wrap {
position: absolute;
right: 2.6rem;
top: 5rem;
z-index: 9999;
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 1.375rem;
font-family: 'font_regular', sans-serif;
background-color: #d7e8ff;
border: 1px solid #a5beff;
border-radius: 10px;
box-shadow: 0 7px 20px rgba(0 0 0 / 15%);
max-width: 29.6rem;
&__icon {
flex-shrink: 0;
margin-right: 1.375rem;
}
&__text {
max-width: 18.5rem;
text-align: left;
word-break: normal;
font-size: 1rem;
line-height: 1.625rem;
}
&__close {
margin-left: 2.375rem;
cursor: pointer;
}
}
.bold {
font-family: 'font_bold', sans-serif;
}
.medium {
font-family: 'font_medium', sans-serif;
}
.link {
color: black;
text-decoration: underline !important;
}
</style>

View File

@ -35,13 +35,14 @@
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import TableItem from "@/components/common/TableItem.vue";
import DeleteIcon from '@/../static/images/objects/delete.svg';
import DetailsIcon from '@/../static/images/objects/details.svg';
import DotsIcon from '@/../static/images/objects/dots.svg';
import {RouteConfig} from "@/router";
import {Bucket} from "@/types/buckets";
import TableItem from "@/components/common/TableItem.vue";
import {LocalData} from "@/utils/localData";
import { RouteConfig } from "@/router";
import { Bucket } from "@/types/buckets";
import { LocalData } from "@/utils/localData";
// @vue/component
@Component({

View File

@ -7,6 +7,12 @@
<div class="file-browser">
<FileBrowser />
</div>
<info-notification v-if="isMultiplePassphraseNotificationShown">
<template #text>
<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>
</template>
</info-notification>
<UploadCancelPopup v-if="isCancelUploadPopupVisible" />
</div>
</template>
@ -26,10 +32,13 @@ import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { MetaUtils } from '@/utils/meta';
import { Bucket } from "@/types/buckets";
import InfoNotification from "@/components/common/InfoNotification.vue";
// @vue/component
@Component({
components: {
InfoNotification,
FileBrowser,
UploadCancelPopup,
},
@ -40,6 +49,21 @@ export default class UploadFile extends Vue {
private worker: Worker;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
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.
* Initiates file browser.