web/satellite: fix for too many objects banner in object browser

Fixed 'Too may objects' objects banner being displayed in a wrong place.
I made it simpler and more correct because it's impossible to know the exact count of objects for each path/prefix because s3 client can list only 1000 objects (for now) and our API at the same time calculates object count for the whole bucket (not for particular passphrase).
Added message that user can list all objects using Uplink CLI.

Also removed unused legacy css file.

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

Change-Id: I4b3cff47763ebdb631119b690de876ecf6a22e9d

web/satellite/src/components/browser/FileBrowser.vue

@@ -93,8 +93,14 @@
                     <div class="hr-divider" />
 
                     <MultiplePassphraseBanner
-                        v-if="lockedFilesNumber > 0 && isBannerShown && !fetchingFilesSpinner && !currentPath"
+                        v-if="lockedFilesEntryDisplayed && isLockedBanner"
-                        :on-close="closeBanner"
+                        :locked-files-count="lockedFilesCount"
+                        :on-close="closeLockedBanner"
+                    />
+
+                    <TooManyObjectsBanner
+                        v-if="files.length >= NUMBER_OF_DISPLAYED_OBJECTS && isTooManyObjectsBanner"
+                        :on-close="closeTooManyObjectsBanner"
                     />
 
                     <v-table items-label="objects" :total-items-count="files.length" selectable :selected="allFilesSelected" show-select class="file-browser-table" @selectAllClicked="toggleSelectAllFiles">
@@ -220,6 +226,7 @@ import VButton from '@/components/common/VButton.vue';
 import BucketSettingsNav from '@/components/objects/BucketSettingsNav.vue';
 import VTable from '@/components/common/VTable.vue';
 import MultiplePassphraseBanner from '@/components/browser/MultiplePassphrasesBanner.vue';
+import TooManyObjectsBanner from '@/components/browser/TooManyObjectsBanner.vue';
 import UpEntry from '@/components/browser/UpEntry.vue';
 import Dropzone from '@/components/browser/Dropzone.vue';
 
@@ -241,7 +248,8 @@ const fileInput = ref<HTMLInputElement>();
 
 const fetchingFilesSpinner = ref<boolean>(false);
 const isUploadDropDownShown = ref<boolean>(false);
-const isBannerShown = ref<boolean>(true);
+const isLockedBanner = ref<boolean>(true);
+const isTooManyObjectsBanner = ref<boolean>(true);
 const isOver = ref<boolean>(false);
 /**
  * Retrieve the pathMatch from the current route.
@@ -289,7 +297,7 @@ const currentPath = computed((): string => {
 /**
  * Return locked files number.
  */
