[WEB-5290] feat: selfhosted check (#8227)

* feat: add in common py

* fix: update marketing consent screen based on is self managed flag

* improvement: enhance ImagePickerPopover with dynamic tab options based on Unsplash configuration

* refactor: product updates modal to include changelog

* [WEB-5290] feat: implement fallback for product updates changelog with loading state and error handling

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>

apps/web/ce/components/global/index.ts

@@ -1,2 +1 @@
 export * from "./version-number";
-export * from "./product-updates-header";

apps/web/ce/components/global/product-updates/changelog.tsx

@@ -0,0 +1,83 @@
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react";
+// hooks
+import { Loader } from "@plane/ui";
+import { ProductUpdatesFallback } from "@/components/global/product-updates/fallback";
+import { useInstance } from "@/hooks/store/use-instance";
+
+export const ProductUpdatesChangelog = observer(function ProductUpdatesChangelog() {
+  // refs
+  const isLoadingRef = useRef(true);
+  // states
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const changeLogUrl = config?.instance_changelog_url;
+  const shouldShowFallback = !changeLogUrl || changeLogUrl === "" || hasError;
+
+  // timeout fallback - if iframe doesn't load within 15 seconds, show error
+  useEffect(() => {
+    if (!changeLogUrl || changeLogUrl === "") {
+      setIsLoading(false);
+      isLoadingRef.current = false;
+      return;
+    }
+
+    setIsLoading(true);
+    setHasError(false);
+    isLoadingRef.current = true;
+
+    const timeoutId = setTimeout(() => {
+      if (isLoadingRef.current) {
+        setHasError(true);
+        setIsLoading(false);
+        isLoadingRef.current = false;
+      }
+    }, 15000); // 15 second timeout
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [changeLogUrl]);
+
+  const handleIframeLoad = () => {
+    setTimeout(() => {
+      isLoadingRef.current = false;
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  const handleIframeError = () => {
+    isLoadingRef.current = false;
+    setHasError(true);
+    setIsLoading(false);
+  };
+
+  // Show fallback if URL is missing, empty, or iframe failed to load
+  if (shouldShowFallback) {
+    return (
+      <ProductUpdatesFallback
+        description="We're having trouble fetching the updates. Please visit our changelog to view the latest updates."
+        variant={config?.is_self_managed ? "self-managed" : "cloud"}
+      />
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-[550px] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5 relative">
+      {isLoading && (
+        <Loader className="flex flex-col gap-3 absolute inset-0 w-full h-full items-center justify-center">
+          <Loader.Item height="95%" width="95%" />
+        </Loader>
+      )}
+      <iframe
+        src={changeLogUrl}
+        className={`w-full h-full ${isLoading ? "opacity-0" : "opacity-100"} transition-opacity duration-200`}
+        onLoad={handleIframeLoad}
+        onError={handleIframeError}
+      />
+    </div>
+  );
+});

apps/web/ce/components/global/product-updates/header.tsx

@@ -1,10 +1,8 @@
 import { observer } from "mobx-react";
+import packageJson from "package.json";
 import { useTranslation } from "@plane/i18n";
-import { PlaneLogo } from "@plane/propel/icons";
 // helpers
 import { cn } from "@plane/utils";
-// package.json
-import packageJson from "package.json";
 
 export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
   const { t } = useTranslation();
@@ -20,9 +18,6 @@ export const ProductUpdatesHeader = observer(function ProductUpdatesHeader() {
           {t("version")}: v{packageJson.version}
         </div>
       </div>
-      <div className="flex flex-shrink-0 items-center gap-8">
-        <PlaneLogo className="h-6 w-auto text-custom-text-100" />
-      </div>
     </div>
   );
 });