Planetary Computer Pro announcement banner

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pc-datacatalog",
-  "version": "2025.4.2",
+  "version": "2025.4.3",
   "private": true,
   "proxy": "http://api:7071/",
   "dependencies": {

src/components/Header/Header.index.tsx

@@ -2,6 +2,7 @@ import { headerStyle } from "./styles";
 import { gridContentStyle, offGridContentStyle } from "styles";
 import { HeaderBar } from "./Header.Bar";
 import { HeaderOverflow } from "./Header.Overflow";
+import { PlanetaryComputerProAnnouncement } from "./components/PlanetaryComputerProAnnouncement";
 
 const Header = ({ onGrid = true }) => {
   const navClass = onGrid ? gridContentStyle : offGridContentStyle;
@@ -12,6 +13,7 @@ const Header = ({ onGrid = true }) => {
         <HeaderBar />
         <HeaderOverflow />
       </nav>
+      <PlanetaryComputerProAnnouncement />
     </header>
   );
 };

src/components/Header/components/PlanetaryComputerProAnnouncement.tsx

@@ -0,0 +1,37 @@
+import { MessageBar, MessageBarType, Link } from "@fluentui/react";
+import { useState, useEffect } from "react";
+import { messageBarStyle } from "../styles";
+
+const sessionStorageKey = "pcProMessageDismissed";
+
+export function PlanetaryComputerProAnnouncement() {
+  const [isDismissed, setIsDismissed] = useState(false);
+  useEffect(() => {
+    const dismissed = sessionStorage.getItem(sessionStorageKey);
+    if (dismissed === "true") {
+      setIsDismissed(true);
+    }
+  }, []);
+  const onDismiss = () => {
+    sessionStorage.setItem(sessionStorageKey, "true");
+    setIsDismissed(true);
+  };
+  if (isDismissed) {
+    return null;
+  }
+  return (
+    <MessageBar
+      messageBarType={MessageBarType.success}
+      isMultiline={true}
+      dismissButtonAriaLabel="Close"
+      onDismiss={onDismiss}
+      className={messageBarStyle}
+    >
+      Announcing Microsoft Planetary Computer Pro - Bring the power of the Planetary
+      Computer to your private geospatial data.
+      <Link href="https://aka.ms/planetarycomputerpro" target="_blank" underline>
+        Click here to learn more
+      </Link>
+    </MessageBar>
+  );
+}

src/components/Header/styles.ts

@@ -74,3 +74,7 @@ export const breakStyle = mergeStyles({
 export const rightAligned = mergeStyles({
   marginLeft: "auto !important",
 });
+
+export const messageBarStyle = mergeStyles({
+  margin: "10px 0",
+});