JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: updates for large file upload

Browse Source 
Universal "large file notification" removed.
Threshold for user-triggered large file notification is 5gb instead of 1gb.
Large file notification appears as "info" instead of "warning".
Display large file notification on failed uploads >1gb.

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

Change-Id: I6ae6ba50e45c65f058cbb91a5f0fbda79a49a812
This commit is contained in:
Vitalii 2023-08-09 15:37:55 +03:00 committed by Storj Robot
parent 6b2fb9dfc4
commit e226606ce8
7 changed files with 19 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/satellite/src/components/notifications/UploadNotification.vue
View File

@ -2,7 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="notification-wrap__content" :class="{ 'notification-wrap__warning-colors': warningNotification}">
<div class="notification-wrap__content" :class="{ 'notification-wrap__info-colors': infoNotification }">
<component :is="notificationIcon" class="notification-wrap__content__icon" />
<div class="notification-wrap__content__middle">
<p class="text"><b>{{ wordingBold }}</b> {{ wording }}</p>
@ -16,11 +16,11 @@
import CloseIcon from '@/../static/images/notifications/closeSmall.svg';
const props = defineProps<{
wordingBold: string;
wording: string;
notificationIcon: string;
warningNotification: boolean;
onCloseClick: () => void;
wordingBold: string;
wording: string;
notificationIcon: string;
infoNotification: boolean;
onCloseClick: () => void;
}>();
</script>
@ -69,9 +69,9 @@ const props = defineProps<{
}
}
&__warning-colors {
background-color: #fec;
border: 1px solid #ffd78a;
&__info-colors {
background-color: var(--c-blue-2);
border: 1px solid #a5beff;
}
}
</style>

6
web/satellite/src/store/modules/appStore.ts
View File

