From f35b4163f98de6c8a9032a738c12ce3766a2314d Mon Sep 17 00:00:00 2001
From: NickolaiYurchenko <nickolai.yurchenko@gmail.com>
Date: Mon, 22 Aug 2022 17:47:43 +0300
Subject: [PATCH] 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
---
 .../components/common/InfoNotification.vue    | 80 +++++++++++++++++++
 .../src/components/objects/BucketItem.vue     |  9 ++-
 .../src/components/objects/UploadFile.vue     | 24 ++++++
 3 files changed, 109 insertions(+), 4 deletions(-)
 create mode 100644 web/satellite/src/components/common/InfoNotification.vue

diff --git a/web/satellite/src/components/common/InfoNotification.vue b/web/satellite/src/components/common/InfoNotification.vue
new file mode 100644
index 000000000..563208f61
--- /dev/null
+++ b/web/satellite/src/components/common/InfoNotification.vue
@@ -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>
diff --git a/web/satellite/src/components/objects/BucketItem.vue b/web/satellite/src/components/objects/BucketItem.vue
index f4a80afb7..2108a0a4c 100644
--- a/web/satellite/src/components/objects/BucketItem.vue
+++ b/web/satellite/src/components/objects/BucketItem.vue
@@ -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({
diff --git a/web/satellite/src/components/objects/UploadFile.vue b/web/satellite/src/components/objects/UploadFile.vue
index 310722b94..18d10d46e 100644
--- a/web/satellite/src/components/objects/UploadFile.vue
+++ b/web/satellite/src/components/objects/UploadFile.vue
@@ -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.