Merge branch '353728-fix-activity-calendar-loading-spinner' into 'master'

Implement loading icon JS helper

See merge request gitlab-org/gitlab!81552

app/assets/javascripts/loading_icon_for_legacy_js.js

+import Vue from 'vue';
+import { GlLoadingIcon } from '@gitlab/ui';
+import { __ } from '~/locale';
+
+const defaultValue = (prop) => GlLoadingIcon.props[prop]?.default;
+
+/**
+ * Returns a loading icon/spinner element.
+ *
+ * This should *only* be used in existing legacy areas of code where Vue is not
+ * in use, as part of the migration strategy defined in
+ * https://gitlab.com/groups/gitlab-org/-/epics/7626.
+ *
+ * @param {object} props - The props to configure the spinner.
+ * @param {boolean} props.inline - Display the spinner inline; otherwise, as a block.
+ * @param {string} props.color - The color of the spinner ('dark' or 'light')
+ * @param {string} props.size - The size of the spinner ('sm', 'md', 'lg', 'xl')
+ * @param {string[]} props.classes - Additional classes to apply to the element.
+ * @param {string} props.label - The ARIA label to apply to the spinner.
+ * @returns {HTMLElement}
+ */
+export const loadingIconForLegacyJS = ({
+  inline = defaultValue('inline'),
+  color = defaultValue('color'),
+  size = defaultValue('size'),
+  classes = [],
+  label = __('Loading'),
+} = {}) => {
+  const mountEl = document.createElement('div');
+
+  const vm = new Vue({
+    el: mountEl,
+    render(h) {
+      return h(GlLoadingIcon, {
+        class: classes,
+        props: {
+          inline,
+          color,
+          size,
+          label,
+        },
+      });
+    },
+  });
+
+  // Ensure it's rendered
+  vm.$forceUpdate();
+
+  const el = vm.$el.cloneNode(true);
+  vm.$destroy();
+
+  return el;
+};

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

@@ -7,6 +7,7 @@ import axios from '~/lib/utils/axios_utils';
 import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility';
 import { formatDate } from '~/lib/utils/datetime/date_format_utility';
 import { n__, s__, __ } from '~/locale';
+import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
 
 const d3 = { select };
 
@@ -24,12 +25,6 @@ const CONTRIB_LEGENDS = [
   { title: __('30+ contributions'), min: 30 },
 ];
 
-const LOADING_HTML = `
-  <div class="text-center">
-    <div class="spinner spinner-md"></div>
-  </div>
-`;
-
 function getSystemDate(systemUtcOffsetSeconds) {
   const date = new Date();
   const localUtcOffsetMinutes = 0 - date.getTimezoneOffset();
@@ -286,7 +281,9 @@ export default class ActivityCalendar {
         this.currentSelectedDate.getDate(),
       ].join('-');
 
-      $(this.activitiesContainer).html(LOADING_HTML);
+      $(this.activitiesContainer)
+        .empty()
+        .append(loadingIconForLegacyJS({ size: 'lg' }));
 
       axios
         .get(this.calendarActivitiesPath, {

spec/frontend/loading_icon_for_legacy_js_spec.js

+import { loadingIconForLegacyJS } from '~/loading_icon_for_legacy_js';
+
+describe('loadingIconForLegacyJS', () => {
+  it('sets the correct defaults', () => {
+    const el = loadingIconForLegacyJS();
+
+    expect(el.tagName).toBe('DIV');
+    expect(el.className).toBe('gl-spinner-container');
+    expect(el.querySelector('.gl-spinner-sm')).toEqual(expect.any(HTMLElement));
+    expect(el.querySelector('.gl-spinner-dark')).toEqual(expect.any(HTMLElement));
+    expect(el.querySelector('[aria-label="Loading"]')).toEqual(expect.any(HTMLElement));
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('renders a span if inline = true', () => {
+    expect(loadingIconForLegacyJS({ inline: true }).tagName).toBe('SPAN');
+  });
+
+  it('can render a different size', () => {
+    const el = loadingIconForLegacyJS({ size: 'lg' });
+
+    expect(el.querySelector('.gl-spinner-lg')).toEqual(expect.any(HTMLElement));
+  });
+
+  it('can render a different color', () => {
+    const el = loadingIconForLegacyJS({ color: 'light' });
+
+    expect(el.querySelector('.gl-spinner-light')).toEqual(expect.any(HTMLElement));
+  });
+
+  it('can render a different aria-label', () => {
+    const el = loadingIconForLegacyJS({ label: 'Foo' });
+
+    expect(el.querySelector('[aria-label="Foo"]')).toEqual(expect.any(HTMLElement));
+  });
+
+  it('can render additional classes', () => {
+    const classes = ['foo', 'bar'];
+    const el = loadingIconForLegacyJS({ classes });
+
+    expect(el.classList).toContain(...classes);
+  });
+});