Add upgrade motivation banner

frontend/javascripts/maintenance_banner.tsx

@@ -1,10 +1,12 @@
 import {
+  getBuildInfo,
   listCurrentAndUpcomingMaintenances,
   updateNovelUserExperienceInfos,
 } from "admin/admin_rest_api";
-import { Alert } from "antd";
+import { Alert, Button, Space } from "antd";
 import FormattedDate from "components/formatted_date";
-import { useInterval } from "libs/react_helpers";
+import dayjs from "dayjs";
+import { useFetch, useInterval } from "libs/react_helpers";
 import _ from "lodash";
 import constants from "oxalis/constants";
 import { setNavbarHeightAction } from "oxalis/model/actions/ui_actions";
@@ -17,12 +19,13 @@ import { MaintenanceInfo } from "types/api_flow_types";
 
 const INITIAL_DELAY = 5000;
 const INTERVAL_TO_FETCH_MAINTENANCES_MS = 60000; // 1min
+const UPGRADE_BANNER_LOCAL_STORAGE_KEY = "upgradeBannerWasClickedAway";
 
 const BANNER_STYLE: React.CSSProperties = {
   position: "absolute",
   top: 0,
   left: 0,
-  height: constants.MAINTENANCE_BANNER_HEIGHT,
+  height: constants.BANNER_HEIGHT,
 };
 
 function setNavbarHeight(newNavbarHeight: number) {
@@ -116,7 +119,7 @@ export function MaintenanceBanner() {
 
   useEffect(() => {
     if (currentMaintenance || closestUpcomingMaintenance) {
-      setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT + constants.MAINTENANCE_BANNER_HEIGHT);
+      setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT + constants.BANNER_HEIGHT);
     }
 
     if (currentMaintenance == null && closestUpcomingMaintenance == null) {
@@ -144,3 +147,85 @@ export function MaintenanceBanner() {
 
   return null;
 }
+
+export function UpgradeVersionBanner() {
+  const white = "var(--ant-color-text-primary)";
+  const blue = "var(--ant-color-primary)";
+  const UPGRADE_BANNER_STYLE: React.CSSProperties = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    height: constants.BANNER_HEIGHT,
+    textAlign: "center",
+    backgroundColor: blue,
+    color: white,
+    fontSize: "medium",
+  };
+  const customParseFormat = require("dayjs/plugin/customParseFormat");
+  dayjs.extend(customParseFormat);
+  const currentDate = dayjs();
+
+  const isVersionOutdated = useFetch(
+    async () => {
+      const buildInfo = await getBuildInfo();
+      const commitDateWithoutWeekday = buildInfo.webknossos.commitDate.replace(
+        /(Mon)|(Tue)|(Wed)|(Thu)|(Fri)|(Sat)|(Sun)\w*/,
+        "",
+      );
+      const lastCommitDate = dayjs(commitDateWithoutWeekday, "MMM DD HH:mm:ss YYYY ZZ"); // todo two digit dates? test more once time tracking is merged
+      const needsUpdate = currentDate.diff(lastCommitDate, "month") >= 6;
+      return needsUpdate;
+    },
+    false,
+    [],
+  );
+
+  const getShouldBannerBeShown = () => {
+    if (!isVersionOutdated) return false;
+    const lastTimeBannerWasClickedAway = localStorage.getItem(UPGRADE_BANNER_LOCAL_STORAGE_KEY);
+    if (lastTimeBannerWasClickedAway == null) return true;
+    const parsedDate = dayjs(lastTimeBannerWasClickedAway);
+    return parsedDate.diff(currentDate, "days") >= 3;
+  };
+
+  const shouldBannerBeShown = getShouldBannerBeShown();
+
+  useEffect(() => {
+    if (shouldBannerBeShown) {
+      setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT + constants.BANNER_HEIGHT);
+    } else {
+      setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT);
+    }
+  }, [shouldBannerBeShown]);
+
+  return shouldBannerBeShown ? (
+    <Alert
+      className="upgrade-banner"
+      message={
+        <Space size="middle">
+          <Space size="small">
+            You are using an old version of WEBKNOSSOS. Switch to
+            <b style={{ marginInline: -2 }}>webknossos.org</b> for automatic updates and exclusive
+            features!
+          </Space>
+          <Button
+            className="upgrade-banner-button"
+            href="https://webknossos.org/self-hosted-upgrade"
+            size="small"
+          >
+            Learn more
+          </Button>
+        </Space>
+      }
+      banner
+      style={UPGRADE_BANNER_STYLE}
+      closable
+      onClose={() => {
+        localStorage.setItem(UPGRADE_BANNER_LOCAL_STORAGE_KEY, dayjs().toISOString());
+        setNavbarHeight(constants.DEFAULT_NAVBAR_HEIGHT);
+      }}
+      type="info"
+      showIcon={false}
+    />
+  ) : null;
+}

frontend/javascripts/navbar.tsx

