Log element id when deleting an image

Author: Erin Peach

apps/src/applab/designElements/ImagePickerPropertyRow.jsx

@@ -17,6 +17,7 @@ export default class ImagePickerPropertyRow extends React.Component {
     initialValue: PropTypes.string.isRequired,
     handleChange: PropTypes.func,
     desc: PropTypes.node,
+    elementId: PropTypes.string
   };
 
   componentDidMount() {
@@ -61,7 +62,8 @@ export default class ImagePickerPropertyRow extends React.Component {
     // However today the `createModalDialog` function and `Dialog` component
     // are intertwined with `StudioApp` which is why we have this direct call.
     dashboard.assets.showAssetManager(this.changeImage, 'image', null, {
-      showUnderageWarning: !getStore().getState().pageConstants.is13Plus
+      showUnderageWarning: !getStore().getState().pageConstants.is13Plus,
+      elementId: this.props.elementId
     });
   };
 

apps/src/applab/designElements/button.jsx

@@ -103,6 +103,7 @@ class ButtonProperties extends React.Component {
           desc={'image'}
           initialValue={element.getAttribute('data-canonical-image-url') || ''}
           handleChange={this.props.handleChange.bind(this, 'image')}
+          elementId={elementUtils.getId(element)}
         />
         {iconColorPicker}
         <BooleanPropertyRow

apps/src/applab/designElements/image.jsx

@@ -76,6 +76,7 @@ class ImageProperties extends React.Component {
           desc={'image'}
           initialValue={element.getAttribute('data-canonical-image-url') || ''}
           handleChange={this.props.handleChange.bind(this, 'picture')}
+          elementId={elementUtils.getId(element)}
         />
         {iconColorPicker}
         <EnumPropertyRow

apps/src/applab/designElements/screen.jsx

@@ -52,6 +52,7 @@ class ScreenProperties extends React.Component {
           desc={'image'}
           initialValue={element.getAttribute('data-canonical-image-url') || ''}
           handleChange={this.props.handleChange.bind(this, 'screen-image')}
+          elementId={elementUtils.getId(element)}
         />
         {iconColorPicker}
         <DefaultScreenButtonPropertyRow

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

@@ -18,6 +18,7 @@ var Dialog = require('../LegacyDialog');
  * @param [options.showUnderageWarning] {boolean} Warn if underage.
  * @param [options.useFilesApi] {boolean} Use files API instead of assets API.
  * @param [options.disableAudioRecording] {boolean} Do not display option to record and upload audio files
+ * @param [options.elementId] {string} Logging Purposes: which element is the image chosen for
  */
 module.exports = function showAssetManager(assetChosen, typeFilter, onClose, options) {
   options = options || {};
@@ -48,7 +49,8 @@ module.exports = function showAssetManager(assetChosen, typeFilter, onClose, opt
     showUnderageWarning: !!options.showUnderageWarning,
     projectId: dashboard.project.getCurrentId(),
     soundPlayer: sounds,
-    disableAudioRecording: options.disableAudioRecording
+    disableAudioRecording: options.disableAudioRecording,
+    elementId: options.elementId
   }), codeDiv);
 
   dialog.show();

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

@@ -48,12 +48,13 @@ export default class AssetManager extends React.Component {
     allowedExtensions: PropTypes.string,
     uploadsEnabled: PropTypes.bool.isRequired,
     useFilesApi: PropTypes.bool,
-    //For logging upload failures
-    projectId: PropTypes.string,
     soundPlayer: PropTypes.object,
     disableAudioRecording: PropTypes.bool,
-    //Temp prop for logging - identifies if displayed by 'Manage Assets' flow
-    imagePicker: PropTypes.bool
+
+    // For logging purposes
+    imagePicker: PropTypes.bool, // identifies if displayed by 'Manage Assets' flow
+    projectId: PropTypes.string,
+    elementId: PropTypes.string
   };
 
   constructor(props) {
@@ -149,7 +150,12 @@ export default class AssetManager extends React.Component {
         study_group: this.props.assetChosen && typeof this.props.assetChosen === 'function' ? 'choose-assets' : 'manage-assets',
         event: 'confirm',
         project_id: this.props.projectId,
-        data_string: name
+        data_json: JSON.stringify(
+          {
+            assetName: name,
+            elementId: this.props.elementId
+          }
+        )
       }
     );
 
@@ -234,6 +240,7 @@ export default class AssetManager extends React.Component {
             soundPlayer={this.props.soundPlayer}
             imagePicker={this.props.imagePicker}
             projectId={this.props.projectId}
+            elementId={this.props.elementId}
           />
         );
       }.bind(this));

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

@@ -19,8 +19,9 @@ export default class AssetRow extends React.Component {
     soundPlayer: PropTypes.object,
     projectId: PropTypes.string,
 
-    //temporary prop to differentiate choosing images and sounds
-    imagePicker: PropTypes.bool
+    // For logging purposes
+    imagePicker: PropTypes.bool, // identifies if displayed by 'Manage Assets' flow
+    elementId: PropTypes.string
   };
 
   state = {
@@ -39,7 +40,12 @@ export default class AssetRow extends React.Component {
         study_group: this.props.onChoose && typeof this.props.onChoose === 'function' ? 'choose-assets' : 'manage-assets',
         event: 'initiate',
         project_id: this.props.projectId,
-        data_string: this.props.name
+        data_json: JSON.stringify(
+          {
+            assetName: this.props.name,
+            elementId: this.props.elementId
+          }
+        )
       }
     );
   };

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

@@ -23,8 +23,9 @@ export default class ImagePicker extends React.Component {
     useFilesApi: PropTypes.bool,
     soundPlayer: PropTypes.object,
     disableAudioRecording: PropTypes.bool,
-    //For logging upload failures
-    projectId: PropTypes.string
+    //For logging purposes
+    projectId: PropTypes.string,
+    elementId: PropTypes.string
   };
 
   state = {mode: 'files'};
@@ -93,6 +94,7 @@ export default class ImagePicker extends React.Component {
         soundPlayer={this.props.soundPlayer}
         disableAudioRecording={this.props.disableAudioRecording}
         imagePicker={true}
+        elementId={this.props.elementId}
       /> :
       <IconLibrary assetChosen={this.getAssetNameWithPrefix}/>;