Resolve "Add new "Overview" tab on user profile page"

3 files changed, 127 insertions, 25 deletions

diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js
index 9892a039941..bf592ba7a3c 100644
--- a/app/assets/javascripts/pages/users/activity_calendar.js
+++ b/app/assets/javascripts/pages/users/activity_calendar.js
@@ -43,7 +43,15 @@ const initColorKey = () =>
     .domain([0, 3]);
 
 export default class ActivityCalendar {
-  constructor(container, timestamps, calendarActivitiesPath, utcOffset = 0, firstDayOfWeek = 0) {
+  constructor(
+    container,
+    activitiesContainer,
+    timestamps,
+    calendarActivitiesPath,
+    utcOffset = 0,
+    firstDayOfWeek = 0,
+    monthsAgo = 12,
+  ) {
     this.calendarActivitiesPath = calendarActivitiesPath;
     this.clickDay = this.clickDay.bind(this);
     this.currentSelectedDate = '';
@@ -66,6 +74,8 @@ export default class ActivityCalendar {
     ];
     this.months = [];
     this.firstDayOfWeek = firstDayOfWeek;
+    this.activitiesContainer = activitiesContainer;
+    this.container = container;
 
     // Loop through the timestamps to create a group of objects
     // The group of objects will be grouped based on the day of the week they are
@@ -75,13 +85,13 @@ export default class ActivityCalendar {
     const today = getSystemDate(utcOffset);
     today.setHours(0, 0, 0, 0, 0);
 
-    const oneYearAgo = new Date(today);
-    oneYearAgo.setFullYear(today.getFullYear() - 1);
+    const timeAgo = new Date(today);
+    timeAgo.setMonth(today.getMonth() - monthsAgo);
 
-    const days = getDayDifference(oneYearAgo, today);
+    const days = getDayDifference(timeAgo, today);
 
     for (let i = 0; i <= days; i += 1) {
-      const date = new Date(oneYearAgo);
+      const date = new Date(timeAgo);
       date.setDate(date.getDate() + i);
 
       const day = date.getDay();
@@ -280,7 +290,7 @@ export default class ActivityCalendar {
         this.currentSelectedDate.getDate(),
       ].join('-');
 
-      $('.user-calendar-activities').html(LOADING_HTML);
+      $(this.activitiesContainer).html(LOADING_HTML);
 
       axios
         .get(this.calendarActivitiesPath, {
@@ -289,11 +299,11 @@ export default class ActivityCalendar {
           },
           responseType: 'text',
         })
-        .then(({ data }) => $('.user-calendar-activities').html(data))
+        .then(({ data }) => $(this.activitiesContainer).html(data))
         .catch(() => flash(__('An error occurred while retrieving calendar activity')));
     } else {
       this.currentSelectedDate = '';
-      $('.user-calendar-activities').html('');
+      $(this.activitiesContainer).html('');
     }
   }
 }
diff --git a/app/assets/javascripts/pages/users/user_overview_block.js b/app/assets/javascripts/pages/users/user_overview_block.js
new file mode 100644
index 00000000000..0009419cd0c
--- /dev/null
+++ b/app/assets/javascripts/pages/users/user_overview_block.js
@@ -0,0 +1,42 @@
+import axios from '~/lib/utils/axios_utils';
+
+export default class UserOverviewBlock {
+  constructor(options = {}) {
+    this.container = options.container;
+    this.url = options.url;
+    this.limit = options.limit || 20;
+    this.loadData();
+  }
+
+  loadData() {
+    const loadingEl = document.querySelector(`${this.container} .loading`);
+
+    loadingEl.classList.remove('hide');
+
+    axios
+      .get(this.url, {
+        params: {
+          limit: this.limit,
+        },
+      })
+      .then(({ data }) => this.render(data))
+      .catch(() => loadingEl.classList.add('hide'));
+  }
+
+  render(data) {
+    const { html, count } = data;
+    const contentList = document.querySelector(`${this.container} .overview-content-list`);
+
+    contentList.innerHTML += html;
+
+    const loadingEl = document.querySelector(`${this.container} .loading`);
+
+    if (count && count > 0) {
+      document.querySelector(`${this.container} .js-view-all`).classList.remove('hide');
+    } else {
+      document.querySelector(`${this.container} .nothing-here-block`).classList.add('text-left', 'p-0');
+    }
+
+    loadingEl.classList.add('hide');
+  }
+}
diff --git a/app/assets/javascripts/pages/users/user_tabs.js b/app/assets/javascripts/pages/users/user_tabs.js
index a2ca03536f2..23b0348a99f 100644
--- a/app/assets/javascripts/pages/users/user_tabs.js
+++ b/app/assets/javascripts/pages/users/user_tabs.js
@@ -2,9 +2,10 @@ import $ from 'jquery';
 import axios from '~/lib/utils/axios_utils';
 import Activities from '~/activities';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
-import { __ } from '~/locale';
+import { __, sprintf } from '~/locale';
 import flash from '~/flash';
 import ActivityCalendar from './activity_calendar';
+import UserOverviewBlock from './user_overview_block';
 
 /**
  * UserTabs
@@ -61,19 +62,28 @@ import ActivityCalendar from './activity_calendar';
  * </div>
  */
 
-const CALENDAR_TEMPLATE = `
-  <div class="clearfix calendar">
-    <div class="js-contrib-calendar"></div>
-    <div class="calendar-hint">
-      Summary of issues, merge requests, push events, and comments
+const CALENDAR_TEMPLATES = {
+  activity: `
+    <div class="clearfix calendar">
+      <div class="js-contrib-calendar"></div>
+      <div class="calendar-hint bottom-right"></div>
     </div>
-  </div>
-`;
+  `,
+  overview: `
+    <div class="clearfix calendar">
+      <div class="calendar-hint"></div>
+      <div class="js-contrib-calendar prepend-top-20"></div>
+    </div>
+  `,
+};
+
+const CALENDAR_PERIOD_6_MONTHS = 6;
+const CALENDAR_PERIOD_12_MONTHS = 12;
 
 export default class UserTabs {
   constructor({ defaultAction, action, parentEl }) {
     this.loaded = {};
-    this.defaultAction = defaultAction || 'activity';
+    this.defaultAction = defaultAction || 'overview';
     this.action = action || this.defaultAction;
     this.$parentEl = $(parentEl) || $(document);
     this.windowLocation = window.location;
@@ -124,6 +134,8 @@ export default class UserTabs {
     }
     if (action === 'activity') {
       this.loadActivities();
+    } else if (action === 'overview') {
+      this.loadOverviewTab();
     }
 
     const loadableActions = ['groups', 'contributed', 'projects', 'snippets'];
@@ -154,7 +166,40 @@ export default class UserTabs {
     if (this.loaded.activity) {
       return;
     }
-    const $calendarWrap = this.$parentEl.find('.user-calendar');
+
+    this.loadActivityCalendar('activity');
+
+    // eslint-disable-next-line no-new
+    new Activities();
+
+    this.loaded.activity = true;
+  }
+
+  loadOverviewTab() {
+    if (this.loaded.overview) {
+      return;
+    }
+
+    this.loadActivityCalendar('overview');
+
+    UserTabs.renderMostRecentBlocks('#js-overview .activities-block', 5);
+    UserTabs.renderMostRecentBlocks('#js-overview .projects-block', 10);
+
+    this.loaded.overview = true;
+  }
+
+  static renderMostRecentBlocks(container, limit) {
+    // eslint-disable-next-line no-new
+    new UserOverviewBlock({
+      container,
+      url: $(`${container} .overview-content-list`).data('href'),
+      limit,
+    });
+  }
+
+  loadActivityCalendar(action) {
+    const monthsAgo = action === 'overview' ? CALENDAR_PERIOD_6_MONTHS : CALENDAR_PERIOD_12_MONTHS;
+    const $calendarWrap = this.$parentEl.find('.tab-pane.active .user-calendar');
     const calendarPath = $calendarWrap.data('calendarPath');
     const calendarActivitiesPath = $calendarWrap.data('calendarActivitiesPath');
     const utcOffset = $calendarWrap.data('utcOffset');
@@ -166,17 +211,22 @@ export default class UserTabs {
     axios
       .get(calendarPath)
       .then(({ data }) => {
-        $calendarWrap.html(CALENDAR_TEMPLATE);
-        $calendarWrap.find('.calendar-hint').append(`(Timezone: ${utcFormatted})`);
+        $calendarWrap.html(CALENDAR_TEMPLATES[action]);
+
+        let calendarHint = '';
+
+        if (action === 'activity') {
+          calendarHint = sprintf(__('Summary of issues, merge requests, push events, and comments (Timezone: %{utcFormatted})'), { utcFormatted });
+        } else if (action === 'overview') {
+          calendarHint = __('Issues, merge requests, pushes and comments.');
+        }
+
+        $calendarWrap.find('.calendar-hint').text(calendarHint);
 
         // eslint-disable-next-line no-new
-        new ActivityCalendar('.js-contrib-calendar', data, calendarActivitiesPath, utcOffset);
+        new ActivityCalendar('.tab-pane.active .js-contrib-calendar', '.tab-pane.active .user-calendar-activities', data, calendarActivitiesPath, utcOffset, 0, monthsAgo);
       })
       .catch(() => flash(__('There was an error loading users activity calendar.')));
-
-    // eslint-disable-next-line no-new
-    new Activities();
-    this.loaded.activity = true;
   }
 
   toggleLoading(status) {