feat(updates): add passive release update indicator (#845)

Author: mcharles-square

client/src/protoFleet/components/AppLayout/AppLayout.test.tsx

@@ -13,6 +13,7 @@ const mockUseWindowDimensions = vi.fn();
 const mockUseReactiveLocalStorage = vi.fn();
 const mockUseCurtailmentPillData = vi.fn();
 const mockUseSchedulePillData = vi.fn();
+const mockUseUpdateIndicator = vi.fn();
 
 vi.mock("@/protoFleet/api/ScheduleApiProvider", () => ({
   ScheduleApiProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
@@ -42,6 +43,10 @@ vi.mock("@/protoFleet/components/PageHeader/useCurtailmentPillData", () => ({
   useCurtailmentPillData: () => mockUseCurtailmentPillData(),
 }));
 
+vi.mock("@/protoFleet/features/updates/useUpdateIndicator", () => ({
+  useUpdateIndicator: (options: { enabled?: boolean }) => mockUseUpdateIndicator(options),
+}));
+
 vi.mock("@/shared/hooks/useWindowDimensions", () => ({
   useWindowDimensions: () => mockUseWindowDimensions(),
 }));
@@ -99,6 +104,7 @@ describe("AppLayout", () => {
     mockUseReactiveLocalStorage.mockReturnValue([false, vi.fn()]);
     mockUseCurtailmentPillData.mockReturnValue({ activeEvent: null });
     mockUseSchedulePillData.mockReturnValue(createSchedulePillData());
+    mockUseUpdateIndicator.mockReturnValue(null);
     vi.mocked(useHasPermission).mockReturnValue(true);
   });
 
@@ -223,6 +229,39 @@ describe("AppLayout", () => {
     expect(screen.getByText("Body content").parentElement).toHaveClass("phone:top-[calc(theme(spacing.1)*12+40px)]");
   });
 
+  it("uses the three-widget phone content offset when the update indicator makes four widgets visible", () => {
+    mockUseReactiveLocalStorage.mockReturnValue([true, vi.fn()]);
+    mockUseCurtailmentPillData.mockReturnValue({ activeEvent: activeCurtailmentEvent });
+    mockUseSchedulePillData.mockReturnValue(
+      createSchedulePillData({
+        pillSchedule: createPillSchedule(),
+      }),
+    );
+    mockUseUpdateIndicator.mockReturnValue({ version: "v1.3.0", onClick: vi.fn() });
+
+    render(
+      <MemoryRouter>
+        <AppLayout>
+          <div>Body content</div>
+        </AppLayout>
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByText("Body content").parentElement).toHaveClass("phone:top-[calc(theme(spacing.1)*12+120px)]");
+  });
+
+  it("disables update polling when the route hides the shell header", () => {
+    render(
+      <MemoryRouter>
+        <AppLayout hideShellHeader>
+          <div>Body content</div>
+        </AppLayout>
+      </MemoryRouter>,
+    );
+
+    expect(mockUseUpdateIndicator).toHaveBeenCalledWith({ enabled: false });
+  });
+
   it("keeps the base phone content offset when the only curtailment widget fits inline", () => {
     mockUseCurtailmentPillData.mockReturnValue({ activeEvent: activeCurtailmentEvent });
 

client/src/protoFleet/components/AppLayout/AppLayout.tsx

@@ -16,6 +16,7 @@ import {
 import { useCurtailmentPillData } from "@/protoFleet/components/PageHeader/useCurtailmentPillData";
 import { useSchedulePillData } from "@/protoFleet/components/PageHeader/useSchedulePillData";
 import { primaryNavItems } from "@/protoFleet/config/navItems";
+import { useUpdateIndicator } from "@/protoFleet/features/updates/useUpdateIndicator";
 import { usePageBackground } from "@/protoFleet/hooks/usePageBackground";
 import { useHasPermission } from "@/protoFleet/store";
 import { Menu } from "@/shared/assets/icons";
@@ -34,11 +35,16 @@ const AppLayoutContent = ({ children, hideShellHeader = false }: Props) => {
   const [dismissedSetup] = useReactiveLocalStorage<boolean>("completeSetupDismissed");
   const schedulePillData = useSchedulePillData();
   const { activeEvent: activeCurtailmentEvent } = useCurtailmentPillData();
+  // Release discovery is an enhancement of the normal Fleet header. Focused
+  // detail routes deliberately skip the poll along with the hidden header.
+  const updatePill = useUpdateIndicator({ enabled: !hideShellHeader });
   const hasDismissedSetup = Boolean(dismissedSetup);
   const canReadCurtailment = useHasPermission("curtailment:read");
   const hasVisibleCurtailmentPill = activeCurtailmentEvent !== null && canReadCurtailment;
+  const hasVisibleUpdatePill = updatePill !== null;
   const headerWidgetCount = getVisibleHeaderWidgetCount({
     hasDismissedSetup,
+    hasVisibleUpdatePill,
     hasVisibleCurtailmentPill,
     hasVisibleSchedules: schedulePillData.hasVisibleSchedules,
   });
@@ -94,6 +100,7 @@ const AppLayoutContent = ({ children, hideShellHeader = false }: Props) => {
             isMenuOpen={isMenuOpen}
             openMenu={() => setIsMenuOpen(true)}
             schedulePillData={schedulePillData}
+            updatePill={updatePill}
           />
         </div>
       )}

client/src/protoFleet/components/PageHeader/PageHeader.stories.tsx

@@ -236,6 +236,36 @@ export const PageHeader = () => {
   );
 };
 
+export const UpdatePillWithSetup = () => {
+  return (
+    <SitesContext.Provider value={storySitesContext}>
+      <div className="bg-surface-base" style={{ minWidth: "960px" }}>
+        <PageHeaderComponent
+          schedulePillData={emptySchedulePillData}
+          updatePill={{ version: "v1.3.0", onClick: action("open update settings") }}
+        />
+      </div>
+    </SitesContext.Provider>
+  );
+};
+UpdatePillWithSetup.beforeEach = () => {
+  const previousValue = localStorage.getItem("completeSetupDismissed");
+  localStorage.setItem("completeSetupDismissed", "true");
+  window.dispatchEvent(
+    new CustomEvent("localStorageChange", {
+      detail: { key: "completeSetupDismissed", value: true },
+    }),
+  );
+
+  return () => {
+    if (previousValue === null) {
+      localStorage.removeItem("completeSetupDismissed");
+    } else {
+      localStorage.setItem("completeSetupDismissed", previousValue);
+    }
+  };
+};
+
 export const SchedulePill = () => {
   return (
     <StoryFrame>

client/src/protoFleet/components/PageHeader/PageHeader.test.tsx

@@ -206,6 +206,28 @@ describe("PageHeader", () => {
     expect(screen.queryByTestId("phone-header-widget-row")).not.toBeInTheDocument();
   });
 
+  it("places the update pill to the left of Continue setup on desktop", () => {
+    mockUseWindowDimensions.mockReturnValue({
+      isPhone: false,
+      isTablet: false,
+    });
+    mockUseReactiveLocalStorage.mockReturnValue([true, vi.fn()]);
+
+    render(
+      <MemoryRouter>
+        <PageHeader schedulePillData={createSchedulePillData()} updatePill={{ version: "v1.3.0", onClick: vi.fn() }} />
+      </MemoryRouter>,
+    );
+
+    const widgets = screen.getByTestId("page-header-desktop-widgets");
+    const updateButton = within(widgets).getByRole("button", { name: "Open update settings for v1.3.0" });
+    const setupButton = within(widgets).getByRole("button", { name: "Continue setup" });
+
+    expect(updateButton).toHaveTextContent("Update available");
+    expect(updateButton.querySelector(".bg-intent-info-fill")).not.toBeNull();
+    expect(updateButton.compareDocumentPosition(setupButton) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+
   it("keeps the phone widget row hidden when neither setup nor schedules need space", () => {
     render(
       <MemoryRouter>

client/src/protoFleet/components/PageHeader/PageHeader.tsx

@@ -29,6 +29,12 @@ interface PageHeaderProps {
   isMenuOpen?: boolean;
   openMenu?: () => void;
   schedulePillData: UseSchedulePillDataResult;
+  updatePill?: UpdatePillData | null;
+}
+
+export interface UpdatePillData {
+  onClick: () => void;
+  version: string;
 }
 
 interface HeaderWidgetsProps {
@@ -41,11 +47,12 @@ interface HeaderWidgetsProps {
   schedulePillData: UseSchedulePillDataResult;
   stacked?: boolean;
   testId?: string;
+  updatePill?: UpdatePillData | null;
   widgets: HeaderWidgetKind[];
 }
 
 const headerWidgetEnabled = true;
-type HeaderWidgetKind = "curtailment" | "schedule" | "setup";
+type HeaderWidgetKind = "curtailment" | "schedule" | "update" | "setup";
 
 function HeaderWidgets({
   activeCurtailmentEvent,
@@ -57,6 +64,7 @@ function HeaderWidgets({
   schedulePillData,
   stacked = false,
   testId,
+  updatePill,
   widgets,
 }: HeaderWidgetsProps): ReactElement {
   const { pillSchedule, sections, pendingScheduleId, onToggleScheduleStatus } = schedulePillData;
@@ -92,6 +100,21 @@ function HeaderWidgets({
                 onToggleScheduleStatus={onToggleScheduleStatus}
               />
             ) : null;
+          case "update":
+            return updatePill ? (
+              <Button
+                key={widget}
+                ariaLabel={`Open update settings for ${updatePill.version}`}
+                className="max-w-full min-w-0 overflow-hidden"
+                prefixIcon={<span className="h-2.5 w-2.5 rounded-full bg-intent-info-fill" />}
+                variant={variants.secondary}
+                size={sizes.compact}
+                onClick={updatePill.onClick}
+                testId="update-available-pill"
+              >
+                <span className="block min-w-0 truncate">Update available</span>
+              </Button>
+            ) : null;
           case "setup":
             return dismissedSetup ? (
               <Button
@@ -115,6 +138,7 @@ function PageHeader({
   isMenuOpen,
   openMenu,
   schedulePillData,
+  updatePill = null,
 }: PageHeaderProps): ReactElement {
   const { isPhone, isTablet } = useWindowDimensions();
   const { bgClass } = usePageBackground();
@@ -146,15 +170,19 @@ function PageHeader({
     dismissedSetup: hasDismissedSetup,
     onContinueSetup: handleCompleteSetup,
     schedulePillData,
+    updatePill,
   };
   const hasVisibleCurtailmentPill = activeCurtailmentEvent !== null && canReadCurtailment;
+  const hasVisibleUpdatePill = updatePill !== null;
   const headerWidgetKinds: HeaderWidgetKind[] = [
     ...(hasVisibleCurtailmentPill ? (["curtailment"] as const) : []),
     ...(schedulePillData.hasVisibleSchedules ? (["schedule"] as const) : []),
+    ...(hasVisibleUpdatePill ? (["update"] as const) : []),
     ...(hasDismissedSetup ? (["setup"] as const) : []),
   ];
   const headerWidgetCount = getVisibleHeaderWidgetCount({
     hasDismissedSetup,
+    hasVisibleUpdatePill,
     hasVisibleCurtailmentPill,
     hasVisibleSchedules: schedulePillData.hasVisibleSchedules,
   });

client/src/protoFleet/components/PageHeader/headerWidgetLayout.ts

@@ -1,5 +1,6 @@
 interface HeaderWidgetVisibility {
   hasDismissedSetup: boolean;
+  hasVisibleUpdatePill?: boolean;
   hasVisibleCurtailmentPill: boolean;
   hasVisibleSchedules: boolean;
 }
@@ -14,10 +15,16 @@ export const PHONE_HEADER_WIDGET_STACK_THREE_HEIGHT_CLASS = "h-[120px]";
 
 export function getVisibleHeaderWidgetCount({
   hasDismissedSetup,
+  hasVisibleUpdatePill = false,
   hasVisibleCurtailmentPill,
   hasVisibleSchedules,
 }: HeaderWidgetVisibility): number {
-  return Number(hasVisibleCurtailmentPill) + Number(hasVisibleSchedules) + Number(hasDismissedSetup);
+  return (
+    Number(hasVisibleCurtailmentPill) +
+    Number(hasVisibleSchedules) +
+    Number(hasVisibleUpdatePill) +
+    Number(hasDismissedSetup)
+  );
 }
 
 export function shouldStackPhoneHeaderWidgets(widgetCount: number): boolean {