Refactor to use DO Catalog as embedded component in CARTO Workspace (carto 3) (#16325)

NEWS.md

@@ -5,6 +5,7 @@ Development
 - None yet
 
 ### Features
+* Update DO Catalog dependencies and some changes to use bundle on CARTO Workspace [#16325](https://github.com/CartoDB/cartodb/pull/16325)
 * Send data to Hubspot when accessing datasets [#16313](https://github.com/CartoDB/cartodb/pull/16313)
 * Request access to datasets directly from DO Catalog [#16291](https://github.com/CartoDB/cartodb/pull/16291)
 * Adapt rake SAML parameters for the new version ruby-saml v1.12.2 [#16274](https://github.com/CartoDB/cartodb/pull/16274), [#16275](https://github.com/CartoDB/cartodb/pull/16275/)

lib/assets/javascripts/do-catalog/main.js

@@ -11,14 +11,22 @@ Vue.config.productionTip = false;
 const el = process.env.NODE_ENV === 'development' ? '#app' : '#do-catalog';
 
 /* eslint-disable no-new */
-new Vue({
-  el,
-  router,
-  store,
-  i18n,
-  components: { App },
-  template: '<App />'
-});
+function execDataObservatoryCatalog () {
+  const app = new Vue({
+    el,
+    router,
+    store,
+    i18n,
+    components: { App },
+    template: '<App />'
+  });
+
+  return { app, router };
+}
+
+execDataObservatoryCatalog();
+
+window.createDataObservatoryCatalog = execDataObservatoryCatalog;
 
 // HTML integration
 /*

lib/assets/javascripts/do-catalog/main.scss

@@ -11,9 +11,9 @@ $color-primary--dark: #3D33CC;
 
 // layout
 @import '../new-dashboard/styles/layout/cells';
+@import '../new-dashboard/styles/layout/container';
 @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';

lib/assets/javascripts/do-catalog/router.js

@@ -7,8 +7,9 @@ import CatalogDatasetMap from 'new-dashboard/pages/Data/CatalogDatasetMap.vue';
 import CatalogDatasetData from 'new-dashboard/pages/Data/CatalogDatasetData.vue';
 import CatalogDatasetSummary from 'new-dashboard/pages/Data/CatalogDatasetSummary.vue';
 
-Vue.use(Router);
+const isCartoWorkspace = window.CARTO_WORKSPACE;
 
+Vue.use(Router);
 const router = new Router({
   mode: 'history',
   base: '/spatial-data-catalog/browser/',
@@ -17,7 +18,7 @@ const router = new Router({
       path: '/',
       name: 'spatial-data-catalog',
       component: Catalog,
-      props: { publicWebsite: true },
+      props: { publicWebsite: true, isCartoWorkspace },
       meta: {
         title: () => 'Spatial Data Catalog | CARTO'
       }
@@ -25,7 +26,7 @@ const router = new Router({
     {
       path: '/:entity_type/:entity_id',
       component: CatalogDataset,
-      props: { publicWebsite: true },
+      props: { publicWebsite: true, isCartoWorkspace },
       meta: {
         title: () => 'Spatial Data Catalog | CARTO'
       },

lib/assets/javascripts/new-dashboard/assets/icons/common/back-long.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="10">
+  <path d="M5.293.293l1.414 1.414L4.414 4H20v2H4.414l2.293 2.293-1.414 1.414L.586 5z" fill="inherit"/>
+</svg>

lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue

@@ -59,10 +59,16 @@ export default {
   data () {
     return {
       map: null,
-      showMap: false,
+      showMap: true,
       variable: null,
       geomType: null,
-      initialViewState: null,
+      initialViewState: {
+        zoom: 1,
+        latitude: 0,
+        longitude: 0,
+        bearing: 0,
+        pitch: 0
+      },
       centered: false
     };
   },
@@ -156,6 +162,7 @@ export default {
 
     deck = new Deck({
       canvas: 'deck-canvas',
+      initialViewState: this.initialViewState,
       onViewStateChange: ({ viewState }) => {
         this.syncMapboxViewState(viewState);
       },

lib/assets/javascripts/new-dashboard/components/Subscriptions/SubscriptionAccess.vue

@@ -55,12 +55,15 @@
 <script>
 
 import { mapState } from 'vuex';
-import exportedScssVars from 'new-dashboard/styles/helpers/_assetsDir.scss';
 import Dialog from 'new-dashboard/components/Dialogs/Dialog.vue';
 import SubscriptionRequestSuccess from './SubscriptionRequestSuccess.vue';
 import BigQueryAccessParameters from './BigQueryAccessParameters.vue';
 import OtherAccessParameters from './OtherAccessParameters.vue';
 
+/* global __ASSETS_DIR__:false */
+// __ASSETS_DIR__ is injected via Webpack
+const assetsDir = __ASSETS_DIR__;
+
 const PLATFORMS = {
   'bigquery': {
     name: 'BigQuery',
@@ -118,7 +121,7 @@ export default {
     logo () {
       let logo = '';
       if (this.currentAccessPlatform) {
-        logo = `${exportedScssVars.assetsDir && exportedScssVars.assetsDir.replace(/\"/g, '')}/images/layout/platforms/${this.currentAccessPlatform}.svg`;
+        logo = `${assetsDir && assetsDir.replace(/\"/g, '')}/images/layout/platforms/${this.currentAccessPlatform}.svg`;
       }
       return logo;
     },

lib/assets/javascripts/new-dashboard/pages/Data/Catalog.vue

@@ -1,22 +1,24 @@
 <template>
   <section class="catalog-section" :class="{ 'dashboard-page': !publicWebsite }">
-    <div v-if="publicWebsite" class="website-header">
-      <h1 class="grid-cell--col10">{{ $t('DataPage.tabs.catalog') }}</h1>
-    </div>
-    <div v-else class="container grid">
-      <div class="full-width">
-        <SectionTitle class="grid-cell">
-          <template slot="icon">
-            <img src="../../assets/icons/section-title/catalog.svg" width="18" height="20" />
-          </template>
-          <template slot="title">
-            <VisualizationsTitle :defaultTitle="$t('DataPage.tabs.catalog')"/>
-          </template>
-        </SectionTitle>
+    <template v-if="!isCartoWorkspace">
+      <div v-if="publicWebsite" class="website-header">
+        <h1 class="grid-cell--col10">{{ $t('DataPage.tabs.catalog') }}</h1>
       </div>
-    </div>
+      <div v-else class="container grid">
+        <div class="full-width">
+          <SectionTitle class="grid-cell">
+            <template slot="icon">
+              <img src="../../assets/icons/section-title/catalog.svg" width="18" height="20" />
+            </template>
+            <template slot="title">
+              <VisualizationsTitle :defaultTitle="$t('DataPage.tabs.catalog')"/>
+            </template>
+          </SectionTitle>
+        </div>
+      </div>
+    </template>
     <div :class="{ 'container grid': !publicWebsite, 'u-flex u-flex__justify--center': publicWebsite }">
-      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite, 'grid-cell--col10': publicWebsite }">
+      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite || isCartoWorkspace , 'grid-cell--col10': publicWebsite && !isCartoWorkspace}">
         <div class="grid u-flex__justify--center">
           <div
             class="u-pr--10 grid-cell--col4 grid-cell--col12--tablet dynamic-filtering"
@@ -104,7 +106,8 @@ import VisualizationsTitle from 'new-dashboard/components/VisualizationsTitle';
 export default {
   name: 'CatalogPage',
   props: {
-    publicWebsite: Boolean
+    publicWebsite: Boolean,
+    isCartoWorkspace: Boolean
   },
   mixins: [icon_by_environment],
   components: {

lib/assets/javascripts/new-dashboard/pages/Data/CatalogDataset.vue

@@ -31,7 +31,7 @@
       </div>
     </section>
 
-    <section v-if="!loading" class="catalogDetail" :class="{ 'container grid': !publicWebsite, 'u-flex u-flex__justify--center website-header': publicWebsite }">
+    <section v-if="!loading" :style="{ display: isCartoWorkspace ? 'none' : ''}" class="catalogDetail" :class="{ 'container grid': !publicWebsite, 'u-flex u-flex__justify--center website-header': publicWebsite }">
       <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite || responsive, 'grid-cell--col10': publicWebsite && !responsive }">
         <transition name="fade">
           <div>
@@ -41,6 +41,7 @@
                 :class="{ 'disabled': loading }"
                 :to="{ name: 'spatial-data-catalog' }"
               >
+                <img class="catalogDetail__catalog--icon" svg-inline src="../../assets/icons/common/back-long.svg"/>
                 {{ $t('Catalog.name') }}
               </router-link>
             </div>
@@ -57,7 +58,7 @@
     </section>
 
     <section v-if="!loading" class="catalogDetail" :class="{ 'container grid': !publicWebsite, 'u-flex u-flex__justify--center': publicWebsite }">
-      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite || responsive, 'grid-cell--col10': publicWebsite && !responsive }">
+      <div class="grid-cell" :class="{ 'grid-cell--col12': !publicWebsite || responsive || isCartoWorkspace, 'grid-cell--col10': publicWebsite && !responsive && !isCartoWorkspace }">
         <transition name="fade">
           <div :class="{ 'u-pb--120': responsive }">
             <div class="grid grid-cell u-flex__justify--center">
@@ -92,7 +93,8 @@ import SubscriptionAccess from 'new-dashboard/components/Subscriptions/Subscript
 export default {
   name: 'CatalogDataset',
   props: {
-    publicWebsite: Boolean
+    publicWebsite: Boolean,
+    isCartoWorkspace: Boolean
   },
   components: {
     Page,
@@ -339,14 +341,24 @@ input::-ms-clear {
     margin-bottom: 24px;
     background-color: $color-primary;
 
+    .back-link {
+      display: flex;
+      align-items: center;
+      & > svg {
+        width: 20px;
+        height: 10px;
+        fill: currentColor;
+        outline: none;
+      }
+    }
+
     a {
       color: white;
     }
   }
 }
 
-.back-link:before {
-  content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMjItN0gtMnYyNGgyNHoiLz48cGF0aCBkPSJNNS4yOTMuMjkzbDEuNDE0IDEuNDE0TDQuNDE0IDRIMjB2Mkg0LjQxNGwyLjI5MyAyLjI5My0xLjQxNCAxLjQxNEwuNTg2IDV6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==);
+.back-link > svg {
   margin-right: 12px;
 }
 </style>

lib/assets/javascripts/new-dashboard/styles/layout/_container.scss

@@ -0,0 +1,5 @@
+.container {
+  max-width: 980px;
+  margin: 0 auto;
+  padding: 0 10px;
+}

lib/assets/javascripts/new-dashboard/styles/layout/_grid.scss

@@ -1,9 +1,3 @@
-.container {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 0 10px;
-}
-
 @mixin grid($value) {
   flex: 0 0 $value;
   max-width: $value;

lib/assets/javascripts/new-dashboard/styles/main.scss

@@ -7,6 +7,7 @@
 // layout
 @import 'layout/cells';
 @import 'layout/dialogs';
+@import 'layout/container';
 @import 'layout/grid';
 @import 'layout/page';
 @import 'layout/section';

lib/assets/javascripts/tilesets-viewer/main.scss

@@ -11,6 +11,7 @@ $color-primary--dark: #3D33CC;
 
 // layout
 @import '../new-dashboard/styles/layout/cells';
+@import '../new-dashboard/styles/layout/container';
 @import '../new-dashboard/styles/layout/grid';
 @import '../new-dashboard/styles/layout/page';
 @import '../new-dashboard/styles/layout/section';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.256",
+  "version": "1.0.0-assets.257",
   "description": "CARTO UI frontend",
   "repository": {
     "type": "git",
@@ -25,12 +25,13 @@
     "@carto/toolkit-custom-storage": "0.0.1-rc.18",
     "@carto/viewer": "CartoDB/viewer#v1.0.6",
     "@carto/zera": "1.0.7",
-    "@deck.gl/carto": "^8.4.5",
-    "@deck.gl/core": "^8.4.5",
-    "@deck.gl/geo-layers": "^8.4.5",
-    "@deck.gl/google-maps": "^8.4.5",
-    "@deck.gl/layers": "^8.4.5",
-    "@deck.gl/mesh-layers": "^8.4.5",
+    "@deck.gl/carto": "8.5.2",
+    "@deck.gl/core": "8.5.2",
+    "@deck.gl/extensions": "8.5.2",
+    "@deck.gl/geo-layers": "8.5.2",
+    "@deck.gl/google-maps": "8.5.2",
+    "@deck.gl/layers": "8.5.2",
+    "@deck.gl/mesh-layers": "8.5.2",
     "babel-polyfill": "^6.26.0",
     "backbone": "1.2.3",
     "backbone-forms": "0.14.0",
@@ -246,6 +247,7 @@
     "build:dev": "NODE_ENV=development webpack --progress --config webpack/v4/webpack.dev.config.js",
     "build:static": "NODE_ENV=production webpack --progress --config webpack/static-pages/webpack.prod.config.js",
     "build:do-catalog": "NODE_ENV=production vue-cli-service build --target lib --name do-catalog --formats umd-min --no-clean --inline-vue lib/assets/javascripts/do-catalog/main.js",
+    "build:do-catalog:dev": "NODE_ENV=development vue-cli-service build --watch --target lib --name do-catalog --no-clean --inline-vue lib/assets/javascripts/do-catalog/main.js",
     "carto-node": "NODE_ENV=production webpack --progress --config webpack/carto-node/webpack.config.js",
     "dev": "NODE_ENV=development webpack --progress --watch --config webpack/v4/webpack.dev.config.js",
     "dev:editor": "grunt editor",

vue.config.js

@@ -1,3 +1,4 @@
+const webpack = require('webpack');
 const path = require('path');
 const { http_path_prefix } = require(`./config/grunt_${process.env.NODE_ENV}.json`);
 const { version } = require('./package.json');
@@ -19,16 +20,30 @@ module.exports = {
     performance: {
       maxEntrypointSize: 2048000,
       maxAssetSize: 2048000
-    }
+    },
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: 'vue-svg-inline-loader'
+            }
+          ]
+        }
+      ]
+    },
+    plugins: [
+      new webpack.DefinePlugin({
+        __ASSETS_DIR__: JSON.stringify(`${http_path_prefix}/assets/${version}`)
+      })
+    ]
   },
   css: {
     extract: false,
     loaderOptions: {
       scss: {
-        data: `
-          @import 'do-catalog/main.scss';
-          $assetsDir: "${http_path_prefix}/assets/${version}";
-        `
+        data: "@import 'do-catalog/main.scss';"
       }
     }
   },

webpack/v4/webpack.base.config.js

@@ -44,7 +44,8 @@ module.exports = {
       __ASSETS_VERSION__: JSON.stringify(version),
       __ASSETS_PATH__: JSON.stringify(`${http_path_prefix}/assets/${version}`),
       __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)
+      __CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE__: JSON.stringify(PUBLIC_STATICS_CONFIG.CARTO_MAPS_API_V2_EXTERNAL_URL_TEMPLATE),
+      __ASSETS_DIR__: JSON.stringify(`${http_path_prefix}/assets/${version}`)
     }),
 
     new MiniCssExtractPlugin({
@@ -201,6 +202,10 @@ module.exports = {
           rootDir('node_modules/@carto/toolkit-core'),
           rootDir('node_modules/@carto/toolkit-custom-storage'),
           rootDir('node_modules/vue-i18n/'),
+          rootDir('node_modules/@deck.gl/core'),
+          rootDir('node_modules/@loaders.gl/core'),
+          rootDir('node_modules/@loaders.gl/loader-utils'),
+          rootDir('node_modules/@loaders.gl/worker-utils'),
           rootDir('node_modules/@carto/viewer')
         ],
         exclude: [