diff --git a/.gitignore b/.gitignore
index 59be846a1a..36c832a2d3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,6 +58,7 @@ Vagrantfile
.grunt/*
vendor/assets/javascripts/cartodb.*
vendor/assets/stylesheets/cartodb.*
+config/unicorn.conf.rb
# cartodb.css is generated by update_cdb make task and is
# used in cartodb/cartodb/app/views/layouts/application.html.erb
!vendor/assets/stylesheets/cartodb.css
diff --git a/NEWS.md b/NEWS.md
index 07f3256491..8026bbea5d 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -39,6 +39,7 @@ sudo make install
- Migrate spec/models/carto to the new CI [#16228](https://github.com/CartoDB/cartodb/pull/16228)
- Add OAuth BigQuery connection [#16218](https://github.com/CartoDB/cartodb/pull/16218)
- Remove Data Observatory v1 [#16207](https://github.com/CartoDB/cartodb/pull/16207)
+- Add new static page for tilesets viewer [#16232](https://github.com/CartoDB/cartodb/pull/16232)
### Bug fixes / enhancements
diff --git a/app/controllers/admin/tilesets_viewer_controller.rb b/app/controllers/admin/tilesets_viewer_controller.rb
new file mode 100644
index 0000000000..507769a44b
--- /dev/null
+++ b/app/controllers/admin/tilesets_viewer_controller.rb
@@ -0,0 +1,7 @@
+class Admin::TilesetsViewerController < ApplicationController
+ protect_from_forgery except: :index
+
+ def index
+ render(file: "public/static/tilesets_viewer/index.html", layout: false)
+ end
+end
diff --git a/config/application.rb b/config/application.rb
index 3285465423..04e17bc34f 100644
--- a/config/application.rb
+++ b/config/application.rb
@@ -95,6 +95,7 @@ module CartoDB
account.js
profile.js
profile_templates.js
+ tilesets_viewer.js
keys_templates.js
keys_deps.js
keys.js
@@ -154,6 +155,7 @@ module CartoDB
common_new.css
old_common.css
dashboard.css
+ tilesets_viewer.css
cartodb.css
front.css
editor.css
diff --git a/config/public_statics_config.js b/config/public_statics_config.js
index c232790e9e..5ddfc3d29a 100644
--- a/config/public_statics_config.js
+++ b/config/public_statics_config.js
@@ -5,10 +5,10 @@
* Note: don't modify its contents unless it's coordinated to work with deployments in different environments
*/
-const CARTO_BUILDER_ASSET_HOST = JSON.stringify(process.env.CARTO_BUILDER_ASSET_HOST || '/assets');
-const CARTO_MAPS_API_V2_EXTERNAL_URL = JSON.stringify(process.env.CARTO_MAPS_API_V2_EXTERNAL_URL || 'http://localhost.lan:8282');
+const CARTO_BUILDER_ASSET_HOST = process.env.CARTO_BUILDER_ASSET_HOST || '';
+const CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE = process.env.CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE || 'http://localhost.lan:8282';
module.exports = {
'CARTO_BUILDER_ASSET_HOST': CARTO_BUILDER_ASSET_HOST,
- 'CARTO_MAPS_API_V2_EXTERNAL_URL': CARTO_MAPS_API_V2_EXTERNAL_URL
+ 'CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE': CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE
};
diff --git a/config/routes.rb b/config/routes.rb
index 1f366c0c1c..652d9dc2a3 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -341,6 +341,7 @@ CartoDB::Application.routes.draw do
get '(/user/:user_domain)(/u/:user_domain)/dashboard/get-started/:id' => 'visualizations#index', as: :get_started_onboarding
# Tileset viewer
+ get '/viewer/user/:user_domain/:type' => 'tilesets_viewer#index', as: :public_tilesets_viewer
get '(/user/:user_domain)(/u/:user_domain)/dashboard/tilesets/:id' => 'visualizations#index', as: :tilesets_viewer, constraints: { id: /[0-z.-]+/ }
# Public dashboard
diff --git a/lib/assets/javascripts/dashboard/helpers/assets-version.js b/lib/assets/javascripts/dashboard/helpers/assets-version.js
index aa3e7e8a1f..4400c8422f 100644
--- a/lib/assets/javascripts/dashboard/helpers/assets-version.js
+++ b/lib/assets/javascripts/dashboard/helpers/assets-version.js
@@ -12,12 +12,12 @@ module.exports = {
}
}
- return window.StaticConfig.assetVersion || window.CartoConfig.data.user_frontend_version || version;
+ return window.StaticConfig.assetVersion || (window.CartoConfig && window.CartoConfig.data && window.CartoConfig.data.user_frontend_version) || version;
},
getAssetsBaseUrl: function () {
const data = window.CartoConfig.data;
- const dataAssetsHost = data.asset_host && data.asset_host + '/assets';
+ const dataAssetsHost = data && data.asset_host ? data.asset_host + '/assets' : '';
const assetsBaseUrl =
window.StaticConfig.assetsBaseUrl ||
diff --git a/lib/assets/javascripts/dashboard/statics/static.js b/lib/assets/javascripts/dashboard/statics/static.js
index 8312717de9..1b99996dd9 100644
--- a/lib/assets/javascripts/dashboard/statics/static.js
+++ b/lib/assets/javascripts/dashboard/statics/static.js
@@ -2,10 +2,11 @@ var CartoNode = require('../../../../../vendor/assets/javascripts/carto-node/car
var UrlHelper = require('./helpers/url');
var Redirector = require('../helpers/redirector');
-/* global __ASSETS_VERSION__:false */
-// __ASSETS_VERSION__ is injected via Webpack to avoid requiring
-// whole package.json file
+/* global __ASSETS_VERSION__:false, __CARTO_BUILDER_ASSET_HOST__:false */
+// __ASSETS_VERSION__ is injected via Webpack to avoid requiring whole package.json file
+// __CARTO_BUILDER_ASSET_HOST__ is also injected via Webpack
var version = __ASSETS_VERSION__;
+var CARTO_BUILDER_ASSET_HOST = __CARTO_BUILDER_ASSET_HOST__;
var AssetsVersionHelper = require('../helpers/assets-version');
var GOOGLE_MAPS_SCRIPT_SRC = '//maps.googleapis.com/maps/api/js?v=3.32&sensor=false';
@@ -60,7 +61,7 @@ window.CartoConfig = window.CartoConfig || {};
var getAssetsToLoad = function (userData) {
var entryPointFeatureFlags = getEntryPointFeatureFlags(window.StaticConfig);
- var userFeatureFlags = userData.feature_flags;
+ var userFeatureFlags = userData ? userData.feature_flags : [];
var featureFlagToUse = entryPointFeatureFlags.filter(function (featureFlag) {
return userFeatureFlags.indexOf(featureFlag) !== -1;
@@ -124,6 +125,17 @@ window.CartoConfig = window.CartoConfig || {};
})(window, document, assetsUrl, '/favicons/favicon.ico', options.stylesheets, options.scripts);
};
+ var markAsReady = function (userData) {
+ assetsUrl = AssetsVersionHelper.getAssetsUrl(version);
+ addSpinner();
+
+ var assets = getAssetsToLoad(userData);
+ addAssets({
+ stylesheets: assets.stylesheets,
+ scripts: assets.scripts
+ });
+ };
+
var getUserConfig = function (visualizationError) {
client.getConfig(function (err, response, data) {
if (err) {
@@ -158,14 +170,8 @@ window.CartoConfig = window.CartoConfig || {};
}
window.CartoConfig.data = data;
- assetsUrl = AssetsVersionHelper.getAssetsUrl(version);
- addSpinner();
- var assets = getAssetsToLoad(userData);
- addAssets({
- stylesheets: assets.stylesheets,
- scripts: assets.scripts
- });
+ markAsReady(userData);
});
};
@@ -193,6 +199,11 @@ window.CartoConfig = window.CartoConfig || {};
if (window.StaticConfig.visualization) {
getVisualization(window.StaticConfig.visualization.params);
+ } else if (window.StaticConfig.anonymous) {
+ const isRootLevel = CARTO_BUILDER_ASSET_HOST === '//';
+ const baseUrl = isRootLevel ? '/assets' : CARTO_BUILDER_ASSET_HOST + '/assets';
+ window.StaticConfig.assetsBaseUrl = baseUrl;
+ markAsReady();
} else {
getUserConfig();
}
diff --git a/lib/assets/javascripts/new-dashboard/pages/TilesetsViewer.vue b/lib/assets/javascripts/new-dashboard/pages/TilesetsViewer.vue
index 03ebb35bab..97e859bdb9 100644
--- a/lib/assets/javascripts/new-dashboard/pages/TilesetsViewer.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/TilesetsViewer.vue
@@ -53,7 +53,8 @@ export default {
let tileset;
try {
tileset = await this.$store.dispatch('tilesets/getTileset', { source: this.source, tileset_id: this.tileset_id, project_id, dataset_id, connection_id });
- } catch {}
+ } catch (e) {
+ }
const center = tileset && tileset.metadata && tileset.metadata.center && tileset.metadata.center.split(',');
const longitude = center && parseFloat(center[0]);
const latitude = center && parseFloat(center[1]);
@@ -70,7 +71,7 @@ export default {
this.$router.push({ name: 'tilesets' });
},
shareOptions: {
- baseUrl: `https://viewer.carto${this.base_url.includes('staging') ? '-staging' : ''}.com`,
+ baseUrl: `${this.base_url}/viewer`,
privacy: tileset.privacy,
setPrivacy: this.setPrivacy
}
diff --git a/lib/assets/javascripts/tilesets-viewer/App.vue b/lib/assets/javascripts/tilesets-viewer/App.vue
new file mode 100644
index 0000000000..85ebd85546
--- /dev/null
+++ b/lib/assets/javascripts/tilesets-viewer/App.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
+
+
diff --git a/lib/assets/javascripts/tilesets-viewer/i18n.js b/lib/assets/javascripts/tilesets-viewer/i18n.js
new file mode 100644
index 0000000000..fcdb6f9789
--- /dev/null
+++ b/lib/assets/javascripts/tilesets-viewer/i18n.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+import en from 'new-dashboard/i18n/locales/en';
+
+Vue.use(VueI18n);
+
+const i18n = new VueI18n({
+ locale: 'en',
+ messages: {
+ en
+ }
+});
+
+export default i18n;
diff --git a/lib/assets/javascripts/tilesets-viewer/main.js b/lib/assets/javascripts/tilesets-viewer/main.js
new file mode 100644
index 0000000000..5bbc952a4c
--- /dev/null
+++ b/lib/assets/javascripts/tilesets-viewer/main.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+import i18n from './i18n';
+import store from './store';
+
+Vue.config.productionTip = false;
+
+const el = '#app';
+
+/* eslint-disable no-new */
+new Vue({
+ el,
+ store,
+ i18n,
+ components: { App },
+ template: ''
+});
diff --git a/lib/assets/javascripts/tilesets-viewer/main.scss b/lib/assets/javascripts/tilesets-viewer/main.scss
new file mode 100644
index 0000000000..a18246fe03
--- /dev/null
+++ b/lib/assets/javascripts/tilesets-viewer/main.scss
@@ -0,0 +1,39 @@
+/* Theme */
+$color-primary: #2E51E8;
+$color-primary--soft: #F2F6F9;
+$color-primary--dark: #3D33CC;
+
+@import '../new-dashboard/styles/variables';
+
+// base
+@import '../new-dashboard/styles/base/reset';
+@import '../new-dashboard/styles/base/typography';
+
+// layout
+@import '../new-dashboard/styles/layout/cells';
+@import '../new-dashboard/styles/layout/grid';
+@import '../new-dashboard/styles/layout/page';
+@import '../new-dashboard/styles/layout/section';
+
+// components
+@import '../new-dashboard/styles/components/buttons';
+@import '../new-dashboard/styles/components/checkbox';
+@import '../new-dashboard/styles/components/code';
+@import '../new-dashboard/styles/components/welcome';
+@import '../new-dashboard/styles/components/scrollbar';
+
+// pages
+@import '../new-dashboard/styles/pages/solutionsIcons';
+@import '../new-dashboard/styles/pages/visualizations';
+
+// helpers
+@import '../new-dashboard/styles/helpers/colors';
+@import '../new-dashboard/styles/helpers/flexbox';
+@import '../new-dashboard/styles/helpers/spacing';
+@import '../new-dashboard/styles/helpers/utilities';
+
+//hangar
+@import '../new-dashboard/styles/hangar/main';
+
+//vendors
+@import '../new-dashboard/styles/vendors/perfect-scrollbar';
\ No newline at end of file
diff --git a/lib/assets/javascripts/tilesets-viewer/store.js b/lib/assets/javascripts/tilesets-viewer/store.js
new file mode 100644
index 0000000000..d83fc6a934
--- /dev/null
+++ b/lib/assets/javascripts/tilesets-viewer/store.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import catalog from 'new-dashboard/store/modules/data/catalog';
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+ state: {},
+ getters: {},
+ modules: {
+ catalog
+ }
+});
+
+export default store;
diff --git a/lib/build/files/webpack_files.js b/lib/build/files/webpack_files.js
index a8ae5cd474..ee53b0a29c 100644
--- a/lib/build/files/webpack_files.js
+++ b/lib/build/files/webpack_files.js
@@ -11,6 +11,19 @@ var files = {
'/javascripts/new_dashboard.js'
]
},
+ tilesets_viewer: {
+ page: 'tilesets_viewer',
+ anonymous: true,
+ stylesheets: [
+ '/stylesheets/common_new.css',
+ '/stylesheets/tilesets_viewer.css'
+ ],
+ scripts: [
+ '/javascripts/common.js',
+ '/javascripts/common_vendor.js',
+ '/javascripts/tilesets_viewer.js'
+ ]
+ },
profile: {
page: 'profile',
stylesheets: [
diff --git a/lib/build/tasks/watch.js b/lib/build/tasks/watch.js
index 67779a8286..39b07b79ff 100644
--- a/lib/build/tasks/watch.js
+++ b/lib/build/tasks/watch.js
@@ -9,6 +9,7 @@ exports.task = function () {
'app/assets/stylesheets/editor-3/**/*.scss',
'app/assets/stylesheets/deep-insights/**/*.scss',
'app/assets/stylesheets/new_dashboard/**/*.scss',
+ 'app/assets/stylesheets/tilesets_viewer/**/*.scss',
'node_modules/cartoassets/src/scss/**/*.scss',
'node_modules/internal-carto.js/themes/scss/**/*.scss'
],
diff --git a/package-lock.json b/package-lock.json
index d945c48522..36c611df79 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "cartodb-ui",
- "version": "1.0.0-assets.235",
+ "version": "1.0.0-assets.236",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index e87607deef..9893b04c4e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "cartodb-ui",
- "version": "1.0.0-assets.235",
+ "version": "1.0.0-assets.236",
"description": "CARTO UI frontend",
"repository": {
"type": "git",
@@ -252,6 +252,7 @@
"dev:editor:cdb": "grunt editor-cdb",
"dev:static": "webpack --progress --watch --config webpack/static-pages/webpack.dev.config.js",
"dev:do-catalog": "NODE_ENV=development vue-cli-service serve --watch lib/assets/javascripts/do-catalog/main.js",
+ "dev:tilesets-viewer": "NODE_ENV=development vue-cli-service serve --watch lib/assets/javascripts/tilesets-viewer/main.js",
"profile": "NODE_ENV=production webpack --profile --json --config webpack/v4/webpack.prod.config.js > compilation-stats.json"
}
}
diff --git a/vue.config.js b/vue.config.js
index 04ee756fa2..5f14dd16f7 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -10,6 +10,7 @@ module.exports = {
resolve: {
alias: {
'do-catalog': path.resolve(__dirname, 'lib/assets/javascripts/do-catalog/'),
+ 'tilesets-viewer': path.resolve(__dirname, 'lib/assets/javascripts/tilesets-viewer/'),
'new-dashboard': path.resolve(__dirname, 'lib/assets/javascripts/new-dashboard/')
},
extensions: ['.js', '.vue', '.json', '.scss']
diff --git a/webpack/static-pages/webpack.base.config.js b/webpack/static-pages/webpack.base.config.js
index c72402257f..11307d4403 100644
--- a/webpack/static-pages/webpack.base.config.js
+++ b/webpack/static-pages/webpack.base.config.js
@@ -20,9 +20,9 @@ module.exports = {
devtool: 'source-map',
plugins: [
new webpack.DefinePlugin({
- __ASSETS_VERSION__: `'${VERSION}'`,
- __CARTO_BUILDER_ASSET_HOST__: PUBLIC_STATICS_CONFIG.CARTO_BUILDER_ASSET_HOST,
- __CARTO_MAPS_API_V2_EXTERNAL_URL__: PUBLIC_STATICS_CONFIG.CARTO_MAPS_API_V2_EXTERNAL_URL
+ __ASSETS_VERSION__: JSON.stringify(VERSION),
+ __CARTO_BUILDER_ASSET_HOST__: JSON.stringify(PUBLIC_STATICS_CONFIG.CARTO_BUILDER_ASSET_HOST),
+ __CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE__: JSON.stringify(PUBLIC_STATICS_CONFIG.CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE)
}),
...Object.keys(webpackFiles.htmlFiles).map((entryName) => {
@@ -34,5 +34,32 @@ module.exports = {
config: webpackFiles.htmlFiles[entryName]
});
})
- ]
+ ],
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ include: [
+ './node_modules/@carto/viewer'
+ ],
+ exclude: [
+ './node_modules/@carto/viewer/node_modules'
+ ],
+ options: {
+ babelrc: true
+ }
+ },
+ {
+ test: /\.svg$/,
+ use: ['@svgr/webpack'],
+ include: [
+ './node_modules/@carto/viewer'
+ ],
+ exclude: [
+ './node_modules/@carto/viewer/node_modules'
+ ]
+ }
+ ]
+ }
};
diff --git a/webpack/v4/entryPoints.js b/webpack/v4/entryPoints.js
index c13ac2937b..f499554487 100644
--- a/webpack/v4/entryPoints.js
+++ b/webpack/v4/entryPoints.js
@@ -27,6 +27,12 @@ const entries = {
rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
],
+ tilesets_viewer: [
+ rootDir('lib/assets/javascripts/tilesets-viewer/main.js'),
+ rootDir('lib/assets/javascripts/tilesets-viewer/main.scss'),
+ rootDir('node_modules/internal-carto.js/themes/scss/entry.scss')
+ ],
+
header: [
rootDir('lib/assets/javascripts/new-dashboard/bundles/header/header.js'),
rootDir('lib/assets/javascripts/new-dashboard/styles/bundles/header.scss')
diff --git a/webpack/v4/webpack.base.config.js b/webpack/v4/webpack.base.config.js
index 80eb8cd8eb..664bd67062 100644
--- a/webpack/v4/webpack.base.config.js
+++ b/webpack/v4/webpack.base.config.js
@@ -4,6 +4,7 @@ const CopyWebpackPlugin = require('copy-webpack-plugin');
const WebpackDeleteAfterEmit = require('webpack-delete-after-emit');
const { version } = require('../../package.json');
const { http_path_prefix } = require(`../../config/grunt_${process.env.NODE_ENV}.json`);
+const PUBLIC_STATICS_CONFIG = require('../../config/public_statics_config');
const entryPoints = require('./entryPoints');
const vueLoaderConfig = require('../new-dashboard/vue-loader.conf');
@@ -42,7 +43,8 @@ module.exports = {
__ENV__: JSON.stringify('prod'),
__ASSETS_VERSION__: JSON.stringify(version),
__ASSETS_PATH__: JSON.stringify(`${http_path_prefix}/assets/${version}`),
- __KEPLERGL_BASE_URL__: JSON.stringify('https://kepler.gl')
+ __KEPLERGL_BASE_URL__: JSON.stringify('https://kepler.gl'),
+ __CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE__: JSON.stringify(PUBLIC_STATICS_CONFIG.CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE)
}),
new MiniCssExtractPlugin({