From 68aa129bef6009760148fb93ec1aa643ce1c6cf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Velarde?= Date: Tue, 6 Apr 2021 09:43:45 +0200 Subject: [PATCH] Add new tilesets viewer static page (#16232) --- .gitignore | 1 + NEWS.md | 1 + .../admin/tilesets_viewer_controller.rb | 7 +++ config/application.rb | 2 + config/public_statics_config.js | 6 +-- config/routes.rb | 1 + .../dashboard/helpers/assets-version.js | 4 +- .../javascripts/dashboard/statics/static.js | 33 +++++++++----- .../new-dashboard/pages/TilesetsViewer.vue | 5 ++- .../javascripts/tilesets-viewer/App.vue | 43 +++++++++++++++++++ .../javascripts/tilesets-viewer/i18n.js | 15 +++++++ .../javascripts/tilesets-viewer/main.js | 18 ++++++++ .../javascripts/tilesets-viewer/main.scss | 39 +++++++++++++++++ .../javascripts/tilesets-viewer/store.js | 15 +++++++ lib/build/files/webpack_files.js | 13 ++++++ lib/build/tasks/watch.js | 1 + package-lock.json | 2 +- package.json | 3 +- vue.config.js | 1 + webpack/static-pages/webpack.base.config.js | 35 +++++++++++++-- webpack/v4/entryPoints.js | 6 +++ webpack/v4/webpack.base.config.js | 4 +- 22 files changed, 230 insertions(+), 25 deletions(-) create mode 100644 app/controllers/admin/tilesets_viewer_controller.rb create mode 100644 lib/assets/javascripts/tilesets-viewer/App.vue create mode 100644 lib/assets/javascripts/tilesets-viewer/i18n.js create mode 100644 lib/assets/javascripts/tilesets-viewer/main.js create mode 100644 lib/assets/javascripts/tilesets-viewer/main.scss create mode 100644 lib/assets/javascripts/tilesets-viewer/store.js 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({