fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor(settings/telemetry): single card with full sub-config disclosure

Browse Source 
Collapses the two telemetry cards (Frontend telemetry + Advanced) into
one card so the master toggle and its sub-config (sampling + allowed
events) read as one coherent block. The conditional disclosure now
hides the entire sub-config when telemetry is off — previously only the
sampling fieldset hid, leaving Advanced visible with no effect.

The sampling select sits in a 2-column grid with an empty filler so it
keeps a sensible width instead of stretching across the page. Both
redundant info blockquotes are gone (the master switch carries a muted
hint, and the events block has its own caption). The simplified
component drops the now-redundant samplingRowSelector and consumes a
single data-telemetry-when-enabled wrapper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-04-25 18:22:23 +02:00
parent 5f3aff08cb
commit 9ee2589820
4 changed files with 57 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
i18n/default_de.json
View File

@@ -76,6 +76,7 @@
"Allow user theme": "Benutzer-Theme erlauben", "Allow user theme": "Benutzer-Theme erlauben",
"Allowed CORS origins": "Erlaubte CORS-Origins", "Allowed CORS origins": "Erlaubte CORS-Origins",
"Allowed email domains": "Erlaubte E-Mail-Domains", "Allowed email domains": "Erlaubte E-Mail-Domains",
"Allowed events": "Erlaubte Events",
"Allowed file types: PNG": "Erlaubte Dateitypen: PNG", "Allowed file types: PNG": "Erlaubte Dateitypen: PNG",
"Allowed file types: SVG, PNG, JPG, WEBP": "Erlaubte Dateitypen: SVG, PNG, JPG, WEBP", "Allowed file types: SVG, PNG, JPG, WEBP": "Erlaubte Dateitypen: SVG, PNG, JPG, WEBP",
"Allowed range: 1-365 days (default: 30)": "Erlaubter Bereich: 1–365 Tage (Standard: 30)", "Allowed range: 1-365 days (default: 30)": "Erlaubter Bereich: 1–365 Tage (Standard: 30)",

1
i18n/default_en.json
View File

@@ -76,6 +76,7 @@
"Allow user theme": "Allow user theme", "Allow user theme": "Allow user theme",
"Allowed CORS origins": "Allowed CORS origins", "Allowed CORS origins": "Allowed CORS origins",
"Allowed email domains": "Allowed email domains", "Allowed email domains": "Allowed email domains",
"Allowed events": "Allowed events",
"Allowed file types: PNG": "Allowed file types: PNG", "Allowed file types: PNG": "Allowed file types: PNG",
"Allowed file types: SVG, PNG, JPG, WEBP": "Allowed file types: SVG, PNG, JPG, WEBP", "Allowed file types: SVG, PNG, JPG, WEBP": "Allowed file types: SVG, PNG, JPG, WEBP",
"Allowed range: 1-365 days (default: 30)": "Allowed range: 1-365 days (default: 30)", "Allowed range: 1-365 days (default: 30)": "Allowed range: 1-365 days (default: 30)",

101
pages/admin/settings/telemetry(default).phtml
View File

