diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx index bf168c17f7..bceff5edf7 100644 --- a/client/modules/IDE/components/AssetSize.jsx +++ b/client/modules/IDE/components/AssetSize.jsx @@ -17,6 +17,9 @@ const formatPercent = (percent) => { return `${Math.round(percentUsed)}%`; }; +export const getCurrentSize = (totalSize) => prettyBytes(totalSize); +export const getSizeLimit = () => prettyBytes(MAX_SIZE_B); + /* Eventually, this copy should be Total / 250 MB Used */ const AssetSize = ({ totalSize }) => { if (totalSize === undefined) { diff --git a/client/modules/IDE/components/FileNode.jsx b/client/modules/IDE/components/FileNode.jsx index 0b6424a783..19bdd4760c 100644 --- a/client/modules/IDE/components/FileNode.jsx +++ b/client/modules/IDE/components/FileNode.jsx @@ -11,6 +11,7 @@ import DownArrowIcon from '../../../images/down-filled-triangle.svg'; import FolderRightIcon from '../../../images/triangle-arrow-right.svg'; import FolderDownIcon from '../../../images/triangle-arrow-down.svg'; import FileIcon from '../../../images/file.svg'; +import { sizeLimit, currentSize } from './AssetSize'; function parseFileName(name) { const nameArray = name.split('.'); @@ -148,6 +149,12 @@ class FileNode extends React.Component { setTimeout(this.hideFileOptions, 0); }; + notifyStorageLimitReached = () => { + alert( + 'Your storage reached 250MB, please delete some files to add new ones.' + ); + }; + handleClickDelete = () => { const prompt = this.props.t('Common.DeleteConfirmation', { name: this.props.name @@ -360,14 +367,24 @@ class FileNode extends React.Component { {this.props.authenticated && (