@spinnaker/core 2026.2.2 → 2026.3.0

package/src/banner/global/CreateEditBannerModal.spec.tsx

@@ -0,0 +1,255 @@
+// Copyright 2026 Harness, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import type { IBannerRecord } from './GlobalBannerService';
+import { GlobalBannerService } from './GlobalBannerService';
+import { CreateEditBannerModal, datetimeLocalToMs, msToDatetimeLocal } from './CreateEditBannerModal';
+
+// ---------------------------------------------------------------------------
+// Pure helper tests — no DOM required
+// ---------------------------------------------------------------------------
+
+describe('msToDatetimeLocal / datetimeLocalToMs', () => {
+  it('msToDatetimeLocal returns empty string for falsy input', () => {
+    expect(msToDatetimeLocal(0)).toBe('');
+    expect(msToDatetimeLocal(undefined)).toBe('');
+  });
+
+  it('round-trips a timestamp through both helpers', () => {
+    // Use a fixed local time that survives DST safely (noon)
+    const original = new Date(2026, 5, 1, 12, 30).getTime(); // Jun 1 2026 12:30 local
+    const localStr = msToDatetimeLocal(original);
+    expect(localStr).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/);
+    expect(datetimeLocalToMs(localStr)).toBe(original);
+  });
+
+  it('datetimeLocalToMs returns undefined for empty string', () => {
+    expect(datetimeLocalToMs('')).toBeUndefined();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Fixtures
+// ---------------------------------------------------------------------------
+
+const BANNER_FIXTURE: IBannerRecord = {
+  id: 'maint-2026',
+  message: '**Maintenance** in 30 min',
+  color: 'var(--color-text-on-dark)',
+  backgroundColor: 'var(--color-alert)',
+  enabled: true,
+  createdAt: 1000,
+  updatedAt: 2000,
+};
+
+function makeWrapper(props: Partial<React.ComponentProps<typeof CreateEditBannerModal>> = {}) {
+  const defaults = {
+    onClose: jasmine.createSpy('onClose'),
+    onSaved: jasmine.createSpy('onSaved'),
+  };
+  return shallow(<CreateEditBannerModal {...defaults} {...props} />);
+}
+
+// ---------------------------------------------------------------------------
+// Create mode
+// ---------------------------------------------------------------------------
+
+describe('<CreateEditBannerModal /> — create mode', () => {
+  it('renders "Create Banner" title', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.find('ModalTitle').prop('children')).toBe('Create Banner');
+  });
+
+  it('ID field is enabled', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.find('#banner-id').prop('disabled')).toBe(false);
+  });
+
+  it('submit button is disabled when ID is empty', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.find('button[type="submit"]').prop('disabled')).toBe(true);
+  });
+
+  it('submit button is disabled when message is empty', () => {
+    const wrapper = makeWrapper();
+    wrapper.find('#banner-id').simulate('change', { target: { value: 'my-banner' } });
+    expect(wrapper.find('button[type="submit"]').prop('disabled')).toBe(true);
+  });
+
+  it('submit button is enabled when ID and message are filled', () => {
+    const wrapper = makeWrapper();
+    wrapper.find('#banner-id').simulate('change', { target: { value: 'my-banner' } });
+    wrapper.find('#banner-message').simulate('change', { target: { value: 'Hello world' } });
+    expect(wrapper.find('button[type="submit"]').prop('disabled')).toBe(false);
+  });
+
+  it('shows an ID validation error for invalid characters', () => {
+    const wrapper = makeWrapper();
+    wrapper.find('#banner-id').simulate('change', { target: { value: 'bad id!' } });
+    expect(wrapper.find('#banner-id').closest('.form-group').find('.help-block').text()).toContain(
+      'letters, numbers, hyphens and underscores',
+    );
+  });
+
+  it('enabled checkbox defaults to checked', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.find('#banner-enabled').prop('checked')).toBe(true);
+  });
+
+  it('schedule section is collapsed by default', () => {
+    const wrapper = makeWrapper();
+    // The inner schedule content is only rendered when open
+    expect(wrapper.find('#banner-start').exists()).toBe(false);
+  });
+
+  it('clicking the schedule button expands the section', () => {
+    const wrapper = makeWrapper();
+    wrapper.find('button.btn-link').simulate('click');
+    expect(wrapper.find('#banner-start').exists()).toBe(true);
+  });
+
+  it('shows end-time validation error when end ≤ start', () => {
+    const wrapper = makeWrapper();
+    wrapper.find('button.btn-link').simulate('click'); // open schedule
+
+    wrapper.find('#banner-start').simulate('change', { target: { value: '2026-06-01T10:00' } });
+    wrapper.find('#banner-end').simulate('change', { target: { value: '2026-06-01T09:00' } });
+
+    expect(wrapper.find('.has-error .help-block').text()).toContain('End time must be after start time');
+  });
+
+  it('live preview appears once message is non-empty', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.find('.create-edit-banner-modal-preview').exists()).toBe(false);
+    wrapper.find('#banner-message').simulate('change', { target: { value: 'Hello' } });
+    expect(wrapper.find('.create-edit-banner-modal-preview').exists()).toBe(true);
+  });
+
+  it('calls GlobalBannerService.saveBanner and onSaved on successful submit', async () => {
+    const saved = { ...BANNER_FIXTURE };
+    spyOn(GlobalBannerService, 'saveBanner').and.returnValue(Promise.resolve(saved));
+    const onSaved = jasmine.createSpy('onSaved');
+
+    const wrapper = makeWrapper({ onSaved });
+    wrapper.find('#banner-id').simulate('change', { target: { value: 'maint-2026' } });
+    wrapper.find('#banner-message').simulate('change', { target: { value: 'Maintenance window' } });
+
+    await wrapper.find('form').prop('onSubmit')({ preventDefault: () => {} } as any);
+
+    expect(GlobalBannerService.saveBanner).toHaveBeenCalledWith(
+      jasmine.objectContaining({ id: 'maint-2026', message: 'Maintenance window' }),
+    );
+    expect(onSaved).toHaveBeenCalledWith(saved);
+  });
+
+  it('shows error alert when saveBanner rejects', async () => {
+    spyOn(GlobalBannerService, 'saveBanner').and.returnValue(Promise.reject({ data: { message: 'Server error' } }));
+
+    const wrapper = makeWrapper();
+    wrapper.find('#banner-id').simulate('change', { target: { value: 'x' } });
+    wrapper.find('#banner-message').simulate('change', { target: { value: 'msg' } });
+
+    await wrapper.find('form').prop('onSubmit')({ preventDefault: () => {} } as any);
+    wrapper.update();
+
+    expect(wrapper.find('.alert-danger').text()).toContain('Server error');
+  });
+
+  it('calls onClose when Cancel is clicked', () => {
+    const onClose = jasmine.createSpy('onClose');
+    const wrapper = makeWrapper({ onClose });
+    wrapper
+      .find('button[type="button"]')
+      .filterWhere((b) => b.text() === 'Cancel')
+      .simulate('click');
+    expect(onClose).toHaveBeenCalled();
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Edit mode
+// ---------------------------------------------------------------------------
+
+describe('<CreateEditBannerModal /> — edit mode', () => {
+  it('renders "Edit Banner: {id}" title', () => {
+    const wrapper = makeWrapper({ existing: BANNER_FIXTURE });
+    expect(wrapper.find('ModalTitle').prop('children')).toBe(`Edit Banner: ${BANNER_FIXTURE.id}`);
+  });
+
+  it('ID field is disabled', () => {
+    const wrapper = makeWrapper({ existing: BANNER_FIXTURE });
+    expect(wrapper.find('#banner-id').prop('disabled')).toBe(true);
+  });
+
+  it('pre-populates all text fields from existing banner', () => {
+    const wrapper = makeWrapper({ existing: BANNER_FIXTURE });
+    expect(wrapper.find('#banner-id').prop('value')).toBe(BANNER_FIXTURE.id);
+    expect(wrapper.find('#banner-message').prop('value')).toBe(BANNER_FIXTURE.message);
+  });
+
+  it('pre-populates enabled checkbox', () => {
+    const wrapper = makeWrapper({ existing: { ...BANNER_FIXTURE, enabled: false } });
+    expect(wrapper.find('#banner-enabled').prop('checked')).toBe(false);
+  });
+
+  it('schedule section auto-expands when existing banner has timestamps', () => {
+    const withSchedule: IBannerRecord = { ...BANNER_FIXTURE, startTimestamp: Date.now() + 60000 };
+    const wrapper = makeWrapper({ existing: withSchedule });
+    expect(wrapper.find('#banner-start').exists()).toBe(true);
+  });
+
+  it('submit button label is "Save" in edit mode', () => {
+    const wrapper = makeWrapper({ existing: BANNER_FIXTURE });
+    expect(wrapper.find('button[type="submit"]').text()).toBe('Save');
+  });
+
+  it('preserves existing createdAt when saving', async () => {
+    const saved = { ...BANNER_FIXTURE };
+    spyOn(GlobalBannerService, 'saveBanner').and.returnValue(Promise.resolve(saved));
+
+    const wrapper = makeWrapper({ existing: BANNER_FIXTURE });
+    await wrapper.find('form').prop('onSubmit')({ preventDefault: () => {} } as any);
+
+    const callArg: IBannerRecord = (GlobalBannerService.saveBanner as jasmine.Spy).calls.mostRecent().args[0];
+    expect(callArg.createdAt).toBe(BANNER_FIXTURE.createdAt);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Colour selects
+// ---------------------------------------------------------------------------
+
+describe('<CreateEditBannerModal /> colour controls', () => {
+  it('text-colour Select defaults to DEFAULT_COLOR', () => {
+    const wrapper = makeWrapper();
+    const selects = wrapper.find('Select');
+    expect(selects.at(0).prop('value')).toBe('var(--color-text-on-dark)');
+  });
+
+  it('background-colour Select defaults to DEFAULT_BG', () => {
+    const wrapper = makeWrapper();
+    const selects = wrapper.find('Select');
+    expect(selects.at(1).prop('value')).toBe('var(--color-alert)');
+  });
+
+  it('textarea is styled with the selected colour values', () => {
+    const wrapper = makeWrapper({ existing: BANNER_FIXTURE });
+    const style = wrapper.find('#banner-message').prop('style') as React.CSSProperties;
+    expect(style.color).toBe(BANNER_FIXTURE.color);
+    expect(style.backgroundColor).toBe(BANNER_FIXTURE.backgroundColor);
+  });
+});

package/src/banner/global/CreateEditBannerModal.tsx

@@ -0,0 +1,331 @@
+// Copyright 2026 Harness, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useState } from 'react';
+import { Modal } from 'react-bootstrap';
+import type { Option } from 'react-select';
+import Select from 'react-select';
+
+import type { IBannerRecord } from './GlobalBannerService';
+import { GlobalBannerService } from './GlobalBannerService';
+import {
+  bannerBackgroundColorOptions,
+  bannerTextColorOptions,
+} from '../../application/config/customBanner/customBannerColors';
+import { Markdown } from '../../presentation/Markdown';
+
+const MAX_ID_LENGTH = 64;
+const MAX_MESSAGE_LENGTH = 2000;
+const VALID_ID_RE = /^[A-Za-z0-9_-]+$/;
+
+// ---------------------------------------------------------------------------
+// Helpers: convert between Unix epoch ms and <input type="datetime-local">
+// ---------------------------------------------------------------------------
+
+/** Converts a Unix epoch ms value to a "YYYY-MM-DDTHH:mm" local string, or '' if falsy. */
+export function msToDatetimeLocal(ms?: number): string {
+  if (!ms) return '';
+  const d = new Date(ms);
+  // toISOString gives UTC; we want local wall-clock time for the input
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/** Converts a "YYYY-MM-DDTHH:mm" local string to Unix epoch ms, or undefined if empty. */
+export function datetimeLocalToMs(s: string): number | undefined {
+  if (!s) return undefined;
+  const ms = new Date(s).getTime();
+  return isNaN(ms) ? undefined : ms;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export interface ICreateEditBannerModalProps {
+  /** When provided the modal is in edit mode and fields are pre-populated. */
+  existing?: IBannerRecord;
+  onClose: () => void;
+  onSaved: (banner: IBannerRecord) => void;
+}
+
+const DEFAULT_COLOR = 'var(--color-text-on-dark)';
+const DEFAULT_BG = 'var(--color-alert)';
+const DEFAULT_FONT_SIZE = '14px';
+
+const fontSizeOptions: Array<Option<string>> = [
+  { label: '12px', value: '12px' },
+  { label: '14px', value: '14px' },
+  { label: '16px', value: '16px' },
+  { label: '18px', value: '18px' },
+  { label: '20px', value: '20px' },
+  { label: '24px', value: '24px' },
+];
+
+export function CreateEditBannerModal({ existing, onClose, onSaved }: ICreateEditBannerModalProps) {
+  const isEdit = !!existing;
+
+  const [id, setId] = useState(existing?.id ?? '');
+  const [message, setMessage] = useState(existing?.message ?? '');
+  const [color, setColor] = useState(existing?.color ?? DEFAULT_COLOR);
+  const [backgroundColor, setBackgroundColor] = useState(existing?.backgroundColor ?? DEFAULT_BG);
+  const [fontSize, setFontSize] = useState(existing?.fontSize ?? DEFAULT_FONT_SIZE);
+  const [enabled, setEnabled] = useState(existing?.enabled ?? true);
+  const [scheduleOpen, setScheduleOpen] = useState(!!(existing?.startTimestamp || existing?.endTimestamp));
+  const [startDatetime, setStartDatetime] = useState(msToDatetimeLocal(existing?.startTimestamp));
+  const [endDatetime, setEndDatetime] = useState(msToDatetimeLocal(existing?.endTimestamp));
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // ---------------------------------------------------------------------------
+  // Validation
+  // ---------------------------------------------------------------------------
+
+  const idTrimmed = id.trim();
+  const idInvalidChars = idTrimmed.length > 0 && !VALID_ID_RE.test(idTrimmed);
+  const idTooLong = idTrimmed.length > MAX_ID_LENGTH;
+  const messageTrimmed = message.trim();
+  const messageTooLong = messageTrimmed.length > MAX_MESSAGE_LENGTH;
+
+  const startMs = datetimeLocalToMs(startDatetime);
+  const endMs = datetimeLocalToMs(endDatetime);
+  const scheduleError = startMs && endMs && endMs <= startMs ? 'End time must be after start time' : null;
+
+  const isSubmittable =
+    idTrimmed && !idInvalidChars && !idTooLong && messageTrimmed && !messageTooLong && !scheduleError && !saving;
+
+  // ---------------------------------------------------------------------------
+  // Submit
+  // ---------------------------------------------------------------------------
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isSubmittable) return;
+    setError(null);
+    setSaving(true);
+
+    const record: IBannerRecord = {
+      ...(existing ?? {}),
+      id: idTrimmed,
+      message: messageTrimmed,
+      color,
+      backgroundColor,
+      fontSize,
+      enabled,
+      startTimestamp: startMs,
+      endTimestamp: endMs,
+    };
+
+    try {
+      const saved = await GlobalBannerService.saveBanner(record);
+      onSaved(saved);
+    } catch (e: any) {
+      setError(e?.data?.message ?? 'Failed to save banner');
+      setSaving(false);
+    }
+  };
+
+  // ---------------------------------------------------------------------------
+  // Colour swatch renderer (matches CustomBannerConfig pattern)
+  // ---------------------------------------------------------------------------
+
+  const colorOptionRenderer = (option: Option<string>) => (
+    <div className="custom-banner-config-color-option" style={{ backgroundColor: option.value }} />
+  );
+
+  // ---------------------------------------------------------------------------
+  // Render
+  // ---------------------------------------------------------------------------
+
+  return (
+    <Modal show onHide={onClose}>
+      <Modal.Header closeButton>
+        <Modal.Title>{isEdit ? `Edit Banner: ${existing.id}` : 'Create Banner'}</Modal.Title>
+      </Modal.Header>
+      <form onSubmit={handleSubmit}>
+        <Modal.Body>
+          {error && (
+            <div className="alert alert-danger" role="alert">
+              {error}
+            </div>
+          )}
+
+          {/* ID */}
+          <div className={`form-group${idInvalidChars || idTooLong ? ' has-error' : ''}`}>
+            <label htmlFor="banner-id">ID *</label>
+            <input
+              id="banner-id"
+              className="form-control"
+              type="text"
+              value={id}
+              onChange={(e) => setId(e.target.value)}
+              maxLength={MAX_ID_LENGTH}
+              required
+              autoFocus={!isEdit}
+              disabled={isEdit}
+              placeholder="e.g. maintenance-2026-06"
+            />
+            {idInvalidChars && (
+              <span className="help-block">ID may only contain letters, numbers, hyphens and underscores</span>
+            )}
+            {!idInvalidChars && (
+              <span className="help-block text-muted">
+                {isEdit ? 'ID cannot be changed after creation' : `${idTrimmed.length}/${MAX_ID_LENGTH} characters`}
+              </span>
+            )}
+          </div>
+
+          {/* Message */}
+          <div className={`form-group${messageTooLong ? ' has-error' : ''}`}>
+            <label htmlFor="banner-message">
+              Message *{' '}
+              <span className={`pull-right small${messageTooLong ? ' text-danger' : ' text-muted'}`}>
+                {messageTrimmed.length}/{MAX_MESSAGE_LENGTH}
+              </span>
+            </label>
+            <textarea
+              id="banner-message"
+              className="form-control"
+              rows={4}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              style={{ backgroundColor, color, fontSize }}
+              required
+            />
+            <span className="help-block text-muted" style={{ marginTop: 2 }}>
+              Markdown is supported
+            </span>
+            {messageTrimmed && (
+              <div>
+                <strong>Preview</strong>
+                <div
+                  className="create-edit-banner-modal-preview"
+                  style={{ backgroundColor, color, fontSize, padding: '6px 10px', borderRadius: 3, marginTop: 4 }}
+                >
+                  <Markdown message={messageTrimmed} />
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Colours + font size */}
+          <div className="row">
+            <div className="col-xs-4 form-group">
+              <label>Text colour</label>
+              <Select
+                clearable={false}
+                options={bannerTextColorOptions}
+                value={color}
+                onChange={(option: Option<string>) => setColor(option.value)}
+                optionRenderer={colorOptionRenderer}
+                valueRenderer={colorOptionRenderer}
+              />
+            </div>
+            <div className="col-xs-4 form-group">
+              <label>Background colour</label>
+              <Select
+                clearable={false}
+                options={bannerBackgroundColorOptions}
+                value={backgroundColor}
+                onChange={(option: Option<string>) => setBackgroundColor(option.value)}
+                optionRenderer={colorOptionRenderer}
+                valueRenderer={colorOptionRenderer}
+              />
+            </div>
+            <div className="col-xs-4 form-group">
+              <label>Font size</label>
+              <Select
+                clearable={false}
+                options={fontSizeOptions}
+                value={fontSize}
+                onChange={(option: Option<string>) => setFontSize(option.value)}
+              />
+            </div>
+          </div>
+
+          {/* Enabled */}
+          <div className="form-group">
+            <div className="checkbox">
+              <label>
+                <input
+                  id="banner-enabled"
+                  type="checkbox"
+                  checked={enabled}
+                  onChange={(e) => setEnabled(e.target.checked)}
+                />
+                {' Enabled'}
+              </label>
+            </div>
+            {startMs && !enabled && (
+              <span className="help-block text-warning" style={{ marginTop: 2 }}>
+                Banner is disabled. It will not activate at the scheduled start time unless you also check Enabled.
+              </span>
+            )}
+          </div>
+
+          {/* Schedule section */}
+          <div className="form-group">
+            <button
+              type="button"
+              className="btn btn-link"
+              style={{ paddingLeft: 0 }}
+              onClick={() => setScheduleOpen(!scheduleOpen)}
+            >
+              <span className={`glyphicon glyphicon-chevron-${scheduleOpen ? 'down' : 'right'}`} />
+              {' Schedule activation window (optional)'}
+            </button>
+
+            {scheduleOpen && (
+              <div style={{ paddingLeft: 12, borderLeft: '3px solid #eee', marginTop: 8 }}>
+                <div className="form-group" style={{ marginBottom: 8 }}>
+                  <label htmlFor="banner-start">Activate at</label>
+                  <input
+                    id="banner-start"
+                    className="form-control"
+                    type="datetime-local"
+                    value={startDatetime}
+                    onChange={(e) => setStartDatetime(e.target.value)}
+                  />
+                </div>
+                <div className={`form-group${scheduleError ? ' has-error' : ''}`} style={{ marginBottom: 4 }}>
+                  <label htmlFor="banner-end">Deactivate at</label>
+                  <input
+                    id="banner-end"
+                    className="form-control"
+                    type="datetime-local"
+                    value={endDatetime}
+                    onChange={(e) => setEndDatetime(e.target.value)}
+                  />
+                  {scheduleError && <span className="help-block">{scheduleError}</span>}
+                </div>
+                <p className="text-muted" style={{ fontSize: 12, marginBottom: 0 }}>
+                  Timestamps are stored as UTC milliseconds. The backend re-evaluates activation every 60 s.
+                </p>
+              </div>
+            )}
+          </div>
+        </Modal.Body>
+
+        <Modal.Footer>
+          <button type="button" className="btn btn-default" onClick={onClose} disabled={saving}>
+            Cancel
+          </button>
+          <button type="submit" className="btn btn-primary" disabled={!isSubmittable}>
+            {saving ? 'Saving…' : isEdit ? 'Save' : 'Create Banner'}
+          </button>
+        </Modal.Footer>
+      </form>
+    </Modal>
+  );
+}

package/src/banner/global/DeleteBannerButton.tsx

@@ -0,0 +1,75 @@
+// Copyright 2026 Harness, Inc.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useState } from 'react';
+import { Modal } from 'react-bootstrap';
+
+import { GlobalBannerService } from './GlobalBannerService';
+
+export interface IDeleteBannerButtonProps {
+  bannerId: string;
+  onDeleted: () => void;
+}
+
+export function DeleteBannerButton({ bannerId, onDeleted }: IDeleteBannerButtonProps) {
+  const [showModal, setShowModal] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleDelete = () => {
+    setDeleting(true);
+    setError(null);
+    GlobalBannerService.deleteBanner(bannerId)
+      .then(() => {
+        setShowModal(false);
+        onDeleted();
+      })
+      .catch(() => {
+        setDeleting(false);
+        setError('Failed to delete banner. Please try again.');
+      });
+  };
+
+  return (
+    <>
+      <button className="btn btn-default btn-xs" onClick={() => setShowModal(true)}>
+        Delete
+      </button>
+
+      <Modal show={showModal} onHide={() => !deleting && setShowModal(false)} bsSize="small">
+        <Modal.Header closeButton={!deleting}>
+          <Modal.Title>Delete banner</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {error && (
+            <div className="alert alert-danger" role="alert" style={{ marginBottom: 12 }}>
+              {error}
+            </div>
+          )}
+          <p>
+            Are you sure you want to delete banner <strong>{bannerId}</strong>?
+          </p>
+        </Modal.Body>
+        <Modal.Footer>
+          <button className="btn btn-default" onClick={() => setShowModal(false)} disabled={deleting}>
+            Cancel
+          </button>
+          <button className="btn btn-danger" onClick={handleDelete} disabled={deleting}>
+            {deleting ? 'Deleting…' : 'Delete'}
+          </button>
+        </Modal.Footer>
+      </Modal>
+    </>
+  );
+}