Initial commit

lib/assets/javascripts/builder/components/background-importer/background-import-item-view.js

@@ -0,0 +1,186 @@
+var CoreView = require('backbone/core-view');
+var Notifier = require('builder/components/notifier/notifier');
+var UploadConfig = require('builder/config/upload-config');
+var ErrorDetailsView = require('./error-details-view');
+var WarningsDetailsView = require('./warnings-details-view');
+var TwitterImportDetailsDialog = require('./twitter-import-details-view');
+
+/**
+ *  Import item within background importer
+ *
+ */
+
+var DELEGATIONS = {
+  loading: require('./delegated-import-views/loading'),
+  error: require('./delegated-import-views/failed'),
+  warning: require('./delegated-import-views/warnings'),
+  success: require('./delegated-import-views/success')
+};
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+    if (!opts.importModel) throw new Error('importModel is required');
+
+    this._userModel = opts.userModel;
+    this._configModel = opts.configModel;
+    this._modals = opts.modals;
+    this._importModel = opts.importModel;
+    this._showSuccessDetailsButton = opts.showSuccessDetailsButton;
+
+    this._notification = Notifier.addNotification({});
+
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this._importModel.on('change', this.updateNotification, this);
+    this._importModel.on('remove', this.clean, this);
+    this._notification.on('notification:close', this._closeHandler, this);
+    this._notification.on('notification:action', this._actionHandler, this);
+    this.add_related_model(this._importModel);
+    this.add_related_model(this._notification);
+  },
+
+  _closeHandler: function () {
+    this.trigger('remove', this._importModel, this);
+    this._importModel.pause();
+    this.clean();
+  },
+
+  _actionHandler: function (action) {
+    if (action === 'show_errors') {
+      this._showImportError();
+    } else if (action === 'show_stats') {
+      this._showImportStats();
+    } else if (action === 'show_table') {
+      this._showImportDataset();
+    } else if (action === 'show_warnings') {
+      this._showImportWarnings();
+    }
+  },
+
+  _getStatus: function () {
+    var status = 'loading';
+    var failed = this._importModel.hasFailed();
+    var completed = this._importModel.hasCompleted();
+    var warnings = this._importModel.getWarnings();
+
+    if (failed) {
+      status = 'error';
+    } else if (completed && !warnings) {
+      status = 'success';
+    } else if (completed && warnings) {
+      status = 'warning';
+    }
+
+    return status;
+  },
+
+  _getInfo: function () {
+    var upload = this._importModel.get('upload');
+    var imp = this._importModel.get('import');
+
+    var d = {
+      name: '',
+      state: this._importModel.get('state'),
+      progress: '',
+      service: '',
+      step: this._importModel.get('step'),
+      failed: this._importModel.hasFailed(),
+      completed: this._importModel.hasCompleted(),
+      warnings: this._importModel.getWarnings(),
+      showSuccessDetailsButton: this._showSuccessDetailsButton,
+      tables_created_count: imp.tables_created_count
+    };
+
+    // Name
+    if (upload.type) {
+      if (upload.type === 'file') {
+        if (upload.value.length > 1) {
+          d.name = upload.value.length + ' files';
+        } else {
+          d.name = upload.value.name;
+        }
+      }
+      if (upload.type === 'url' || upload.type === 'remote') {
+        d.name = upload.value;
+      }
+      if (upload.type === 'service') {
+        d.name = upload.value && upload.value.filename || '';
+      }
+      if (upload.service_name === 'twitter_search') {
+        d.name = 'Twitter import';
+      }
+      if (upload.type === 'sql') {
+        d.name = 'SQL';
+      }
+      if (upload.type === 'duplication') {
+        d.name = upload.table_name || upload.value;
+      }
+    } else {
+      d.name = imp.display_name || imp.item_queue_id || 'import';
+    }
+
+    // Service
+    d.service = upload.service_name;
+
+    // Progress
+    if (this._importModel.get('step') === 'upload') {
+      d.progress = this._importModel.get('upload').progress;
+    } else {
+      d.progress = Math.max(0, (UploadConfig.uploadStates.indexOf(d.state) / UploadConfig.uploadStates.length) * 100);
+    }
+
+    d.progress = d.progress.toFixed(0);
+
+    return d;
+  },
+
+  updateNotification: function () {
+    var status = this._getStatus();
+    var delegated = DELEGATIONS[status];
+    delegated.call(this, this._importModel, this._notification, status, this._getInfo(), this._showSuccessDetailsButton);
+  },
+
+  _showImportDataset: function () {
+    var dataset = this._importModel.get('import').table_name;
+    window.location = this._configModel.get('base_url') + '/dataset/' + dataset;
+  },
+
+  _showImportStats: function () {
+    var self = this;
+    this._modals.create(function (modalModel) {
+      return new TwitterImportDetailsDialog({
+        modalModel: modalModel,
+        userModel: self._userModel,
+        model: self._importModel
+      });
+    });
+  },
+
+  _showImportError: function () {
+    var self = this;
+    this._modals.create(function (modalModel) {
+      return new ErrorDetailsView({
+        configModel: self._configModel,
+        modalModel: modalModel,
+        error: self._importModel.getError(),
+        userModel: self._userModel
+      });
+    });
+  },
+
+  _showImportWarnings: function () {
+    var self = this;
+    this._modals.create(function (modalModel) {
+      return new WarningsDetailsView({
+        modalModel: modalModel,
+        warnings: self._importModel.getWarnings(),
+        userModel: self._userModel
+      });
+    });
+  }
+});

