Merge pull request #21996 from code-dot-org/assets_fix_overwrite_same_filename

Fix overwriting the same asset filename

Author: cpirich

apps/src/applab/redux/screens.js

@@ -203,8 +203,10 @@ export function importIntoProject(projectId, screens, assets) {
     importFuncs.importScreensAndAssets(projectId, screens, assets).then(
       () => {
         dispatch({type: IMPORT.SCREENS.FINISHED_IMPORTING});
-        const lastScreen = screens[screens.length - 1];
-        dispatch(changeScreen(lastScreen.id));
+        if (screens.length > 0) {
+          const lastScreen = screens[screens.length - 1];
+          dispatch(changeScreen(lastScreen.id));
+        }
       },
       () => dispatch({type: IMPORT.SCREENS.FAILED_IMPORTING})
     );

apps/src/code-studio/assets/assetListStore.js

@@ -6,6 +6,7 @@ module.exports = {
   },
 
   add: function (asset) {
+    assets = this.remove(asset.filename);
     assets.push(asset);
     return assets.slice();
   },

apps/src/code-studio/components/AssetManager.jsx

@@ -168,6 +168,7 @@ export default class AssetManager extends React.Component {
           <AssetRow
             key={asset.filename}
             name={asset.filename}
+            timestamp={asset.timestamp}
             type={asset.category}
             size={asset.size}
             useFilesApi={this.props.useFilesApi}

apps/src/code-studio/components/AssetRow.jsx

@@ -8,6 +8,7 @@ import AssetThumbnail from './AssetThumbnail';
 export default class AssetRow extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
+    timestamp: PropTypes.string,
     type: PropTypes.oneOf(['image', 'audio', 'video', 'pdf', 'doc']).isRequired,
     size: PropTypes.number,
     useFilesApi: PropTypes.bool.isRequired,
@@ -111,6 +112,7 @@ export default class AssetRow extends React.Component {
           <AssetThumbnail
             type={this.props.type}
             name={this.props.name}
+            timestamp={this.props.timestamp}
             useFilesApi={this.props.useFilesApi}
           />
         </td>

apps/src/code-studio/components/AssetThumbnail.jsx

@@ -41,6 +41,7 @@ export const styles = {
 class AssetThumbnail extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
+    timestamp: PropTypes.string,
     type: PropTypes.oneOf(['image', 'audio', 'video', 'pdf', 'doc']).isRequired,
     style: PropTypes.object,
     iconStyle: PropTypes.object,
@@ -49,19 +50,34 @@ class AssetThumbnail extends React.Component {
   };
 
   render() {
-    const {type, name} = this.props;
-    let api = this.props.useFilesApi ? filesApi : assetsApi;
-    if (this.props.projectId) {
-      api = api.withProjectId(this.props.projectId);
+    const {
+      timestamp,
+      type,
+      name,
+      useFilesApi,
+      projectId,
+      iconStyle,
+      style
+    } = this.props;
+    let api = useFilesApi ? filesApi : assetsApi;
+    if (projectId) {
+      api = api.withProjectId(projectId);
     }
+    const basePath = api.basePath(name);
+    let cacheBustSuffix = '';
+    if (timestamp) {
+      const date = new Date(timestamp);
+      cacheBustSuffix = `?t=${date.valueOf()}`;
+    }
+    const srcPath = `${basePath}${cacheBustSuffix}`;
 
     return (
-      <div className="assetThumbnail" style={[styles.wrapper, this.props.style]}>
+      <div className="assetThumbnail" style={[styles.wrapper, style]}>
         {type === 'image' ?
-         <img src={api.basePath(name)} style={assetThumbnailStyle} /> :
+         <img src={srcPath} style={assetThumbnailStyle} /> :
          <i
            className={defaultIcons[type] || defaultIcons.unknown}
-           style={[assetIconStyle, this.props.iconStyle]}
+           style={[assetIconStyle, iconStyle]}
          />
         }
       </div>

shared/middleware/helpers/bucket_helper.rb

@@ -80,7 +80,7 @@ def list(encrypted_channel_id)
       filename = %r{#{prefix}(.+)$}.match(fileinfo.key)[1]
       category = category_from_file_type(File.extname(filename))
 
-      {filename: filename, category: category, size: fileinfo.size}
+      {filename: filename, category: category, size: fileinfo.size, timestamp: fileinfo.last_modified}
     end
   end