From 5bda5b2623e115a81e7396419f51e5755e26d070 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Wed, 30 Jan 2019 18:02:13 +0100
Subject: [PATCH 1/6] First Your Tags version for New Dashboard

---
 .../stylesheets/new-dashboard/_buttons.scss   |  2 +-
 .../assets/icons/section-title/tags.svg       | 19 ++++++
 .../new-dashboard/components/TagCard.vue      | 47 ++++++++++++++
 .../new-dashboard/i18n/locales/en.json        |  4 ++
 .../new-dashboard/pages/Home/Home.vue         | 18 +++++-
 .../Home/RecentSection/RecentSection.vue      | 11 ++++
 .../pages/Home/TagsSection/TagsSection.vue    | 62 +++++++++++++++++++
 7 files changed, 161 insertions(+), 2 deletions(-)
 create mode 100644 lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg
 create mode 100644 lib/assets/javascripts/new-dashboard/components/TagCard.vue
 create mode 100644 lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue

diff --git a/assets/stylesheets/new-dashboard/_buttons.scss b/assets/stylesheets/new-dashboard/_buttons.scss
index c912f6fe1b9f..a57faba9d7a3 100644
--- a/assets/stylesheets/new-dashboard/_buttons.scss
+++ b/assets/stylesheets/new-dashboard/_buttons.scss
@@ -22,7 +22,7 @@ a {
 }
 
 .button--ghost {
-  background: $white;
+  background: transparent;
   color: $primary-color;
 }
 
diff --git a/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg b/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg
new file mode 100644
index 000000000000..9e4c5214e3c4
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>Line_Icons</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Active-Development-Cycle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="04-Home-/-Tags-/-One" transform="translate(-214.000000, -215.000000)" fill="#2E3C43">
+            <g id="tag-1" transform="translate(212.000000, 213.000000)">
+                <g id="Line_Icons" transform="translate(2.000000, 2.000000)">
+                    <g id="Group">
+                        <path d="M12,20 C11.744,20 11.488,19.902 11.293,19.707 L0.293,8.707 C0.105,8.52 0,8.266 0,8 L0,1 C0,0.447 0.447,0 1,0 L8,0 C8.266,0 8.52,0.105 8.707,0.293 L19.707,11.293 C20.098,11.684 20.098,12.316 19.707,12.707 L12.707,19.707 C12.512,19.902 12.256,20 12,20 Z M2,7.586 L12,17.586 L17.586,12 L7.586,2 L2,2 L2,7.586 Z" id="Shape" fill-rule="nonzero"></path>
+                        <circle id="Oval" cx="5" cy="5" r="2"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/lib/assets/javascripts/new-dashboard/components/TagCard.vue b/lib/assets/javascripts/new-dashboard/components/TagCard.vue
new file mode 100644
index 000000000000..cc0565042504
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/components/TagCard.vue
@@ -0,0 +1,47 @@
+<template>
+  <router-link :to="{ name: 'tagSearch', params: { tag: tag.tag } }" class="link">
+    <article class="card tag">
+      <h3 class="tag__title title is-medium is-semibold">{{ tag.tag }}</h3>
+      <ul>
+        <li class="tag__count text is-caption">
+          {{ $tc('TagCard.maps', tag.maps, { maps: tag.maps }) }}
+        </li>
+        <li class="tag__count text is-caption">
+          {{ $tc('TagCard.datasets', tag.datasets, { datasets: tag.datasets }) }}
+        </li>
+      </ul>
+    </article>
+  </router-link>
+</template>
+
+<script>
+export default {
+  name: 'TagCard',
+  props: {
+    tag: Object
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'stylesheets/new-dashboard/variables';
+
+.card {
+  position: relative;
+  height: 100%;
+  padding: 16px;
+  transition: background 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  border: 1px solid $light-grey;
+  background-color: $white;
+}
+
+.tag__title,
+.tag__count {
+  margin-bottom: 8px;
+  color: $text-color;
+}
+
+.link:hover {
+  text-decoration: none;
+}
+</style>
diff --git a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
index af3ed6426fbd..533483e37c80 100644
--- a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
+++ b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
@@ -297,5 +297,9 @@
       "title": "Your organization's administrator",
       "description": "Contact the administrator of your organization if you have issues regarding your account, quotas, etc."
     }
+  },
+  "TagCard": {
+    "maps": "0 maps | {maps} map | {maps} maps",
+    "datasets": "0 datasets | {datasets} dataset | {datasets} datasets"
   }
 }
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue b/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
index 4e76de07684c..c78f5d2b15f4 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
@@ -1,7 +1,8 @@
 <template>
 <section class="page page--welcome">
   <Welcome />