lib/assets/javascripts/builder/components/background-importer/background-import-item.tpl

@@ -0,0 +1,9 @@
+<% if (failed) { %>
+    <%- _t('components.background-importer.background-importer-item.error-connecting', { name: name }) %> <% if (service) { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %>
+<% } else if (completed && !warnings) { %>
+    <%- name %> <% if (service && service != "twitter_search") { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %> <%- _t('components.background-importer.background-importer-item.completed') %>!
+<% } else if (completed && warnings) { %>
+    Some warnings were produced for <%- name %> <% if (service) { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %>
+<% } else { %>
+    <%- progress %>% <%- state %> <%- name %> <% if (service && service != "twitter_search") { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %>
+<% } %>

lib/assets/javascripts/builder/components/background-importer/background-import-limit-view.js

@@ -0,0 +1,47 @@
+var CoreView = require('backbone/core-view');
+var template = require('./background-import-limit.tpl');
+var Notifier = require('builder/components/notifier/notifier');
+
+/**
+ *  Import limit message within background importer
+ *
+ */
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+
+    this._userModel = opts.userModel;
+    this._configModel = opts.configModel;
+
+    this._notification = Notifier.addNotification({
+      status: 'error',
+      closable: true,
+      button: false,
+      info: this._getInfo()
+    });
+
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this._notification.on('notification:close', this._closeHandler, this);
+    this.add_related_model(this._notification);
+  },
+
+  _closeHandler: function () {
+    this.clean();
+  },
+
+  _getInfo: function () {
+    var importQuota = this._userModel.getMaxConcurrentImports();
+    var isUpgradeable = !this._configModel.get('cartodb_com_hosted') && importQuota === 1;
+
+    return template({
+      upgradeUrl: window.upgrade_url,
+      isUpgradeable: isUpgradeable,
+      importQuota: importQuota
+    });
+  }
+});

lib/assets/javascripts/builder/components/background-importer/background-import-limit.tpl

@@ -0,0 +1,5 @@
+<% if (isUpgradeable) { %>
+<%- _t('components.background-importer.background-import-limit.hurry', { upgradeUrl: upgradeUrl }) %>
+<% } else { %>
+<%- _t('components.background-importer.background-import-limit.one-file', { importQuota: importQuota }) %>
+<% } %>

lib/assets/javascripts/builder/components/background-importer/background-importer.js

@@ -0,0 +1,161 @@
+var Backbone = require('backbone');
+var _ = require('underscore');
+var ImportItemView = require('./background-import-item-view');
+var ImportLimitItemView = require('./background-import-limit-view');
+var ImportsModel = require('builder/data/background-importer/imports-model');
+
+/**
+ *  Background polling manager
+ *
+ *  It will pool all polling operations (imports) that happens
+ *  in the Builder
+ *
+ */
+
+var BackgroundImporter = function (options) {
+  this.options = options || {};
+  this._importers = {};
+  this.initialize(this.options);
+};
+
+BackgroundImporter.prototype = {
+  initialize: function (opts) {
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.modals) throw new Error('modals is required');
+    if (!opts.pollingModel) throw new Error('pollingModel is required');
+
+    this._userModel = opts.userModel;
+    this._configModel = opts.configModel;
+    this._createVis = opts.createVis;
+    this._modals = opts.modals;
+    this._model = opts.pollingModel;
+
+    this._initBinds();
+  },
+
+  addView: function (view) {
+    this._importers[view.cid] = view;
+  },
+
+  removeView: function (view) {
+    delete this._importers[view.cid];
+  },
+
+  enable: function () {
+    this._model.startPollings();
+  },
+
+  disable: function () {
+    this._model.stopPollings();
+  },
+
+  removeImport: function (model) {
+    this._model.removeImportItem(model);
+  },
+
+  destroy: function () {
+    this._model.off(null, null, this);
+  },
+
+  _initBinds: function () {
+    this._model.on('importAdded', this._addImport, this);
+    this._model.on('importByUploadData', this._addDataset, this);
+  },
+
+  _addImport: function (m) {
+    var importItemView = new ImportItemView({
+      configModel: this._configModel,
+      showSuccessDetailsButton: this._model.get('showSuccessDetailsButton'),
+      modals: this._modals,
+      importModel: m,
+      userModel: this._userModel
+    });
+
+    importItemView.on('remove', this._removeImport, this);
+    this.addView(importItemView);
+    this.enable();
+  },
+
+  _addDataset: function (d) {
+    if (d) {
+      this._addImportsItem(d);
+    }
+  },
+
+  _onDroppedFile: function (files) {
+    if (files) {
+      this._addImportsItem({
+        type: 'file',
+        value: files,
+        create_vis: this._createVis
+      });
+    }
+  },
+
+  _addImportsItem: function (uploadData) {
+    if (this._model.canAddImport()) {
+      this._removeLimitItem();
+    } else {
+      this._addLimitItem();
+      return false;
+    }
+
+    var imp = new ImportsModel({}, {
+      upload: uploadData,
+      userModel: this._userModel,
+      configModel: this._configModel
+    });
+
+    this._model.addImportItem(imp);
+  },
+
+  _addLimitItem: function () {
+    if (!this._importLimit) {
+      var view = new ImportLimitItemView({
+        configModel: this._configModel,
+        userModel: this._userModel
+      });
+
+      this.addView(view);
+      this._importLimit = view;
+    }
+  },
+
+  _removeLimitItem: function () {
+    var view = this._importLimit;
+    if (view) {
+      view.clean();
+      this.removeView(view);
+      delete this._importLimit;
+    }
+  },
+
+  _removeImport: function (model, view) {
+    this._model.removeImportItem(model);
+    this.removeView(view);
+  }
+};
+
+// Supporting default Backbone events like on, off, trigger, listenTo etc
+_.extend(BackgroundImporter.prototype, Backbone.Events, {
+  remove: function () {
+    this.stopListening();
+  }
+});
+
+var manager = (function () {
+  var initialized = false;
+  var importer;
+
+  return {
+    init: function (opts) {
+      if (!initialized) {
+        importer = new BackgroundImporter(opts);
+      }
+      return importer;
+    }
+  };
+})();
+
+module.exports = manager;

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/failed.js

