refactor: Refactor instance notice banner to remove level and icon handling

This commit is contained in:
Nicolas
2026-02-19 18:51:25 +01:00
parent dacd1941f1
commit 824d846f79
5 changed files with 7 additions and 94 deletions
-26
View File
@@ -15,23 +15,10 @@ function createPreviewDOM() {
<div class="page-content admin config">
<form class="ui form" action="/-/admin/config/instance_notice" method="post">
<textarea name="message">Initial message</textarea>
<select name="level">
<option value="info" selected>Info</option>
<option value="success">Success</option>
<option value="warning">Warning</option>
<option value="danger">Danger</option>
</select>
</form>
<div id="instance-notice-preview" class="ui info message">
<div id="instance-notice-preview-icon"></div>
<div id="instance-notice-preview-content"></div>
</div>
<div id="instance-notice-preview-icons" class="tw-hidden">
<span data-level="info"><svg data-icon="info"></svg></span>
<span data-level="success"><svg data-icon="success"></svg></span>
<span data-level="warning"><svg data-icon="warning"></svg></span>
<span data-level="danger"><svg data-icon="warning"></svg></span>
</div>
</div>
`;
}
@@ -68,19 +55,6 @@ describe('Admin Instance Notice Preview', () => {
expect(previewContent.innerHTML).toContain('Rendered message');
});
test('updates preview class and icon when level changes', () => {
initAdminConfigs();
const levelSelect = document.querySelector<HTMLSelectElement>('select[name="level"]')!;
const preview = document.querySelector<HTMLDivElement>('#instance-notice-preview')!;
const previewIcon = document.querySelector<HTMLDivElement>('#instance-notice-preview-icon')!;
levelSelect.value = 'danger';
levelSelect.dispatchEvent(new Event('change'));
expect(preview.classList.contains('negative')).toBe(true);
expect(previewIcon.innerHTML).toContain('data-icon="warning"');
});
test('queues a second render while first request is in flight and re-renders with latest text', async () => {
let firstResolve: ((value: Response) => void) | undefined;
const firstPending = new Promise<Response>((resolve) => {
+1 -26
View File
@@ -9,30 +9,8 @@ function initInstanceNoticePreview(elAdminConfig: HTMLDivElement): void {
if (!form) return;
const inputMessage = form.querySelector<HTMLTextAreaElement>('textarea[name="message"]');
const selectLevel = form.querySelector<HTMLSelectElement>('select[name="level"]');
const preview = elAdminConfig.querySelector<HTMLDivElement>('#instance-notice-preview');
const previewIcon = elAdminConfig.querySelector<HTMLDivElement>('#instance-notice-preview-icon');
const previewContent = elAdminConfig.querySelector<HTMLDivElement>('#instance-notice-preview-content');
const iconContainer = elAdminConfig.querySelector<HTMLDivElement>('#instance-notice-preview-icons');
if (!inputMessage || !selectLevel || !preview || !previewIcon || !previewContent || !iconContainer) return;
const iconHTMLByLevel = new Map<string, string>();
for (const el of iconContainer.querySelectorAll<HTMLElement>('[data-level]')) {
iconHTMLByLevel.set(el.getAttribute('data-level')!, el.innerHTML);
}
const classByLevel: Record<string, string> = {
info: 'info',
success: 'positive',
warning: 'warning',
danger: 'negative',
};
const updateStyle = () => {
preview.classList.remove('info', 'positive', 'warning', 'negative');
preview.classList.add(classByLevel[selectLevel.value] || 'info');
previewIcon.innerHTML = iconHTMLByLevel.get(selectLevel.value) || iconHTMLByLevel.get('info') || '';
};
if (!inputMessage || !previewContent) return;
let renderRequesting = false;
let pendingRender = false;
@@ -65,9 +43,6 @@ function initInstanceNoticePreview(elAdminConfig: HTMLDivElement): void {
inputMessage.addEventListener('input', () => {
renderPreviewMarkdown();
});
selectLevel.addEventListener('change', updateStyle);
updateStyle();
}
export function initAdminConfigs(): void {