-  <RecentSection class="section" v-if="hasRecentContent"/>
+  <RecentSection class="section" v-if="this.isSectionActive('RecentSection') && hasRecentContent" @sectionChange="changeSection"/>
+  <TagsSection class="section" v-if="this.isSectionActive('TagsSection')" @sectionChange="changeSection"/>
   <MapsSection class="section" />
   <DatasetsSection class="section section--noBorder" />
   <QuotaSection></QuotaSection>
@@ -10,6 +11,7 @@
 
 <script>
 import Welcome from './WelcomeSection/Welcome.vue';
+import TagsSection from './TagsSection/TagsSection.vue';
 import RecentSection from './RecentSection/RecentSection.vue';
 import MapsSection from './MapsSection/MapsSection.vue';
 import DatasetsSection from './DatasetsSection/DatasetsSection.vue';
@@ -19,6 +21,7 @@ export default {
   name: 'Home',
   components: {
     Welcome,
+    TagsSection,
     RecentSection,
     MapsSection,
     DatasetsSection,
@@ -32,11 +35,24 @@ export default {
     this.$store.dispatch('maps/resetFilters');
     next();
   },
+  data () {
+    return {
+      activeSection: 'RecentSection'
+    };
+  },
   computed: {
     hasRecentContent () {
       return this.$store.getters['recentContent/hasRecentContent'] ||
         this.$store.state.recentContent.isFetching;
     }
+  },
+  methods: {
+    isSectionActive (activeSection) {
+      return activeSection === this.activeSection;
+    },
+    changeSection (nextActiveSection) {
+      this.activeSection = nextActiveSection;
+    }
   }
 };
 </script>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue
index 7996917bbfa6..fbaa55e2f847 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue
@@ -5,6 +5,12 @@
         <template slot="icon">
           <img src="../../../assets/icons/section-title/recent.svg">
         </template>
+
+        <template slot="actionButton">
+          <button class="button button--small is-primary button--ghost" @click="goToTagsSection">
+            View your tags
+          </button>
+        </template>
       </SectionTitle>
 
       <ul class="grid">
@@ -39,6 +45,11 @@ export default {
     visibleSections () {
       return ['privacy', 'lastModification'];
     }
+  },
+  methods: {
+    goToTagsSection () {
+      this.$emit('sectionChange', 'TagsSection');
+    }
   }
 };
 </script>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
new file mode 100644
index 000000000000..9b50cf6d2c91
--- /dev/null
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
@@ -0,0 +1,62 @@
+<template>
+  <section class="tags-section is-bgSoftBlue">
+    <div class="container">
+      <SectionTitle class="grid-cell" title="Your Tags">
+        <template slot="icon">
+          <img src="../../../assets/icons/section-title/tags.svg">
+        </template>
+
+        <template slot="actionButton">
+          <button class="button button--small is-primary button--ghost" @click="goToRecentSection">
+            View recent content
+          </button>
+        </template>
+      </SectionTitle>
+
+      <ul class="grid">
+        <li class="card grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile" v-for="tag in tags" :key="tag.tag">
+          <TagCard :tag="tag" />
+        </li>
+      </ul>
+    </div>
+  </section>
+</template>
+
+<script>
+import SectionTitle from 'new-dashboard/components/SectionTitle';
+import TagCard from 'new-dashboard/components/TagCard.vue';
+
+export default {
+  name: 'TagsSection',
+  components: {
+    SectionTitle,
+    TagCard
+  },
+  data () {
+    return {
+      tags: [
+        {
+          tag: 'Administrative Regions',
+          maps: 0,
+          datasets: 1
+        },
+        {
+          tag: '2014',
+          maps: 3,
+          datasets: 3
+        },
+        {
+          tag: 'EARTHQUAKE',
+          maps: 2,
+          datasets: 0
+        }
+      ]
+    };
+  },
+  methods: {
+    goToRecentSection () {
+      this.$emit('sectionChange', 'RecentSection');
+    }
+  }
+};
+</script>