@@ -0,0 +1,34 @@
+var template = require('./failed.tpl');
+
+function getAction () {
+  return 'show_errors';
+}
+
+function getButton () {
+  return _t('components.background-importer.background-importer-item.show');
+}
+
+function getClosable () {
+  return true;
+}
+
+function updateNotification (info) {
+  var data = {
+    info: info,
+    status: _status,
+    closable: getClosable(),
+    button: getButton(),
+    action: getAction()
+  };
+
+  _notification.update(data);
+}
+
+var _notification;
+var _status;
+
+module.exports = function (model, notification, status, info, showDetails) {
+  _notification = notification;
+  _status = status;
+  updateNotification(template(info));
+};

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/failed.tpl

@@ -0,0 +1 @@
+<%= _t('components.background-importer.background-importer-item.error-connecting', { name: name }) %> <% if (service) { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %>

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/loading.js

@@ -0,0 +1,38 @@
+var template = require('./loading.tpl');
+
+function getAction () {
+  return false;
+}
+
+function getButton () {
+  return false;
+}
+
+function getClosable () {
+  var state = _model.get('state');
+  var step = _model.get('step');
+  return state === 'uploading' && step === 'upload';
+}
+
+function updateNotification (info) {
+  var data = {
+    info: info,
+    status: _status,
+    closable: getClosable(),
+    button: getButton(),
+    action: getAction()
+  };
+
+  _notification.update(data);
+}
+
+var _model;
+var _notification;
+var _status;
+
+module.exports = function (model, notification, status, info, showDetails) {
+  _model = model;
+  _notification = notification;
+  _status = status;
+  updateNotification(template(info));
+};

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/loading.tpl

@@ -0,0 +1 @@
+<span class='CDB-Text is-semibold'><%- progress %>% <%- state %></span> <%- name %> <% if (service && service != "twitter_search") { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %>

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/success.js

@@ -0,0 +1,60 @@
+var template = require('./success.tpl');
+
+function getAction () {
+  var service = _model.get('upload').service_name;
+  var tables_created_count = _model.get('import').tables_created_count;
+
+  if (_showDetails) {
+    if (service && service === 'twitter_search') {
+      return 'show_stats';
+    } else if (tables_created_count === 1) {
+      return 'show_table';
+    }
+  }
+
+  return false;
+}
+
+function getButton () {
+  var service = _model.get('upload').service_name;
+  var tables_created_count = _model.get('import').tables_created_count;
+
+  if (_showDetails) {
+    if (service && service === 'twitter_search') {
+      return _t('components.background-importer.background-importer-item.show');
+    } else if (tables_created_count === 1) {
+      return _t('components.background-importer.background-importer-item.show');
+    }
+  }
+
+  return false;
+}
+
+function getClosable () {
+  return true;
+}
+
+function updateNotification (info) {
+  var data = {
+    info: info,
+    status: _status,
+    closable: getClosable(),
+    button: getButton(),
+    action: getAction()
+  };
+
+  _notification.update(data);
+}
+
+var _model;
+var _notification;
+var _status;
+var _showDetails;
+
+module.exports = function (model, notification, status, info, showDetails) {
+  _model = model;
+  _notification = notification;
+  _status = status;
+  _showDetails = showDetails;
+  updateNotification(template(info));
+};

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/success.tpl

@@ -0,0 +1 @@
+<%- name %> <% if (service && service != "twitter_search") { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %> <span class='CDB-Text is-semibold'><%- _t('components.background-importer.background-importer-item.completed') %></span>

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/warnings.js

@@ -0,0 +1,34 @@
+var template = require('./warnings.tpl');
+
+function getAction () {
+  return 'show_warnings';
+}
+
+function getButton () {
+  return _t('components.background-importer.background-importer-item.show');
+}
+
+function getClosable () {
+  return true;
+}
+
+function updateNotification (info) {
+  var data = {
+    info: info,
+    status: _status,
+    closable: getClosable(),
+    button: getButton(),
+    action: getAction()
+  };
+
+  _notification.update(data);
+}
+
+var _notification;
+var _status;
+
+module.exports = function (model, notification, status, info, showDetails) {
+  _notification = notification;
+  _status = status;
+  updateNotification(template(info));
+};

lib/assets/javascripts/builder/components/background-importer/delegated-import-views/warnings.tpl

@@ -0,0 +1 @@
+<span class='CDB-Text is-semibold'>Some warnings</span> were produced for <%- name %> <% if (service) { %> <%- _t('components.background-importer.background-importer-item.from') %> <%- service %> <% } %>

lib/assets/javascripts/builder/components/background-importer/error-details-view.js

@@ -0,0 +1,55 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var defaultTemplate = require('./error-details.tpl');
+var upgradeErrorTemplate = require('./upgrade-errors.tpl');
+var UPGRADE_ERROR_CODES = [8001, 8002, 8005, 8007];
+
+/**
+ * Error details view, to be used together with an error object from an import model.
+ *
+ */
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.configModel) throw new Error('configModel is required');
+    if (!opts.error) throw new Error('error is required');
+
+    this._userModel = opts.userModel;
+    this._configModel = opts.configModel;
+    this._error = opts.error;
+  },
+
+  render: function () {
+    var isUpgradeError = _.contains(UPGRADE_ERROR_CODES, this._error.errorCode);
+    var upgradeUrl = this._configModel.get('upgrade_url');
+    var userCanUpgrade = upgradeUrl && !this._configModel.get('cartodb_com_hosted') && (!this._userModel.isInsideOrg() || this._userModel.isOrgOwner());
+    var template = this._getTemplate(isUpgradeError);
+
+    var html = template({
+      errorCode: this._error.errorCode,
+      title: this._error.title,
+      text: this._error.what_about,
+      itemQueueId: this._error.item_queue_id,
+      originalUrl: this._error.originalUrl,
+      httpResponseCode: this._error.httpResponseCode,
+      httpResponseCodeMessage: this._error.httpRresponseCodeMessage,
+      userCanUpgrade: userCanUpgrade,
+      showTrial: this._userModel.canStartTrial(),
+      upgradeUrl: upgradeUrl
+    });
+
+    this.$el.html(html);
+
+    return this;
+  },
+
+  _getTemplate: function (isUpgradeError) {
+    var template = defaultTemplate;
+
+    if (isUpgradeError) {
+      template = upgradeErrorTemplate;
+    }
+    return template;
+  }
+});

