Merge pull request #2701 from kobotoolbox/2700-import-title-fe-fix

Get project name from imported file name instead of using "Untitled"

Author: jnm

jsapp/js/components/modalForms/projectSettings.es6

@@ -152,6 +152,10 @@ class ProjectSettings extends React.Component {
     }
   }
 
+  getFilenameFromURI(url) {
+    return decodeURIComponent(new URL(url).pathname.split('/').pop().split('.')[0]);
+  }
+
   /*
    * handling user input
    */
@@ -492,10 +496,15 @@ class ProjectSettings extends React.Component {
                   // when replacing, we omit PROJECT_DETAILS step
                   this.goToFormLanding();
                 } else {
+                  // TODO: allow serializers to take care of file names to
+                  // remove this bandaid fix for "Untitled" filenames
+                  var assetName = finalAsset.name;
+                  if (assetName === 'Untitled') {
+                    assetName = this.getFilenameFromURI(importUrl);
+                  }
                   this.setState({
                     formAsset: finalAsset,
-                    // try proposing something more meaningful than "Untitled"
-                    name: finalAsset.name,
+                    name: assetName,
                     description: finalAsset.settings.description,
                     sector: finalAsset.settings.sector,
                     country: finalAsset.settings.country,
@@ -550,10 +559,15 @@ class ProjectSettings extends React.Component {
                   // when replacing, we omit PROJECT_DETAILS step
                   this.goToFormLanding();
                 } else {
-                  // try proposing something more meaningful than "Untitled"
+                  // TODO: allow serializers to take care of file names to
+                  // remove this bandaid fix for "Untitled" filenames
+                  var assetName = finalAsset.name;
+                  if (assetName === 'Untitled') {
+                    assetName = files[0].name.split('.xlsx')[0];
+                  }
                   this.setState({
                     formAsset: finalAsset,
-                    name: finalAsset.name,
+                    name: assetName,
                     description: finalAsset.settings.description,
                     sector: finalAsset.settings.sector,
                     country: finalAsset.settings.country,