Merge branch '283924-user-profile' into 'master'

Refactor and UI-polish around activity calendar on user profile

See merge request gitlab-org/gitlab!47797

app/assets/javascripts/pages/users/user_tabs.js

@@ -5,7 +5,6 @@ import Activities from '~/activities';
 import { localTimeAgo } from '~/lib/utils/datetime_utility';
 import AjaxCache from '~/lib/utils/ajax_cache';
 import { __ } from '~/locale';
-import { deprecatedCreateFlash as flash } from '~/flash';
 import ActivityCalendar from './activity_calendar';
 import UserOverviewBlock from './user_overview_block';
 
@@ -63,9 +62,9 @@ import UserOverviewBlock from './user_overview_block';
  */
 
 const CALENDAR_TEMPLATE = `
-  <div class="clearfix calendar">
+  <div class="calendar">
     <div class="js-contrib-calendar"></div>
-    <div class="calendar-hint bottom-right"></div>
+    <div class="calendar-hint"></div>
   </div>
 `;
 
@@ -214,7 +213,17 @@ export default class UserTabs {
 
     AjaxCache.retrieve(calendarPath)
       .then(data => UserTabs.renderActivityCalendar(data, $calendarWrap))
-      .catch(() => flash(__('There was an error loading users activity calendar.')));
+      .catch(() => {
+        const cWrap = $calendarWrap[0];
+        cWrap.querySelector('.spinner').classList.add('invisible');
+        cWrap.querySelector('.user-calendar-error').classList.remove('invisible');
+        cWrap.querySelector('.user-calendar-error .js-retry-load').addEventListener('click', e => {
+          e.preventDefault();
+          cWrap.querySelector('.user-calendar-error').classList.add('invisible');
+          cWrap.querySelector('.spinner').classList.remove('invisible');
+          this.loadActivityCalendar();
+        });
+      });
   }
 
   static renderActivityCalendar(data, $calendarWrap) {

app/assets/stylesheets/framework/calendar.scss

@@ -14,14 +14,11 @@
   .str-truncated {
     max-width: 70%;
   }
-
-  .user-calendar-activities-loading {
-    font-size: 24px;
-  }
 }
 
 .user-calendar {
   text-align: center;
+  min-height: 172px;
 
   .calendar {
     display: inline-block;
@@ -42,12 +39,9 @@
 
 .calendar-hint {
   font-size: 12px;
-
-  &.bottom-right {
-    direction: ltr;
-    margin-top: -23px;
-    float: right;
-  }
+  direction: ltr;
+  margin-top: -23px;
+  float: right;
 }
 
 .pika-single.gitlab-theme {

app/views/users/_overview.html.haml

 - activity_pane_class = Feature.enabled?(:security_auto_fix) && @user.bot? ? "col-12" : "col-md-12 col-lg-6"
 
-.row
-  .col-12
-    .calendar-block.gl-mt-3.gl-mb-3
-      .user-calendar.d-none.d-sm-block{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
-        %h4.center.light
-          .spinner.spinner-md
-      .user-calendar-activities.d-none.d-sm-block
+.row.d-none.d-sm-flex
+  .col-12.calendar-block.gl-my-3
+    .user-calendar.light{ data: { calendar_path: user_calendar_path(@user, :json), calendar_activities_path: user_calendar_activities_path, utc_offset: Time.zone.utc_offset } }
+      .spinner.spinner-md.gl-my-8
+      .user-calendar-error.invisible
+        = _('There was an error loading users activity calendar.')
+        %a.js-retry-load{ href: '#' }
+          = s_('UserProfile|Retry')
+    .user-calendar-activities
 .row
   %div{ class: activity_pane_class }
     - if can?(current_user, :read_cross_project)

changelogs/unreleased/283924-user-profile.yml

+---
+title: Refactor and UI-polish around activity calendar on user profile
+merge_request: 47797
+author: Takuya Noguchi
+type: fixed

locale/gitlab.pot

@@ -29579,6 +29579,9 @@ msgstr ""
 msgid "UserProfile|Report abuse"
 msgstr ""
 
+msgid "UserProfile|Retry"
+msgstr ""
+
 msgid "UserProfile|Snippets"
 msgstr ""