lib/assets/javascripts/builder/components/background-importer/error-details.tpl

@@ -0,0 +1,72 @@
+<div class="Dialog-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--negative u-flex u-alignCenter u-justifyCenter">
+    <i class="CDB-IconFont CDB-IconFont-cloud"></i>
+  </div>
+  <h2 class="CDB-Text CDB-Size-large u-bSpace u-errorTextColor">
+    <%- title %> <% if (errorCode) { %>(<%- errorCode %>)<% } %>
+  </h2>
+  <h3 class="CDB-Text CDB-Size-medium u-secondaryTextColor">
+    <% if (itemQueueId) { %>
+    <%- _t('components.background-importer.error-details.dont-panic') %>
+    <% } else { %>
+    <%- _t('components.background-importer.error-details.check-errors') %>
+    <% } %>
+  </h3>
+</div>
+
+<div class="Dialog-body ErrorDetails-body">
+  <ul class="Modal-containerList">
+    <% if (httpResponseCode) { %>
+      <li class="ErrorDetails-item">
+        <div class="ErrorDetails-itemStep CDB-Text CDB-Size-medium is-semibold u-flex u-alignCenter u-justifyCenter">1</div>
+        <div class="ErrorDetails-itemText">
+          <p class="CDB-Text CDB-Size-medium">
+            <%= _t('components.background-importer.error-details.remote-server-code', { httpResponseCode: httpResponseCode}) %> <%- httpResponseCodeMessage %>
+          </p>
+        </div>
+      </li>
+      <li class="ErrorDetails-item">
+        <div class="ErrorDetails-itemStep CDB-Text CDB-Size-medium is-semibold u-flex u-alignCenter u-justifyCenter">2</div>
+        <div class="ErrorDetails-itemText">
+          <p class="CDB-Text CDB-Size-medium">
+            <%- _t('components.background-importer.error-details.check-url') %>:<br/>
+          </p>
+          <span class='CDB-Text CDB-Size-medium ErrorDetails-itemTextStrong'><a href="<%- originalUrl %>"><%- originalUrl %></a></span>
+        </div>
+      </li>
+    <% } else { %>
+      <li class="ErrorDetails-item">
+        <div class="ErrorDetails-itemStep CDB-Text CDB-Size-medium is-semibold u-flex u-alignCenter u-justifyCenter">1</div>
+        <div class="ErrorDetails-itemText">
+          <p class="CDB-Text CDB-Size-medium">
+            <% if (text) { %>
+            <%= cdb.core.sanitize.html(text) %>
+            <% } else { %>
+            <%- _t('components.background-importer.error-details.unknown-error') %>
+            <% } %>
+          </p>
+        </div>
+      </li>
+    <% } %>
+    <% if (itemQueueId) { %>
+      <li class="ErrorDetails-item">
+        <div class="ErrorDetails-itemStep CDB-Text CDB-Size-medium is-semibold u-flex u-alignCenter u-justifyCenter">!</div>
+        <div class="ErrorDetails-itemText">
+          <p class="CDB-Text CDB-Size-medium">
+            <%= _t('components.background-importer.error-details.send-us-the-error-code') %>:<br/>
+          </p>
+          <span class="CDB-Text CDB-Size-medium ErrorDetails-itemTextStrong"><%- itemQueueId %></span>
+        </div>
+      </li>
+    <% } %>
+  </ul>
+</div>
+
+
+<div class="Dialog-footer--simple u-inner">
+  <button class="CDB-Button CDB-Button--error u-tSpace--m js-close">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
+      <%- _t('components.background-importer.error-details.close') %>
+    </span>
+  </button>
+</div>

