🪟 🎉 Add less often appearing update notification (#7211)

airbyte-webapp/src/hooks/services/useBuildUpdateCheck.ts

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { useIntl } from "react-intl";
-import { fromEvent, interval, merge, throttleTime } from "rxjs";
+import { useEffectOnce } from "react-use";
+import { filter, fromEvent, interval, merge } from "rxjs";
 
 import { useAppMonitoringService } from "./AppMonitoringService";
 import { useNotificationService } from "./Notification";
@@ -9,8 +10,10 @@ interface BuildInfo {
   build: string;
 }
 
+const LAST_UPDATE_CHECK_KEY = "lastUpdateCheckTimestamp";
+
 const INTERVAL = 60_000;
-const MINIMUM_WAIT_BEFORE_REFETCH = 10_000;
+const MINIMUM_WAIT_BEFORE_REFETCH = 3 * 24 * 60 * 60 * 1000; // 3 days
 
 /**
  * This hook sets up a check to /buildInfo.json, which is generated by the build system on every build
@@ -22,12 +25,24 @@ export const useBuildUpdateCheck = () => {
   const { registerNotification } = useNotificationService();
   const { trackError } = useAppMonitoringService();
 
+  useEffectOnce(() => {
+    // Set the last update check to the timestamp when the page is loaded, so we won't check for another x days from now
+    window.sessionStorage.setItem(LAST_UPDATE_CHECK_KEY, String(Date.now()));
+  });
+
   useEffect(() => {
     // Trigger the check every ${INTERVAL} milliseconds or whenever the window regains focus again
     const subscription = merge(interval(INTERVAL), fromEvent(window, "focus"))
-      // Throttle it to maximum once every 10 seconds
-      .pipe(throttleTime(MINIMUM_WAIT_BEFORE_REFETCH))
+      .pipe(
+        filter(() => {
+          // Only run actual check if the previous check was more than MINIMUM_WAIT_BEFORE_REFETCH ago
+          const lastUpdateCheck = window.sessionStorage.getItem(LAST_UPDATE_CHECK_KEY);
+          return !lastUpdateCheck || Date.now() - Number(lastUpdateCheck) > MINIMUM_WAIT_BEFORE_REFETCH;
+        })
+      )
       .subscribe(async () => {
+        window.sessionStorage.setItem(LAST_UPDATE_CHECK_KEY, String(Date.now()));
+
         try {
           // Fetch the buildInfo.json file without using any browser cache
           const buildInfo: BuildInfo = await fetch("/buildInfo.json", { cache: "no-store" }).then((resp) =>

airbyte-webapp/src/packages/cloud/cloudRoutes.tsx

@@ -5,6 +5,7 @@ import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
 import LoadingPage from "components/LoadingPage";
 
 import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "core/services/analytics/useAnalyticsService";
+import { useBuildUpdateCheck } from "hooks/services/useBuildUpdateCheck";
 import { useQuery } from "hooks/useQuery";
 import { useAuthService } from "packages/cloud/services/auth/AuthService";
 import ConnectorBuilderRoutes from "pages/connectorBuilder/ConnectorBuilderRoutes";
@@ -129,6 +130,8 @@ export const Routing: React.FC = () => {
   const workspaceId = useCurrentWorkspaceId();
   const { pathname } = useLocation();
 
+  useBuildUpdateCheck();
+
   // invalidate everything in the workspace scope when the workspaceId changes
   useInvalidateAllWorkspaceScopeOnChange(workspaceId);
 

airbyte-webapp/src/pages/routes.tsx

@@ -5,6 +5,7 @@ import { ApiErrorBoundary } from "components/common/ApiErrorBoundary";
 
 import { useAnalyticsIdentifyUser, useAnalyticsRegisterValues } from "core/services/analytics";
 import { useApiHealthPoll } from "hooks/services/Health";
+import { useBuildUpdateCheck } from "hooks/services/useBuildUpdateCheck";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 import { useInvalidateAllWorkspaceScopeOnChange, useListWorkspaces } from "services/workspaces/WorkspacesService";
 import { CompleteOauthRequest } from "views/CompleteOauthRequest";
@@ -112,6 +113,8 @@ const RoutingWithWorkspace: React.FC<{ element?: JSX.Element }> = ({ element })
 };
 
 export const Routing: React.FC = () => {
+  useBuildUpdateCheck();
+
   // TODO: Remove this after it is verified there are no problems with current routing
   const OldRoutes = useMemo(
     () =>