From 7c74d0a4034b470211d5ab6032d4915e05fcaf05 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Wed, 3 Dec 2025 15:53:42 +0530
Subject: [PATCH] [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/api/plane/license/api/views/instance.py  |   1 +
 apps/api/plane/settings/common.py             |   7 +-
 apps/web/ce/components/global/index.ts        |   1 -
 .../global/product-updates/changelog.tsx      |  83 ++++++++
 .../header.tsx}                               |   7 +-
 .../components/core/image-picker-popover.tsx  |  46 +++--
 .../global/product-updates/fallback.tsx       |  32 +++
 .../global/product-updates/modal.tsx          |  31 +--
 .../onboarding/steps/profile/root.tsx         |  16 +-
 .../src/empty-state/assets/asset-registry.tsx |   2 +
 .../src/empty-state/assets/asset-types.ts     |   1 +
 .../assets/vertical-stack/changelog.tsx       | 183 ++++++++++++++++++
 .../assets/vertical-stack/constant.tsx        |   5 +
 .../assets/vertical-stack/index.ts            |   1 +
 .../src/empty-state/detailed-empty-state.tsx  |  17 +-
 packages/types/src/instance/base.ts           |   1 +
 16 files changed, 373 insertions(+), 61 deletions(-)
 create mode 100644 apps/web/ce/components/global/product-updates/changelog.tsx
 rename apps/web/ce/components/global/{product-updates-header.tsx => product-updates/header.tsx} (79%)
 create mode 100644 apps/web/core/components/global/product-updates/fallback.tsx
 create mode 100644 packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx

diff --git a/apps/api/plane/license/api/views/instance.py b/apps/api/plane/license/api/views/instance.py
index 23eeebec1..fed0c5e17 100644
--- a/apps/api/plane/license/api/views/instance.py
+++ b/apps/api/plane/license/api/views/instance.py
@@ -175,6 +175,7 @@ class InstanceEndpoint(BaseAPIView):
         data["app_base_url"] = settings.APP_BASE_URL
 
         data["instance_changelog_url"] = settings.INSTANCE_CHANGELOG_URL
+        data["is_self_managed"] = settings.IS_SELF_MANAGED
 
         instance_data = serializer.data
         instance_data["workspaces_exist"] = Workspace.objects.count() >= 1
diff --git a/apps/api/plane/settings/common.py b/apps/api/plane/settings/common.py
index 417805216..a9e9925c2 100644
--- a/apps/api/plane/settings/common.py
+++ b/apps/api/plane/settings/common.py
@@ -25,6 +25,9 @@ SECRET_KEY = os.environ.get("SECRET_KEY", get_random_secret_key())
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = int(os.environ.get("DEBUG", "0"))
 
+# Self-hosted mode
+IS_SELF_MANAGED = True
+
 # Allowed Hosts
 ALLOWED_HOSTS = os.environ.get("ALLOWED_HOSTS", "*").split(",")
 
@@ -69,9 +72,7 @@ MIDDLEWARE = [
 
 # Rest Framework settings
 REST_FRAMEWORK = {
-    "DEFAULT_AUTHENTICATION_CLASSES": (
-        "rest_framework.authentication.SessionAuthentication",
-    ),
+    "DEFAULT_AUTHENTICATION_CLASSES": ("rest_framework.authentication.SessionAuthentication",),
     "DEFAULT_THROTTLE_CLASSES": ("rest_framework.throttling.AnonRateThrottle",),
     "DEFAULT_THROTTLE_RATES": {
         "anon": "30/minute",
diff --git a/apps/web/ce/components/global/index.ts b/apps/web/ce/components/global/index.ts
index c87c8ae02..08b85c764 100644
--- a/apps/web/ce/components/global/index.ts
+++ b/apps/web/ce/components/global/index.ts
@@ -1,2 +1 @@
 export * from "./version-number";
-export * from "./product-updates-header";
diff --git a/apps/web/ce/components/global/product-updates/changelog.tsx b/apps/web/ce/components/global/product-updates/changelog.tsx
new file mode 100644
index 000000000..672b7490b
--- /dev/null
+++ b/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>
+  );
+});
diff --git a/apps/web/ce/components/global/product-updates-header.tsx b/apps/web/ce/components/global/product-updates/header.tsx
similarity index 79%
rename from apps/web/ce/components/global/product-updates-header.tsx
rename to apps/web/ce/components/global/product-updates/header.tsx
index 83e2c489c..196d621f3 100644
--- a/apps/web/ce/components/global/product-updates-header.tsx
+++ b/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>
   );
 });