lib/assets/javascripts/builder/components/background-importer/twitter-import-details-view.js

@@ -0,0 +1,55 @@
+var CoreView = require('backbone/core-view');
+var Utils = require('builder/helpers/utils');
+var template = require('./twitter-import-details.tpl');
+
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+
+const REQUIRED_OPTS = [
+  'userModel',
+  'modalModel'
+];
+
+/**
+ *  When a Twitter import finishes, this dialog displays
+ *  all the info about the price/cost etc.
+ *
+ */
+module.exports = CoreView.extend({
+
+  className: 'TwitterImportDetails',
+
+  events: {
+    'click .js-close': '_onCloseClick'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    var imp = this.model.get('import');
+    var userTwitterValues = this._userModel.get('twitter');
+    var availableTweets = userTwitterValues.quota - userTwitterValues.monthly_use;
+
+    this.$el.html(
+      template({
+        datasetTotalRows: imp.tweets_georeferenced,
+        datasetTotalRowsFormatted: Utils.formatNumber(imp.tweets_georeferenced),
+        tweetsCost: imp.tweets_cost,
+        tweetsCostFormatted: Utils.formatNumber(imp.tweets_cost),
+        availableTweets: availableTweets,
+        availableTweetsFormatted: Utils.formatNumber(availableTweets),
+        tweetsOverquota: imp.tweets_overquota,
+        tweetsOverquotaFormatted: Utils.formatNumber(imp.tweets_overquota),
+        blockSizeFormatted: Utils.formatNumber(userTwitterValues.block_size),
+        blockPriceFormatted: Utils.formatNumber(userTwitterValues.block_price)
+      })
+    );
+
+    return this;
+  },
+
+  _onCloseClick: function () {
+    this._modalModel.destroy();
+  }
+});

