feat(cloud): show storage quota usage and handle quota-exceeded response - #285
Conversation
DenizAltunkapan
left a comment
DenizAltunkapan
left a comment
There was a problem hiding this comment.
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.
7edc2f0 to
9ffa167
Compare
|
@priyanshuvishwakarma273403 please resolve the conflicts |
DenizAltunkapan
left a comment
DenizAltunkapan
left a comment
There was a problem hiding this comment.
Thanks for the updates. Two of the earlier points are handled: the three guessed URLs are down to one, and the component no longer invents a 5 GB total with a per-file size estimate on error, it just hides the widget. Good.
The main blocker is still open though. The service calls GET /api/files/storage/quota, and that endpoint does not exist in the cloud-page backend. I re-checked every controller (files, folders, trash) and there is no storage or quota read endpoint. The merged backend PR cloud-page#65 only added quota validation on upload, not a read endpoint. So in practice this call always fails, the catch sets storageQuota to undefined, and the usage widget that is the whole point of #284 never renders. Merging this would ship dead UI.
The path forward is the same as the folder-archive chain: land the read endpoint in cloud-page first, then point this at the real path and response shape. Details inline.
| } | ||
|
|
||
| getStorageQuota(): Observable<StorageQuotaDto> { | ||
| return this.http.get<RawQuotaResponse>(`${this.apiUrl}/storage/quota`).pipe( |
There was a problem hiding this comment.
This endpoint still does not exist in cloud-page. There is no storage or quota read endpoint in any controller, only the upload-time validation from cloud-page#65. Until the backend exposes a read endpoint, this call fails on every load and the widget never shows. Please hold until it lands, then confirm the real path and response fields against the controller.
| res?.quotaBytes ?? | ||
| res?.total ?? | ||
| res?.totalSpace ?? | ||
| 10 * 1024 * 1024 * 1024, |
There was a problem hiding this comment.
The 10 GB total fallback is still here. Even once the endpoint exists, if it returns no total field this shows an invented 10 GB as if it were the real quota. Prefer leaving totalBytes undefined and hiding the widget over displaying a fabricated number, so users never see a made-up limit.
2 participants
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.