Add latest changes from gitlab-org/gitlab@13-4-stable-ee

3 files changed, 71 insertions, 50 deletions

diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue
index d974556cb9e..a00661c214d 100644
--- a/app/assets/javascripts/whats_new/components/app.vue
+++ b/app/assets/javascripts/whats_new/components/app.vue
@@ -1,16 +1,40 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDrawer } from '@gitlab/ui';
+import { GlDrawer, GlBadge, GlIcon, GlLink } from '@gitlab/ui';
 
 export default {
   components: {
     GlDrawer,
+    GlBadge,
+    GlIcon,
+    GlLink,
+  },
+  props: {
+    features: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     ...mapState(['open']),
+    parsedFeatures() {
+      let features;
+
+      try {
+        features = JSON.parse(this.$props.features) || [];
+      } catch (err) {
+        features = [];
+      }
+
+      return features;
+    },
+  },
+  mounted() {
+    this.openDrawer();
   },
   methods: {
-    ...mapActions(['closeDrawer']),
+    ...mapActions(['openDrawer', 'closeDrawer']),
   },
 };
 </script>
@@ -19,11 +43,31 @@ export default {
   <div>
     <gl-drawer class="mt-6" :open="open" @close="closeDrawer">
       <template #header>
-        <h4>{{ __("What's new at GitLab") }}</h4>
-      </template>
-      <template>
-        <div></div>
+        <h4 class="page-title my-2">{{ __("What's new at GitLab") }}</h4>
       </template>
+      <div class="pb-6">
+        <div v-for="feature in parsedFeatures" :key="feature.title" class="mb-6">
+          <gl-link :href="feature.url" target="_blank">
+            <h5 class="gl-font-base">{{ feature.title }}</h5>
+          </gl-link>
+          <div class="mb-2">
+            <template v-for="package_name in feature.packages">
+              <gl-badge :key="package_name" size="sm" class="whats-new-item-badge mr-1">
+                <gl-icon name="license" />{{ package_name }}
+              </gl-badge>
+            </template>
+          </div>
+          <gl-link :href="feature.url" target="_blank">
+            <img
+              :alt="feature.title"
+              :src="feature.image_url"
+              class="img-thumbnail px-6 py-2 whats-new-item-image"
+            />
+          </gl-link>
+          <p class="pt-2">{{ feature.body }}</p>
+          <gl-link :href="feature.url" target="_blank">{{ __('Learn more') }}</gl-link>
+        </div>
+      </div>
     </gl-drawer>
   </div>
 </template>
diff --git a/app/assets/javascripts/whats_new/components/trigger.vue b/app/assets/javascripts/whats_new/components/trigger.vue
deleted file mode 100644
index e6c48e92888..00000000000
--- a/app/assets/javascripts/whats_new/components/trigger.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script>
-import { mapActions } from 'vuex';
-import { GlButton } from '@gitlab/ui';
-
-export default {
-  components: {
-    GlButton,
-  },
-  methods: {
-    ...mapActions(['openDrawer']),
-  },
-};
-</script>
-
-<template>
-  <li>
-    <gl-button variant="link" @click="openDrawer">{{ __("See what's new at GitLab") }}</gl-button>
-  </li>
-</template>
diff --git a/app/assets/javascripts/whats_new/index.js b/app/assets/javascripts/whats_new/index.js
index c9ee3404d2a..19cdb590ae2 100644
--- a/app/assets/javascripts/whats_new/index.js
+++ b/app/assets/javascripts/whats_new/index.js
@@ -1,32 +1,28 @@
 import Vue from 'vue';
 import App from './components/app.vue';
-import Trigger from './components/trigger.vue';
 import store from './store';
 
-export default () => {
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: document.getElementById('whats-new-app'),
-    store,
-    components: {
-      App,
-    },
-
-    render(createElement) {
-      return createElement('app');
-    },
-  });
+let whatsNewApp;
 
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: document.getElementById('whats-new-trigger'),
-    store,
-    components: {
-      Trigger,
-    },
+export default () => {
+  if (whatsNewApp) {
+    store.dispatch('openDrawer');
+  } else {
+    const whatsNewElm = document.getElementById('whats-new-app');
 
-    render(createElement) {
-      return createElement('trigger');
-    },
-  });
+    whatsNewApp = new Vue({
+      el: whatsNewElm,
+      store,
+      components: {
+        App,
+      },
+      render(createElement) {
+        return createElement('app', {
+          props: {
+            features: whatsNewElm.getAttribute('data-features'),
+          },
+        });
+      },
+    });
+  }
 };