From 48379cf128d62498a4901b8ff24831e32c9d2842 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Thu, 31 Jan 2019 10:02:18 +0100
Subject: [PATCH 2/6] Optimize Tags icon for Section Title

---
 .../assets/icons/section-title/tags.svg       | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg b/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg
index 9e4c5214e3c4..e944f1989a56 100644
--- a/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg
+++ b/lib/assets/javascripts/new-dashboard/assets/icons/section-title/tags.svg
@@ -1,19 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
-    <title>Line_Icons</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Active-Development-Cycle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="04-Home-/-Tags-/-One" transform="translate(-214.000000, -215.000000)" fill="#2E3C43">
-            <g id="tag-1" transform="translate(212.000000, 213.000000)">
-                <g id="Line_Icons" transform="translate(2.000000, 2.000000)">
-                    <g id="Group">
-                        <path d="M12,20 C11.744,20 11.488,19.902 11.293,19.707 L0.293,8.707 C0.105,8.52 0,8.266 0,8 L0,1 C0,0.447 0.447,0 1,0 L8,0 C8.266,0 8.52,0.105 8.707,0.293 L19.707,11.293 C20.098,11.684 20.098,12.316 19.707,12.707 L12.707,19.707 C12.512,19.902 12.256,20 12,20 Z M2,7.586 L12,17.586 L17.586,12 L7.586,2 L2,2 L2,7.586 Z" id="Shape" fill-rule="nonzero"></path>
-                        <circle id="Oval" cx="5" cy="5" r="2"></circle>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+  <g fill="#2E3C43" fill-rule="evenodd">
+    <path d="M12 20a.997.997 0 0 1-.707-.293l-11-11A.996.996 0 0 1 0 8V1a1 1 0 0 1 1-1h7c.266 0 .52.105.707.293l11 11a.999.999 0 0 1 0 1.414l-7 7A.997.997 0 0 1 12 20zM2 7.586l10 10L17.586 12l-10-10H2v5.586z" fill-rule="nonzero"/>
+    <circle cx="5" cy="5" r="2"/>
+  </g>
+</svg>

From 5df0ad1835178db4ace0d78ed63749b8ef8ec922 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Thu, 31 Jan 2019 10:20:53 +0100
Subject: [PATCH 3/6] Set i18n to changes in Recent Content and Tags list

---
 lib/assets/javascripts/new-dashboard/i18n/locales/en.json | 8 ++++++++
 lib/assets/javascripts/new-dashboard/pages/Home/Home.vue  | 4 ++--
 .../pages/Home/RecentSection/RecentSection.vue            | 4 ++--
 .../new-dashboard/pages/Home/TagsSection/TagsSection.vue  | 4 ++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
index 533483e37c80..eea67c544fb2 100644
--- a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
+++ b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
@@ -244,6 +244,14 @@
       "header": "Create your first map to predict key insights",
       "info": "Build your first Location Intelligence anañysis or take a look to our guides and help.",
       "button": "Create your first Map"
