Add changes for asset upload limit, after cherry-picking changes from asset-limit-with-lambda

Author: catarak

client/modules/IDE/actions/ide.js

@@ -75,9 +75,10 @@ export function closeNewFileModal() {
   };
 }
 
-export function openUploadFileModal() {
+export function openUploadFileModal(parentId) {
   return {
-    type: ActionTypes.OPEN_UPLOAD_FILE_MODAL
+    type: ActionTypes.OPEN_UPLOAD_FILE_MODAL,
+    parentId
   };
 }
 

client/modules/IDE/components/AssetList.jsx

@@ -127,7 +127,8 @@ AssetListRowBase.propTypes = {
     url: PropTypes.string.isRequired,
     sketchId: PropTypes.string,
     sketchName: PropTypes.string,
-    name: PropTypes.string.isRequired
+    name: PropTypes.string.isRequired,
+    size: PropTypes.number.isRequired
   }).isRequired,
   deleteAssetRequest: PropTypes.func.isRequired,
   username: PropTypes.string.isRequired
@@ -172,13 +173,9 @@ class AssetList extends React.Component {
   }
 
   render() {
-    const { assetList, totalSize } = this.props;
+    const { assetList } = this.props;
     return (
       <div className="asset-table-container">
-        {/* Eventually, this copy should be Total / 250 MB Used */}
-        {this.hasAssets() && totalSize &&
-          <p className="asset-table__total">{`${prettyBytes(totalSize)} Total`}</p>
-        }
         <Helmet>
           <title>{this.getAssetsTitle()}</title>
         </Helmet>
@@ -188,7 +185,7 @@ class AssetList extends React.Component {
           <table className="asset-table">
             <thead>
               <tr>
-                <th>Name</th>                      
+                <th>Name</th>
                 <th>Size</th>
                 <th>Sketch</th>
                 <th scope="col"></th>
@@ -214,20 +211,14 @@ AssetList.propTypes = {
     sketchName: PropTypes.string,
     sketchId: PropTypes.string
   })).isRequired,
-  totalSize: PropTypes.number,
   getAssets: PropTypes.func.isRequired,
   loading: PropTypes.bool.isRequired
 };
 
-AssetList.defaultProps = {
-  totalSize: undefined
-};
-
 function mapStateToProps(state) {
   return {
     user: state.user,
     assetList: state.assets.list,
-    totalSize: state.user.totalSize,
     loading: state.loading
   };
 }

client/modules/IDE/components/AssetSize.jsx

@@ -3,8 +3,9 @@ import React from 'react';
 import { connect } from 'react-redux';
 import prettyBytes from 'pretty-bytes';
 
