# All files / src/components/notifications UpdateBanner.tsx

100% Statements 4/4
100% Branches 3/3
100% Functions 1/1
100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45

    10x
    2x

    8x

    8x

     import type { JSX } from "react";
    import { Callout } from "./Callout.js";

    /** Props for the UpdateBanner component. */
    interface UpdateBannerProps {
      /** The currently running Grackle version. */
      currentVersion: string;
      /** The latest version available on npm. */
      latestVersion: string;
      /** Whether an update is available. */
      updateAvailable: boolean;
      /** Whether the server is running in a Docker container. */
      isDocker: boolean;
    }

    /**
     * Dismissible info banner shown when a newer Grackle version is available.
     *
     * Renders nothing when `updateAvailable` is false. Shows context-appropriate
     * upgrade instructions for Docker vs npm users.
     */
    export function UpdateBanner({
      currentVersion,
      latestVersion,
      updateAvailable,
      isDocker,
    }: UpdateBannerProps): JSX.Element {
      if (!updateAvailable) {
        return <></>;
      }

      const command: string = isDocker
        ? `docker pull ghcr.io/nick-pape/grackle:latest && docker restart grackle`
        : `npm install -g @grackle-ai/cli@${latestVersion}`;

      return (
        <div data-testid="update-banner">
          <Callout variant="info" dismissible>
            <strong>Grackle v{latestVersion}</strong> is available (you have v{currentVersion}). Run:{" "}
            <code>{command}</code>
          </Callout>
        </div>
      );
    }