diff --git a/apps/web/core/components/core/image-picker-popover.tsx b/apps/web/core/components/core/image-picker-popover.tsx
index 7eefa0d3a..d33130405 100644
--- a/apps/web/core/components/core/image-picker-popover.tsx
+++ b/apps/web/core/components/core/image-picker-popover.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback } from "react";
+import React, { useState, useRef, useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { useDropzone } from "react-dropzone";
@@ -16,24 +16,16 @@ import { Input, Loader } from "@plane/ui";
 // helpers
 import { getFileURL } from "@plane/utils";
 // hooks
+import { useInstance } from "@/hooks/store/use-instance";
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 // services
 import { FileService } from "@/services/file.service";
 
-const tabOptions = [
-  {
-    key: "unsplash",
-    title: "Unsplash",
-  },
-  {
-    key: "images",
-    title: "Images",
-  },
-  {
-    key: "upload",
-    title: "Upload",
-  },
-];
+type TTabOption = {
+  key: string;
+  title: string;
+  isEnabled: boolean;
+};
 
 type Props = {
   label: string | React.ReactNode;
@@ -63,6 +55,30 @@ export const ImagePickerPopover = observer(function ImagePickerPopover(props: Pr
   const ref = useRef<HTMLDivElement>(null);
   // router params
   const { workspaceSlug } = useParams();
+  // store hooks
+  const { config } = useInstance();
+  // derived values
+  const hasUnsplashConfigured = config?.has_unsplash_configured || false;
+  const tabOptions: TTabOption[] = useMemo(
+    () => [
+      {
+        key: "unsplash",
+        title: "Unsplash",
+        isEnabled: hasUnsplashConfigured,
+      },
+      {
+        key: "images",
+        title: "Images",
+        isEnabled: true,
+      },
+      {
+        key: "upload",
+        title: "Upload",
+        isEnabled: true,
+      },
+    ],
+    [hasUnsplashConfigured]
+  );
 
   const { data: unsplashImages, error: unsplashError } = useSWR(
     `UNSPLASH_IMAGES_${searchParams}`,
diff --git a/apps/web/core/components/global/product-updates/fallback.tsx b/apps/web/core/components/global/product-updates/fallback.tsx
new file mode 100644
index 000000000..ac865f437
--- /dev/null
+++ b/apps/web/core/components/global/product-updates/fallback.tsx
@@ -0,0 +1,32 @@
+import { EmptyStateDetailed } from "@plane/propel/empty-state";
+
+type TProductUpdatesFallbackProps = {
+  description: string;
+  variant: "cloud" | "self-managed";
+};
+
+export function ProductUpdatesFallback(props: TProductUpdatesFallbackProps) {
+  const { description, variant } = props;
+  // derived values
+  const changelogUrl =
+    variant === "cloud"
+      ? "https://plane.so/changelog?category=cloud"
+      : "https://plane.so/changelog?category=self-hosted";
+
+  return (
+    <div className="py-8">
+      <EmptyStateDetailed
+        assetKey="changelog"
+        description={description}
+        align="center"
+        actions={[
+          {
+            label: "Go to changelog",
+            variant: "primary",
+            onClick: () => window.open(changelogUrl, "_blank"),
+          },
+        ]}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/core/components/global/product-updates/modal.tsx b/apps/web/core/components/global/product-updates/modal.tsx
index 7b9fde3e3..87ac429c2 100644
--- a/apps/web/core/components/global/product-updates/modal.tsx
+++ b/apps/web/core/components/global/product-updates/modal.tsx
@@ -1,18 +1,15 @@
-import type { FC } from "react";
 import { useEffect } from "react";
 import { observer } from "mobx-react";
 import { USER_TRACKER_ELEMENTS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
 // ui
 import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
 import { ProductUpdatesFooter } from "@/components/global";
 // helpers
 import { captureView } from "@/helpers/event-tracker.helper";
-// hooks
-import { useInstance } from "@/hooks/store/use-instance";
 // plane web components
-import { ProductUpdatesHeader } from "@/plane-web/components/global";
+import { ProductUpdatesChangelog } from "@/plane-web/components/global/product-updates/changelog";
+import { ProductUpdatesHeader } from "@/plane-web/components/global/product-updates/header";
 
 export type ProductUpdatesModalProps = {
   isOpen: boolean;
@@ -21,8 +18,6 @@ export type ProductUpdatesModalProps = {
 
 export const ProductUpdatesModal = observer(function ProductUpdatesModal(props: ProductUpdatesModalProps) {
   const { isOpen, handleClose } = props;
-  const { t } = useTranslation();
-  const { config } = useInstance();
 
   useEffect(() => {
     if (isOpen) {
@@ -33,27 +28,7 @@ export const ProductUpdatesModal = observer(function ProductUpdatesModal(props:
   return (
     <ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXXXL}>
       <ProductUpdatesHeader />
-      <div className="flex flex-col h-[60vh] vertical-scrollbar scrollbar-xs overflow-hidden overflow-y-scroll px-6 mx-0.5">
-        {config?.instance_changelog_url && config?.instance_changelog_url !== "" ? (
-          <iframe src={config?.instance_changelog_url} className="w-full h-full" />
-        ) : (
-          <div className="flex flex-col items-center justify-center w-full h-full mb-8">
-            <div className="text-lg font-medium">{t("we_are_having_trouble_fetching_the_updates")}</div>
-            <div className="text-sm text-custom-text-200">
-              {t("please_visit")}
-              <a
-                data-ph-element={USER_TRACKER_ELEMENTS.CHANGELOG_REDIRECTED}
-                href="https://go.plane.so/p-changelog"
-                target="_blank"
-                className="text-sm text-custom-primary-100 font-medium hover:text-custom-primary-200 underline underline-offset-1 outline-none"
-              >
-                {t("our_changelogs")}
-              </a>{" "}
-              {t("for_the_latest_updates")}.
-            </div>
-          </div>
-        )}
-      </div>
+      <ProductUpdatesChangelog />
       <ProductUpdatesFooter />
     </ModalCore>
   );
diff --git a/apps/web/core/components/onboarding/steps/profile/root.tsx b/apps/web/core/components/onboarding/steps/profile/root.tsx
index c74daa836..3e352c1c6 100644
--- a/apps/web/core/components/onboarding/steps/profile/root.tsx
+++ b/apps/web/core/components/onboarding/steps/profile/root.tsx
@@ -22,6 +22,7 @@ import { AuthService } from "@/services/auth.service";
 import { CommonOnboardingHeader } from "../common";
 import { MarketingConsent } from "./consent";
 import { SetPasswordRoot } from "./set-password";
+import { useInstance } from "@/hooks/store/use-instance";
 
 type Props = {
   handleStepChange: (step: EOnboardingSteps, skipInvites?: boolean) => void;
@@ -55,6 +56,7 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
   // store hooks
   const { data: user, updateCurrentUser } = useUser();
   const { updateUserProfile } = useUserProfile();
+  const { config: instanceConfig } = useInstance();
   // form info
   const {
     getValues,
@@ -253,12 +255,14 @@ export const ProfileSetupStep = observer(function ProfileSetupStep({ handleStepC
       </Button>
 
       {/* Marketing Consent */}
-      <MarketingConsent
-        isChecked={!!watch("has_marketing_email_consent")}
-        handleChange={(has_marketing_email_consent) =>
-          setValue("has_marketing_email_consent", has_marketing_email_consent)
-        }
-      />
+      {!instanceConfig.is_self_managed && (
+        <MarketingConsent
+          isChecked={!!watch("has_marketing_email_consent")}
+          handleChange={(has_marketing_email_consent) =>
+            setValue("has_marketing_email_consent", has_marketing_email_consent)
+          }
+        />
+      )}
     </form>
   );
 });
diff --git a/packages/propel/src/empty-state/assets/asset-registry.tsx b/packages/propel/src/empty-state/assets/asset-registry.tsx
index 5ad23bb09..e1eb823c6 100644
--- a/packages/propel/src/empty-state/assets/asset-registry.tsx
+++ b/packages/propel/src/empty-state/assets/asset-registry.tsx
@@ -33,6 +33,7 @@ import {
   ArchivedCycleVerticalStackIllustration,
   ArchivedModuleVerticalStackIllustration,
   ArchivedWorkItemVerticalStackIllustration,
+  ChangelogVerticalStackIllustration,
   CustomerVerticalStackIllustration,
   CycleVerticalStackIllustration,
   DashboardVerticalStackIllustration,
@@ -80,6 +81,7 @@ export const VERTICAL_STACK_ASSETS: Record<VerticalStackAssetType, React.Compone
   "archived-cycle": ArchivedCycleVerticalStackIllustration,
   "archived-module": ArchivedModuleVerticalStackIllustration,
   "archived-work-item": ArchivedWorkItemVerticalStackIllustration,
+  changelog: ChangelogVerticalStackIllustration,
   customer: CustomerVerticalStackIllustration,
   cycle: CycleVerticalStackIllustration,
   dashboard: DashboardVerticalStackIllustration,
diff --git a/packages/propel/src/empty-state/assets/asset-types.ts b/packages/propel/src/empty-state/assets/asset-types.ts
index 67a11eb64..23fb810ad 100644
--- a/packages/propel/src/empty-state/assets/asset-types.ts
+++ b/packages/propel/src/empty-state/assets/asset-types.ts
@@ -26,6 +26,7 @@ export type VerticalStackAssetType =
   | "archived-cycle"
   | "archived-module"
   | "archived-work-item"
+  | "changelog"
   | "customer"
   | "cycle"
   | "dashboard"
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
new file mode 100644
index 000000000..b36d137d3
--- /dev/null
+++ b/packages/propel/src/empty-state/assets/vertical-stack/changelog.tsx
@@ -0,0 +1,183 @@
+import { ILLUSTRATION_COLOR_TOKEN_MAP } from "../helper";
+import type { TIllustrationAssetProps } from "../helper";
+
+export function ChangelogVerticalStackIllustration({ className, ...rest }: TIllustrationAssetProps) {
+  return (
+    <svg
+      width="162"
+      height="172"
+      viewBox="0 0 162 172"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...rest}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8434 47.4295C14.6167 46.8049 13.0411 46.8555 11.3136 47.739C7.41402 49.7253 4.25723 55.1836 4.25723 59.9216C4.25723 62.5663 5.24196 64.4345 6.78941 65.2223L4.27974 63.9449C2.7323 63.1571 1.74756 61.289 1.74756 58.6442C1.74756 53.9006 4.90996 48.4424 8.80389 46.4616C10.5258 45.5838 12.107 45.5275 13.3337 46.1522L15.8434 47.4295Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M15.8432 47.4297C17.3907 48.2175 18.3754 50.0857 18.3754 52.7304C18.3754 57.4741 15.213 62.9323 11.319 64.913C9.59716 65.7909 8.01596 65.8471 6.78926 65.2225C5.24182 64.4347 4.25708 62.5666 4.25708 59.9218C4.25708 55.1782 7.4195 49.72 11.3134 47.7392C13.0353 46.8614 14.6165 46.8051 15.8432 47.4297Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.1332 55.353L9.13666 55.351M9.1332 60.153L9.13666 60.151M8.85607 57.113L13.5672 54.393C13.9553 54.169 14.1493 54.0569 14.2975 53.8842C14.4278 53.7322 14.5338 53.5486 14.6002 53.3598C14.6758 53.145 14.6758 52.921 14.6758 52.473V51.833C14.6758 51.3849 14.6758 51.1609 14.6002 51.0334C14.5338 50.9212 14.4278 50.86 14.2975 50.8586C14.1493 50.8569 13.9553 50.969 13.5672 51.193L8.85607 53.913C8.46805 54.137 8.27405 54.249 8.12585 54.4218C7.99548 54.5737 7.88949 54.7573 7.82307 54.9462C7.74756 55.1609 7.74756 55.3849 7.74756 55.833V56.473C7.74756 56.921 7.74756 57.145 7.82307 57.2726C7.88949 57.3848 7.99548 57.4459 8.12585 57.4474C8.27405 57.449 8.46806 57.337 8.85607 57.113ZM8.85607 61.913L13.5672 59.193C13.9553 58.969 14.1493 58.8569 14.2975 58.6842C14.4278 58.5322 14.5338 58.3486 14.6002 58.1598C14.6758 57.9451 14.6758 57.721 14.6758 57.273V56.633C14.6758 56.1849 14.6758 55.9609 14.6002 55.8334C14.5338 55.7212 14.4278 55.66 14.2975 55.6586C14.1493 55.6569 13.9553 55.769 13.5672 55.993L8.85607 58.713C8.46805 58.937 8.27405 59.049 8.12585 59.2218C7.99548 59.3737 7.88949 59.5573 7.82307 59.7462C7.74756 59.9609 7.74756 60.1849 7.74756 60.633V61.273C7.74756 61.721 7.74756 61.9451 7.82307 62.0726C7.88949 62.1848 7.99548 62.246 8.12585 62.2474C8.27405 62.249 8.46806 62.137 8.85607 61.913Z"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <g opacity="0.2">
+        <path
+          d="M2.20337 134.919C2.20337 137.046 3.79582 139.168 6.97511 140.794L47.912 161.653C54.2762 164.895 64.5907 164.895 70.9549 161.653L156.976 117.824C160.155 116.204 161.748 114.082 161.748 111.955V118.747C161.748 120.874 160.155 122.995 156.976 124.616L70.9549 168.445C64.5907 171.686 54.2762 171.686 47.912 168.445L6.97511 147.586C3.79019 145.965 2.20337 143.838 2.20337 141.711V134.919Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.20337 134.919C2.20337 132.792 3.79582 130.671 6.97511 129.05L92.9961 85.2209C99.3603 81.9797 109.675 81.9797 116.039 85.2209L156.976 106.08C160.161 107.701 161.748 109.828 161.748 111.955C161.748 114.082 160.155 116.204 156.976 117.824L70.9549 161.653C64.5907 164.895 54.2762 164.895 47.912 161.653L6.97511 140.794C3.79019 139.173 2.20337 137.046 2.20337 134.919Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <g opacity="0.6">
+        <path
+          d="M2.20337 113.463C2.20337 115.59 3.79582 117.712 6.97511 119.338L47.912 140.197C54.2762 143.438 64.5907 143.438 70.9549 140.197L156.976 96.3681C160.155 94.7475 161.748 92.6261 161.748 90.499V97.2909C161.748 99.4179 160.155 101.539 156.976 103.16L70.9549 146.989C64.5907 150.23 54.2762 150.23 47.912 146.989L6.97511 126.13C3.79019 124.509 2.20337 122.382 2.20337 120.255V113.463Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M2.20337 113.463C2.20337 111.336 3.79582 109.215 6.97511 107.594L92.9961 63.7649C99.3603 60.5237 109.675 60.5237 116.039 63.7649L156.976 84.6244C160.161 86.245 161.748 88.372 161.748 90.4991C161.748 92.6261 160.155 94.7475 156.976 96.3681L70.9549 140.197C64.5907 143.439 54.2762 143.439 47.912 140.197L6.97511 119.338C3.79019 117.717 2.20337 115.59 2.20337 113.463Z"
+          fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="0.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        d="M2.20337 92.0073C2.20337 94.1343 3.79582 96.2557 6.97511 97.8819L47.912 118.741C54.2762 121.983 64.5907 121.983 70.9549 118.741L156.976 74.9122C160.155 73.2916 161.748 71.1702 161.748 69.0432V75.8351C161.748 77.9621 160.155 80.0835 156.976 81.7041L70.9549 125.533C64.5907 128.775 54.2762 128.775 47.912 125.533L6.97511 104.674C3.79019 103.053 2.20337 100.926 2.20337 98.7991V92.0073Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2.20337 92.0071C2.20337 89.8801 3.79582 87.7587 6.97511 86.1381L92.9961 42.3088C99.3603 39.0676 109.675 39.0676 116.039 42.3088L156.976 63.1684C160.161 64.789 161.748 66.916 161.748 69.043C161.748 71.1701 160.155 73.2915 156.976 74.9121L70.9549 118.741C64.5907 121.982 54.2762 121.982 47.912 118.741L6.97511 97.8818C3.79019 96.2612 2.20337 94.1341 2.20337 92.0071Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M70.0996 92.4116C69.4525 92.4116 68.8448 92.2709 68.2989 91.9895L63.2852 89.4348C61.7153 88.6358 60.8149 86.8014 60.8149 84.4042V25.6577C60.8149 21.4205 63.6622 16.5193 67.1566 14.7355L94.3129 0.898567C94.3917 0.859177 94.4817 0.83667 94.5661 0.83667C94.6505 0.83667 94.7405 0.859177 94.8193 0.898567L99.833 3.45326C99.833 3.45326 99.878 3.48139 99.9005 3.49265L114.987 14.1616C115.139 14.2685 115.223 14.4373 115.223 14.623V62.3574C115.223 66.5946 112.376 71.4958 108.881 73.2795L72.6712 91.7307C71.7821 92.1809 70.9155 92.4116 70.0884 92.4116H70.0996Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M94.5717 1.39958L99.5854 3.95427L114.672 14.6232V62.3576C114.672 66.4147 111.971 71.0796 108.634 72.7789L72.4235 91.2301C71.5964 91.6521 70.8086 91.8491 70.0939 91.8491C69.5312 91.8491 69.0135 91.7253 68.5521 91.4889L63.5384 88.9342C62.216 88.259 61.3776 86.6665 61.3776 84.4045V25.6579C61.3776 21.6008 64.0786 16.9359 67.4098 15.2365L94.5661 1.39958M94.5717 0.27417C94.3972 0.27417 94.2228 0.313559 94.0596 0.397965L66.9034 14.2349C63.1726 16.1369 60.2522 21.1506 60.2522 25.6579V84.4045C60.2522 87.021 61.2651 89.0412 63.032 89.9359L68.0457 92.4906C68.6703 92.8113 69.3624 92.9689 70.0995 92.9689C71.0168 92.9689 71.9734 92.7213 72.9412 92.2261L109.151 73.7749C112.882 71.873 115.803 66.8593 115.803 62.352V14.6288C115.803 14.2631 115.628 13.9198 115.324 13.7116L100.238 3.04269C100.193 3.00892 100.148 2.98079 100.097 2.95828L95.0837 0.403592C94.9206 0.319186 94.7461 0.279797 94.5717 0.279797V0.27417Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.primary}
+      />
+      <path
+        d="M99.5855 3.95386L72.4292 17.7908C69.098 19.4902 66.397 24.155 66.397 28.2122V86.9587C66.397 89.2208 67.2355 90.8133 68.5578 91.4885L63.5441 88.9338C62.2217 88.2586 61.3833 86.6661 61.3833 84.4041V25.6575C61.3833 21.6003 64.0843 16.9355 67.4155 15.2361L94.5717 1.39917L99.5855 3.95386Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M99.5852 3.95386L114.671 14.6284V62.3628C114.671 66.4199 111.97 71.0848 108.639 72.7841L72.4289 91.2353C70.9547 91.9837 69.6042 92.0287 68.5575 91.4998C67.2352 90.8245 66.3967 89.2321 66.3967 86.97V28.2234C66.3967 24.1663 69.0977 19.5014 72.4289 17.8021L99.5852 3.96511V3.95386Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M93.9809 64.7865L76.6833 73.5984C75.6141 74.1443 74.7476 73.5309 74.7476 72.2311C74.7476 70.9312 75.6141 69.44 76.6833 68.8942L93.9809 60.0822C95.05 59.5364 95.9166 60.1498 95.9166 61.4496C95.9166 62.7495 95.05 64.2406 93.9809 64.7865Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M102.185 46.4566L76.6833 59.4495C75.6141 59.9954 74.7476 59.382 74.7476 58.0822C74.7476 56.7823 75.6141 55.2911 76.6833 54.7453L102.185 41.7524C103.254 41.2066 104.121 41.8199 104.121 43.1198C104.121 44.4196 103.254 45.9108 102.185 46.4566Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <path
+        d="M99.5854 3.95386V14.9717C99.5854 19.0288 102.286 20.9363 105.618 19.2426L114.672 14.6284"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+      />
+      <path
+        d="M99.5854 3.95386V14.9717C99.5854 19.0288 102.286 20.9363 105.618 19.2426L114.672 14.6284"
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <g clipPath="url(#clip0_1278_188)">
+        <path
+          d="M87.4006 34.9911L86.198 37.0745L84.9948 36.3801M86.3451 36.6423C86.3669 36.4017 86.3781 36.1634 86.3781 35.9287C86.3781 32.4767 83.9546 31.0775 80.9651 32.8035C77.9755 34.5295 75.552 38.7271 75.552 42.1792C75.552 45.6312 77.9755 47.0304 80.9651 45.3044C82.6655 44.3226 84.1828 42.5412 85.1752 40.5522M80.9651 35.5815V39.0539L82.7694 39.4012"
+          stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.575 1.89434C139.802 1.26974 141.377 1.32038 143.105 2.20383C147.004 4.19019 150.161 9.64844 150.161 14.3864C150.161 17.0312 149.176 18.8993 147.629 19.6871L150.139 18.4098C151.686 17.622 152.671 15.7538 152.671 13.1091C152.671 8.36547 149.508 2.90721 145.614 0.926486C143.893 0.0486632 142.311 -0.00760811 141.085 0.616996L138.575 1.89434Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.secondary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M138.575 1.89458C137.028 2.68237 136.043 4.55056 136.043 7.19528C136.043 11.9389 139.205 17.3972 143.099 19.3779C144.821 20.2557 146.402 20.312 147.629 19.6874C149.177 18.8996 150.161 17.0314 150.161 14.3867C150.161 9.64306 146.999 4.1848 143.105 2.20407C141.383 1.32625 139.802 1.26998 138.575 1.89458Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+        stroke={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+        strokeWidth="0.4"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M139.459 6.68336C139.459 6.42451 139.633 6.30072 139.841 6.41326L146.768 9.94143C146.982 10.0483 147.151 10.3466 147.151 10.6054C147.151 10.8643 146.976 10.9881 146.768 10.8755L139.841 7.34735C139.628 7.24044 139.459 6.9422 139.459 6.68336ZM139.459 9.02422C139.459 8.76537 139.633 8.64158 139.841 8.75412L143.69 10.718C143.904 10.8249 144.073 11.1231 144.073 11.382C144.073 11.6408 143.899 11.7646 143.69 11.6521L139.841 9.68821C139.628 9.5813 139.459 9.28306 139.459 9.02422ZM139.847 10.6279C139.633 10.521 139.464 10.6392 139.464 10.898C139.464 11.1569 139.639 11.4551 139.847 11.562L142.542 12.935C142.756 13.0419 142.925 12.9238 142.925 12.6649C142.925 12.4061 142.751 12.1079 142.542 12.0009L139.847 10.6279ZM139.459 12.7718C139.459 12.513 139.633 12.3892 139.841 12.5017L141.383 13.2839C141.597 13.3908 141.766 13.6891 141.766 13.9479C141.766 14.2067 141.591 14.3305 141.383 14.218L139.841 13.4358C139.628 13.3289 139.459 13.0307 139.459 12.7718ZM146.245 12.7212C146.386 12.7944 146.521 12.9294 146.616 13.0982C146.718 13.267 146.768 13.4583 146.768 13.6328C146.768 13.8072 146.712 13.9366 146.616 14.0098L146.386 14.173L145.643 12.8844L145.874 12.7212C145.975 12.6537 146.104 12.6537 146.245 12.7212ZM145.429 13.0307L146.172 14.3193L144.484 15.5122C144.36 15.6023 144.208 15.6304 144.039 15.6079L143.499 15.5291C143.499 15.5291 143.443 15.5122 143.42 15.4897C143.392 15.4672 143.37 15.4391 143.353 15.4053C143.336 15.3716 143.319 15.3378 143.313 15.2984C143.308 15.2646 143.308 15.2309 143.313 15.2027L143.476 14.6288C143.527 14.4487 143.617 14.308 143.741 14.2236L145.429 13.0307Z"
+        fill={ILLUSTRATION_COLOR_TOKEN_MAP.stroke.secondary}
+      />
+      <defs>
+        <clipPath id="clip0_1278_188">
+          <rect
+            width="16.6679"
+            height="16.6679"
+            fill={ILLUSTRATION_COLOR_TOKEN_MAP.fill.primary}
+            transform="matrix(0.866025 -0.5 0 1 73.7476 34.887)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
index 85888d5e5..2f16f116d 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
+++ b/packages/propel/src/empty-state/assets/vertical-stack/constant.tsx
@@ -2,6 +2,7 @@ import {
   ArchivedCycleVerticalStackIllustration,
   ArchivedModuleVerticalStackIllustration,
   ArchivedWorkItemVerticalStackIllustration,
+  ChangelogVerticalStackIllustration,
   CustomerVerticalStackIllustration,
   CycleVerticalStackIllustration,
   DashboardVerticalStackIllustration,
@@ -33,6 +34,10 @@ export const VerticalStackAssetsMap = [
     asset: <ArchivedWorkItemVerticalStackIllustration />,
     title: "ArchivedWorkItemVerticalStackIllustration",
   },
+  {
+    asset: <ChangelogVerticalStackIllustration />,
+    title: "ChangelogVerticalStackIllustration",
+  },
   {
     asset: <CustomerVerticalStackIllustration />,
     title: "CustomerVerticalStackIllustration",
diff --git a/packages/propel/src/empty-state/assets/vertical-stack/index.ts b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
index 70fc2f296..2a9372167 100644
--- a/packages/propel/src/empty-state/assets/vertical-stack/index.ts
+++ b/packages/propel/src/empty-state/assets/vertical-stack/index.ts
@@ -2,6 +2,7 @@ export * from "./404-error";
 export * from "./archived-cycle";
 export * from "./archived-module";
 export * from "./archived-work-item";
+export * from "./changelog";
 export * from "./customer";
 export * from "./cycle";
 export * from "./dashboard";
diff --git a/packages/propel/src/empty-state/detailed-empty-state.tsx b/packages/propel/src/empty-state/detailed-empty-state.tsx
index c105e0118..82f7103b6 100644
--- a/packages/propel/src/empty-state/detailed-empty-state.tsx
+++ b/packages/propel/src/empty-state/detailed-empty-state.tsx
@@ -15,16 +15,29 @@ export function EmptyStateDetailed({
   rootClassName,
   assetClassName,
   customButton,
+  align = "start",
 }: BaseEmptyStateCommonProps) {
   // Determine which asset to use: assetKey takes precedence, fallback to custom asset
   const resolvedAsset = assetKey ? getDetailedAsset(assetKey as DetailedAssetType, assetClassName) : asset;
 
   return (
     <div className={cn("flex size-full items-center justify-center", rootClassName)}>
-      <div className={cn("flex max-w-[25rem] size-full flex-col justify-center gap-6 text-left", className)}>
+      <div
+        className={cn(
+          "flex max-w-[25rem] size-full flex-col justify-center gap-6 text-left",
+          {
+            "items-center text-center": align === "center",
+          },
+          className
+        )}
+      >
         {resolvedAsset && <div className="flex max-w-40 items-center">{resolvedAsset}</div>}
 
-        <div className="flex flex-col gap-4">
+        <div
+          className={cn("flex flex-col gap-4", {
+            "items-center": align === "center",
+          })}
+        >
           {(title || description) && (
             <div className="flex flex-col gap-2">
               {title && <h3 className="text-lg font-semibold leading-7 text-custom-text-100">{title}</h3>}
diff --git a/packages/types/src/instance/base.ts b/packages/types/src/instance/base.ts
index 742698f56..975e12386 100644
--- a/packages/types/src/instance/base.ts
+++ b/packages/types/src/instance/base.ts
@@ -56,6 +56,7 @@ export interface IInstanceConfig {
   app_base_url: string | undefined;
   space_base_url: string | undefined;
   admin_base_url: string | undefined;
+  is_self_managed: boolean;
   // intercom
   is_intercom_enabled: boolean;
   intercom_app_id: string | undefined;