Improve import error messages

.dockerignore

@@ -29,3 +29,4 @@ vue/babel.config*
 vue/package.json
 vue/tsconfig.json
 vue/src/utils/openapi
+venv/

cookbook/views/api.py

@@ -1454,7 +1454,7 @@ def import_files(request):
     """
     limit, msg = above_space_limit(request.space)
     if limit:
-        return Response({'error': msg}, status=status.HTTP_400_BAD_REQUEST)
+        return Response({'error': True, 'msg': _('File is above space limit')}, status=status.HTTP_400_BAD_REQUEST)
 
     form = ImportForm(request.POST, request.FILES)
     if form.is_valid() and request.FILES != {}:

vue/src/apps/ImportView/ImportView.vue

@@ -669,8 +669,7 @@ export default {
                 if (url !== '') {
                     this.failed_imports.push(url)
                 }
-                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_FETCH, err)
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_IMPORT, err)
-                throw "Load Recipe Error"
             })
         },
         /**
@@ -713,8 +712,7 @@ export default {
             axios.post(resolveDjangoUrl('view_import'), formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                 window.location.href = resolveDjangoUrl('view_import_response', response.data['import_id'])
             }).catch((err) => {
-                console.log(err)
+                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_IMPORT, err)
-                StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE)
             })
         },
         /**

vue/src/locales/en.json

@@ -7,6 +7,7 @@
     "err_deleting_protected_resource": "The object you are trying to delete is still used and can't be deleted.",
     "err_moving_resource": "There was an error moving a resource!",
     "err_merging_resource": "There was an error merging a resource!",
+    "err_importing_recipe": "There was an error importing the recipe!",
     "success_fetching_resource": "Successfully fetched a resource!",
     "success_creating_resource": "Successfully created a resource!",
     "success_updating_resource": "Successfully updated a resource!",

vue/src/utils/utils.js

@@ -50,6 +50,7 @@ export class StandardToasts {
     static FAIL_DELETE_PROTECTED = "FAIL_DELETE_PROTECTED"
     static FAIL_MOVE = "FAIL_MOVE"
     static FAIL_MERGE = "FAIL_MERGE"
+    static FAIL_IMPORT = "FAIL_IMPORT"
 
     static makeStandardToast(context, toast, err = undefined, always_show_errors = false) {
         let title = ''
@@ -122,6 +123,11 @@ export class StandardToasts {
                 title = i18n.tc("Failure")
                 msg = i18n.tc("err_merging_resource")
                 break
+            case StandardToasts.FAIL_IMPORT:
+                variant = 'danger'
+                title = i18n.tc("Failure")
+                msg = i18n.tc("err_importing_recipe")
+                break
         }
 
 
@@ -131,12 +137,19 @@ export class StandardToasts {
             console.trace();
         }
 
-        if (err !== undefined && 'response' in err && 'headers' in err.response) {
+        if (err !== undefined 
-            if (DEBUG && err.response.headers['content-type'] === 'application/json' && err.response.status < 500) {
+            && 'response' in err 
+            && 'headers' in err.response 
+            && err.response.headers['content-type'] === 'application/json' 
+            && err.response.status < 500 
+            && err.response.data) {
+            // If the backend provides us with a nice error message, we print it, regardless of DEBUG mode
+            if (DEBUG || err.response.data.msg) {
+                const errMsg = err.response.data.msg ? err.response.data.msg : JSON.stringify(err.response.data) 
                 msg = context.$createElement('div', {}, [
                     context.$createElement('span', {}, [msg]),
                     context.$createElement('br', {}, []),
-                    context.$createElement('code', {'class': 'mt-2'}, [JSON.stringify(err.response.data)])
+                    context.$createElement('code', {'class': 'mt-2'}, [errMsg])
                 ])
             }
         }