Implement projectDidSave telemetry event

src/components/gui/gui.jsx

@@ -99,6 +99,7 @@ const GUIComponent = props => {
         onActivateTab,
         onClickLogo,
         onExtensionButtonClick,
+        onProjectTelemetryEvent,
         onRequestCloseBackdropLibrary,
         onRequestCloseCostumeLibrary,
         onRequestCloseTelemetryModal,
@@ -225,6 +226,7 @@ const GUIComponent = props => {
                     onCloseAccountNav={onCloseAccountNav}
                     onLogOut={onLogOut}
                     onOpenRegistration={onOpenRegistration}
+                    onProjectTelemetryEvent={onProjectTelemetryEvent}
                     onSeeCommunity={onSeeCommunity}
                     onShare={onShare}
                     onToggleLoginOpen={onToggleLoginOpen}

src/components/menu-bar/menu-bar.jsx

@@ -5,6 +5,8 @@ import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import React from 'react';
 
+import VM from 'scratch-vm';
+
 import Box from '../box/box.jsx';
 import Button from '../button/button.jsx';
 import CommunityButton from './community-button.jsx';
@@ -54,6 +56,8 @@ import {
     loginMenuOpen
 } from '../../reducers/menus';
 
+import collectMetadata from '../../lib/collect-metadata';
+
 import styles from './menu-bar.css';
 
 import helpIcon from '../../lib/assets/icon--tutorials.svg';
@@ -153,6 +157,7 @@ class MenuBar extends React.Component {
             'handleCloseFileMenuAndThen',
             'handleLanguageMouseUp',
             'handleRestoreOption',
+            'handleSaveToComputer',
             'restoreOptionMessage'
         ]);
     }
@@ -219,6 +224,16 @@ class MenuBar extends React.Component {
             fn();
         };
     }
+    handleSaveToComputer (downloadProject) {
+        return () => {
+            this.props.onRequestCloseFile();
+            downloadProject();
+            if (this.props.onProjectTelemetryEvent) {
+                const metadata = collectMetadata(this.props.vm, this.props.projectTitle, this.props.locale);
+                this.props.onProjectTelemetryEvent('projectDidSave', metadata);
+            }
+        };
+    }
     handleLanguageMouseUp (e) {
         if (!this.props.languageMenuOpen) {
             this.props.onClickLanguage(e);
@@ -395,7 +410,7 @@ class MenuBar extends React.Component {
                                     <SB3Downloader>{(className, downloadProject) => (
                                         <MenuItem
                                             className={className}
-                                            onClick={this.handleCloseFileMenuAndThen(downloadProject)}
+                                            onClick={this.handleSaveToComputer(downloadProject)}
                                         >
                                             <FormattedMessage
                                                 defaultMessage="Save to your computer"
@@ -733,6 +748,7 @@ MenuBar.propTypes = {
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
     onOpenTipLibrary: PropTypes.func,
+    onProjectTelemetryEvent: PropTypes.func,
     onRequestCloseAccount: PropTypes.func,
     onRequestCloseEdit: PropTypes.func,
     onRequestCloseFile: PropTypes.func,
@@ -747,7 +763,8 @@ MenuBar.propTypes = {
     renderLogin: PropTypes.func,
     sessionExists: PropTypes.bool,
     showComingSoon: PropTypes.bool,
-    username: PropTypes.string
+    username: PropTypes.string,
+    vm: PropTypes.instanceOf(VM).isRequired
 };
 
 MenuBar.defaultProps = {
@@ -765,11 +782,13 @@ const mapStateToProps = state => {
         isUpdating: getIsUpdating(loadingState),
         isShowingProject: getIsShowingProject(loadingState),
         languageMenuOpen: languageMenuOpen(state),
+        locale: state.locales.locale,
         loginMenuOpen: loginMenuOpen(state),
         projectChanged: state.scratchGui.projectChanged,
         projectTitle: state.scratchGui.projectTitle,
         sessionExists: state.session && typeof state.session.session !== 'undefined',
-        username: user ? user.username : null
+        username: user ? user.username : null,
+        vm: state.scratchGui.vm
     };
 };
 

src/lib/collect-metadata.js

@@ -0,0 +1,39 @@
+/**
+ * Report a telemetry event.
+ * @param {string} event - one of `projectWasCreated`, `projectDidLoad`, `projectDidSave`, `projectWasUploaded`
+ */
+//TODO make a telemetry HOC and move this stuff there
+const collectMetadata = function (vm, projectName = '', locale = '') {
+    //TODO move most or all of this into a collectMetadata() method on the VM/Runtime
+    const metadata = {
+        projectName: projectName,
+        language: locale,
+        spriteCount: 0,
+        blocksCount: 0,
+        costumesCount: 0,
+        listsCount: 0,
+        scriptCount: 0,
+        soundsCount: 0,
+        variablesCount: 0
+    };
+
+    for (const target of vm.runtime.targets) {
+        ++metadata.spriteCount;
+        metadata.blocksCount += Object.keys(target.sprite.blocks._blocks).length;
+        metadata.costumesCount += target.sprite.costumes_.length;
+        metadata.scriptCount += target.sprite.blocks._scripts.length;
+        metadata.soundsCount += target.sprite.sounds.length;
+        for (const variableName in target.variables) {
+            const variable = target.variables[variableName];
+            if (variable.type === 'list') {
+                ++metadata.listsCount;
+            } else {
+                ++metadata.variablesCount;
+            }
+        }
+    }
+
+    return metadata;
+};
+
+export default collectMetadata;

src/lib/project-saver-hoc.jsx

@@ -6,6 +6,7 @@ import {connect} from 'react-redux';
 import VM from 'scratch-vm';
 import xhr from 'xhr';
 
+import collectMetadata from '../lib/collect-metadata';
 import log from '../lib/log';
 import storage from '../lib/storage';
 import dataURItoBlob from '../lib/data-uri-to-blob';
@@ -304,35 +305,7 @@ const ProjectSaverHOC = function (WrappedComponent) {
         //TODO make a telemetry HOC and move this stuff there
         reportTelemetryEvent (event) {
             if (this.props.onProjectTelemetryEvent) {
-                //TODO move most or all of this into a collectMetadata() method on the VM/Runtime
-                const metadata = {
-                    projectName: this.props.reduxProjectTitle,
-                    language: this.props.locale,
-                    spriteCount: 0,
-                    blocksCount: 0,
-                    costumesCount: 0,
-                    listsCount: 0,
-                    scriptCount: 0,
-                    soundsCount: 0,
-                    variablesCount: 0
-                };
-
-                for (const target of this.props.vm.runtime.targets) {
-                    ++metadata.spriteCount;
-                    metadata.blocksCount += Object.keys(target.sprite.blocks._blocks).length;
-                    metadata.costumesCount += target.sprite.costumes_.length;
-                    metadata.scriptCount += target.sprite.blocks._scripts.length;
-                    metadata.soundsCount += target.sprite.sounds.length;
-                    for (const variableName in target.variables) {
-                        const variable = target.variables[variableName];
-                        if (variable.type === 'list') {
-                            ++metadata.listsCount;
-                        } else {
-                            ++metadata.variablesCount;
-                        }
-                    }
-                }
-
+                const metadata = collectMetadata(this.props.vm, this.props.reduxProjectTitle, this.props.locale);
                 this.props.onProjectTelemetryEvent(event, metadata);
             }
         }