Add version warning banner to web console

web/src/components/warning-banner/index.tsx

@@ -0,0 +1,52 @@
+import { FC, memo } from "react";
+import { AppBar, makeStyles } from "@material-ui/core";
+import CloseIcon from "@material-ui/icons/Close";
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    zIndex: theme.zIndex.drawer + 1,
+    height: "30px",
+    backgroundColor: "#403f4c",
+  },
+  content: {
+    paddingTop: "2px",
+    textAlign: "center",
+    fontSize: "1rem",
+  },
+  highlight: {
+    backgroundColor: "yellow",
+  },
+  close: {
+    position: "absolute",
+    top: "2px",
+    right: "2px",
+  },
+}));
+
+export interface WarningBannerProps {
+  onClose: () => void;
+}
+
+export const WarningBanner: FC<WarningBannerProps> = memo(
+  function BannerWarning({ onClose }) {
+    const classes = useStyles();
+    const releaseNoteURL = `https://github.com/pipe-cd/pipecd/releases/tag/${process.env.PIPECD_VERSION}`;
+
+    return (
+      <AppBar position="static" className={classes.container}>
+        <div className={classes.content}>
+          Version {process.env.PIPECD_VERSION} is available! Find all{" "}
+          <a
+            href={releaseNoteURL}
+            target="_blank"
+            rel="noreferrer"
+            className={classes.highlight}
+          >
+            details on this release note here.
+          </a>
+        </div>
+        <CloseIcon className={classes.close} onClick={onClose} />
+      </AppBar>
+    );
+  }
+);

web/src/routes.tsx

@@ -1,6 +1,6 @@
 import loadable from "@loadable/component";
 import { EntityId } from "@reduxjs/toolkit";
-import { FC, useEffect } from "react";
+import { FC, useEffect, useState } from "react";
 import {
   Redirect,
   Route,
@@ -9,8 +9,9 @@ import {
   RouteComponentProps,
 } from "react-router-dom";
 import { ApplicationIndexPage } from "~/components/applications-page";
+import { WarningBanner } from "~/components/warning-banner";
 import { DeploymentIndexPage } from "~/components/deployments-page";
-import { DeploymentChainsIndexPage } from "./components/deployment-chains-page";
+import { DeploymentChainsIndexPage } from "~/components/deployment-chains-page";
 import { Header } from "~/components/header";
 import { LoginPage } from "~/components/login-page";
 import { Toasts } from "~/components/toasts";
@@ -95,6 +96,8 @@ const useCommandsStatusChecking = (): void => {
 };
 
 const REDIRECT_PATH_KEY = "redirect_path";
+const BANNER_VERSION_KEY = "banner_version";
+
 export const Routes: FC = () => {
   const dispatch = useAppDispatch();
   const me = useAppSelector((state) => state.me);
@@ -114,6 +117,10 @@ export const Routes: FC = () => {
     }
   }, [location, me, onLoadProject]);
 
+  const [showWarningBanner, setShowWarningBaner] = useState(
+    localStorage.getItem(BANNER_VERSION_KEY) !== `${process.env.PIPECD_VERSION}`
+  );
+
   if (me === null) {
     return (
       <>
@@ -147,8 +154,16 @@ export const Routes: FC = () => {
     );
   }
 
+  const handleCloseWarningBanner = (): void => {
+    localStorage.setItem(BANNER_VERSION_KEY, `${process.env.PIPECD_VERSION}`);
+    setShowWarningBaner(false);
+  };
+
   return (
     <>
+      {showWarningBanner && (
+        <WarningBanner onClose={handleCloseWarningBanner} />
+      )}
       <Header />
       <Switch>
         <Route