Merge branch 'main' into dropdowncss

web_src/js/components/RepoActionView.vue

@@ -107,6 +107,8 @@ function isLogElementInViewport(el: Element, {extraViewPortHeight}={extraViewPor
 type LocaleStorageOptions = {
   autoScroll: boolean;
   expandRunning: boolean;
+  actionsLogShowSeconds: boolean;
+  actionsLogShowTimestamps: boolean;
 };
 
 export default defineComponent({
@@ -135,8 +137,8 @@ export default defineComponent({
   },
 
   data() {
-    const defaultViewOptions: LocaleStorageOptions = {autoScroll: true, expandRunning: false};
-    const {autoScroll, expandRunning} = localUserSettings.getJsonObject('actions-view-options', defaultViewOptions);
+    const defaultViewOptions: LocaleStorageOptions = {autoScroll: true, expandRunning: false, actionsLogShowSeconds: false, actionsLogShowTimestamps: false};
+    const {autoScroll, expandRunning, actionsLogShowSeconds, actionsLogShowTimestamps} = localUserSettings.getJsonObject('actions-view-options', defaultViewOptions);
     return {
       // internal state
       loadingAbortController: null as AbortController | null,
@@ -146,11 +148,11 @@ export default defineComponent({
       menuVisible: false,
       isFullScreen: false,
       timeVisible: {
-        'log-time-stamp': false,
-        'log-time-seconds': false,
+        'log-time-stamp': actionsLogShowTimestamps,
+        'log-time-seconds': actionsLogShowSeconds,
       },
-      optionAlwaysAutoScroll: autoScroll ?? false,
-      optionAlwaysExpandRunning: expandRunning ?? false,
+      optionAlwaysAutoScroll: autoScroll,
+      optionAlwaysExpandRunning: expandRunning,
 
       // provided by backend
       run: {
@@ -253,7 +255,12 @@ export default defineComponent({
 
   methods: {
     saveLocaleStorageOptions() {
-      const opts: LocaleStorageOptions = {autoScroll: this.optionAlwaysAutoScroll, expandRunning: this.optionAlwaysExpandRunning};
+      const opts: LocaleStorageOptions = {
+        autoScroll: this.optionAlwaysAutoScroll,
+        expandRunning: this.optionAlwaysExpandRunning,
+        actionsLogShowSeconds: this.timeVisible['log-time-seconds'],
+        actionsLogShowTimestamps: this.timeVisible['log-time-stamp'],
+      };
       localUserSettings.setJsonObject('actions-view-options', opts);
     },
 
@@ -470,6 +477,7 @@ export default defineComponent({
       for (const el of this.elStepsContainer().querySelectorAll(`.log-time-${type}`)) {
         toggleElem(el, this.timeVisible[`log-time-${type}`]);
       }
+      this.saveLocaleStorageOptions();
     },
 
     toggleFullScreen() {

web_src/js/features/common-button.ts

@@ -2,6 +2,7 @@ import {POST} from '../modules/fetch.ts';
 import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {camelize} from 'vue';
+import {applyAutoFocus} from './common-page.ts';
 
 export function initGlobalButtonClickOnEnter(): void {
   addDelegatedEventListener(document, 'keypress', 'div.ui.button, span.ui.button', (el, e: KeyboardEvent) => {
@@ -88,7 +89,7 @@ function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
   const elems = el.classList.contains('toggle') ? toggleElem(sel) : showElem(sel);
   for (const elem of elems) {
     if (isElemVisible(elem as HTMLElement)) {
-      elem.querySelector<HTMLElement>('[autofocus]')?.focus();
+      applyAutoFocus(elem);
     }
   }
 }

web_src/js/features/common-page.ts

@@ -116,12 +116,30 @@ function attachInputDirAuto(el: Partial<HTMLInputElement | HTMLTextAreaElement>)
   }
 }
 
+function autoFocusEnd(el: HTMLInputElement | HTMLTextAreaElement) {
+  el.focus();
+  el.setSelectionRange(el.value.length, el.value.length);
+}
+
+export function applyAutoFocus(container: Element) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus
+  // "autofocus" behavior is defined by the standard: when a container (e.g.: dialog) becomes visible, focus the element with "autofocus" attribute
+  // Fomantic UI already supports it for its modal dialog, we need to cover more cases (e.g.: ".show-panel" button)
+  // Here is just a simple support, we don't expect more than one element that need "autofocus" appearing in the same container
+  container.querySelector<HTMLElement>('[autofocus]')?.focus();
+  // Also, apply our autoFocusEnd behavior
+  // TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: use "~=" operator in case we would extend the "data-global-init" to support more functions in the future.
+  const el = container.querySelector<HTMLInputElement>('[data-global-init~="autoFocusEnd"]');
+  if (el) autoFocusEnd(el);
+}
+
 export function initGlobalInput() {
   registerGlobalSelectorFunc('input, textarea', attachInputDirAuto);
-  registerGlobalInitFunc('initInputAutoFocusEnd', (el: HTMLInputElement) => {
-    el.focus(); // expects only one such element on one page. If there are many, then the last one gets the focus.
-    el.setSelectionRange(el.value.length, el.value.length);
-  });
+
+  // autoFocusEnd is used for autofocus an input/textarea and move the cursor to the end of the text.
+  // It is useful for "New Issue"/"New PR" pages when the title is pre-filled with prefix text (e.g.: from template or commit message)
+  // The native "autofocus" isn't used because there is a delay between "focused (DOM rendering)" and "move cursor to end (our JS)", it causes flickers.
+  registerGlobalInitFunc('autoFocusEnd', autoFocusEnd);
 }
 
 /**

web_src/js/features/heatmap.ts

@@ -1,14 +1,25 @@
 import {createApp} from 'vue';
 import ActivityHeatmap from '../components/ActivityHeatmap.vue';
 import {translateMonth, translateDay} from '../utils.ts';
+import {GET} from '../modules/fetch.ts';
 
-export function initHeatmap() {
-  const el = document.querySelector('#user-heatmap');
+type HeatmapResponse = {
+  heatmapData: Array<[number, number]>; // [[1617235200, 2]] = [unix timestamp, count]
+  totalContributions: number;
+};
+
+export async function initHeatmap() {
+  const el = document.querySelector<HTMLElement>('#user-heatmap');
   if (!el) return;
 
   try {
+    const url = el.getAttribute('data-heatmap-url')!;
+    const resp = await GET(url);
+    if (!resp.ok) throw new Error(`Failed to load heatmap data: ${resp.status} ${resp.statusText}`);
+    const {heatmapData, totalContributions} = await resp.json() as HeatmapResponse;
+
     const heatmap: Record<string, number> = {};
-    for (const {contributions, timestamp} of JSON.parse(el.getAttribute('data-heatmap-data')!)) {
+    for (const [timestamp, contributions] of heatmapData) {
       // Convert to user timezone and sum contributions by date
       const dateStr = new Date(timestamp * 1000).toDateString();
       heatmap[dateStr] = (heatmap[dateStr] || 0) + contributions;
@@ -18,6 +29,9 @@ export function initHeatmap() {
       return {date: new Date(v), count: heatmap[v]};
     });
 
+    const totalFormatted = totalContributions.toLocaleString();
+    const textTotalContributions = el.getAttribute('data-locale-total-contributions')!.replace('%s', totalFormatted);
+
     // last heatmap tooltip localization attempt https://github.com/go-gitea/gitea/pull/24131/commits/a83761cbbae3c2e3b4bced71e680f44432073ac8
     const locale = {
       heatMapLocale: {
@@ -28,7 +42,7 @@ export function initHeatmap() {
         less: el.getAttribute('data-locale-less'),
       },
       tooltipUnit: 'contributions',
-      textTotalContributions: el.getAttribute('data-locale-total-contributions'),
+      textTotalContributions,
       noDataText: el.getAttribute('data-locale-no-contributions'),
     };
 

web_src/js/features/repo-issue-edit.ts

@@ -97,11 +97,9 @@ async function tryOnEditContent(e: Event) {
     cancelButton.addEventListener('click', cancelAndReset);
     form.addEventListener('submit', saveAndRefresh);
   }
-
-  // FIXME: ideally here should reload content and attachment list from backend for existing editor, to avoid losing data
-  if (!comboMarkdownEditor.value()) {
-    comboMarkdownEditor.value(rawContent.textContent);
-  }
+  // when the content has changed on server side, there is no sync, and this page doesn't have the latest content,
+  // the editor still shows the old content, server will reject end user's submit by "data-content-version" check
+  comboMarkdownEditor.value(rawContent.textContent);
   comboMarkdownEditor.switchTabToEditor();
   comboMarkdownEditor.focus();
   triggerUploadStateChanged(comboMarkdownEditor.container);

web_src/js/modules/observer.ts

@@ -42,6 +42,7 @@ export function registerGlobalInitFunc<T extends HTMLElement>(name: string, hand
 }
 
 function callGlobalInitFunc(el: HTMLElement) {
+  // TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: maybe in the future we need to extend it to support multiple functions, for example: `data-global-init="func1 func2 func3"`
   const initFunc = el.getAttribute('data-global-init')!;
   const func = globalInitFuncs[initFunc];
   if (!func) throw new Error(`Global init function "${initFunc}" not found`);

web_src/js/modules/user-settings.ts

@@ -58,8 +58,8 @@ export const localUserSettings = {
   getJsonObject: <T extends Record<string, any>>(key: string, def: T): T => {
     const value = getLocalStorageUserSetting(key);
     try {
-      const decoded = value !== null ? JSON.parse(value) : def;
-      return decoded ?? def;
+      const decoded = value !== null ? JSON.parse(value) : null;
+      return {...def, ...decoded};
     } catch (e) {
       console.error(`Unable to parse JSON value for local user settings ${key}=${value}`, e);
     }

web_src/js/webcomponents/absolute-date.test.ts

@@ -1,26 +0,0 @@
-import {toAbsoluteLocaleDate} from './absolute-date.ts';
-
-test('toAbsoluteLocaleDate', () => {
-  expect(toAbsoluteLocaleDate('2024-03-15', 'en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })).toEqual('March 15, 2024');
-
-  expect(toAbsoluteLocaleDate('2024-03-15T01:02:03', 'de-DE', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-  })).toEqual('15. März 2024');
-
-  // these cases shouldn't happen
-  expect(toAbsoluteLocaleDate('2024-03-15 01:02:03', '', {})).toEqual('Invalid Date');
-  expect(toAbsoluteLocaleDate('10000-01-01', '', {})).toEqual('Invalid Date');
-
-  // test different timezone
-  const oldTZ = import.meta.env.TZ;
-  import.meta.env.TZ = 'America/New_York';
-  expect(new Date('2024-03-15').toLocaleString('en-US')).toEqual('3/14/2024, 8:00:00 PM');
-  expect(toAbsoluteLocaleDate('2024-03-15', 'en-US')).toEqual('3/15/2024, 12:00:00 AM');
-  import.meta.env.TZ = oldTZ;
-});

web_src/js/webcomponents/absolute-date.ts

@@ -1,41 +0,0 @@
-export function toAbsoluteLocaleDate(date: string, lang?: string, opts?: Intl.DateTimeFormatOptions) {
-  // only use the date part, it is guaranteed to be in ISO format (YYYY-MM-DDTHH:mm:ss.sssZ) or (YYYY-MM-DD)
-  // if there is an "Invalid Date" error, there must be something wrong in code and should be fixed.
-  // TODO: there is a root problem in backend code: the date "YYYY-MM-DD" is passed to backend without timezone (eg: deadline),
-  // then backend parses it in server's timezone and stores the parsed timestamp into database.
-  // If the user's timezone is different from the server's, the date might be displayed in the wrong day.
-  const dateSep = date.indexOf('T');
-  date = dateSep === -1 ? date : date.substring(0, dateSep);
-  return new Date(`${date}T00:00:00`).toLocaleString(lang || [], opts);
-}
-
-window.customElements.define('absolute-date', class extends HTMLElement {
-  static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
-
-  initialized = false;
-
-  update = () => {
-    const opts: Record<string, string> = {};
-    for (const attr of ['year', 'month', 'weekday', 'day']) {
-      if (this.getAttribute(attr)) {
-        opts[attr] = this.getAttribute(attr)!;
-      }
-    }
-    const lang = this.closest('[lang]')?.getAttribute('lang') ||
-      this.ownerDocument.documentElement.getAttribute('lang') || '';
-
-    if (!this.shadowRoot) this.attachShadow({mode: 'open'});
-    this.shadowRoot!.textContent = toAbsoluteLocaleDate(this.getAttribute('date')!, lang, opts);
-  };
-
-  attributeChangedCallback(_name: string, oldValue: string | null, newValue: string | null) {
-    if (!this.initialized || oldValue === newValue) return;
-    this.update();
-  }
-
-  connectedCallback() {
-    this.initialized = false;
-    this.update();
-    this.initialized = true;
-  }
-});

web_src/js/webcomponents/index.ts

@@ -2,4 +2,3 @@ import './polyfills.ts';
 import '@github/relative-time-element';
 import './origin-url.ts';
 import './overflow-menu.ts';
-import './absolute-date.ts';