-const lockedFilesNumber = computed((): number => {
+const lockedFilesCount = computed((): number => {
     const ownObjectsCount = obStore.state.objectsCount;
 
     return objectsCount.value - ownObjectsCount;
@@ -309,7 +317,7 @@ const objectsCount = computed((): number => {
  * Indicates if locked files entry is displayed.
  */
 const lockedFilesEntryDisplayed = computed((): boolean => {
-    return lockedFilesNumber.value > 0 &&
+    return lockedFilesCount.value > 0 &&
         objectsCount.value <= NUMBER_OF_DISPLAYED_OBJECTS &&
         !fetchingFilesSpinner.value &&
         !currentPath.value;
@@ -392,8 +400,15 @@ const bucket = computed((): string => {
 /**
  * Closes multiple passphrase banner.
  */
-function closeBanner(): void {
+function closeLockedBanner(): void {
-    isBannerShown.value = false;
+    isLockedBanner.value = false;
+}
+
+/**
+ * Closes too many objects banner.
+ */
+function closeTooManyObjectsBanner(): void {
+    isTooManyObjectsBanner.value = false;
 }
 
 function calculateRoutePath(): string {

web/satellite/src/components/browser/FileBrowserHeader.vue

@@ -283,5 +283,4 @@ function cancelDeleteSelection(): void {
         }
     }
 }
-
 </style>

web/satellite/src/components/browser/MultiplePassphrasesBanner.vue

@@ -6,23 +6,15 @@
         <div class="banner__left">
             <LockedIcon class="banner__left__icon" />
             <div class="banner__left__labels">
-                <template v-if="objectsCount <= NUMBER_OF_DISPLAYED_OBJECTS">
+                <h2 class="banner__left__labels__title">
-                    <h2 class="banner__left__labels__title">
+                    You have at least {{ lockedFilesCount }} object{{ lockedFilesCount > 1 ? 's' : '' }} locked with a
-                        You have at least {{ lockedFilesNumber }} object{{ lockedFilesNumber > 1 ? 's' : '' }} locked with a
+                    different passphrase.
-                        different passphrase.
+                </h2>
-                    </h2>
+                <p class="banner__left__labels__subtitle">Enter your other passphrase to access these files.</p>
-                    <p class="banner__left__labels__subtitle">Enter your other passphrase to access these files.</p>
-                </template>
-                <template v-else>
-                    <h2 class="banner__left__labels__title">
-                        Due to the number of objects you have uploaded to this bucket, {{ lockedFilesNumber }} files are
-                        not displayed.
-                    </h2>
-                </template>
             </div>
         </div>
         <div class="banner__right">
-            <p v-if="objectsCount <= NUMBER_OF_DISPLAYED_OBJECTS" class="banner__right__unlock" @click="openManageModal">
+            <p class="banner__right__unlock" @click="openManageModal">
                 Unlock now
             </p>
             <CloseIcon class="banner__right__close" @click="onClose" />
@@ -31,48 +23,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-
-import { Bucket } from '@/types/buckets';
 import { ManageProjectPassphraseStep } from '@/types/managePassphrase';
 import { MODALS } from '@/utils/constants/appStatePopUps';
 import { useAppStore } from '@/store/modules/appStore';
-import { useBucketsStore } from '@/store/modules/bucketsStore';
-import { useObjectBrowserStore } from '@/store/modules/objectBrowserStore';
 
 import LockedIcon from '@/../static/images/browser/locked.svg';
 import CloseIcon from '@/../static/images/browser/close.svg';
 
-const props = withDefaults(defineProps<{
+const props = defineProps<{
-    onClose?: () => void;
+    lockedFilesCount: number
-}>(), {
+    onClose: () => void
-    onClose: () => {},
+}>();
-});
 
 const appStore = useAppStore();
-const bucketsStore = useBucketsStore();
-const obStore = useObjectBrowserStore();
-
-const NUMBER_OF_DISPLAYED_OBJECTS = 1000;
-
-/**
- * Returns locked files number.
- */
-const lockedFilesNumber = computed((): number => {
-    const ownObjectsCount = obStore.state.objectsCount;
-
-    return objectsCount.value - ownObjectsCount;
-});
-
-/**
- * Returns bucket objects count from store.
- */
-const objectsCount = computed((): number => {
-    const name: string = obStore.state.bucket;
-    const data: Bucket | undefined = bucketsStore.state.page.buckets.find((bucket: Bucket) => bucket.name === name);
-
-    return data?.objectCount || 0;
-});
 
 /**
  * Opens switch passphrase modal.

web/satellite/src/components/browser/TooManyObjectsBanner.vue

@@ -0,0 +1,79 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="banner">
+        <div class="banner__left">
+            <LockedIcon class="banner__left__icon" />
+            <p class="banner__left__title">
+                Due to the number of objects you have uploaded, some files may not be displayed.
+                To list all objects you can use
+                <a
+                    class="banner__left__title__link"
+                    href="https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/prerequisites"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Uplink CLI
+                </a>
+                tool.
+            </p>
+        </div>
+        <CloseIcon class="banner__close" @click="onClose" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import LockedIcon from '@/../static/images/browser/locked.svg';
+import CloseIcon from '@/../static/images/browser/close.svg';
+
+const props = defineProps<{
+    onClose: () => void
+}>();
+</script>
+
+<style scoped lang="scss">
+.banner {
+    padding: 16px;
+    background: #fec;
+    border: 1px solid var(--c-yellow-2);
+    box-shadow: 0 7px 20px rgb(0 0 0 / 15%);
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-family: 'font_regular', sans-serif;
+    margin-bottom: 21px;
+
+    &__left {
+        display: flex;
+        align-items: center;
+        margin-right: 15px;
+
+        &__icon {
+            margin-right: 16px;
+            min-width: 32px;
+        }
+
+        &__title {
+            font-family: 'font_bold', sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            color: var(--c-black);
+
+            &__link {
+                color: var(--c-blue-3);
+
+                &:visited {
+                    color: var(--c-blue-3);
+                }
+            }
+        }
+    }
+
+    &__close {
+        min-width: 12px;
+        cursor: pointer;
+    }
+}
+</style>