lib/assets/javascripts/builder/components/background-importer/twitter-import-details.tpl

@@ -0,0 +1,53 @@
+<div class="Dialog-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--twitter u-flex u-alignCenter u-justifyCenter">
+    <i class="CDB-IconFont CDB-IconFont-twitter"></i>
+  </div>
+  <h2 class="CDB-Text CDB-Size-large u-bSpace Dialog-headerIcon--twitter">
+    <%- _t('components.background-importer.twitter-import-details.twitter-import-title') %>
+  </h2>
+  <h3 class="CDB-Text CDB-Size-medium u-altTextColor">
+    <% if (datasetTotalRows === 0) { %>
+      <%- _t('components.background-importer.twitter-import-details.errors.no-results') %>
+    <% } else { %>
+      <%= _t('components.background-importer.twitter-import-details.new-type-created', { datasetTotalRowsFormatted: datasetTotalRowsFormatted, tweetPlural: datasetTotalRows != 1 ? 's' : '' }) %>
+    <% } %>
+  </h3>
+</div>
+
+<div class="Dialog-body ErrorDetails-body">
+  <ul class="Modal-containerList">
+    <li class="ErrorDetails-item">
+      <div class="ErrorDetails-itemIcon ErrorDetails-itemIcon--success CDB-Size-big u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
+        <i class="CDB-IconFont CDB-IconFont-dollar"></i>
+      </div>
+      <div class="ErrorDetails-itemText">
+        <p class="CDB-Text CDB-Size-large u-secondaryTextColor">
+          <% if (tweetsCost > 0) { %>
+            <%- _t('components.background-importer.twitter-import-details.tweet-cost.paid', { tweetsCostFormatted: tweetsCostFormatted }) %>
+          <% } else { %>
+            <%- _t('components.background-importer.twitter-import-details.tweet-cost.free', { tweetsCostFormatted: tweetsCostFormatted }) %>
+          <% } %>
+        </p>
+        <p class="CDB-Text CDB-Size-medium u-altTextColor">
+          <% if (tweetsCost > 0 || availableTweets <= 0) { %>
+            <%- _t('components.background-importer.twitter-import-details.no-more-credits', { blockPriceFormatted: blockPriceFormatted, blockSizeFormatted: blockSizeFormatted }) %>
+          <% } else { %>
+            <% if (availableTweets != 1) { %>
+              <%- _t('components.background-importer.twitter-import-details.credits-left', { availableTweetsFormatted: availableTweetsFormatted }) %>
+            <% } else { %>
+              <%- _t('components.background-importer.twitter-import-details.credit-left', { availableTweetsFormatted: availableTweetsFormatted }) %>
+            <% } %>
+          <% } %>
+        </p>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<div class="Dialog-footer--simple u-inner">
+  <button class="CDB-Button CDB-Button--primary u-tSpace--m">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase js-close">
+      <%- _t('components.background-importer.error-details.close') %>
+    </span>
+  </button>
+</div>

