Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

4 files changed, 20 insertions, 67 deletions

diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue
index f4ac4f81eac..4a387edbe3f 100644
--- a/app/assets/javascripts/whats_new/components/app.vue
+++ b/app/assets/javascripts/whats_new/components/app.vue
@@ -1,13 +1,5 @@
 <script>
-import {
-  GlDrawer,
-  GlInfiniteScroll,
-  GlResizeObserverDirective,
-  GlTabs,
-  GlTab,
-  GlBadge,
-  GlLoadingIcon,
-} from '@gitlab/ui';
+import { GlDrawer, GlInfiniteScroll, GlResizeObserverDirective } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import Tracking from '~/tracking';
 import { getDrawerBodyHeight } from '../utils/get_drawer_body_height';
@@ -20,37 +12,24 @@ export default {
   components: {
     GlDrawer,
     GlInfiniteScroll,
-    GlTabs,
-    GlTab,
     SkeletonLoader,
     Feature,
-    GlBadge,
-    GlLoadingIcon,
   },
   directives: {
     GlResizeObserver: GlResizeObserverDirective,
   },
   mixins: [trackingMixin],
   props: {
-    storageKey: {
+    versionDigest: {
       type: String,
       required: true,
     },
-    versions: {
-      type: Array,
-      required: true,
-    },
-    gitlabDotCom: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   computed: {
     ...mapState(['open', 'features', 'pageInfo', 'drawerBodyHeight', 'fetching']),
   },
   mounted() {
-    this.openDrawer(this.storageKey);
+    this.openDrawer(this.versionDigest);
     this.fetchItems();
 
     const body = document.querySelector('body');
@@ -70,16 +49,6 @@ export default {
       const height = getDrawerBodyHeight(this.$refs.drawer.$el);
       this.setDrawerBodyHeight(height);
     },
-    featuresForVersion(version) {
-      return this.features.filter((feature) => {
-        return feature.release === parseFloat(version);
-      });
-    },
-    fetchVersion(version) {
-      if (this.featuresForVersion(version).length === 0) {
-        this.fetchItems({ version });
-      }
-    },
   },
 };
 </script>
@@ -99,7 +68,6 @@ export default {
       </template>
       <template v-if="features.length">
         <gl-infinite-scroll
-          v-if="gitlabDotCom"
           :fetched-items="features.length"
           :max-list-height="drawerBodyHeight"
           class="gl-p-0"
@@ -109,26 +77,6 @@ export default {
             <feature v-for="feature in features" :key="feature.title" :feature="feature" />
           </template>
         </gl-infinite-scroll>
-        <gl-tabs v-else :style="{ height: `${drawerBodyHeight}px` }" class="gl-p-0">
-          <gl-tab
-            v-for="(version, index) in versions"
-            :key="version"
-            @click="fetchVersion(version)"
-          >
-            <template #title>
-              <span>{{ version }}</span>
-              <gl-badge v-if="index === 0">{{ __('Your Version') }}</gl-badge>
-            </template>
-            <gl-loading-icon v-if="fetching" size="lg" class="text-center" />
-            <template v-else>
-              <feature
-                v-for="feature in featuresForVersion(version)"
-                :key="feature.title"
-                :feature="feature"
-              />
-            </template>
-          </gl-tab>
-        </gl-tabs>
       </template>
       <div v-else class="gl-mt-5">
         <skeleton-loader />
diff --git a/app/assets/javascripts/whats_new/index.js b/app/assets/javascripts/whats_new/index.js
index 6da141cb19a..3ac3a3a3611 100644
--- a/app/assets/javascripts/whats_new/index.js
+++ b/app/assets/javascripts/whats_new/index.js
@@ -2,7 +2,7 @@ import Vue from 'vue';
 import { mapState } from 'vuex';
 import App from './components/app.vue';
 import store from './store';
-import { getStorageKey, setNotification } from './utils/notification';
+import { getVersionDigest, setNotification } from './utils/notification';
 
 let whatsNewApp;
 
@@ -27,9 +27,7 @@ export default (el) => {
       render(createElement) {
         return createElement('app', {
           props: {
-            storageKey: getStorageKey(el),
-            versions: JSON.parse(el.getAttribute('data-versions')),
-            gitlabDotCom: el.getAttribute('data-gitlab-dot-com'),
+            versionDigest: getVersionDigest(el),
           },
         });
       },
diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js
index 4b3cfa55977..1dc92ea2606 100644
--- a/app/assets/javascripts/whats_new/store/actions.js
+++ b/app/assets/javascripts/whats_new/store/actions.js
@@ -1,19 +1,20 @@
 import axios from '~/lib/utils/axios_utils';
 import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
+import { STORAGE_KEY } from '../utils/notification';
 import * as types from './mutation_types';
 
 export default {
   closeDrawer({ commit }) {
     commit(types.CLOSE_DRAWER);
   },
-  openDrawer({ commit }, storageKey) {
+  openDrawer({ commit }, versionDigest) {
     commit(types.OPEN_DRAWER);
 
-    if (storageKey) {
-      localStorage.setItem(storageKey, JSON.stringify(false));
+    if (versionDigest) {
+      localStorage.setItem(STORAGE_KEY, versionDigest);
     }
   },
-  fetchItems({ commit, state }, { page, version } = { page: null, version: null }) {
+  fetchItems({ commit, state }, { page } = { page: null }) {
     if (state.fetching) {
       return false;
     }
@@ -24,7 +25,6 @@ export default {
       .get('/-/whats_new', {
         params: {
           page,
-          version,
         },
       })
       .then(({ data, headers }) => {
diff --git a/app/assets/javascripts/whats_new/utils/notification.js b/app/assets/javascripts/whats_new/utils/notification.js
index 52ca8058d1c..3d4326c4b3a 100644
--- a/app/assets/javascripts/whats_new/utils/notification.js
+++ b/app/assets/javascripts/whats_new/utils/notification.js
@@ -1,11 +1,18 @@
-export const getStorageKey = (appEl) => appEl.getAttribute('data-storage-key');
+export const STORAGE_KEY = 'display-whats-new-notification';
+
+export const getVersionDigest = (appEl) => appEl.getAttribute('data-version-digest');
 
 export const setNotification = (appEl) => {
-  const storageKey = getStorageKey(appEl);
+  const versionDigest = getVersionDigest(appEl);
   const notificationEl = document.querySelector('.header-help');
   let notificationCountEl = notificationEl.querySelector('.js-whats-new-notification-count');
 
-  if (JSON.parse(localStorage.getItem(storageKey)) === false) {
+  const legacyStorageKey = 'display-whats-new-notification-13.10';
+  const localStoragePairs = [
+    [legacyStorageKey, false],
+    [STORAGE_KEY, versionDigest],
+  ];
+  if (localStoragePairs.some((pair) => localStorage.getItem(pair[0]) === pair[1].toString())) {
     notificationEl.classList.remove('with-notifications');
     if (notificationCountEl) {
       notificationCountEl.parentElement.removeChild(notificationCountEl);