Refactor and UI-polish around activity calendar on user profile

Rewrites failure handling on activity calendar on user profile.
Also reduces the number of DOM around calendar on it.
Unnecessary CSS is removed.
Signed-off-by: Takuya Noguchi <takninnovationresearch@gmail.com>

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 ""