lib/assets/javascripts/builder/components/background-importer/upgrade-errors.tpl

@@ -0,0 +1,38 @@
+<div class="Dialog-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--negative u-flex u-alignCenter u-justifyCenter">
+    <i class="CDB-IconFont CDB-IconFont-barometer"></i>
+  </div>
+  <h2 class="CDB-Text CDB-Size-large u-bSpace u-errorTextColor">
+    <%- _t('components.background-importer.upgrade-errors.' + errorCode + '.title') %>
+  </h2>
+  <h3 class="CDB-Text CDB-Size-medium u-secondaryTextColor">
+    <%- _t('components.background-importer.upgrade-errors.' + errorCode + '.description') %>
+  </h3>
+</div>
+
+<div class="Dialog-body ErrorDetails-body">
+  <ul class="Modal-containerList">
+    <li class="ErrorDetails-item">
+      <div class="ErrorDetails-itemIcon ErrorDetails-itemIcon--success CDB-Size-big u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
+        <i class="CDB-IconFont CDB-IconFont-rocket"></i>
+      </div>
+      <div class="ErrorDetails-itemText">
+        <p class="CDB-Text CDB-Size-medium">
+          <%- _t('components.background-importer.upgrade-errors.' + errorCode + '.info') %>
+          <% if (showTrial) { %>
+            <br/>
+            <a href="<%= upgradeUrl %>"><%- _t('components.background-importer.free-trial', { days: 14 }) %></a>
+          <% } %>
+        </p>
+      </div>
+    </li>
+  </ul>
+</div>
+
+<div class="Dialog-footer--simple u-inner">
+  <a href="<%- upgradeUrl %>" class="CDB-Button CDB-Button--primary u-tSpace--m">
+    <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
+      <%- _t('components.background-importer.upgrade-errors.upgrade') %>
+    </span>
+  </a>
+</div>

lib/assets/javascripts/builder/components/background-importer/warning-partial-import-details.tpl

@@ -0,0 +1,29 @@
+<div class="Dialog-header ErrorDetails-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--alert">
+    <i class="CDB-IconFont CDB-IconFont-cloud"></i>
+  </div>
+  <p class="Dialog-headerTitle--warning">
+    <%- _t('components.background-importer.partial-import-details.unable-to-import-as-layers') %>
+  </p>
+  <p class="Dialog-headerText">
+    <%- _t('components.background-importer.partial-import-details.find-connected-datasets') %></br>
+    <%- _t('components.background-importer.partial-import-details.upgrade-your-account', { userMaxLayers: userMaxLayers }) %></br>
+  </p>
+</div>
+<% if (maxTablesPerImport) { %>
+  <div class="Dialog-body ErrorDetails-body">
+    <ul class="ErrorDetails-list">
+      <li class="ErrorDetails-item">
+        <div class="ErrorDetails-itemStep">!</div>
+        <div class="ErrorDetails-itemText">
+          <%- _t('components.background-importer.partial-import-details.too-many-datasets', { maxTablesPerImport: maxTablesPerImport }) %></br>
+        </div>
+      </li>
+    </ul>
+  </div>
+<% } %>
+<div class="Dialog-footer ErrorDetails-footer">
+  <button class="Button Button--secondary ErrorDetails-footerButton js-close">
+    <span><%- _t('components.background-importer.partial-import-details.continue-btn') %></span>
+  </button>
+</div>

