Add latest changes from gitlab-org/gitlab@13-12-stable-eev13.12.0-rc42

3 files changed, 51 insertions, 26 deletions

diff --git a/app/assets/javascripts/whats_new/components/app.vue b/app/assets/javascripts/whats_new/components/app.vue
index 4a387edbe3f..4ee586527b5 100644
--- a/app/assets/javascripts/whats_new/components/app.vue
+++ b/app/assets/javascripts/whats_new/components/app.vue
@@ -30,7 +30,7 @@ export default {
   },
   mounted() {
     this.openDrawer(this.versionDigest);
-    this.fetchItems();
+    this.fetchFreshItems();
 
     const body = document.querySelector('body');
     const namespaceId = body.getAttribute('data-namespace-id');
@@ -42,13 +42,18 @@ export default {
     bottomReached() {
       const page = this.pageInfo.nextPage;
       if (page) {
-        this.fetchItems({ page });
+        this.fetchFreshItems(page);
       }
     },
     handleResize() {
       const height = getDrawerBodyHeight(this.$refs.drawer.$el);
       this.setDrawerBodyHeight(height);
     },
+    fetchFreshItems(page) {
+      const { versionDigest } = this;
+
+      this.fetchItems({ page, versionDigest });
+    },
   },
 };
 </script>
@@ -58,7 +63,7 @@ export default {
     <gl-drawer
       ref="drawer"
       v-gl-resize-observer="handleResize"
-      class="whats-new-drawer"
+      class="whats-new-drawer gl-reset-line-height"
       :z-index="700"
       :open="open"
       @close="closeDrawer"
@@ -83,6 +88,6 @@ export default {
         <skeleton-loader />
       </div>
     </gl-drawer>
-    <div v-if="open" class="whats-new-modal-backdrop modal-backdrop"></div>
+    <div v-if="open" class="whats-new-modal-backdrop modal-backdrop" @click="closeDrawer"></div>
   </div>
 </template>
diff --git a/app/assets/javascripts/whats_new/components/feature.vue b/app/assets/javascripts/whats_new/components/feature.vue
index f6f7618b0d8..5444e77a4d2 100644
--- a/app/assets/javascripts/whats_new/components/feature.vue
+++ b/app/assets/javascripts/whats_new/components/feature.vue
@@ -1,11 +1,13 @@
 <script>
-import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlBadge, GlIcon, GlLink, GlSafeHtmlDirective, GlButton } from '@gitlab/ui';
+import { dateInWords, isValidDate } from '~/lib/utils/datetime_utility';
 
 export default {
   components: {
     GlBadge,
     GlIcon,
     GlLink,
+    GlButton,
   },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
@@ -16,52 +18,68 @@ export default {
       required: true,
     },
   },
+  computed: {
+    releaseDate() {
+      const { published_at } = this.feature;
+      const date = new Date(published_at);
+
+      if (!isValidDate(date) || date.getTime() === 0) {
+        return '';
+      }
+
+      return dateInWords(date);
+    },
+  },
 };
 </script>
 
 <template>
-  <div class="gl-pb-7 gl-pt-5 gl-px-5 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
+  <div class="gl-py-6 gl-px-6 gl-border-b-1 gl-border-b-solid gl-border-b-gray-100">
+    <gl-link
+      :href="feature.url"
+      target="_blank"
+      class="gl-display-block"
+      data-track-event="click_whats_new_item"
+      :data-track-label="feature.title"
+      :data-track-property="feature.url"
+    >
+      <div
+        class="whats-new-item-image gl-bg-size-cover"
+        :style="`background-image: url(${feature.image_url});`"
+      >
+        <span class="gl-sr-only">{{ feature.title }}</span>
+      </div>
+    </gl-link>
     <gl-link
       :href="feature.url"
       target="_blank"
-      class="whats-new-item-title-link"
+      class="whats-new-item-title-link gl-display-block gl-mt-4 gl-mb-1"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
     >
-      <h5 class="gl-font-lg" data-test-id="feature-title">{{ feature.title }}</h5>
+      <h5 class="gl-font-lg gl-my-0" data-test-id="feature-title">{{ feature.title }}</h5>
     </gl-link>
+    <div v-if="releaseDate" class="gl-mb-3" data-testid="release-date">{{ releaseDate }}</div>
     <div v-if="feature.packages" class="gl-mb-3">
       <gl-badge
         v-for="packageName in feature.packages"
         :key="packageName"
-        size="sm"
+        size="md"
         class="whats-new-item-badge gl-mr-2"
       >
         <gl-icon name="license" />{{ packageName }}
       </gl-badge>
     </div>
-    <gl-link
-      :href="feature.url"
-      target="_blank"
-      data-track-event="click_whats_new_item"
-      :data-track-label="feature.title"
-      :data-track-property="feature.url"
-    >
-      <img
-        :alt="feature.title"
-        :src="feature.image_url"
-        class="img-thumbnail gl-px-8 gl-py-3 whats-new-item-image"
-      />
-    </gl-link>
-    <div v-safe-html="feature.body" class="gl-pt-3"></div>
-    <gl-link
+    <div v-safe-html="feature.body" class="gl-pt-3 gl-line-height-20"></div>
+    <gl-button
       :href="feature.url"
       target="_blank"
       data-track-event="click_whats_new_item"
       :data-track-label="feature.title"
       :data-track-property="feature.url"
-      >{{ __('Learn more') }}</gl-link
     >
+      {{ __('Learn more') }} <gl-icon name="arrow-right" />
+    </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/whats_new/store/actions.js b/app/assets/javascripts/whats_new/store/actions.js
index 1dc92ea2606..f209f145884 100644
--- a/app/assets/javascripts/whats_new/store/actions.js
+++ b/app/assets/javascripts/whats_new/store/actions.js
@@ -14,17 +14,19 @@ export default {
       localStorage.setItem(STORAGE_KEY, versionDigest);
     }
   },
-  fetchItems({ commit, state }, { page } = { page: null }) {
+  fetchItems({ commit, state }, { page, versionDigest } = { page: null, versionDigest: null }) {
     if (state.fetching) {
       return false;
     }
 
     commit(types.SET_FETCHING, true);
 
+    const v = versionDigest;
     return axios
       .get('/-/whats_new', {
         params: {
           page,
+          v,
         },
       })
       .then(({ data, headers }) => {