@spinnaker/core 2026.2.2 → 2026.3.0

package/src/banner/global/GlobalBannerAdminPage.tsx

@@ -0,0 +1,138 @@
+// 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, { useCallback, useEffect, useState } from 'react';
+
+import { CreateEditBannerModal } from './CreateEditBannerModal';
+import { DeleteBannerButton } from './DeleteBannerButton';
+import type { IBannerRecord } from './GlobalBannerService';
+import { GlobalBannerService } from './GlobalBannerService';
+
+export function GlobalBannerAdminPage() {
+  const [banners, setBanners] = useState<IBannerRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [showCreate, setShowCreate] = useState(false);
+  const [editing, setEditing] = useState<IBannerRecord | null>(null);
+
+  const load = useCallback(() => {
+    setLoading(true);
+    GlobalBannerService.getAllBanners()
+      .then((data) => {
+        setBanners(data);
+        setLoading(false);
+      })
+      .catch(() => {
+        setError('Failed to load banners');
+        setLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  const handleSaved = () => {
+    setShowCreate(false);
+    setEditing(null);
+    load();
+  };
+
+  const formatTs = (ms?: number) => (ms ? new Date(ms).toLocaleString() : <span className="text-muted">—</span>);
+
+  return (
+    <div className="container">
+      {showCreate && <CreateEditBannerModal onClose={() => setShowCreate(false)} onSaved={handleSaved} />}
+      {editing && <CreateEditBannerModal existing={editing} onClose={() => setEditing(null)} onSaved={handleSaved} />}
+
+      <div className="content-section">
+        <div className="flex-container-h baseline" style={{ marginBottom: 16 }}>
+          <h3 style={{ margin: 0, flex: 1 }}>Global Banners</h3>
+          <button className="btn btn-primary btn-sm" onClick={() => setShowCreate(true)}>
+            <span className="glyphicon glyphicon-plus" /> New Banner
+          </button>
+        </div>
+
+        {loading && (
+          <div className="text-center" style={{ padding: 40 }}>
+            <span className="glyphicon glyphicon-asterisk glyphicon-spinning" /> Loading…
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="alert alert-danger">
+            {error}{' '}
+            <button className="btn btn-default btn-xs" onClick={load}>
+              Retry
+            </button>
+          </div>
+        )}
+
+        {!loading && !error && banners.length === 0 && (
+          <div className="text-center text-muted" style={{ padding: 40 }}>
+            No banners configured. Click <strong>New Banner</strong> to create one.
+          </div>
+        )}
+
+        {!loading && !error && banners.length > 0 && (
+          <div className="table-responsive">
+            <table className="table table-condensed table-bordered">
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Message</th>
+                  <th>Enabled</th>
+                  <th>Start</th>
+                  <th>End</th>
+                  <th />
+                </tr>
+              </thead>
+              <tbody>
+                {banners.map((b) => (
+                  <tr key={b.id}>
+                    <td>
+                      <code>{b.id}</code>
+                    </td>
+                    <td style={{ maxWidth: 320, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                      {b.message}
+                    </td>
+                    <td>
+                      {b.enabled ? (
+                        <span className="label label-success">enabled</span>
+                      ) : (
+                        <span className="label label-default">disabled</span>
+                      )}
+                    </td>
+                    <td>{formatTs(b.startTimestamp)}</td>
+                    <td>{formatTs(b.endTimestamp)}</td>
+                    <td style={{ whiteSpace: 'nowrap' }}>
+                      <button
+                        className="btn btn-default btn-xs"
+                        style={{ marginRight: 4 }}
+                        onClick={() => setEditing(b)}
+                      >
+                        Edit
+                      </button>
+                      <DeleteBannerButton bannerId={b.id} onDeleted={load} />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/banner/global/GlobalBannerAdminPageContainer.tsx

@@ -0,0 +1,62 @@
+// 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, { useEffect, useState } from 'react';
+
+import { GlobalBannerAdminPage } from './GlobalBannerAdminPage';
+import { REST } from '../../api/ApiService';
+
+interface IAuthUserResponse {
+  isAdmin?: boolean;
+}
+
+export const GlobalBannerAdminPageContainer = () => {
+  const [isAdmin, setIsAdmin] = useState<boolean | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    REST('/auth/user')
+      .get<IAuthUserResponse>()
+      .then((user: IAuthUserResponse) => {
+        setIsAdmin(user.isAdmin ?? false);
+        setLoading(false);
+      })
+      .catch(() => {
+        setIsAdmin(false);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="container">
+        <h3 className="text-center">
+          <span className="glyphicon glyphicon-asterisk glyphicon-spinning" /> Loading…
+        </h3>
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="container">
+        <div className="alert alert-warning">
+          You do not have permission to manage global banners. Contact a Spinnaker administrator.
+        </div>
+      </div>
+    );
+  }
+
+  return <GlobalBannerAdminPage />;
+};

package/src/banner/global/GlobalBannerDisplay.tsx

@@ -0,0 +1,73 @@
+// 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, { useEffect, useState } from 'react';
+
+import type { IBannerRecord } from './GlobalBannerService';
+import { GlobalBannerService } from './GlobalBannerService';
+import { Markdown } from '../../presentation/Markdown';
+
+/** How often (ms) to poll GET /banners. */
+const POLL_INTERVAL_MS = 60_000;
+
+/**
+ * Renders a stack of active banners fetched from Gate.
+ * Mounts above the main nav; silently hides itself when there are no active banners
+ * or when the endpoint is unreachable.
+ */
+export function GlobalBannerDisplay() {
+  const [banners, setBanners] = useState<IBannerRecord[]>([]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetch = () => {
+      GlobalBannerService.getActiveBanners()
+        .then((data) => {
+          if (!cancelled) setBanners(data);
+        })
+        .catch(() => {
+          // Silently swallow — a missing banner is not a fatal UI error.
+        });
+    };
+
+    fetch();
+    const id = setInterval(fetch, POLL_INTERVAL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(id);
+    };
+  }, []);
+
+  if (banners.length === 0) return null;
+
+  return (
+    <div className="global-banner-display">
+      {banners.map((banner) => (
+        <div
+          key={banner.id}
+          className="global-banner-display-item"
+          style={{
+            backgroundColor: banner.backgroundColor,
+            color: banner.color,
+            fontSize: banner.fontSize,
+            textAlign: 'center',
+          }}
+        >
+          <Markdown message={banner.message} />
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/banner/global/GlobalBannerService.spec.ts

@@ -0,0 +1,131 @@
+// 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 { mockHttpClient } from '../../api/mock/jasmine';
+import type { IBannerRecord } from './GlobalBannerService';
+import { GlobalBannerService } from './GlobalBannerService';
+
+const BANNER: IBannerRecord = {
+  id: 'maint-2026',
+  message: '**Maintenance** window',
+  color: 'var(--color-text-on-dark)',
+  backgroundColor: 'var(--color-alert)',
+  enabled: true,
+  createdAt: 1000,
+  updatedAt: 2000,
+};
+
+describe('GlobalBannerService', () => {
+  describe('getActiveBanners()', () => {
+    it('GETs /banners and returns the array', async () => {
+      const http = mockHttpClient();
+      http.expectGET(/\/banners$/).respond(200, [BANNER]);
+
+      let result: IBannerRecord[] | undefined;
+      GlobalBannerService.getActiveBanners().then((r) => (result = r));
+
+      await http.flush();
+      expect(result).toEqual([BANNER]);
+    });
+
+    it('returns an empty array when there are no active banners', async () => {
+      const http = mockHttpClient();
+      http.expectGET(/\/banners$/).respond(200, []);
+
+      let result: IBannerRecord[] | undefined;
+      GlobalBannerService.getActiveBanners().then((r) => (result = r));
+
+      await http.flush();
+      expect(result).toEqual([]);
+    });
+  });
+
+  describe('getAllBanners()', () => {
+    it('GETs /banners/all', async () => {
+      const http = mockHttpClient();
+      http.expectGET(/\/banners\/all$/).respond(200, [BANNER]);
+
+      let result: IBannerRecord[] | undefined;
+      GlobalBannerService.getAllBanners().then((r) => (result = r));
+
+      await http.flush();
+      expect(result).toEqual([BANNER]);
+    });
+  });
+
+  describe('getBannerById()', () => {
+    it('GETs /banners/{id}', async () => {
+      const http = mockHttpClient();
+      http.expectGET(/\/banners\/maint-2026$/).respond(200, BANNER);
+
+      let result: IBannerRecord | undefined;
+      GlobalBannerService.getBannerById('maint-2026').then((r) => (result = r));
+
+      await http.flush();
+      expect(result).toEqual(BANNER);
+    });
+  });
+
+  describe('saveBanner()', () => {
+    it('PUTs /banners with the record body', async () => {
+      const http = mockHttpClient();
+      http.expectPUT(/\/banners$/).respond(200, BANNER);
+
+      let result: IBannerRecord | undefined;
+      GlobalBannerService.saveBanner(BANNER).then((r) => (result = r));
+
+      await http.flush();
+      expect(result).toEqual(BANNER);
+    });
+  });
+
+  describe('deleteBanner()', () => {
+    it('DELETEs /banners/{id}', async () => {
+      const http = mockHttpClient();
+      http.expectDELETE(/\/banners\/maint-2026$/).respond(204, null);
+
+      let resolved = false;
+      GlobalBannerService.deleteBanner('maint-2026').then(() => (resolved = true));
+
+      await http.flush();
+      expect(resolved).toBe(true);
+    });
+  });
+
+  describe('deleteAllBanners()', () => {
+    it('DELETEs /banners', async () => {
+      const http = mockHttpClient();
+      http.expectDELETE(/\/banners$/).respond(204, null);
+
+      let resolved = false;
+      GlobalBannerService.deleteAllBanners().then(() => (resolved = true));
+
+      await http.flush();
+      expect(resolved).toBe(true);
+    });
+  });
+
+  describe('forceRefresh()', () => {
+    it('POSTs /banners/refresh', async () => {
+      const http = mockHttpClient();
+      http.expectPOST(/\/banners\/refresh$/).respond(200, null);
+
+      let resolved = false;
+      GlobalBannerService.forceRefresh().then(() => (resolved = true));
+
+      await http.flush();
+      expect(resolved).toBe(true);
+    });
+  });
+});

package/src/banner/global/GlobalBannerService.ts

@@ -0,0 +1,65 @@
+// 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 { REST } from '../../api/ApiService';
+
+export interface IBannerRecord {
+  id: string;
+  message: string;
+  /** CSS colour value for the text. */
+  color?: string;
+  /** CSS colour value for the background. */
+  backgroundColor?: string;
+  /** CSS font-size value (e.g. '14px'). */
+  fontSize?: string;
+  enabled: boolean;
+  createdAt?: number;
+  updatedAt?: number;
+  /** Unix epoch ms. When set, the banner only activates after this time. */
+  startTimestamp?: number;
+  /** Unix epoch ms. When set, the banner deactivates after this time. */
+  endTimestamp?: number;
+}
+
+export const GlobalBannerService = {
+  /** Returns only active (enabled + within time window) banners. Public endpoint. */
+  getActiveBanners(): Promise<IBannerRecord[]> {
+    return REST('/banners').get();
+  },
+
+  /** Returns all banners regardless of enabled/time state. Admin endpoint. */
+  getAllBanners(): Promise<IBannerRecord[]> {
+    return REST('/banners/all').get();
+  },
+
+  getBannerById(id: string): Promise<IBannerRecord> {
+    return REST('/banners').path(id).get();
+  },
+
+  saveBanner(record: IBannerRecord): Promise<IBannerRecord> {
+    return REST('/banners').put(record);
+  },
+
+  deleteBanner(id: string): Promise<void> {
+    return REST('/banners').path(id).delete();
+  },
+
+  deleteAllBanners(): Promise<void> {
+    return REST('/banners').delete();
+  },
+
+  forceRefresh(): Promise<void> {
+    return REST('/banners/refresh').post();
+  },
+};

package/src/banner/global/globalbanner.states.ts

@@ -0,0 +1,37 @@
+// 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 { GlobalBannerAdminPageContainer } from './GlobalBannerAdminPageContainer';
+import { registerRootState } from '../../navigation/rootState.registration';
+import type { INestedState } from '../../navigation/state.provider';
+
+registerRootState((stateConfigProvider) => {
+  const globalBanners: INestedState = {
+    name: 'globalBanners',
+    url: '/global-banners',
+    views: {
+      'main@': {
+        component: GlobalBannerAdminPageContainer,
+        $type: 'react',
+      },
+    },
+    data: {
+      pageTitleMain: {
+        label: 'Global Banners',
+      },
+    },
+  };
+
+  stateConfigProvider.addToRootState(globalBanners);
+});

package/src/banner/global/index.ts

@@ -0,0 +1,20 @@
+// 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.
+
+export * from './CreateEditBannerModal';
+export * from './DeleteBannerButton';
+export * from './GlobalBannerAdminPage';
+export * from './GlobalBannerAdminPageContainer';
+export * from './GlobalBannerDisplay';
+export * from './GlobalBannerService';