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:
parent
7e5025cac0
commit
f35b4163f9
80
web/satellite/src/components/common/InfoNotification.vue
Normal file
80
web/satellite/src/components/common/InfoNotification.vue
Normal 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>
|
@ -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({
|
||||
|
@ -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 don’t see the objects you’re 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.
|
||||
|
Loading…
Reference in New Issue
Block a user