-const MB_TO_B = 1000 * 1000;
-const MAX_SIZE_B = 250 * MB_TO_B;
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const limit = __process.env.UPLOAD_LIMIT || 250000000;
+const MAX_SIZE_B = limit;
 
 const formatPercent = (percent) => {
   const percentUsed = percent * 100;
@@ -17,17 +18,18 @@ const formatPercent = (percent) => {
 
 /* Eventually, this copy should be Total / 250 MB Used */
 const AssetSize = ({ totalSize }) => {
-  if (!totalSize) {
+  if (totalSize === undefined) {
     return null;
   }
 
   const currentSize = prettyBytes(totalSize);
   const sizeLimit = prettyBytes(MAX_SIZE_B);
   const percentValue = totalSize / MAX_SIZE_B;
   const percent = formatPercent(percentValue);
+  const percentSize = percentValue < 1 ? percentValue : 1;
 
   return (
-    <div className="asset-size" style={{ '--percent': percentValue }}>
+    <div className="asset-size" style={{ '--percent': percentSize }}>
       <div className="asset-size-bar" />
       <p className="asset-current">{currentSize} ({percent})</p>
       <p className="asset-max">Max: {sizeLimit}</p>
@@ -42,7 +44,7 @@ AssetSize.propTypes = {
 function mapStateToProps(state) {
   return {
     user: state.user,
-    totalSize: state.assets.totalSize,
+    totalSize: state.user.totalSize || state.assets.totalSize,
   };
 }
 

client/modules/IDE/components/FileUploader.jsx

@@ -30,7 +30,7 @@ class FileUploader extends React.Component {
       thumbnailWidth: 200,
       thumbnailHeight: 200,
       acceptedFiles: fileExtensionsAndMimeTypes,
-      dictDefaultMessage: 'Drop files here to upload or click to use the file browser',
+      dictDefaultMessage: 'Drop files here or click to use the file browser',
       accept: this.props.dropzoneAcceptCallback.bind(this, userId),
       sending: this.props.dropzoneSendingCallback,
       complete: this.props.dropzoneCompleteCallback

client/modules/IDE/components/Sidebar.jsx

@@ -117,7 +117,7 @@ class Sidebar extends React.Component {
                 <button
                   aria-label="upload file"
                   onClick={() => {
-                    this.props.openUploadFileModal();
+                    this.props.openUploadFileModal(rootFile.id);
                     setTimeout(this.props.closeProjectOptions, 0);
                   }}
                   onBlur={this.onBlurComponent}

client/modules/IDE/components/UploadFileModal.jsx

@@ -3,11 +3,15 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import InlineSVG from 'react-inlinesvg';
+import prettyBytes from 'pretty-bytes';
 import FileUploader from './FileUploader';
 import { getreachedTotalSizeLimit } from '../selectors/users';
-
 import exitUrl from '../../../images/exit.svg';
 
+const __process = (typeof global !== 'undefined' ? global : window).process;
+const limit = __process.env.UPLOAD_LIMIT || 250000000;
+const limitText = prettyBytes(limit);
+
 class UploadFileModal extends React.Component {
   propTypes = {
     reachedTotalSizeLimit: PropTypes.bool.isRequired,
@@ -36,12 +40,12 @@ class UploadFileModal extends React.Component {
           { this.props.reachedTotalSizeLimit &&
             <p>
               {
-                `Error: You cannot upload any more files. You have reached the total size limit of 250MB.
+                `Error: You cannot upload any more files. You have reached the total size limit of ${limitText}.
                 If you would like to upload more, please remove the ones you aren't using anymore by
                 in your `
               }
-              <Link to="/assets">assets</Link>
-              {'.'}
+              <Link to="/assets" onClick={this.props.closeModal}>assets</Link>
+              .
             </p>
           }
           { !this.props.reachedTotalSizeLimit &&

client/modules/IDE/reducers/assets.js

@@ -2,13 +2,14 @@ import * as ActionTypes from '../../../constants';
 
 // 1,000,000 bytes in a MB. can't upload if totalSize is bigger than this.
 const initialState = {
-  list: []
+  list: [],
+  totalSize: 0
 };
 
 const assets = (state = initialState, action) => {
   switch (action.type) {
     case ActionTypes.SET_ASSETS:
-      return { list: action.assets };
+      return { list: action.assets, totalSize: action.totalSize };
     case ActionTypes.DELETE_ASSET:
       return { list: state.list.filter(asset => asset.key !== action.key) };
     default:

client/modules/IDE/reducers/ide.js

@@ -107,7 +107,7 @@ const ide = (state = initialState, action) => {
     case ActionTypes.SHOW_RUNTIME_ERROR_WARNING:
       return Object.assign({}, state, { runtimeErrorWarningVisible: true });
     case ActionTypes.OPEN_UPLOAD_FILE_MODAL:
-      return Object.assign({}, state, { uploadFileModalVisible: true });
+      return Object.assign({}, state, { uploadFileModalVisible: true, parentId: action.parentId });
     case ActionTypes.CLOSE_UPLOAD_FILE_MODAL:
       return Object.assign({}, state, { uploadFileModalVisible: false });
     default:

client/styles/components/_asset-size.scss

@@ -37,15 +37,12 @@
 
 .asset-current {
   position: absolute;
-  top: 28px;
-  left: calc(200px * var(--percent));
-  margin-left: -8px;
+  top: #{28 / $base-font-size}rem;
+  left: 0;
 }
 
 .asset-max {
   position: absolute;
   top: 0;
-  left: 0;
-  transform: translate(210%); // align max label to right of asset-size-bar
-  padding-left: #{8 / $base-font-size}rem;
+  left: #{210 / $base-font-size}rem;
 }

server/views/index.js

@@ -31,7 +31,7 @@ export function renderIndex() {
         window.process.env.EXAMPLES_ENABLED = ${process.env.EXAMPLES_ENABLED === 'false' ? false : true};
         window.process.env.UI_ACCESS_TOKEN_ENABLED = ${process.env.UI_ACCESS_TOKEN_ENABLED === 'false' ? false : true};
         window.process.env.UI_COLLECTIONS_ENABLED = ${process.env.UI_COLLECTIONS_ENABLED === 'false' ? false : true};
-        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT === 'false' ? false : true};
+        window.process.env.UPLOAD_LIMIT = ${process.env.UPLOAD_LIMIT ? `${process.env.UPLOAD_LIMIT}` : undefined};
       </script>
     </head>
     <body>