diff --git a/package.json b/package.json index 07faa4e1..33b22931 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pc-datacatalog", - "version": "2025.4.2", + "version": "2025.4.3", "private": true, "proxy": "http://api:7071/", "dependencies": { diff --git a/src/components/Header/Header.index.tsx b/src/components/Header/Header.index.tsx index 501f4872..62d6dbc6 100644 --- a/src/components/Header/Header.index.tsx +++ b/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 }) => { + ); }; diff --git a/src/components/Header/components/PlanetaryComputerProAnnouncement.tsx b/src/components/Header/components/PlanetaryComputerProAnnouncement.tsx new file mode 100644 index 00000000..8059f0e5 --- /dev/null +++ b/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 ( + + Announcing Microsoft Planetary Computer Pro - Bring the power of the Planetary + Computer to your private geospatial data. + + Click here to learn more + + + ); +} diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index 9c9d4bf9..f94458f9 100644 --- a/src/components/Header/styles.ts +++ b/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", +});