@@ -10,6 +10,7 @@ import {
   Tag,
   Input,
   InputRef,
+  ConfigProvider,
 } from "antd";
 import _ from "lodash";
 import {
@@ -25,7 +26,7 @@ import {
 import { useHistory, Link } from "react-router-dom";
 
 import classnames from "classnames";
-import { connect } from "react-redux";
+import { connect, useSelector } from "react-redux";
 import React, { useState, useEffect, useRef } from "react";
 import Toast from "libs/toast";
 import type {
@@ -61,8 +62,8 @@ import { PricingEnforcedSpan } from "components/pricing_enforcers";
 import { ItemType, MenuItemType, SubMenuType } from "antd/lib/menu/hooks/useItems";
 import { MenuClickEventHandler } from "rc-menu/lib/interface";
 import constants from "oxalis/constants";
-import { MaintenanceBanner } from "maintenance_banner";
-import { getSystemColorTheme } from "theme";
+import { MaintenanceBanner, UpgradeVersionBanner } from "maintenance_banner";
+import { getAntdTheme, getSystemColorTheme } from "theme";
 
 const { Header } = Layout;
 
@@ -482,8 +483,7 @@ function NotificationIcon({
         position: "relative",
         display: "flex",
         marginRight: 12,
-        paddingTop:
-          navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.MAINTENANCE_BANNER_HEIGHT : 0,
+        paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0,
       }}
     >
       <Tooltip title="See what's new in WEBKNOSSOS" placement="bottomLeft">
@@ -610,8 +610,7 @@ function LoggedInAvatar({
       selectedKeys={["prevent highlighting of this menu"]}
       mode="horizontal"
       style={{
-        paddingTop:
-          navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.MAINTENANCE_BANNER_HEIGHT : 0,
+        paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0,
         lineHeight: `${constants.DEFAULT_NAVBAR_HEIGHT}px`,
       }}
       theme="dark"
@@ -701,6 +700,9 @@ function LoggedInAvatar({
 }
 
 function AnonymousAvatar() {
+  const navbarHeight = useSelector(
+    (state: OxalisState) => state.uiInformation.navbarHeight - constants.DEFAULT_NAVBAR_HEIGHT,
+  );
   return (
     <Popover
       placement="bottomRight"
@@ -722,6 +724,7 @@ function AnonymousAvatar() {
         icon={<UserOutlined />}
         style={{
           marginLeft: 8,
+          marginTop: navbarHeight,
         }}
       />
     </Popover>
@@ -899,15 +902,15 @@ function Navbar({
       })}
     >
       <MaintenanceBanner />
+      <ConfigProvider theme={{ ...getAntdTheme("light") }}>
+        <UpgradeVersionBanner />
+      </ConfigProvider>
       <Menu
         mode="horizontal"
         selectedKeys={selectedKeys}
         onOpenChange={(openKeys) => setIsHelpMenuOpen(openKeys.includes(HELP_MENU_KEY))}
         style={{
-          paddingTop:
-            navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT
-              ? constants.MAINTENANCE_BANNER_HEIGHT
-              : 0,
+          paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0,
           lineHeight: `${constants.DEFAULT_NAVBAR_HEIGHT}px`,
         }}
         theme="dark"
@@ -930,10 +933,7 @@ function Navbar({
         style={{
           flex: 1,
           display: "flex",
-          paddingTop:
-            navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT
-              ? constants.MAINTENANCE_BANNER_HEIGHT
-              : 0,
+          paddingTop: navbarHeight > constants.DEFAULT_NAVBAR_HEIGHT ? constants.BANNER_HEIGHT : 0,
         }}
       />
 

frontend/javascripts/oxalis/constants.ts

@@ -313,7 +313,7 @@ const Constants = {
   BUCKET_SIZE: 32 ** 3,
   VIEWPORT_WIDTH,
   DEFAULT_NAVBAR_HEIGHT: 48,
-  MAINTENANCE_BANNER_HEIGHT: 38,
+  BANNER_HEIGHT: 38,
   // For reference, the area of a large brush size (let's say, 300px) corresponds to
   // pi * 300 ^ 2 == 282690.
   // We multiply this with 5, since the labeling is not done

frontend/stylesheets/trace_view/_tracing_view.less

@@ -321,6 +321,14 @@ img.keyboard-mouse-icon:first-child {
   color: rgba(255, 255, 255, 0.67);
   z-index: 1000;
 
+  .upgrade-banner{
+    .ant-alert-close-icon {
+      .anticon, .anticon-close {
+        color: var(--ant-color-primary-bg)
+      }
+    }
+  }
+
   &.statusbar-footer {
     left: 0px;
     bottom: 0px;
@@ -357,11 +365,19 @@ img.keyboard-mouse-icon:first-child {
   .ant-input,
   .ant-input-number,
   .ant-radio-button-wrapper,
-  .ant-select > .ant-select-selector {
+  .ant-select > .ant-select-selector{
     background-color: @dark-bg !important;
     color: @dark-fg !important;
     border-color: @dark-border;
 
+    &.upgrade-banner-button{
+        background-color: var(--ant-button-primary-color) !important;
+        color: var(--ant-color-primary) !important;
+        border-color: var(--ant-button-primary-color);
+        display: flex;
+        align-items: center;
+      }
+
     &:hover {
       border-color: var(--color-blue-zircon) !important;
       z-index: 1 !important;
@@ -383,6 +399,7 @@ img.keyboard-mouse-icon:first-child {
         background-color: @dark-border !important;
       }
     }
+
   }
 
   .ant-btn[disabled],