@@ -60,70 +60,59 @@ $disabledAttr = $isReadOnly ? 'disabled' : '';
?> ?>
<form id="settings-telemetry-form" method="post" data-details-storage="settings-telemetry-details-v1" data-standard-detail-form="1"> <form id="settings-telemetry-form" method="post" data-details-storage="settings-telemetry-details-v1" data-standard-detail-form="1">
<details class="app-details-card" name="settings-telemetry-core" data-details-key="settings-telemetry-core" open> <details class="app-details-card" name="settings-telemetry" data-details-key="settings-telemetry" open>
<summary> <summary>
<span class="app-details-card-summary-title"><?php e(t('Frontend telemetry')); ?></span> <span class="app-details-card-summary-title"><?php e(t('Frontend telemetry')); ?></span>
<span class="app-details-card-summary-meta"> <span class="app-details-card-summary-meta">
<span class="badge" data-variant="neutral"><?php e($frontendTelemetryEnabled ? t('Enabled') : t('Disabled')); ?></span> <span class="badge" data-variant="neutral"><?php e($frontendTelemetryEnabled ? t('Enabled') : t('Disabled')); ?></span>
<span class="badge" data-variant="neutral"><?php e($frontendTelemetrySampleRate); ?></span> <?php if ($frontendTelemetryEnabled): ?>
<span class="badge" data-variant="neutral"><?php e($frontendTelemetrySampleRate); ?></span>
<?php endif; ?>
</span> </span>
</summary> </summary>
<div class="app-details-card-container"> <div class="app-details-card-container">
<blockquote data-variant="info"> <label class="app-field">
<small><?php e(t('Telemetry helps detect recurring UI issues and failed requests in production.')); ?></small> <input
</blockquote> type="checkbox"
<fieldset> role="switch"
<legend><small><?php e(t('Frontend telemetry')); ?></small></legend> name="frontend_telemetry_enabled"
<label class="app-field"> value="1"
<input data-telemetry-enabled-toggle
type="checkbox" <?php e($frontendTelemetryEnabled ? 'checked' : ''); ?>
role="switch" <?php e($disabledAttr); ?>>
name="frontend_telemetry_enabled" <span><?php e(t('Enable frontend telemetry')); ?></span>
value="1" </label>
data-telemetry-enabled-toggle <small class="muted"><?php e(t('Telemetry helps detect recurring UI issues and failed requests in production.')); ?></small>
<?php e($frontendTelemetryEnabled ? 'checked' : ''); ?>
<?php e($disabledAttr); ?>>
<span><?php e(t('Enable frontend telemetry')); ?></span>
</label>
</fieldset>
<fieldset data-telemetry-sampling-fieldset <?php e($frontendTelemetryEnabled ? '' : 'hidden'); ?>>
<legend><small><?php e(t('Sampling rate')); ?></small></legend>
<label class="app-field" data-telemetry-sampling-row>
<span><?php e(t('Sampling rate')); ?></span>
<select name="frontend_telemetry_sample_rate" data-telemetry-sampling-select <?php e($disabledAttr); ?>>
<option value="0.1" <?php e($frontendTelemetrySampleRate === '0.1' ? 'selected' : ''); ?>>10%</option>
<option value="0.2" <?php e($frontendTelemetrySampleRate === '0.2' ? 'selected' : ''); ?>>20%</option>
<option value="0.5" <?php e($frontendTelemetrySampleRate === '0.5' ? 'selected' : ''); ?>>50%</option>
<option value="1" <?php e($frontendTelemetrySampleRate === '1' ? 'selected' : ''); ?>>100%</option>
</select>
<small><?php e(t('The percentage of users who will have telemetry enabled.')); ?></small>
</label>
</fieldset>
</div>
</details>
<details class="app-details-card" name="settings-telemetry-advanced" data-details-key="settings-telemetry-advanced"> <div data-telemetry-when-enabled <?php e($frontendTelemetryEnabled ? '' : 'hidden'); ?>>
<summary> <hr>
<span class="app-details-card-summary-title"><?php e(t('Advanced telemetry options')); ?></span> <div class="grid">
<span class="app-details-card-summary-meta"> <label class="app-field">
<span class="badge" data-variant="neutral"><?php e(sprintf(t('%d events enabled'), count($frontendTelemetryAllowedEvents))); ?></span> <span><?php e(t('Sampling rate')); ?></span>
</span> <select name="frontend_telemetry_sample_rate" <?php e($disabledAttr); ?>>
</summary> <option value="0.1" <?php e($frontendTelemetrySampleRate === '0.1' ? 'selected' : ''); ?>>10%</option>
<div class="app-details-card-container"> <option value="0.2" <?php e($frontendTelemetrySampleRate === '0.2' ? 'selected' : ''); ?>>20%</option>
<blockquote data-variant="info"> <option value="0.5" <?php e($frontendTelemetrySampleRate === '0.5' ? 'selected' : ''); ?>>50%</option>
<small><?php e(t('Limit which event types are collected to match your privacy and operations requirements.')); ?></small> <option value="1" <?php e($frontendTelemetrySampleRate === '1' ? 'selected' : ''); ?>>100%</option>
</blockquote> </select>
<fieldset> <small><?php e(t('The percentage of users who will have telemetry enabled.')); ?></small>
<legend><small><?php e(t('Allowed telemetry events')); ?></small></legend> </label>
<label class="app-field"> <div></div>
<input type="checkbox" name="frontend_telemetry_allowed_events[]" value="warn_once" <?php e(in_array('warn_once', $frontendTelemetryAllowedEvents, true) ? 'checked' : ''); ?> <?php e($disabledAttr); ?>> </div>
<span><?php e(t('warnOnce warnings')); ?></span>
</label> <fieldset>
<label class="app-field"> <legend><small><?php e(t('Allowed events')); ?></small></legend>
<input type="checkbox" name="frontend_telemetry_allowed_events[]" value="ajax_error" <?php e(in_array('ajax_error', $frontendTelemetryAllowedEvents, true) ? 'checked' : ''); ?> <?php e($disabledAttr); ?>> <label class="app-field">
<span><?php e(t('AJAX errors')); ?></span> <input type="checkbox" name="frontend_telemetry_allowed_events[]" value="warn_once" <?php e(in_array('warn_once', $frontendTelemetryAllowedEvents, true) ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
</label> <span><?php e(t('warnOnce warnings')); ?></span>
</fieldset> </label>
<label class="app-field">
<input type="checkbox" name="frontend_telemetry_allowed_events[]" value="ajax_error" <?php e(in_array('ajax_error', $frontendTelemetryAllowedEvents, true) ? 'checked' : ''); ?> <?php e($disabledAttr); ?>>
<span><?php e(t('AJAX errors')); ?></span>
</label>
</fieldset>
<small class="muted"><?php e(t('Limit which event types are collected to match your privacy and operations requirements.')); ?></small>
</div>
</div> </div>
</details> </details>

27
web/js/components/app-settings-telemetry.js
View File

@@ -1,5 +1,7 @@
/** /**
* Tracks settings page interactions for telemetry. * Hides the telemetry sub-config (sampling + allowed events) when the
* master toggle is off. The sub-block is one container so all dependent
* fields stay in sync together.
*/ */
import { resolveHost } from '../core/app-dom.js'; import { resolveHost } from '../core/app-dom.js';
import { syncControlState } from '../core/app-conditional-controls.js'; import { syncControlState } from '../core/app-conditional-controls.js';
@@ -7,30 +9,21 @@ import { syncControlState } from '../core/app-conditional-controls.js';
export const initTelemetrySettings = (root = document, options = {}) => { export const initTelemetrySettings = (root = document, options = {}) => {
const host = resolveHost(root); const host = resolveHost(root);
const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]'; const toggleSelector = String(options.toggleSelector || '[data-telemetry-enabled-toggle]').trim() || '[data-telemetry-enabled-toggle]';
const samplingFieldsetSelector = String(options.samplingFieldsetSelector || '[data-telemetry-sampling-fieldset]').trim() || '[data-telemetry-sampling-fieldset]'; const dependentSelector = String(options.dependentSelector || '[data-telemetry-when-enabled]').trim() || '[data-telemetry-when-enabled]';
const samplingRowSelector = String(options.samplingRowSelector || '[data-telemetry-sampling-row]').trim() || '[data-telemetry-sampling-row]';
const toggle = host.querySelector(toggleSelector); const toggle = host.querySelector(toggleSelector);
const samplingFieldset = host.querySelector(samplingFieldsetSelector); const dependent = host.querySelector(dependentSelector);
const samplingRow = host.querySelector(samplingRowSelector);
if (!toggle || !samplingFieldset) { if (!toggle || !dependent) {
return { destroy: () => {} }; return { destroy: () => {} };
} }
const syncSamplingVisibility = () => { const sync = () => syncControlState(dependent, Boolean(toggle.checked));
const active = Boolean(toggle.checked); toggle.addEventListener('change', sync);
syncControlState(samplingFieldset, active); sync();
if (samplingRow instanceof HTMLElement) {
samplingRow.hidden = !active;
}
};
toggle.addEventListener('change', syncSamplingVisibility);
syncSamplingVisibility();
return { return {
destroy: () => { destroy: () => {
toggle.removeEventListener('change', syncSamplingVisibility); toggle.removeEventListener('change', sync);
}, },
}; };
}; };