@ -32,7 +32,6 @@ class AppState {
// for when the dashboard opens the pricing plan and the pricing plan navigates back repeatedly.
public hasShownPricingPlan = false;
public error: ErrorPageState = new ErrorPageState();
public isLargeUploadNotificationShown = true;
public isLargeUploadWarningNotificationShown = false;
public activeChangeLimit: LimitToChange = LimitToChange.Storage;
public isProjectTableViewEnabled = LocalData.getProjectTableViewEnabled();
@ -148,10 +147,6 @@ export const useAppStore = defineStore('app', () => {
state.isLargeUploadWarningNotificationShown = value;
}
function setLargeUploadNotification(value: boolean): void {
state.isLargeUploadNotificationShown = value;
}
function setGalleryView(value: boolean): void {
state.isGalleryView = value;
}
@ -217,7 +212,6 @@ export const useAppStore = defineStore('app', () => {
setHasShownPricingPlan,
setUploadingModal,
setLargeUploadWarningNotification,
setLargeUploadNotification,
setShareModalType,
closeDropdowns,
setErrorPage,

11
web/satellite/src/store/modules/objectBrowserStore.ts
View File

@ -458,8 +458,8 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
}
}
// If file size exceeds 1 GB, show warning notification
if (body.size > (1024 * 1024 * 1024)) {
// If file size exceeds 5 GB, show warning notification
if (body.size > (5 * 1024 * 1024 * 1024)) {
appStore.setLargeUploadWarningNotification(true);
}
@ -540,10 +540,15 @@ export const useObjectBrowserStore = defineStore('objectBrowser', () => {
if (error.name === 'AbortError' && item.status === UploadingStatus.Cancelled) return;
const config = useConfigStore();
if (config.state.config.newUploadModalEnabled) {
item.status = UploadingStatus.Failed;
item.failedMessage = FailedUploadMessage.Failed;
// If file size exceeds 1 GB, show warning notification.
if (item.Size > (1024 * 1024 * 1024)) {
const appStore = useAppStore();
appStore.setLargeUploadWarningNotification(true);
}
}
const { notifyError } = useNotificationsStore();

14
web/satellite/src/utils/localData.ts
View File

@ -9,10 +9,8 @@ export class LocalData {
private static bucketWasCreated = 'bucketWasCreated';
private static demoBucketCreated = 'demoBucketCreated';
private static bucketGuideHidden = 'bucketGuideHidden';
private static sessionTimeoutBannerAcknowledged = 'sessionTimeoutBannerAcknowledged';
private static serverSideEncryptionBannerHidden = 'serverSideEncryptionBannerHidden';
private static serverSideEncryptionModalHidden = 'serverSideEncryptionModalHidden';
private static largeUploadNotificationDismissed = 'largeUploadNotificationDismissed';
private static sessionExpirationDate = 'sessionExpirationDate';
private static projectLimitBannerHidden = 'projectLimitBannerHidden';
private static projectTableViewEnabled = 'projectTableViewEnabled';
@ -25,10 +23,6 @@ export class LocalData {
localStorage.setItem(LocalData.selectedProjectId, id);
}
public static removeSelectedProjectId(): void {
localStorage.removeItem(LocalData.selectedProjectId);
}
public static getDemoBucketCreatedStatus(): string | null {
const status = localStorage.getItem(LocalData.demoBucketCreated);
if (!status) return null;
@ -87,14 +81,6 @@ export class LocalData {
return value === 'true';
}
public static getLargeUploadNotificationDismissed(): boolean {
return Boolean(localStorage.getItem(LocalData.largeUploadNotificationDismissed));
}
public static setLargeUploadNotificationDismissed(): void {
localStorage.setItem(LocalData.largeUploadNotificationDismissed, 'true');
}
public static getSessionExpirationDate(): Date | null {
const data: string | null = localStorage.getItem(LocalData.sessionExpirationDate);
if (data) {

37
web/satellite/src/views/DashboardArea.vue
View File

@ -70,20 +70,12 @@
</div>
<router-view class="dashboard__wrap__main-area__content-wrap__container__content" />
<div class="dashboard__wrap__main-area__content-wrap__container__content banners-bottom">
<UploadNotification
v-if="isLargeUploadNotificationShown && !isLargeUploadWarningNotificationShown && isBucketsView"
wording-bold="The web browser is best for uploads up to 1GB."
wording="To upload larger files, check our recommendations"
:notification-icon="CloudIcon"
:warning-notification="false"
:on-close-click="onNotificationCloseClick"
/>
<UploadNotification
v-if="isLargeUploadWarningNotificationShown"
wording-bold="Trying to upload a large file?"
wording="Check the recommendations for your use case"
:notification-icon="WarningIcon"
:warning-notification="true"
info-notification
:on-close-click="onWarningNotificationCloseClick"
/>
</div>
@ -167,7 +159,6 @@ import ProjectInvitationBanner from '@/components/notifications/ProjectInvitatio
import BrandedLoader from '@/components/common/BrandedLoader.vue';
import ObjectsUploadingModal from '@/components/modals/objectUpload/ObjectsUploadingModal.vue';
import CloudIcon from '@/../static/images/notifications/cloudAlert.svg';
import WarningIcon from '@/../static/images/notifications/circleWarning.svg';
const analyticsStore = useAnalyticsStore();
@ -379,13 +370,6 @@ const showMFARecoveryCodeBar = computed((): boolean => {
return user.isMFAEnabled && user.mfaRecoveryCodeCount < recoveryCodeWarningThreshold;
});
/**
* Indicates whether the large upload notification should be shown.
*/
const isLargeUploadNotificationShown = computed((): boolean => {
return appStore.state.isLargeUploadNotificationShown;
});
/**
* Indicates whether the large upload warning notification should be shown (file uploading exceeds 1GB).
*/
@ -414,21 +398,6 @@ const isDashboardPage = computed((): boolean => {
return route.name === RouteConfig.ProjectDashboard.name;
});
/**
* Indicates if current route is the bucketsView page.
*/
const isBucketsView = computed((): boolean => {
return route.name === RouteConfig.BucketsManagement.name;
});
/**
* Closes upload notification and persists state in local storage.
*/
function onNotificationCloseClick(): void {
appStore.setLargeUploadNotification(false);
LocalData.setLargeUploadNotificationDismissed();
}
/**
* Closes upload large files warning notification.
*/
@ -697,10 +666,6 @@ onMounted(async () => {
}
});
if (LocalData.getLargeUploadNotificationDismissed()) {
appStore.setLargeUploadNotification(false);
}
try {
await Promise.all([
usersStore.getUser(),

2
web/satellite/static/images/notifications/circleWarning.svg
View File

@ -1,3 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15 0.600006C22.9529 0.600006 29.4 7.04711 29.4 15C29.4 22.9529 22.9529 29.4 15 29.4C7.04711 29.4 0.600006 22.9529 0.600006 15C0.600006 7.04711 7.04711 0.600006 15 0.600006ZM15 3.24001C8.50514 3.24001 3.24001 8.50514 3.24001 15C3.24001 21.4949 8.50514 26.76 15 26.76C21.4949 26.76 26.76 21.4949 26.76 15C26.76 8.50514 21.4949 3.24001 15 3.24001ZM16.2 8.40074V15.9936C16.2 16.7226 15.609 17.3136 14.88 17.3136C14.1688 17.3136 13.5889 16.7511 13.5611 16.0467L13.56 15.9936V8.48858C13.56 7.75216 14.144 7.14842 14.88 7.12393C15.5852 7.10046 16.1758 7.65309 16.1993 8.35825C16.1998 8.37241 16.2 8.38657 16.2 8.40074ZM16.2 21.1207V21.2736C16.2 22.0026 15.609 22.5936 14.88 22.5936C14.1688 22.5936 13.5889 22.0311 13.5611 21.3267L13.56 21.2736V21.2086C13.56 20.4722 14.144 19.8684 14.88 19.8439C15.5852 19.8205 16.1758 20.3731 16.1993 21.0783C16.1998 21.0924 16.2 21.1066 16.2 21.1207Z" fill="#FF8A00"/>
<path d="M15 0.600006C22.9529 0.600006 29.4 7.04711 29.4 15C29.4 22.9529 22.9529 29.4 15 29.4C7.04711 29.4 0.600006 22.9529 0.600006 15C0.600006 7.04711 7.04711 0.600006 15 0.600006ZM15 3.24001C8.50514 3.24001 3.24001 8.50514 3.24001 15C3.24001 21.4949 8.50514 26.76 15 26.76C21.4949 26.76 26.76 21.4949 26.76 15C26.76 8.50514 21.4949 3.24001 15 3.24001ZM16.2 8.40074V15.9936C16.2 16.7226 15.609 17.3136 14.88 17.3136C14.1688 17.3136 13.5889 16.7511 13.5611 16.0467L13.56 15.9936V8.48858C13.56 7.75216 14.144 7.14842 14.88 7.12393C15.5852 7.10046 16.1758 7.65309 16.1993 8.35825C16.1998 8.37241 16.2 8.38657 16.2 8.40074ZM16.2 21.1207V21.2736C16.2 22.0026 15.609 22.5936 14.88 22.5936C14.1688 22.5936 13.5889 22.0311 13.5611 21.3267L13.56 21.2736V21.2086C13.56 20.4722 14.144 19.8684 14.88 19.8439C15.5852 19.8205 16.1758 20.3731 16.1993 21.0783C16.1998 21.0924 16.2 21.1066 16.2 21.1207Z" fill="#003DC1"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1010 B

After

Width:  |  Height:  |  Size: 1010 B

5
web/satellite/static/images/notifications/cloudAlert.svg
View File

@ -1,5 +0,0 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.4714 32C37.4486 32 39.8621 29.5865 39.8621 26.6094V25.4941C39.8621 22.5169 37.4486 20.1034 34.4714 20.1034L31.9243 20.1036C31.7154 13.9359 26.6496 9 20.431 9C15.6237 9 11.5053 11.9498 9.78712 16.138L8.93103 16.1379C4.55084 16.1379 1 19.6888 1 24.069C1 28.4492 4.55084 32 8.93103 32H34.4714Z" fill="#C8D3DE"/>
<path d="M20.431 28.8275C25.0302 28.8275 28.7586 25.0991 28.7586 20.5C28.7586 15.9008 25.0302 12.1724 20.431 12.1724C15.8318 12.1724 12.1035 15.9008 12.1035 20.5C12.1035 25.0991 15.8318 28.8275 20.431 28.8275Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.431 21.6896C21.5261 21.6896 22.4138 22.5773 22.4138 23.6723C22.4138 24.7674 21.5261 25.6551 20.431 25.6551C19.336 25.6551 18.4483 24.7674 18.4483 23.6723C18.4483 22.5773 19.336 21.6896 20.431 21.6896ZM20.431 14.5516C21.3808 14.5516 22.1507 15.3215 22.1507 16.2713C22.1507 16.3526 22.1449 16.4339 22.1334 16.5145L21.6207 20.1034H19.2414L18.7287 16.5145C18.5944 15.5743 19.2477 14.7032 20.1878 14.5689C20.2684 14.5574 20.3497 14.5516 20.431 14.5516Z" fill="#FF458B"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB