Add PREFECT_SERVER_UI_SHOW_PROMOTIONAL_CONTENT setting (#19299)

Co-authored-by: Claude <[email protected]>

Author: zzstoatzz

src/prefect/settings/models/server/ui.py

@@ -48,3 +48,8 @@ class ServerUISettings(PrefectBaseSettings):
             "prefect_ui_static_directory",
         ),
     )
+
+    show_promotional_content: bool = Field(
+        default=True,
+        description="Whether or not to display promotional content in the UI, including upgrade prompts and marketing banners.",
+    )

tests/test_settings.py

@@ -468,6 +468,7 @@
     "PREFECT_SERVER_UI_API_URL": {"test_value": "https://api.prefect.io"},
     "PREFECT_SERVER_UI_ENABLED": {"test_value": True},
     "PREFECT_SERVER_UI_SERVE_BASE": {"test_value": "/base"},
+    "PREFECT_SERVER_UI_SHOW_PROMOTIONAL_CONTENT": {"test_value": False},
     "PREFECT_SERVER_UI_STATIC_DIRECTORY": {"test_value": "/path/to/static"},
     "PREFECT_SILENCE_API_URL_MISCONFIGURATION": {"test_value": True},
     "PREFECT_SQLALCHEMY_MAX_OVERFLOW": {"test_value": 10, "legacy": True},

ui/src/components/ApiStatusToast.vue

@@ -3,17 +3,29 @@
     <PHeading :heading="6">
       Oops. Something went wrong.
     </PHeading>
-    <div>
-      You can use Prefect Cloud for free, anytime.
-    </div>
-    <div>
-      <PButton to="https://app.prefect.cloud/auth/sign-up?utm_source=prefect-oss&utm_medium=toast" variant="default" target="_blank">
-        Try it now
-      </PButton>
-    </div>
+    <template v-if="showPromotionalContent">
+      <div>
+        You can use Prefect Cloud for free, anytime.
+      </div>
+      <div>
+        <PButton to="https://app.prefect.cloud/auth/sign-up?utm_source=prefect-oss&utm_medium=toast" variant="default" target="_blank">
+          Try it now
+        </PButton>
+      </div>
+    </template>
+    <template v-else>
+      <div>
+        Please check your connection and try again.
+      </div>
+    </template>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { PButton, PHeading } from '@prefecthq/prefect-design'
+  import { computed } from 'vue'
+
+  // Read from localStorage, default to true
+  const cachedSetting = localStorage.getItem('prefect-show-promotional-content')
+  const showPromotionalContent = computed(() => cachedSetting !== 'false')
 </script>

ui/src/components/ContextSidebar.vue

@@ -18,7 +18,7 @@
     <p-context-nav-item title="Concurrency" :to="routes.concurrencyLimits()" />
 
     <template #footer>
-      <a href="https://www.prefect.io/cloud-vs-oss?utm_source=oss&utm_medium=oss&utm_campaign=oss&utm_term=none&utm_content=none" target="_blank">
+      <a v-if="showPromotionalContent" href="https://www.prefect.io/cloud-vs-oss?utm_source=oss&utm_medium=oss&utm_campaign=oss&utm_term=none&utm_content=none" target="_blank">
         <p-context-nav-item>
           <div>
             Ready to scale?
@@ -42,13 +42,20 @@
 <script lang="ts" setup>
   import JoinTheCommunityModal from '@/components/JoinTheCommunityModal.vue'
   import { useCan } from '@/compositions/useCan'
+  import { usePrefectApi } from '@/compositions/usePrefectApi'
   import { routes } from '@/router'
   import { PContextNavItem, PContextSidebar } from '@prefecthq/prefect-design'
   import { localization, useShowModal } from '@prefecthq/prefect-ui-library'
   import { useStorage } from '@prefecthq/vue-compositions'
   import { computed } from 'vue'
 
   const can = useCan()
+  const api = usePrefectApi()
+  const serverSettings = await api.admin.getSettings()
+  const showPromotionalContent = computed(() => serverSettings.server.ui.show_promotional_content)
+
+  // Cache to localStorage for use in error toasts
+  localStorage.setItem('prefect-show-promotional-content', String(showPromotionalContent.value))
   const canSeeWorkPools = computed(() => can.read.work_pool)
 
   const { showModal: showJoinCommunityModal, open: openJoinCommunityModal } = useShowModal()

ui/src/models/ServerSettings.ts

@@ -38,6 +38,7 @@ export type ServerSettings = {
   PREFECT_SERVER_API_PORT: number,
   PREFECT_SERVER_UI_ENABLED: boolean,
   PREFECT_SERVER_UI_API_URL: string,
+  PREFECT_SERVER_UI_SHOW_PROMOTIONAL_CONTENT: boolean,
   PREFECT_SERVER_ANALYTICS_ENABLED: boolean,
   PREFECT_SERVER_SERVICES_SCHEDULER_ENABLED: boolean,
   PREFECT_SERVER_SERVICES_LATE_RUNS_ENABLED: boolean,

ui/src/pages/Dashboard.vue

@@ -28,6 +28,7 @@
       </template>
     </template>
     <MarketingBanner
+      v-if="showPromotionalContent"
       title="Ready to scale?"
       subtitle="Webhooks, role and object-level security, and serverless push work pools on Prefect Cloud"
     >
@@ -62,13 +63,19 @@
   } from '@prefecthq/prefect-ui-library'
   import { useSubscription } from '@prefecthq/vue-compositions'
   import { computed, provide } from 'vue'
-
+  import { usePrefectApi } from '@/compositions/usePrefectApi'
 
   provide(subscriptionIntervalKey, {
     interval: dateFunctions.secondsToMilliseconds(30),
   })
 
   const api = useWorkspaceApi()
+  const prefectApi = usePrefectApi()
+  const serverSettings = await prefectApi.admin.getSettings()
+  const showPromotionalContent = computed(() => serverSettings.server.ui.show_promotional_content)
+
+  // Cache to localStorage for use in error toasts
+  localStorage.setItem('prefect-show-promotional-content', String(showPromotionalContent.value))
   const flowRunsCountAllSubscription = useSubscription(api.flowRuns.getFlowRunsCount, [{}])
   const loaded = computed(() => flowRunsCountAllSubscription.executed)
   const empty = computed(() => flowRunsCountAllSubscription.response === 0)