+    },
+    "RecentSection": {
+      "title": "Recent content",
+      "viewTagsAction": "View your tags"
+    },
+    "TagsSection": {
+      "title": "Your tags",
+      "viewRecentContentAction": "View recent content"
     }
   },
   "TrialExpired": {
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue b/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
index c78f5d2b15f4..e18866461c19 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
@@ -1,8 +1,8 @@
 <template>
 <section class="page page--welcome">
   <Welcome />
-  <RecentSection class="section" v-if="this.isSectionActive('RecentSection') && hasRecentContent" @sectionChange="changeSection"/>
-  <TagsSection class="section" v-if="this.isSectionActive('TagsSection')" @sectionChange="changeSection"/>
+  <RecentSection class="section" v-if="isSectionActive('RecentSection') && hasRecentContent" @sectionChange="changeSection"/>
+  <TagsSection class="section" v-if="isSectionActive('TagsSection')" @sectionChange="changeSection"/>
   <MapsSection class="section" />
   <DatasetsSection class="section section--noBorder" />
   <QuotaSection></QuotaSection>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue
index fbaa55e2f847..fa27553c7732 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/RecentSection/RecentSection.vue
@@ -1,14 +1,14 @@
 <template>
   <section class="recent-section is-bgSoftBlue">
     <div class="container">
-      <SectionTitle class="grid-cell" title="Recent content">
+      <SectionTitle class="grid-cell" :title="$t('HomePage.RecentSection.title')">
         <template slot="icon">
           <img src="../../../assets/icons/section-title/recent.svg">
         </template>
 
         <template slot="actionButton">
           <button class="button button--small is-primary button--ghost" @click="goToTagsSection">
-            View your tags
+            {{ $t('HomePage.RecentSection.viewTagsAction') }}
           </button>
         </template>
       </SectionTitle>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
index 9b50cf6d2c91..5bc072bfa636 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
@@ -1,14 +1,14 @@
 <template>
   <section class="tags-section is-bgSoftBlue">
     <div class="container">
-      <SectionTitle class="grid-cell" title="Your Tags">
+      <SectionTitle class="grid-cell" :title="$t('HomePage.TagsSection.title')">
         <template slot="icon">
           <img src="../../../assets/icons/section-title/tags.svg">
         </template>
 
         <template slot="actionButton">
           <button class="button button--small is-primary button--ghost" @click="goToRecentSection">
-            View recent content
+            {{ $t('HomePage.TagsSection.viewRecentContentAction') }}
           </button>
         </template>
       </SectionTitle>

From 6cd8255007e1688eaed18c4de7d388901a03db71 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Thu, 31 Jan 2019 10:55:02 +0100
Subject: [PATCH 4/6] TagCard tests

---
 .../unit/specs/components/TagCard.spec.js     | 23 +++++++++++++++++++
 .../__snapshots__/TagCard.spec.js.snap        | 17 ++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/TagCard.spec.js
 create mode 100644 lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/TagCard.spec.js.snap

diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/TagCard.spec.js b/lib/assets/test/spec/new-dashboard/unit/specs/components/TagCard.spec.js
new file mode 100644
index 000000000000..af2327b76425
--- /dev/null
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/TagCard.spec.js
@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils';
+import TagCard from 'new-dashboard/components/TagCard';
+
+const $tc = key => key;
+
+describe('TagCard', () => {
+  it('should render properly', () => {
+    const tagCardElement = shallowMount(TagCard, {
+      propsData: {
+        tag: {
+          tag: 'Test Tag',
+          maps: 1,
+          datasets: 3
+        }
+      },
+      mocks: {
+        $tc
+      }
+    });
+
+    expect(tagCardElement).toMatchSnapshot();
+  });
+});
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/TagCard.spec.js.snap b/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/TagCard.spec.js.snap
new file mode 100644
index 000000000000..feebdd67ca50
--- /dev/null
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/components/__snapshots__/TagCard.spec.js.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagCard should render properly 1`] = `
+<router-link to="[object Object]" class="link">
+  <article class="card tag">
+    <h3 class="tag__title title is-medium is-semibold">Test Tag</h3>
+    <ul>
+      <li class="tag__count text is-caption">
+        TagCard.maps
+      </li>
+      <li class="tag__count text is-caption">
+        TagCard.datasets
+      </li>
+    </ul>
+  </article>
+</router-link>
+`;

From aade553149d7e7f91fe422ae2fe341ae6cb7ba35 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Thu, 31 Jan 2019 11:55:58 +0100
Subject: [PATCH 5/6] Fix empty placeholder bug in Home. Set name as greeting.
 Harcode tags.

---
 .../new-dashboard/i18n/locales/en.json        |  2 +-
 .../Home/DatasetsSection/DatasetsSection.vue  |  2 +-
 .../new-dashboard/pages/Home/Home.vue         |  6 ++-
 .../pages/Home/MapsSection/MapsSection.vue    |  2 +-
 .../pages/Home/TagsSection/TagsSection.vue    | 46 ++++++++++++++++---
 .../pages/Home/WelcomeSection/Welcome.vue     |  6 +--
 .../Home/WelcomeSection/WelcomeCompact.vue    |  4 +-
 .../Home/WelcomeSection/WelcomeFirst.vue      |  4 +-
 8 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
index eea67c544fb2..ac3358dca2ba 100644
--- a/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
+++ b/lib/assets/javascripts/new-dashboard/i18n/locales/en.json
@@ -209,7 +209,7 @@
   },
   "HomePage": {
     "WelcomeSection": {
-      "greeting" : "Hello, {username}",
+      "greeting" : "Hello, {name}",
       "firstTime": {
         "message": "Your brand new CARTO Dashboard is ready! Take a look around and play with it or read more about it on our blog.",
         "planMessage": {
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue
index 645c42be85f7..f2715dd08787 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue
@@ -35,7 +35,7 @@
           </template>
         </InitialState>
 
-        <EmptyState v-if="isEmptyState" :text="$t('DataPage.emptyState')" >
+        <EmptyState v-if="isEmptyState" :text="$t('DataPage.emptyState.default')" >
           <img svg-inline src="../../../assets/icons/common/compass.svg">
         </EmptyState>
 
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue b/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
index e18866461c19..9aeb0178cf0a 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/Home.vue
@@ -2,7 +2,7 @@
 <section class="page page--welcome">
   <Welcome />
   <RecentSection class="section" v-if="isSectionActive('RecentSection') && hasRecentContent" @sectionChange="changeSection"/>
-  <TagsSection class="section" v-if="isSectionActive('TagsSection')" @sectionChange="changeSection"/>
+  <TagsSection class="section tags-section" v-if="isSectionActive('TagsSection')" @sectionChange="changeSection"/>
   <MapsSection class="section" />
   <DatasetsSection class="section section--noBorder" />
   <QuotaSection></QuotaSection>
@@ -63,4 +63,8 @@ export default {
 .page--welcome {
   padding: 64px 0 0;
 }
+
+.tags-section {
+  padding-bottom: 104px;
+}
 </style>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue
index 0d6f6e7c5e44..d6914d6b4c82 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue
@@ -40,7 +40,7 @@
           @applyOrder="applyOrder"
         ></MapList>
 
-        <EmptyState v-if="isEmptyState" :text="$t('MapsPage.emptyState')" >
+        <EmptyState v-if="isEmptyState" :text="$t('MapsPage.emptyState.default')" >
           <img svg-inline src="../../../assets/icons/common/compass.svg">
         </EmptyState>
 
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
index 5bc072bfa636..486d5158b58f 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/TagsSection/TagsSection.vue
@@ -14,7 +14,7 @@
       </SectionTitle>
 
       <ul class="grid">
-        <li class="card grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile" v-for="tag in tags" :key="tag.tag">
+        <li class="card grid-cell grid-cell--col4 grid-cell--col6--tablet grid-cell--col12--mobile tag-element" v-for="tag in tags" :key="tag.tag">
           <TagCard :tag="tag" />
         </li>
       </ul>
@@ -34,21 +34,47 @@ export default {
   },
   data () {
     return {
+      // TODO: Retrieve tags from API when endpoint is ready
       tags: [
         {
-          tag: 'Administrative Regions',
-          maps: 0,
-          datasets: 1
+          tag: 'Blog',
+          maps: 2,
+          datasets: 3
+        },
+        {
+          tag: 'Catalog',
+          maps: 1,
+          datasets: 4
         },
         {
-          tag: '2014',
+          tag: 'Customer',
           maps: 3,
+          datasets: 4
+        },
+        {
+          tag: 'David',
+          maps: 3,
+          datasets: 4
+        },
+        {
+          tag: 'Website',
+          maps: 4,
+          datasets: 1
+        },
+        {
+          tag: 'Production',
+          maps: 2,
           datasets: 3
         },
         {
-          tag: 'EARTHQUAKE',
+          tag: 'Census',
+          maps: 4,
+          datasets: 3
+        },
+        {
+          tag: 'Client',
           maps: 2,
-          datasets: 0
+          datasets: 4
         }
       ]
     };
@@ -60,3 +86,9 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.tag-element {
+  margin-bottom: 24px;
+}
+</style>
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/Welcome.vue b/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/Welcome.vue
index 5c9cfbc9ccde..e8db07038781 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/Welcome.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/Welcome.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="welcome-section">
-    <WelcomeFirst v-if="isFirst" :username="username" :userType="userType"></WelcomeFirst>
-    <WelcomeCompact v-if="!isFirst" :username="username" :userType="userType">
+    <WelcomeFirst v-if="isFirst" :name="name" :userType="userType"></WelcomeFirst>
+    <WelcomeCompact v-if="!isFirst" :name="name" :userType="userType">
       <template v-if="trialEndDate">
         <span class="text is-small">{{ trialTimeLeft }}</span>
         <a class="button button--small button--outline" :href="accountUpdateURL">
@@ -35,7 +35,7 @@ export default {
       accountUpdateURL: state => state.config.accountUpdateURL,
       trialEndDate: state => state.user.trial_ends_at,
       user: state => state.user,
-      username: state => state.user.username,
+      name: state => state.user.name || state.user.username,
       organization: state => state.user.organization,
       notifications: state => state.user.organizationNotifications
     }),
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeCompact.vue b/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeCompact.vue
index 042b63c30bd4..d885e3fe43ed 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeCompact.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeCompact.vue
@@ -23,11 +23,11 @@ export default {
     CreateButton
   },
   props: {
-    username: String
+    name: String
   },
   computed: {
     greeting () {
-      return this.$t('HomePage.WelcomeSection.greeting', {username: this.$props.username});
+      return this.$t('HomePage.WelcomeSection.greeting', {name: this.$props.name});
     }
   }
 };
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeFirst.vue b/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeFirst.vue
index f699eb600542..abdc349b22e2 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeFirst.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/WelcomeSection/WelcomeFirst.vue
@@ -30,12 +30,12 @@ export default {
     CreateButton
   },
   props: {
-    username: String,
+    name: String,
     userType: String
   },
   computed: {
     greeting () {
-      return this.$t('HomePage.WelcomeSection.greeting', {username: this.$props.username});
+      return this.$t('HomePage.WelcomeSection.greeting', {name: this.$props.name});
     },
     text () {
       const organizationName = this.$store.state.user.organization && this.$store.state.user.organization.name;

From a112ebde8feaeeaa2d61e40a62de3850708fb415 Mon Sep 17 00:00:00 2001
From: jesusbotella <jesus.botella@gmail.com>
Date: Thu, 31 Jan 2019 12:30:51 +0100
Subject: [PATCH 6/6] Update snapshots and fix CR comments

---
 .../pages/Home/DatasetsSection/DatasetsSection.vue              | 2 +-
 .../new-dashboard/pages/Home/MapsSection/MapsSection.vue        | 2 +-
 .../DatasetsSection/__snapshots__/DatasetsSection.spec.js.snap  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue
index f2715dd08787..3768453e3603 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/DatasetsSection/DatasetsSection.vue
@@ -35,7 +35,7 @@
           </template>
         </InitialState>
 
-        <EmptyState v-if="isEmptyState" :text="$t('DataPage.emptyState.default')" >
+        <EmptyState v-if="isEmptyState" :text="$t('DataPage.emptyCase.default')" >
           <img svg-inline src="../../../assets/icons/common/compass.svg">
         </EmptyState>
 
diff --git a/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue b/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue
index d6914d6b4c82..5162dd4fc3c9 100644
--- a/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue
+++ b/lib/assets/javascripts/new-dashboard/pages/Home/MapsSection/MapsSection.vue
@@ -40,7 +40,7 @@
           @applyOrder="applyOrder"
         ></MapList>
 
-        <EmptyState v-if="isEmptyState" :text="$t('MapsPage.emptyState.default')" >
+        <EmptyState v-if="isEmptyState" :text="$t('MapsPage.emptyCase.default')" >
           <img svg-inline src="../../../assets/icons/common/compass.svg">
         </EmptyState>
 
diff --git a/lib/assets/test/spec/new-dashboard/unit/specs/pages/Home/DatasetsSection/__snapshots__/DatasetsSection.spec.js.snap b/lib/assets/test/spec/new-dashboard/unit/specs/pages/Home/DatasetsSection/__snapshots__/DatasetsSection.spec.js.snap
index 8dfcbbba7fbc..824c1ad60065 100644
--- a/lib/assets/test/spec/new-dashboard/unit/specs/pages/Home/DatasetsSection/__snapshots__/DatasetsSection.spec.js.snap
+++ b/lib/assets/test/spec/new-dashboard/unit/specs/pages/Home/DatasetsSection/__snapshots__/DatasetsSection.spec.js.snap
@@ -6,7 +6,7 @@ exports[`DatasetsSection.vue should render emptyState 1`] = `
     <div class="full-width">
       <sectiontitle-stub title="DataPage.header.title['locked']" class="grid-cell"><template></template> <template></template> <template></template></sectiontitle-stub>
       <!---->
-      <emptystate-stub text="DataPage.emptyState"><img svg-inline="" src="../../../assets/icons/common/compass.svg"></emptystate-stub>
+      <emptystate-stub text="DataPage.emptyCase.default"><img svg-inline="" src="../../../assets/icons/common/compass.svg"></emptystate-stub>
       <!---->
       <!---->
       <router-link to="[object Object]" class="title is-small go-to-datasets">