vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

feat(#2443): asyncBtn — shared reusable component, replace ad-hoc disable/spinner patterns

Browse source 
add `asyncBtn(btn, fn)` to `@hive/shared/forms.js` as the single
reusable component for async button actions:
  1. double-click guard: returns immediately if btn is already disabled
  2. saves btn.innerHTML, replaces with spinner while in-flight
  3. restores btn on resolve or reject via finally

wire it into all ad-hoc disable/spinner/restore patterns:
  - common.js: bindAsyncForms uses asyncBtn internally
  - core.js: 'clear perms' button
  - permissions.js: clearStaleAgent
  - schedules.js: saveSchedule submit, editSchedule submit
  - app.js: buildAnswerForm, buildInboxMarkAllRow

fireScheduleNow in schedules.js is left with its existing childNode
save/restore because it shows a custom result flash on the button
content after a successful fire-now (the auto-restore of asyncBtn
would overwrite it); the surrounding themedConfirm dialog already
acts as a natural double-click barrier before the fetch.

saveAll in permissions.js is also left as-is: it uses a custom
'queued ✓' success label + a 900ms delay before re-fetch; the
btn.dataset.busy flag is its own double-submit guard.
This commit is contained in:
iris 2026-07-20 19:51:03 +02:00
commit 4b45c5cd3d
7 changed files with 143 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

81
frontend/packages/dashboard/src/schedules.js
View file

@ -15,6 +15,7 @@ import { $, el, appendLinkified } from './common.js';
import { themedConfirm, themedToast } from './modal.js';
import { paintAtomic, epochSec, fmtAgo, fmtDuration } from './util.js';
import { containersState } from './state.js';
import { asyncBtn } from '@hive/shared/forms.js';
export async function refreshReminders() {
const liveRoot = $('reminders-section');
@ -565,29 +566,25 @@ async function submitNewScheduleInline(tr, submitBtn) {
if (interval_seconds != null) payload.interval_seconds = interval_seconds;
if (description) payload.description = description;
const originalLabel = submitBtn.innerHTML;
submitBtn.disabled = true;
submitBtn.innerHTML = '<span class="spinner">◐</span>';
try {
const resp = await fetch('/api/schedules', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!resp.ok) {
const text = await resp.text().catch(() => '');
themedToast('schedule submit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
return;
asyncBtn(submitBtn, async () => {
try {
const resp = await fetch('/api/schedules', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
});
if (!resp.ok) {
const text = await resp.text().catch(() => '');
themedToast('schedule submit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
return;
}
// Reset carry so the next render shows an empty row.
resetNewScheduleCarry();
await refreshSchedules();
} catch (err) {
themedToast('schedule submit failed: ' + err, { type: 'error' });
}
// Reset carry so the next render shows an empty row.
resetNewScheduleCarry();
await refreshSchedules();
} catch (err) {
themedToast('schedule submit failed: ' + err, { type: 'error' });
} finally {
submitBtn.disabled = false;
submitBtn.innerHTML = originalLabel;
}
});
}
// The set of agent columns in the schedules table: operator + root
// (manager) first, then live containers (sorted), then any extra names
@ -985,27 +982,27 @@ async function submitEditSchedule(originalSchedule, form_) {
}
const submitBtn = form_.querySelector('button[type="submit"]');
const originalLabel = submitBtn ? submitBtn.textContent : '';
if (submitBtn) { submitBtn.disabled = true; submitBtn.textContent = 'saving…'; }
try {
const resp = await fetch('/api/schedules/' + encodeURIComponent(s.id), {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(patch),
});
if (!resp.ok) {
const text = await resp.text().catch(() => '');
themedToast('edit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
return;
const doEdit = async () => {
try {
const resp = await fetch('/api/schedules/' + encodeURIComponent(s.id), {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(patch),
});
if (!resp.ok) {
const text = await resp.text().catch(() => '');
themedToast('edit failed: http ' + resp.status + (text ? '\n\n' + text : ''), { type: 'error' });
return;
}
editingSchedules.delete(s.id);
scheduleEditCarry.delete(s.id);
await refreshSchedules();
} catch (err) {
themedToast('edit failed: ' + err, { type: 'error' });
}
editingSchedules.delete(s.id);
scheduleEditCarry.delete(s.id);
await refreshSchedules();
} catch (err) {
themedToast('edit failed: ' + err, { type: 'error' });
} finally {
if (submitBtn) { submitBtn.disabled = false; submitBtn.textContent = originalLabel; }
}
};
if (submitBtn) asyncBtn(submitBtn, doEdit);
else await doEdit();
}
async function fireScheduleNow(id, isOneShot, targets, btn) {
const targetList = targets.length ? targets.join(', ') : '(no active targets)';