From e861e0199ccc2c2197901194e587ca65cfdec32f Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:17:54 +0200
Subject: [PATCH] =?UTF-8?q?refactor(alerts/ui):=20wizard=20banners=20?=
 =?UTF-8?q?=E2=86=92=20DS=20Alert,=20step=20body=20=E2=86=92=20section=20c?=
 =?UTF-8?q?ard?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promote banner and prefill warnings now render as DS Alert components
(info / warning variants). Step body wraps in sectionStyles.section
for card affordance matching other forms in the app.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../Alerts/RuleEditor/RuleEditorWizard.tsx    | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/ui/src/pages/Alerts/RuleEditor/RuleEditorWizard.tsx b/ui/src/pages/Alerts/RuleEditor/RuleEditorWizard.tsx
index d33f916b..6e8ca575 100644
--- a/ui/src/pages/Alerts/RuleEditor/RuleEditorWizard.tsx
+++ b/ui/src/pages/Alerts/RuleEditor/RuleEditorWizard.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useNavigate, useParams, useSearchParams } from 'react-router';
-import { Button, SectionHeader, useToast } from '@cameleer/design-system';
+import { Alert, Button, SectionHeader, useToast } from '@cameleer/design-system';
 import { PageLoader } from '../../../components/PageLoader';
 import {
   useAlertRule,
@@ -24,6 +24,7 @@ import { prefillFromPromotion, type PrefillWarning } from './promotion-prefill';
 import { useCatalog } from '../../../api/queries/catalog';
 import { useOutboundConnections } from '../../../api/queries/admin/outboundConnections';
 import { useSelectedEnv } from '../../../api/queries/alertMeta';
+import sectionStyles from '../../../styles/section-card.module.css';
 import css from './wizard.module.css';
 
 const STEP_LABELS: Record<WizardStep, string> = {
@@ -148,15 +149,16 @@ export default function RuleEditorWizard() {
     <div className={css.wizard}>
       <div className={css.header}>
         <SectionHeader>{isEdit ? `Edit rule: ${form.name}` : 'New alert rule'}</SectionHeader>
-        {promoteFrom && (
-          <div className={css.promoteBanner}>
-            Promoting from <code>{promoteFrom}</code> &mdash; review and adjust, then save.
-          </div>
-        )}
       </div>
+
+      {promoteFrom && (
+        <Alert variant="info" title="Promoting a rule">
+          Promoting from <code>{promoteFrom}</code> — review and adjust, then save.
+        </Alert>
+      )}
+
       {warnings.length > 0 && (
-        <div className={css.promoteBanner}>
-          <strong>Review before saving:</strong>
+        <Alert variant="warning" title="Review before saving">
           <ul style={{ margin: '4px 0 0 16px', padding: 0 }}>
             {warnings.map((w) => (
               <li key={w.field}>
@@ -164,12 +166,14 @@ export default function RuleEditorWizard() {
               </li>
             ))}
           </ul>
-        </div>
+        </Alert>
       )}
+
       <nav className={css.steps}>
         {WIZARD_STEPS.map((s, i) => (
           <button
             key={s}
+            type="button"
             className={`${css.step} ${step === s ? css.stepActive : ''} ${i < idx ? css.stepDone : ''}`}
             onClick={() => setStep(s)}
           >
@@ -177,7 +181,9 @@ export default function RuleEditorWizard() {
           </button>
         ))}
       </nav>
-      <div className={css.stepBody}>{body}</div>
+
+      <section className={`${sectionStyles.section} ${css.stepBody}`}>{body}</section>
+
       <div className={css.footer}>
         <Button variant="secondary" onClick={onBack} disabled={idx === 0}>
           Back