Skip to content

feat(cloud): show storage quota usage and handle quota-exceeded response#285

Open
priyanshuvishwakarma273403 wants to merge 3 commits into
Vault-Web:mainfrom
priyanshuvishwakarma273403:feat/cloud-storage-quota
Open

feat(cloud): show storage quota usage and handle quota-exceeded response#285
priyanshuvishwakarma273403 wants to merge 3 commits into
Vault-Web:mainfrom
priyanshuvishwakarma273403:feat/cloud-storage-quota

Conversation

@priyanshuvishwakarma273403

Copy link
Copy Markdown
Contributor

Summary
This PR surfaces per-user storage quota usage in the Cloud UI and provides clear, dedicated feedback via toast notifications when an upload or file save operation fails due to exceeding the storage quota.

Closes #284 (Related to Vault-Web/cloud-page#65).

Problem
Previously, backend storage quota validation existed, but the Cloud UI did not show users how much space they had used or had left. When an upload was rejected because the quota was exceeded, users received a generic failure message with no indication that quota was the root cause.

Proposed Solution & Changes
Storage Usage Indicator (cloud.component.html, cloud.component.scss):

Added a visible storage usage widget in the Cloud page header displaying used space vs. total quota and usage percentage (e.g. 1.2 MB / 5.0 GB (24%)).
Integrated dynamic status color accents for the progress bar:
Normal (< 75%): Blue/Indigo gradient
Warning (75%–89%): Amber gradient
Danger (≥ 90%): Red gradient
Styled with responsive CSS to remain clean and readable on both desktop and mobile screens.
Real-Time Storage Quota Updates (cloud.component.ts, cloud.service.ts):

Created StorageQuotaDto model and getStorageQuota() method in CloudService.
Automatically refreshes displayed storage usage upon initial page load, file uploads, file edits/saves, and file/folder deletions.
Quota-Exceeded Toast Notifications (cloud.component.ts):

Implemented isQuotaExceededError() helper to detect HTTP 413 (Payload Too Large), HTTP 507 (Insufficient Storage), or backend quota error responses.
Triggers specific, user-friendly toast error messages (Storage quota exceeded: "Cannot upload file. Your storage quota has been reached. Please delete some files to free up space.").
Unit Testing & Build Verification:

Added unit tests in cloud.service.spec.ts and cloud.component.spec.ts.
All tests passed (10/10 SUCCESS) and production build verified cleanly.
Acceptance Criteria Verification
The Cloud UI shows the user's current storage usage and total quota.
The displayed usage updates after uploads and deletions.
An upload rejected for exceeding the quota shows a clear, specific message via toast notifications.
The usage indicator is readable on desktop and mobile widths.

@DenizAltunkapan DenizAltunkapan left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking this on. The quota-exceeded detection and the usage widget are heading in the right direction, and the toast messaging is clear. There is one blocking problem though: the feature depends on a backend endpoint that does not exist, so the usage indicator will not show real data. I checked the cloud-page backend and there is no storage or quota read endpoint at all. The backend only knows the per-user quota and enforces it on upload, but it never exposes current usage or the limit over an API. Details and a few smaller points are inline.

Comment thread frontend/src/app/services/cloud.service.ts Outdated
Comment thread frontend/src/app/services/cloud.service.ts
Comment thread frontend/src/app/pages/cloud/cloud.component.ts Outdated
Comment thread frontend/src/app/services/cloud.service.spec.ts Outdated
@DenizAltunkapan

Copy link
Copy Markdown
Member

@priyanshuvishwakarma273403 please resolve the conflicts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Show storage quota usage and handle quota-exceeded in the Cloud UI

2 participants