lib/assets/javascripts/builder/components/background-importer/warning-too-many-files-details.tpl

@@ -0,0 +1,17 @@
+<div class="Dialog-header ErrorDetails-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--alert">
+    <i class="CDB-IconFont CDB-IconFont-cloud"></i>
+  </div>
+  <p class="Dialog-headerTitle--warning">
+    <%- _t('components.background-importer.warnings-details.unable-to-import-datasets') %>
+  </p>
+  <p class="Dialog-headerText">
+    <%- _t('components.background-importer.warnings-details.no-more-datasets', { maxTablesPerImport: maxTablesPerImport}) %><br />
+    <%- _t('components.background-importer.warnings-details.find-connected-datasets') %>
+  </p>
+</div>
+<div class="Dialog-footer ErrorDetails-footer">
+  <button class="Button Button--secondary ErrorDetails-footerButton u-upperCase js-close">
+    <span><%- _t('components.background-importer.warnings-details.continue-btn') %></span>
+  </button>
+</div>

lib/assets/javascripts/builder/components/background-importer/warning-too-many-rows-connector-details.tpl

@@ -0,0 +1,16 @@
+<div class="Dialog-header ErrorDetails-header">
+  <div class="Dialog-headerIcon Dialog-headerIcon--alert">
+    <i class="CDB-IconFont CDB-IconFont-cloud"></i>
+  </div>
+  <p class="Dialog-headerTitle--warning">
+    <%- _t('components.background-importer.connector-warning-details.too-many-rows') %>
+  </p>
+  <p class="Dialog-headerText">
+    <%- _t('components.background-importer.connector-warning-details.unable-to-import-all-rows', { maxRowsPerConnectorImport: maxRowsPerConnectorImport}) %><br />
+  </p>
+</div>
+<div class="Dialog-footer ErrorDetails-footer">
+  <button class="Button Button--secondary ErrorDetails-footerButton u-upperCase js-close">
+    <span><%- _t('components.background-importer.connector-warning-details.continue-btn') %></span>
+  </button>
+</div>

lib/assets/javascripts/builder/components/background-importer/warnings-details-view.js

@@ -0,0 +1,47 @@
+var CoreView = require('backbone/core-view');
+var partialImportDetailsTemplate = require('./warning-partial-import-details.tpl');
+var tooManyFilesDetailsTemplate = require('./warning-too-many-files-details.tpl');
+var tooManyRowsConnectorTemplate = require('./warning-too-many-rows-connector-details.tpl');
+
+/**
+ * Error details view, to be used together with an error object from an import model.
+ *
+ */
+
+module.exports = CoreView.extend({
+
+  initialize: function (opts) {
+    if (!opts.userModel) throw new Error('userModel is required');
+    if (!opts.warnings) throw new Error('warnings is required');
+
+    this._userModel = this.options.userModel;
+    this._warnings = this.options.warnings;
+  },
+
+  render: function () {
+    var warnings = this._warnings;
+    var template = this._getTemplate(warnings);
+
+    this.$el.html(
+      template({
+        userMaxLayers: warnings.user_max_layers,
+        maxTablesPerImport: warnings.max_tables_per_import,
+        maxRowsPerConnectorImport: warnings.max_rows_per_connection
+      })
+    );
+
+    return this;
+  },
+
+  _getTemplate: function (warnings) {
+    if (warnings.user_max_layers && warnings.max_tables_per_import) {
+      return (warnings.user_max_layers < warnings.max_tables_per_import) ? partialImportDetailsTemplate : tooManyFilesDetailsTemplate;
+    } else if (warnings.user_max_layers) {
+      return partialImportDetailsTemplate;
+    } else if (warnings.max_tables_per_import) {
+      return tooManyFilesDetailsTemplate;
+    } else if (warnings.max_rows_per_connection) {
+      return tooManyRowsConnectorTemplate;
+    }
+  }
+});