feat(updates): add release update notification

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 mockUseUpdateNotification = vi.fn();
 
 vi.mock("@/protoFleet/api/ScheduleApiProvider", () => ({
   ScheduleApiProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
@@ -42,6 +43,15 @@ vi.mock("@/protoFleet/components/PageHeader/useCurtailmentPillData", () => ({
   useCurtailmentPillData: () => mockUseCurtailmentPillData(),
 }));
 
+vi.mock("@/protoFleet/features/updates/useUpdateNotification", () => ({
+  useUpdateNotification: () => mockUseUpdateNotification(),
+}));
+
+vi.mock("@/protoFleet/features/updates/components/UpdateNotificationModal", () => ({
+  __esModule: true,
+  default: ({ open }: { open: boolean }) => (open ? <div>Update modal</div> : null),
+}));
+
 vi.mock("@/shared/hooks/useWindowDimensions", () => ({
   useWindowDimensions: () => mockUseWindowDimensions(),
 }));
@@ -99,6 +109,13 @@ describe("AppLayout", () => {
     mockUseReactiveLocalStorage.mockReturnValue([false, vi.fn()]);
     mockUseCurtailmentPillData.mockReturnValue({ activeEvent: null });
     mockUseSchedulePillData.mockReturnValue(createSchedulePillData());
+    mockUseUpdateNotification.mockReturnValue({
+      closeModal: vi.fn(),
+      installCommand: "",
+      modalOpen: false,
+      release: undefined,
+      updatePill: null,
+    });
     vi.mocked(useHasPermission).mockReturnValue(true);
   });
 
@@ -223,6 +240,32 @@ describe("AppLayout", () => {
     expect(screen.getByText("Body content").parentElement).toHaveClass("phone:top-[calc(theme(spacing.1)*12+40px)]");
   });
 
+  it("includes the dismissed update pill in phone content offset calculations", () => {
+    mockUseReactiveLocalStorage.mockReturnValue([true, vi.fn()]);
+    mockUseSchedulePillData.mockReturnValue(
+      createSchedulePillData({
+        pillSchedule: createPillSchedule(),
+      }),
+    );
+    mockUseUpdateNotification.mockReturnValue({
+      closeModal: vi.fn(),
+      installCommand: "install",
+      modalOpen: false,
+      release: { version: "v1.3.0" },
+      updatePill: { 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+80px)]");
+  });
+
   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,8 @@ import {
 import { useCurtailmentPillData } from "@/protoFleet/components/PageHeader/useCurtailmentPillData";
 import { useSchedulePillData } from "@/protoFleet/components/PageHeader/useSchedulePillData";
 import { primaryNavItems } from "@/protoFleet/config/navItems";
+import UpdateNotificationModal from "@/protoFleet/features/updates/components/UpdateNotificationModal";
+import { useUpdateNotification } from "@/protoFleet/features/updates/useUpdateNotification";
 import { usePageBackground } from "@/protoFleet/hooks/usePageBackground";
 import { useHasPermission } from "@/protoFleet/store";
 import { Menu } from "@/shared/assets/icons";
@@ -34,11 +36,14 @@ const AppLayoutContent = ({ children, hideShellHeader = false }: Props) => {
   const [dismissedSetup] = useReactiveLocalStorage<boolean>("completeSetupDismissed");
   const schedulePillData = useSchedulePillData();
   const { activeEvent: activeCurtailmentEvent } = useCurtailmentPillData();
+  const updateNotification = useUpdateNotification();
   const hasDismissedSetup = Boolean(dismissedSetup);
   const canReadCurtailment = useHasPermission("curtailment:read");
   const hasVisibleCurtailmentPill = activeCurtailmentEvent !== null && canReadCurtailment;
+  const hasVisibleUpdatePill = updateNotification.updatePill !== null;
   const headerWidgetCount = getVisibleHeaderWidgetCount({
     hasDismissedSetup,
+    hasVisibleUpdatePill,
     hasVisibleCurtailmentPill,
     hasVisibleSchedules: schedulePillData.hasVisibleSchedules,
   });
@@ -94,10 +99,18 @@ const AppLayoutContent = ({ children, hideShellHeader = false }: Props) => {
             isMenuOpen={isMenuOpen}
             openMenu={() => setIsMenuOpen(true)}
             schedulePillData={schedulePillData}
+            updatePill={updateNotification.updatePill}
           />
         </div>
       )}
 
+      <UpdateNotificationModal
+        open={updateNotification.modalOpen}
+        release={updateNotification.release}
+        installCommand={updateNotification.installCommand}
+        onDismiss={updateNotification.closeModal}
+      />
+
       <div
         ref={scrollRef}
         className={clsx(

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

@@ -1,16 +1,50 @@
 import { ElementType } from "react";
 import { MemoryRouter } from "react-router-dom";
 
+import type { StoryFn } from "@storybook/react";
 import { action } from "storybook/actions";
 import NavigationMenuComponent from ".";
 import { primaryNavItems } from "@/protoFleet/config/navItems";
+import { useFleetStore } from "@/protoFleet/store";
 
-export const NavigationMenu = () => {
+export const NavigationMenu: StoryFn = () => {
   return <NavigationMenuComponent items={primaryNavItems} isVisible={true} closeMenu={action("close menu")} />;
 };
 
+// Nav entries are permission-gated; seed the full set so the story shows the
+// complete menu. site:read additionally makes scopable links site-scoped, as
+// they are for a typical operator.
+const navPermissions = primaryNavItems.flatMap((item) => [
+  ...(item.requiredPermission ? [item.requiredPermission] : []),
+  ...(item.requiredAnyPermission ?? []).flatMap((requirement) =>
+    Array.isArray(requirement) ? requirement : [requirement],
+  ),
+]);
+
+const seedNavPermissions = () => {
+  const previousPermissions = useFleetStore.getState().auth.permissions;
+  useFleetStore.setState((state) => ({
+    auth: { ...state.auth, permissions: [...new Set([...previousPermissions, ...navPermissions, "site:read"])] },
+  }));
+  return () => useFleetStore.setState((state) => ({ auth: { ...state.auth, permissions: [...previousPermissions] } }));
+};
+NavigationMenu.beforeEach = seedNavPermissions;
+
 export default {
   title: "Proto Fleet/NavigationMenu",
+  // Item visibility is permission-driven, so pin every story to the
+  // unauthenticated baseline instead of whatever permissions an interrupted
+  // story left persisted in the iframe's localStorage; seeded stories layer
+  // on top of this in their own beforeEach (story hooks run after meta's).
+  beforeEach: () => {
+    const previousPermissions = useFleetStore.getState().auth.permissions;
+    useFleetStore.setState((state) => ({
+      auth: { ...state.auth, permissions: state.auth.isAuthenticated ? state.auth.permissions : [] },
+    }));
+    return () => {
+      useFleetStore.setState((state) => ({ auth: { ...state.auth, permissions: [...previousPermissions] } }));
+    };
+  },
   parameters: {
     withRouter: false,
   },

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 modal") }}
+        />
+      </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 details 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 details 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 {

client/src/protoFleet/features/settings/components/Updates.test.tsx

@@ -4,6 +4,7 @@ import Updates from "./Updates";
 import { updatesClient } from "@/protoFleet/api/clients";
 import type { GetUpdateStatusResponse } from "@/protoFleet/api/generated/updates/v1/updates_pb";
 import { ReleaseChannel } from "@/protoFleet/api/generated/updates/v1/updates_pb";
+import { DISMISSED_UPDATE_TAG_KEY } from "@/protoFleet/features/updates/constants";
 import { useHasPermission } from "@/protoFleet/store";
 import { pushToast } from "@/shared/features/toaster";
 import { copyToClipboard } from "@/shared/utils/utility";
@@ -45,7 +46,6 @@ vi.mock("@/shared/features/toaster", () => ({
 
 const INSTALL_COMMAND = "curl -fsSL https://fleet.example.com/install.sh | sh -s -- v1.3.0";
 const RELEASE_NOTES_URL = "https://github.com/block/proto-fleet/releases/tag/v1.3.0";
-const DISMISSED_UPDATE_TAG_KEY = "dismissedUpdateTag";
 
 const buildStatus = (overrides?: Partial<GetUpdateStatusResponse>): GetUpdateStatusResponse =>
   ({