Display notifications about "New CARTO Platform" release (#16352)

3 years ago · e11626b392
parent 016ed1fb10
commit e11626b392
11 changed files with 177 additions and 4 deletions
--- a/NEWS.md
+++ b/NEWS.md
@ -5,6 +5,7 @@ Development
 - None yet

 ### Features
+* Display notifications about the new CARTO platform release [16352](https://github.com/CartoDB/cartodb/pull/16352)
 * Upgrade to deck.gl 8.5.6 [16338](https://github.com/CartoDB/cartodb/pull/16338)
 * 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)
--- a/lib/assets/javascripts/new-dashboard/App.vue
+++ b/lib/assets/javascripts/new-dashboard/App.vue
@ -1,12 +1,13 @@
 <template>
  <div id="app">
    <header class="header" :class="{ 'has-user-notification': isNotificationVisible }">
+      <NotificationCarto3Release v-if="isCarto3ReleaseNotificationVisible" @onClose="closeCarto3Release" />
      <NotificationWarning v-if="isNotificationVisible" :htmlBody=user.notification />
      <NavigationBar
        :user="user"
        :baseUrl="baseUrl"
        :notificationsCount="notificationsCount"
-        :isNotificationVisible=isNotificationVisible
+        :isNotificationVisible="isNotificationVisible || isCarto3ReleaseNotificationVisible"
        :isFirstTimeInDashboard="isFirstTimeInDashboard"
        bundleType="dashboard"/>
    </header>
@ -21,31 +22,58 @@

 <script>
 import NavigationBar from 'new-dashboard/components/NavigationBar/NavigationBar';
+import NotificationCarto3Release from 'new-dashboard/components/NotificationCarto3Release';
 import NotificationWarning from 'new-dashboard/components/NotificationWarning';
 import Footer from 'new-dashboard/components/Footer';
 import BackgroundPollingView from './components/Backbone/BackgroundPollingView.vue';
 import MamufasImportView from './components/Backbone/MamufasImportView.vue';
 import { sendMetric, MetricsTypes } from 'new-dashboard/core/metrics';

+const notificationIsVisible = (date) => {
+  if (date) {
+    const today = new Date().getTime();
+    const oneMonth = 30 * 24 * 60 * 60 * 1000;
+    const future = parseInt(date) + oneMonth;
+    return today > future;
+  }
+  return true;
+};
+
 export default {
  name: 'App',
  components: {
    NavigationBar,
+    NotificationCarto3Release,
    NotificationWarning,
    BackgroundPollingView,
    Footer,
    MamufasImportView
  },
+  data: () => ({
+    displayCarto3ReleaseNotification: notificationIsVisible(window.localStorage.getItem('carto3ReleaseVisible'))
+  }),
  created () {
    sendMetric(MetricsTypes.VISITED_PRIVATE_PAGE, { page: 'dashboard' });
  },
+  methods: {
+    closeCarto3Release () {
+      window.localStorage.setItem('carto3ReleaseVisible', new Date().getTime());
+      this.displayCarto3ReleaseNotification = false;
+    }
+  },
  computed: {
    user () {
      return this.$store.state.user;
    },
+    isEnterprise () {
+      return this.$store.state.user && this.$store.state.user.is_enterprise;
+    },
    isNotificationVisible () {
      return !!this.$store.getters['user/isNotificationVisible'];
    },
+    isCarto3ReleaseNotificationVisible () {
+      return this.isEnterprise && this.displayCarto3ReleaseNotification;
+    },
    baseUrl () {
      return this.$store.state.user.base_url;
    },
--- a/lib/assets/javascripts/new-dashboard/assets/icons/common/close-black.svg
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/common/close-black.svg
@ -0,0 +1,6 @@
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg">
+  <g fill="none" fill-rule="evenodd">
+    <path d="M-3-3h24v24H-3z"/>
+    <path d="M17.749 1.707L16.334.293 9.042 7.586 1.749.293.334 1.707 7.627 9 .334 16.293l1.415 1.414 7.293-7.293 7.292 7.293 1.415-1.414L10.456 9z" fill="#000" fill-rule="nonzero"/>
+  </g>
+</svg>
--- a/lib/assets/javascripts/new-dashboard/assets/icons/common/new-releases.svg
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/common/new-releases.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m23 11.995-2.44-2.78.34-3.68-3.61-.82-1.89-3.18-3.4 1.46-3.4-1.46-1.89 3.18-3.61.81.34 3.68L1 11.995l2.44 2.78-.34 3.69 3.61.82 1.89 3.18 3.4-1.47 3.4 1.46 1.89-3.18 3.61-.82-.34-3.68 2.44-2.78zm-4.51 2.11.26 2.79-2.74.62-1.43 2.41-2.58-1.11-2.58 1.11-1.43-2.41-2.74-.62.26-2.8-1.85-2.1 1.85-2.12-.26-2.78 2.74-.61 1.43-2.41 2.58 1.1 2.58-1.11 1.43 2.41 2.74.62-.26 2.79 1.85 2.11-1.85 2.11zm-7.49.89h2v2h-2v-2zm0-8h2v6h-2v-6z" fill="#2C3032" fill-rule="evenodd"/>
+</svg>
--- a/lib/assets/javascripts/new-dashboard/assets/icons/common/open-in-new.svg
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/common/open-in-new.svg
@ -0,0 +1,3 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" fill="#024D9E" fill-rule="nonzero"/>
+</svg>
--- a/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NavigationBar/UserDropdown.vue
@ -1,6 +1,17 @@
 <template>
  <div class="navbar-dropdown" :class="{ 'is-open': open }">
    <ul class="navbar-dropdown-container">
+      <li class="navbar-dropdown-new-platform u-flex u-flex__align--center u-flex__justify--between u-mb--24">
+        <div class="navbar-dropdown-userInfo">
+          <p class="text is-semibold is-txtPrimary">{{$t('UserDropdown.carto3.title')}}</p>
+          <p class="text is-small u-mt--4">{{$t('UserDropdown.carto3.message')}}</p>
+        </div>
+        <div class="">
+          <a href="https://app.carto.com" target="_blank">
+            <img src="../../assets/icons/common/open-in-new.svg" />
+          </a>
+        </div>
+      </li>
      <li class="navbar-dropdown-profile">
        <div class="avatar-container">
          <img :src="userModel.avatar_url">
@ -115,6 +126,16 @@ export default {
  }
 }

+.navbar-dropdown-new-platform {
+  background: rgba($blue--500, 0.08);
+  border-radius: 4px;
+  padding: 16px;
+
+  & .is-txtPrimary {
+    color: #024d9e
+  }
+}
+
 .navbar-dropdown-profile {
  display: flex;
  align-items: center;
--- a/lib/assets/javascripts/new-dashboard/components/NotificationCarto3Release.vue
+++ b/lib/assets/javascripts/new-dashboard/components/NotificationCarto3Release.vue
@ -0,0 +1,81 @@
+<template>
+  <div class="notification">
+    <span class="u-flex u-flex__align--center">
+      <img src="../assets/icons/common/new-releases.svg" />
+      <div class="u-flex u-flex__align--center">
+        <span class="is-bold u-ml--8 u-mr--8">
+          {{ $t("Carto3Release.title") }}
+        </span>
+        <span
+          class="text"
+          v-html="
+            $t('Carto3Release.message', {
+              link: `<a href='https://app.carto.com/signup' target='_blank'>${$t('Carto3Release.link')}</a>`,
+            })
+          "
+        >
+        </span>
+      </div>
+    </span>
+    <button
+      class="notification__close-button"
+      @click="close"
+      aria-label="Close"
+    >
+      <img src="../assets/icons/common/close-black.svg" />
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'NotificationCarto3Release',
+  props: {},
+  methods: {
+    close () {
+      this.$emit('onClose');
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+@import "new-dashboard/styles/variables";
+
+.notification {
+  display: flex;
+  position: fixed;
+  z-index: $z-index__notification-warning;
+  top: 0;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: $notification-warning__height;
+  max-height: $notification-warning__height;
+  padding: 16px 24px 16px 64px;
+  background-color: $notification__bg-color;
+  color: $text__color;
+  font-size: 14px;
+
+  .notification__text {
+    display: inline-block;
+    width: 80%;
+    line-height: 1.2;
+  }
+
+  /deep/ b {
+    font-weight: 900;
+  }
+  /deep/ a {
+    font-weight: 900;
+    color: $text__color;
+    text-decoration: underline;
+  }
+}
+
+.notification__close-button {
+  img {
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>
--- a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
+++ b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
@ -1,4 +1,9 @@
 {
+  "Carto3Release": {
+    "title": "New release",
+    "message": "We just launched a new version of CARTO, providing a fully-cloud native experience. Sign up for an account and {link}!",
+    "link": "try it today"
+  },
  "MapCard": {
    "shared": {
      "LINK": "Link",
@ -362,6 +367,10 @@
    "privacy": "Privacy"
  },
  "UserDropdown": {
+    "carto3": {
+      "title": "New CARTO Platform",
+      "message": "Go to the latest version of CARTO"
+    },
    "settings": "Settings",
    "organizationSettings": "Your organization",
    "apiKeys": "API Keys",
--- a/lib/assets/javascripts/new-dashboard/styles/variables.scss
+++ b/lib/assets/javascripts/new-dashboard/styles/variables.scss
@ -106,7 +106,7 @@ $subheader__height: 64px;

 /* navbar */
 $navbar-avatar__bg-color: $neutral--500;
-$notification__bg-color: $green--500;
+$notification__bg-color: #47db99;

 /* form */
 $checkbox__border-color: $border-color--dark;
@ -145,7 +145,7 @@ $badge-cf__color: $purple--500;

 /* notification warning */

-$notification-warning__height: 60px;
+$notification-warning__height: 48px;

 /* modal */
 $modal__width: 960px;
--- a/lib/assets/test/spec/new-dashboard/unit/specs/components/snapshots/UserDropdown.spec.js.snap
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/snapshots/UserDropdown.spec.js.snap
@ -3,6 +3,13 @@
 exports[`UserDropdown.vue should render dropdown closed 1`] = `
 <div class="navbar-dropdown is-open">
  <ul class="navbar-dropdown-container">
+    <li class="navbar-dropdown-new-platform u-flex u-flex__align--center u-flex__justify--between u-mb--24">
+      <div class="navbar-dropdown-userInfo">
+        <p class="text is-semibold is-txtPrimary">UserDropdown.carto3.title</p>
+        <p class="text is-small u-mt--4">UserDropdown.carto3.message</p>
+      </div>
+      <div><a href="https://app.carto.com" target="_blank"><img src="../../assets/icons/common/open-in-new.svg"></a></div>
+    </li>
    <li class="navbar-dropdown-profile">
      <div class="avatar-container"><img src="//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png"></div>
      <div class="navbar-dropdown-userInfo">
@ -42,6 +49,13 @@ exports[`UserDropdown.vue should render dropdown closed 1`] = `
 exports[`UserDropdown.vue should render dropdown open with notifications badge 1`] = `
 <div class="navbar-dropdown">
  <ul class="navbar-dropdown-container">
+    <li class="navbar-dropdown-new-platform u-flex u-flex__align--center u-flex__justify--between u-mb--24">
+      <div class="navbar-dropdown-userInfo">
+        <p class="text is-semibold is-txtPrimary">UserDropdown.carto3.title</p>
+        <p class="text is-small u-mt--4">UserDropdown.carto3.message</p>
+      </div>
+      <div><a href="https://app.carto.com" target="_blank"><img src="../../assets/icons/common/open-in-new.svg"></a></div>
+    </li>
    <li class="navbar-dropdown-profile">
      <div class="avatar-container"><img src="//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png"></div>
      <div class="navbar-dropdown-userInfo">
@ -80,6 +94,13 @@ exports[`UserDropdown.vue should render dropdown open with notifications badge 1
 exports[`UserDropdown.vue should render organization link if user is org_admin 1`] = `
 <div class="navbar-dropdown is-open">
  <ul class="navbar-dropdown-container">
+    <li class="navbar-dropdown-new-platform u-flex u-flex__align--center u-flex__justify--between u-mb--24">
+      <div class="navbar-dropdown-userInfo">
+        <p class="text is-semibold is-txtPrimary">UserDropdown.carto3.title</p>
+        <p class="text is-small u-mt--4">UserDropdown.carto3.message</p>
+      </div>
+      <div><a href="https://app.carto.com" target="_blank"><img src="../../assets/icons/common/open-in-new.svg"></a></div>
+    </li>
    <li class="navbar-dropdown-profile">
      <div class="avatar-container"><img src="//cartodb-libs.global.ssl.fastly.net/cartodbui/assets/unversioned/images/avatars/avatar_ghost_yellow.png"></div>
      <div class="navbar-dropdown-userInfo">
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "cartodb-ui",
-  "version": "1.0.0-assets.265",
+  "version": "1.0.0-assets.266",
  "description": "CARTO UI frontend",
  "repository": {
    "type": "git",