From dff444bc9be8634f61aba03a3ebfbe4cb19c6b79 Mon Sep 17 00:00:00 2001
From: Yawen <yawen@dify.ai>
Date: Tue, 26 May 2026 15:28:07 +0800
Subject: [PATCH] feat(marketplace): partner CTA + preview scroll polish

Two small UX changes on the public Marketplace surface.

1. Become-a-Partner CTA next to the Partners collection
   Renders a "Become a Partner" external link next to the description
   of the Partners collection on both Plugin and Template marketplace
   listing pages. Targets the HubSpot intake form
   https://share-na2.hsforms.com/1NiS4r9lsSqGcuNBB77DeEQ40s9fk.
   Plugin marketplace stores this collection as `partners`, Template
   marketplace as `Partner Template`; we match both names so the CTA
   shows up on either listing.

2. Workflow preview no longer hijacks the page scroll
   In `WorkflowPreview`, the ReactFlow canvas now sets
   `zoomOnScroll={false}` and `preventScrolling={false}`. The mouse
   wheel over a workflow preview (template detail page, etc.) keeps
   scrolling the surrounding page instead of either zooming the
   canvas or eating the wheel event. Zoom is still available via the
   ZoomInOut buttons in the bottom-left corner.
---
 .../marketplace/list/collection-list.tsx      | 22 ++++++++++++++++---
 .../workflow/workflow-preview/index.tsx       |  2 ++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/app/components/plugins/marketplace/list/collection-list.tsx b/web/app/components/plugins/marketplace/list/collection-list.tsx
index 16abc1f37e..533847bda5 100644
--- a/web/app/components/plugins/marketplace/list/collection-list.tsx
+++ b/web/app/components/plugins/marketplace/list/collection-list.tsx
@@ -5,7 +5,7 @@ import type { SearchParamsFromCollection } from '../types'
 import type { BaseCollection } from './collection-constants'
 import type { Locale } from '@/i18n-config/language'
 import { useLocale, useTranslation } from '#i18n'
-import { RiArrowRightSLine } from '@remixicon/react'
+import { RiArrowRightSLine, RiArrowRightUpLine } from '@remixicon/react'
 import { useEffect, useMemo, useState } from 'react'
 import { renderI18nObject } from '@/i18n-config'
 import { getLanguage } from '@/i18n-config/language'
@@ -82,6 +82,8 @@ export function CollectionHeader<TCollection extends BaseCollection>({
   const lang = getLanguage(locale)
   const label = renderI18nObject(collection.label, lang)
   const description = renderI18nObject(collection.description, lang)
+  // Plugin marketplace uses `partners`, Template marketplace uses `Partner Template`.
+  const isPartnersCollection = collection.name === 'partners' || collection.name === 'Partner Template'
 
   return (
     <div className="mb-2 flex items-end justify-between">
@@ -89,8 +91,22 @@ export function CollectionHeader<TCollection extends BaseCollection>({
         <div className="text-text-primary title-xl-semi-bold">
           {label}
         </div>
-        <div className="text-text-tertiary system-xs-regular">
-          {description}
+        <div className="text-text-tertiary system-xs-regular flex items-center gap-x-2">
+          <span>{description}</span>
+          {isPartnersCollection && (
+            <>
+              <span className="text-divider-regular">|</span>
+              <a
+                href="https://share-na2.hsforms.com/1NiS4r9lsSqGcuNBB77DeEQ40s9fk"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="flex items-center gap-x-0.5 text-text-accent hover:underline"
+              >
+                <span>Become a Partner</span>
+                <RiArrowRightUpLine className="h-3.5 w-3.5" />
+              </a>
+            </>
+          )}
         </div>
       </div>
       {showViewMore && viewMore}
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index bb85e00b6b..600ecbabc7 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -122,6 +122,8 @@ const WorkflowPreview = ({
         nodesFocusable={false}
         edgesFocusable={false}
         panOnScroll={false}
+        zoomOnScroll={false}
+        preventScrolling={false}
         selectionKeyCode={null}
         selectionMode={SelectionMode.Partial}
         minZoom={0.25}