App page content
+ App page content
+
-
setDeploymentRequest({
environment: environment.display_name,
@@ -139,17 +140,17 @@ export default function AppDeploy() {
if (!appDetail) return
-
)
}
diff --git a/web/app/components/app/deploy/shared/__tests__/access-point-icon.spec.tsx b/web/app/components/app/deploy/shared/__tests__/access-point-icon.spec.tsx
new file mode 100644
index 00000000000..80d18eaaee6
--- /dev/null
+++ b/web/app/components/app/deploy/shared/__tests__/access-point-icon.spec.tsx
@@ -0,0 +1,35 @@
+import { screen } from '@testing-library/react'
+import { renderWithConsoleQuery as render } from '@/test/console/query-data'
+import { AccessPointIcon } from '../access-point-icon'
+
+describe('AccessPointIcon', () => {
+ it('links active access points when navigation is allowed', () => {
+ render(
+
{icon}
diff --git a/web/app/components/apps/__tests__/app-card.spec.tsx b/web/app/components/apps/__tests__/app-card.spec.tsx
index af53580c464..adb020b86b7 100644
--- a/web/app/components/apps/__tests__/app-card.spec.tsx
+++ b/web/app/components/apps/__tests__/app-card.spec.tsx
@@ -1,5 +1,5 @@
import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
-import { fireEvent, screen, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import * as React from 'react'
import { STEP_BY_STEP_TOUR_TARGETS } from '@/app/components/step-by-step-tour/target-registry'
@@ -386,15 +386,18 @@ vi.mock('@/features/tag-management/components/app-card-tags', () => ({
AppCardTags: ({
tags,
canBindOrUnbindTags,
+ appName,
}: {
tags?: { id: string; name: string }[]
canBindOrUnbindTags?: boolean
+ appName: string
}) => {
return React.createElement(
'div',
{
'aria-label': 'tag-selector',
'data-can-bind-or-unbind-tags': String(Boolean(canBindOrUnbindTags)),
+ 'data-app-name': appName,
},
tags?.map((tag: { id: string; name: string }) =>
React.createElement('span', { key: tag.id }, tag.name),
@@ -472,6 +475,8 @@ describe('AppCard', () => {
const card = screen.getByRole('button', { name: 'Preview Only App' })
expect(card).toHaveClass('opacity-60')
+ expect(screen.getByRole('listitem')).toContainElement(card)
+ expect(card).toHaveAccessibleDescription('Only visible metadata')
expect(card).not.toHaveAttribute('aria-disabled')
expect(screen.getByText('Only visible metadata')).toBeInTheDocument()
expect(screen.getByText('Readonly Author')).toBeInTheDocument()
@@ -552,6 +557,17 @@ describe('AppCard', () => {
const emojiIcon = container.querySelector(`em-emoji[id="${mockApp.icon}"]`)
const imageIcon = container.querySelector('img')
expect(emojiIcon || imageIcon).toBeTruthy()
+ expect(emojiIcon?.parentElement).toHaveAttribute('aria-hidden', 'true')
+ })
+
+ it('should treat a redundant image icon as decorative', () => {
+ const imageApp = createMockApp({
+ icon_type: 'image',
+ icon_url: 'https://example.com/app-icon.png',
+ })
+ const { container } = render([0]) =>
wrapper: createConsoleQueryWrapper({ accountProfile: { id: 'member-2' } }).wrapper,
})
+const StatefulCreatorsFilter = ({ initialValue }: { initialValue: string[] }) => {
+ const [value, setValue] = useState(initialValue)
+ return
+
))}
)
diff --git a/web/app/components/apps/app-card/action-bar/index.tsx b/web/app/components/apps/app-card/action-bar/index.tsx
deleted file mode 100644
index 0f50501b552..00000000000
--- a/web/app/components/apps/app-card/action-bar/index.tsx
+++ /dev/null
@@ -1,569 +0,0 @@
-'use client'
-
-import type {
- AppPartial,
- EnvironmentVariableItemResponse,
-} from '@dify/contracts/api/console/apps/types.gen'
-import type { FormEventHandler } from 'react'
-import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
-import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
-import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
-import {
- AlertDialog,
- AlertDialogActions,
- AlertDialogCancelButton,
- AlertDialogConfirmButton,
- AlertDialogContent,
- AlertDialogDescription,
- AlertDialogTitle,
-} from '@langgenius/dify-ui/alert-dialog'
-import { Button } from '@langgenius/dify-ui/button'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuTrigger,
-} from '@langgenius/dify-ui/dropdown-menu'
-import { Field, FieldLabel } from '@langgenius/dify-ui/field'
-import { IconButton } from '@langgenius/dify-ui/icon-button'
-import { InputGroup, InputGroupAddon, InputGroupInput } from '@langgenius/dify-ui/input-group'
-import { toast } from '@langgenius/dify-ui/toast'
-import { Toggle } from '@langgenius/dify-ui/toggle'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
-import { useAtomValue } from 'jotai'
-import { memo, useCallback, useMemo, useState } from 'react'
-import { Trans, useTranslation } from 'react-i18next'
-import { useExportAppDsl, useExportWorkflowAppDsl } from '@/app/components/app/use-export-app-dsl'
-import StarIcon from '@/app/components/base/icons/src/vender/Star'
-import {
- getStepByStepTourDropdownMenuContentProps,
- useStepByStepTourControlledDropdown,
-} from '@/app/components/step-by-step-tour/dropdown-menu'
-import { workspacePermissionKeysAtom } from '@/context/permission-state'
-import { useProviderContext } from '@/context/provider-context'
-import { userProfileQueryOptions } from '@/features/account-profile/client'
-import { systemFeaturesQueryOptions } from '@/features/system-features/client'
-import dynamic from '@/next/dynamic'
-import { useRouter } from '@/next/navigation'
-import { consoleQuery } from '@/service/client'
-import { AppModeEnum } from '@/types/app'
-import { getRedirection } from '@/utils/app-redirection'
-import {
- getAppACLCapabilities,
- hasOnlyAppPreviewPermission,
- hasPermission,
-} from '@/utils/permission'
-import { AppCardOperationsMenuContent } from '../operations-menu'
-
-const EditAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), {
- ssr: false,
-})
-const DuplicateAppModal = dynamic(() => import('@/app/components/app/duplicate-modal'), {
- ssr: false,
-})
-const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
- ssr: false,
-})
-const DSLExportConfirmModal = dynamic(
- () => import('@/app/components/workflow/dsl-export-confirm-modal'),
- {
- ssr: false,
- },
-)
-
-const OPERATIONS_MENU_POPUP_CLASS_NAME = 'min-w-[216px]'
-
-type AppCardActionBarProps = {
- app: AppPartial
- stepByStepTourActionMenuOpen?: boolean
- stepByStepTourActionMenuHighlightPart?: string
-}
-
-export const AppCardActionBar = memo(
- ({
- app,
- stepByStepTourActionMenuOpen = false,
- stepByStepTourActionMenuHighlightPart,
- }: AppCardActionBarProps) => {
- const { t } = useTranslation()
- const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
- const { data: currentUserId } = useSuspenseQuery({
- ...userProfileQueryOptions(),
- select: (data) => data.profile.id,
- })
- const workspacePermissionKeys = useAtomValue(workspacePermissionKeysAtom)
- const isRbacEnabled = systemFeatures.rbac_enabled
- const { onPlanInfoChanged } = useProviderContext()
- const { push } = useRouter()
- const { mutate: copyApp } = useMutation(consoleQuery.apps.byAppId.copy.post.mutationOptions())
- const { mutateAsync: updateApp } = useMutation(consoleQuery.apps.byAppId.put.mutationOptions())
- const { mutate: deleteApp, isPending: isDeleting } = useMutation(
- consoleQuery.apps.byAppId.delete.mutationOptions(),
- )
- const { mutate: starApp, isPending: isStarring } = useMutation(
- consoleQuery.apps.byAppId.star.post.mutationOptions(),
- )
- const { mutate: unstarApp, isPending: isUnstarring } = useMutation(
- consoleQuery.apps.byAppId.star.delete.mutationOptions(),
- )
-
- const [showEditModal, setShowEditModal] = useState(false)
- const [showDuplicateModal, setShowDuplicateModal] = useState(false)
- const [showSwitchModal, setShowSwitchModal] = useState
@@ -34,7 +35,7 @@ export const AppCardSkeleton = React.memo(({ count = 6 }: AppCardSkeletonProps)
-
-
-
- {starActionLabel}
-
- {shouldShowOperationsMenu && (
-
- $['operation.exporting'], { ns: 'common' })
- : t(($) => $['operation.moreActionsFor'], {
- ns: 'common',
- name: app.name,
- })
- }
- disabled={isExporting}
- className="data-popup-open:bg-state-base-hover"
- >
-
-
- }
- />
-
-
-
- )}
-
- )}
- {showEditModal && (
-
+
{app.author_name && (
<>
@@ -187,7 +185,13 @@ export const AppCard = memo(
)
return (
- ([
+ AppModeEnum.ADVANCED_CHAT,
+ AppModeEnum.WORKFLOW,
+])
+
+function requiresPublishedWorkflowInExplore(app: AppPartial) {
+ return APP_MODES_REQUIRING_PUBLISHED_WORKFLOW_IN_EXPLORE.has(app.mode)
+}
+
+type AppCardOperationsMenuItemsProps = {
+ app: AppPartial
+ kind: 'context' | 'dropdown'
+ shouldShowEditOption: boolean
+ shouldShowDuplicateOption: boolean
+ shouldShowExportOption: boolean
+ shouldShowSwitchOption: boolean
+ shouldShowAccessConfigOption: boolean
+ shouldShowDeleteOption: boolean
+ isExporting: boolean
+ onEdit: () => void
+ onDuplicate: () => void
+ onExport: () => void
+ onSwitch: () => void
+ onDelete: () => void
+ onAccessConfig: () => void
+}
+
+function AppCardOperationsMenuItems({
+ app,
+ kind,
+ shouldShowEditOption,
+ shouldShowDuplicateOption,
+ shouldShowExportOption,
+ shouldShowSwitchOption,
+ shouldShowAccessConfigOption,
+ shouldShowDeleteOption,
+ isExporting,
+ onEdit,
+ onDuplicate,
+ onExport,
+ onSwitch,
+ onDelete,
+ onAccessConfig,
+}: AppCardOperationsMenuItemsProps) {
+ const { t } = useTranslation()
+ const openAsyncWindow = useAsyncWindowOpen()
+ const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
+ const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp } = useGetUserCanAccessApp({
+ appId: app.id,
+ enabled: systemFeatures.webapp_auth.enabled,
+ })
+ const needsPublishBeforeExplore = requiresPublishedWorkflowInExplore(app) && !app.workflow?.id
+ const shouldShowOpenInExploreOption =
+ !app.has_draft_trigger &&
+ app.access_mode !== AccessMode.EXTERNAL_MEMBERS &&
+ (needsPublishBeforeExplore ||
+ !systemFeatures.webapp_auth.enabled ||
+ (!isGettingUserCanAccessApp && Boolean(userCanAccessApp?.result)))
+ const hasEditGroup = shouldShowEditOption
+ const hasCreateExportGroup = shouldShowDuplicateOption || shouldShowExportOption
+ const hasSwitchOrExploreGroup = shouldShowSwitchOption || shouldShowOpenInExploreOption
+ const hasAccessDeleteGroup = shouldShowAccessConfigOption || shouldShowDeleteOption
+ const MenuItem = kind === 'context' ? ContextMenuItem : DropdownMenuItem
+ const MenuSeparator = kind === 'context' ? ContextMenuSeparator : DropdownMenuSeparator
+
+ function handleMenuAction(event: MouseEvent, action: () => void) {
+ event.stopPropagation()
+ event.preventDefault()
+ action()
+ }
+
+ async function handleOpenInstalledApp(event: MouseEvent) {
+ event.stopPropagation()
+ event.preventDefault()
+ if (requiresPublishedWorkflowInExplore(app) && !app.workflow?.id) {
+ toast.error(t(($) => $.notPublishedYet, { ns: 'app' }))
+ return
+ }
+
+ try {
+ await openAsyncWindow(
+ async () => {
+ const { installed_apps } = await fetchInstalledAppList(app.id)
+ if (installed_apps?.length > 0)
+ return `${basePath}${buildInstalledAppPath(installed_apps[0]!.id)}`
+ throw new Error(t(($) => $.notPublishedYet, { ns: 'app' }))
+ },
+ {
+ onError: (error) => {
+ toast.error(`${error.message || error}`)
+ },
+ },
+ )
+ } catch (error: unknown) {
+ const message = error instanceof Error ? error.message : `${error}`
+ toast.error(message)
+ }
+ }
+
+ return (
+ <>
+ {shouldShowEditOption && (
+
+ )}
+ {hasEditGroup &&
+ (hasCreateExportGroup || hasSwitchOrExploreGroup || hasAccessDeleteGroup) && (
+ ([])
+ const { exportAppDsl, isExporting: isAppDslExporting } = useExportAppDsl()
+ const { exportWorkflowAppDsl, isExporting: isWorkflowAppDslExporting } = useExportWorkflowAppDsl()
+ const isExporting = isAppDslExporting || isWorkflowAppDslExporting
+ const isTogglingStar = isStarring || isUnstarring
+ const appIconType = zIconType.safeParse(app.icon_type).data ?? null
+ const resourceMaintainer = app.maintainer ?? undefined
+ const maintainerPermissionOptions = useMemo(
+ () => ({
+ currentUserId,
+ resourceMaintainer,
+ workspacePermissionKeys,
+ isRbacEnabled,
+ }),
+ [currentUserId, isRbacEnabled, resourceMaintainer, workspacePermissionKeys],
+ )
+ const appACLCapabilities = useMemo(
+ () => getAppACLCapabilities(app.permission_keys, maintainerPermissionOptions),
+ [app.permission_keys, maintainerPermissionOptions],
+ )
+ const canCreateApp = hasPermission(workspacePermissionKeys, 'app.create_and_management')
+
+ const onConfirmDelete = useCallback(() => {
+ try {
+ deleteApp(
+ { params: { app_id: app.id } },
+ {
+ onSuccess: () => {
+ toast.success(t(($) => $.appDeleted, { ns: 'app' }))
+ onPlanInfoChanged()
+ setActiveDialog(null)
+ setConfirmDeleteInput('')
+ },
+ onError: (error) => {
+ const message = error instanceof Error ? error.message : ''
+ toast.error(
+ `${t(($) => $.appDeleteFailed, { ns: 'app' })}${message ? `: ${message}` : ''}`,
+ )
+ },
+ },
+ )
+ } catch (error) {
+ const message = error instanceof Error ? error.message : ''
+ toast.error(`${t(($) => $.appDeleteFailed, { ns: 'app' })}${message ? `: ${message}` : ''}`)
+ }
+ }, [app.id, deleteApp, onPlanInfoChanged, t])
+
+ const onDeleteDialogOpenChange = useCallback(
+ (open: boolean) => {
+ if (isDeleting) return
+
+ setActiveDialog(open ? 'delete' : null)
+ if (!open) setConfirmDeleteInput('')
+ },
+ [isDeleting],
+ )
+
+ const isDeleteConfirmDisabled = isDeleting || confirmDeleteInput !== app.name
+
+ const onDeleteDialogSubmit: FormEventHandler = useCallback(
+ (e) => {
+ e.preventDefault()
+ if (isDeleteConfirmDisabled) return
+
+ void onConfirmDelete()
+ },
+ [isDeleteConfirmDisabled, onConfirmDelete],
+ )
+
+ const handleShowEditModal = useCallback(() => {
+ setIsOperationsMenuOpen(false)
+ queueMicrotask(() => {
+ setActiveDialog('edit')
+ })
+ }, [setIsOperationsMenuOpen])
+
+ const handleShowDuplicateModal = useCallback(() => {
+ setIsOperationsMenuOpen(false)
+ queueMicrotask(() => {
+ setActiveDialog('duplicate')
+ })
+ }, [setIsOperationsMenuOpen])
+
+ const handleShowSwitchModal = useCallback(() => {
+ setIsOperationsMenuOpen(false)
+ queueMicrotask(() => {
+ setActiveDialog('switch')
+ })
+ }, [setIsOperationsMenuOpen])
+
+ const handleShowDeleteConfirm = useCallback(() => {
+ setIsOperationsMenuOpen(false)
+ queueMicrotask(() => {
+ setActiveDialog('delete')
+ })
+ }, [setIsOperationsMenuOpen])
+
+ const handleOpenAccessConfig = useCallback(() => {
+ setIsOperationsMenuOpen(false)
+ push(`/app/${app.id}/access-config`)
+ }, [app.id, push, setIsOperationsMenuOpen])
+
+ const onEdit: CreateAppModalProps['onConfirm'] = useCallback(
+ async ({
+ name,
+ icon_type,
+ icon,
+ icon_background,
+ description,
+ use_icon_as_answer_icon,
+ max_active_requests,
+ }) => {
+ try {
+ await updateApp({
+ params: { app_id: app.id },
+ body: {
+ name,
+ icon_type,
+ icon,
+ icon_background,
+ description,
+ use_icon_as_answer_icon,
+ max_active_requests,
+ },
+ })
+ setActiveDialog(null)
+ toast.success(t(($) => $.editDone, { ns: 'app' }))
+ } catch (e) {
+ toast.error(e instanceof Error ? e.message : t(($) => $.editFailed, { ns: 'app' }))
+ }
+ },
+ [app.id, t, updateApp],
+ )
+
+ const onCopy: DuplicateAppModalProps['onConfirm'] = ({
+ name,
+ icon_type,
+ icon,
+ icon_background,
+ }) => {
+ try {
+ copyApp(
+ {
+ params: { app_id: app.id },
+ body: {
+ name,
+ icon_type,
+ icon,
+ icon_background,
+ },
+ },
+ {
+ onSuccess: (newApp) => {
+ if (!('mode' in newApp)) {
+ toast.error(t(($) => $['newApp.appCreateFailed'], { ns: 'app' }))
+ return
+ }
+
+ setActiveDialog(null)
+ toast.success(t(($) => $['newApp.appCreated'], { ns: 'app' }))
+ onPlanInfoChanged()
+ getRedirection(newApp, push, {
+ currentUserId,
+ resourceMaintainer: newApp.maintainer ?? undefined,
+ workspacePermissionKeys,
+ isRbacEnabled,
+ })
+ },
+ onError: () => toast.error(t(($) => $['newApp.appCreateFailed'], { ns: 'app' })),
+ },
+ )
+ } catch {
+ toast.error(t(($) => $['newApp.appCreateFailed'], { ns: 'app' }))
+ }
+ return Promise.resolve()
+ }
+
+ const onExport = async (include = false) => {
+ await exportAppDsl({ appId: app.id, appName: app.name, includeSecret: include })
+ }
+
+ const exportCheck = async () => {
+ if (isExporting) return
+
+ setIsOperationsMenuOpen(false)
+ const isWorkflowApp =
+ app.mode === AppModeEnum.WORKFLOW || app.mode === AppModeEnum.ADVANCED_CHAT
+ const result = isWorkflowApp
+ ? await exportWorkflowAppDsl({ appId: app.id, appName: app.name })
+ : await exportAppDsl({ appId: app.id, appName: app.name })
+ if (result?.status === 'confirmation-required') setSecretEnvList(result.secretEnvList)
+ }
+
+ const handleToggleStar = useCallback(
+ (pressed: boolean) => {
+ if (isTogglingStar) return
+
+ const mutateStar = pressed ? starApp : unstarApp
+ try {
+ mutateStar(
+ { params: { app_id: app.id } },
+ {
+ onError: (error) =>
+ toast.error(
+ error instanceof Error
+ ? error.message
+ : t(($) => $['studio.starFailed'], { ns: 'app' }),
+ ),
+ },
+ )
+ } catch (error) {
+ toast.error(
+ error instanceof Error ? error.message : t(($) => $['studio.starFailed'], { ns: 'app' }),
+ )
+ }
+ },
+ [app.id, isTogglingStar, starApp, t, unstarApp],
+ )
+
+ const shouldShowEditOption = appACLCapabilities.canEdit
+ const shouldShowDuplicateOption = canCreateApp
+ const shouldShowExportOption = appACLCapabilities.canImportExportDSL
+ const shouldShowSwitchOption =
+ appACLCapabilities.canEdit &&
+ (app.mode === AppModeEnum.COMPLETION || app.mode === AppModeEnum.CHAT)
+ const shouldShowAccessConfigOption = appACLCapabilities.canAccessConfig
+ const shouldShowDeleteOption = appACLCapabilities.canDelete
+ const shouldShowOperationsMenu =
+ shouldShowEditOption ||
+ shouldShowDuplicateOption ||
+ shouldShowExportOption ||
+ shouldShowSwitchOption ||
+ shouldShowAccessConfigOption ||
+ shouldShowDeleteOption
+ const starToggleLabel = t(($) => $['studio.starApp'], { ns: 'app' })
+ const starToggleAccessibleLabel = `${starToggleLabel}: ${app.name}`
+ const operationsMenuItemsProps = {
+ app,
+ shouldShowEditOption,
+ shouldShowDuplicateOption,
+ shouldShowExportOption,
+ shouldShowSwitchOption,
+ shouldShowAccessConfigOption,
+ shouldShowDeleteOption,
+ isExporting,
+ onEdit: handleShowEditModal,
+ onDuplicate: handleShowDuplicateModal,
+ onExport: exportCheck,
+ onSwitch: handleShowSwitchModal,
+ onDelete: handleShowDeleteConfirm,
+ onAccessConfig: handleOpenAccessConfig,
+ }
+
+ return (
+ <>
+ {shouldShowOperationsMenu ? (
+
+
+
+
+ ) : (
+ children
+ )}
+ setActiveDialog(null)}
+ />
+ )}
+ {activeDialog === 'duplicate' && (
+ setActiveDialog(null)}
+ />
+ )}
+ {activeDialog === 'switch' && (
+ setActiveDialog(null)} />
+ )}
+
+
+
+
+
+ {secretEnvList.length > 0 && (
+ setSecretEnvList([])}
+ />
+ )}
+
+ )
+}
diff --git a/web/app/components/apps/app-card/operations-menu.tsx b/web/app/components/apps/app-card/operations-menu.tsx
deleted file mode 100644
index 714d9dce82e..00000000000
--- a/web/app/components/apps/app-card/operations-menu.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-'use client'
-
-import type { AppPartial } from '@dify/contracts/api/console/apps/types.gen'
-import type { MouseEvent } from 'react'
-import { DropdownMenuItem, DropdownMenuSeparator } from '@langgenius/dify-ui/dropdown-menu'
-import { toast } from '@langgenius/dify-ui/toast'
-import { useSuspenseQuery } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
-import { buildInstalledAppPath } from '@/app/components/explore/installed-app/routes'
-import { systemFeaturesQueryOptions } from '@/features/system-features/client'
-import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
-import { useGetUserCanAccessApp } from '@/service/access-control/use-app-access-control'
-import { fetchInstalledAppList } from '@/service/explore'
-import { AppModeEnum } from '@/types/app'
-import { basePath } from '@/utils/var'
-
-const APP_MODES_REQUIRING_PUBLISHED_WORKFLOW_IN_EXPLORE = new Set([
- AppModeEnum.ADVANCED_CHAT,
- AppModeEnum.WORKFLOW,
-])
-
-function requiresPublishedWorkflowInExplore(app: AppPartial) {
- return APP_MODES_REQUIRING_PUBLISHED_WORKFLOW_IN_EXPLORE.has(app.mode)
-}
-
-type AppCardOperationsMenuProps = {
- app: AppPartial
- shouldShowEditOption: boolean
- shouldShowDuplicateOption: boolean
- shouldShowExportOption: boolean
- shouldShowSwitchOption: boolean
- shouldShowOpenInExploreOption: boolean
- shouldShowAccessConfigOption: boolean
- shouldShowDeleteOption: boolean
- isExporting: boolean
- onEdit: () => void
- onDuplicate: () => void
- onExport: () => void
- onSwitch: () => void
- onDelete: () => void
- onAccessConfig: () => void
-}
-
-function AppCardOperationsMenu({
- app,
- shouldShowEditOption,
- shouldShowDuplicateOption,
- shouldShowExportOption,
- shouldShowSwitchOption,
- shouldShowOpenInExploreOption,
- shouldShowAccessConfigOption,
- shouldShowDeleteOption,
- isExporting,
- onEdit,
- onDuplicate,
- onExport,
- onSwitch,
- onDelete,
- onAccessConfig,
-}: AppCardOperationsMenuProps) {
- const { t } = useTranslation()
- const openAsyncWindow = useAsyncWindowOpen()
- const hasEditGroup = shouldShowEditOption
- const hasCreateExportGroup = shouldShowDuplicateOption || shouldShowExportOption
- const hasSwitchOrExploreGroup = shouldShowSwitchOption || shouldShowOpenInExploreOption
- const hasAccessDeleteGroup = shouldShowAccessConfigOption || shouldShowDeleteOption
-
- function handleMenuAction(e: MouseEvent, action: () => void) {
- e.stopPropagation()
- e.preventDefault()
- action()
- }
-
- async function handleOpenInstalledApp(e: MouseEvent) {
- e.stopPropagation()
- e.preventDefault()
- if (requiresPublishedWorkflowInExplore(app) && !app.workflow?.id) {
- toast.error(t(($) => $.notPublishedYet, { ns: 'app' }))
- return
- }
-
- try {
- await openAsyncWindow(
- async () => {
- const { installed_apps } = await fetchInstalledAppList(app.id)
- if (installed_apps?.length > 0)
- return `${basePath}${buildInstalledAppPath(installed_apps[0]!.id)}`
- throw new Error(t(($) => $.notPublishedYet, { ns: 'app' }))
- },
- {
- onError: (err) => {
- toast.error(`${err.message || err}`)
- },
- },
- )
- } catch (e: unknown) {
- const message = e instanceof Error ? e.message : `${e}`
- toast.error(message)
- }
- }
-
- return (
- <>
- {shouldShowEditOption && (
- handleMenuAction(e, onEdit)}>
-
- {t(($) => $.editApp, { ns: 'app' })}
-
-
- )}
- {hasEditGroup &&
- (hasCreateExportGroup || hasSwitchOrExploreGroup || hasAccessDeleteGroup) && (
- handleMenuAction(e, onDuplicate)}>
-
- {t(($) => $.duplicate, { ns: 'app' })}
-
-
- )}
- {shouldShowExportOption && (
- handleMenuAction(e, onExport)}
- >
-
- {t(($) => $.export, { ns: 'app' })}
-
-
- )}
- {hasCreateExportGroup && (hasSwitchOrExploreGroup || hasAccessDeleteGroup) && (
- handleMenuAction(e, onSwitch)}>
- {t(($) => $.switch, { ns: 'app' })}
-
- )}
- {shouldShowOpenInExploreOption && (
-
-
- {t(($) => $.openInExplore, { ns: 'app' })}
-
-
- )}
- {hasSwitchOrExploreGroup && hasAccessDeleteGroup && handleMenuAction(e, onAccessConfig)}
- >
-
- {t(($) => $['settings.resourceAccess'], { ns: 'common' })}
-
-
- )}
- {shouldShowAccessConfigOption && shouldShowDeleteOption && handleMenuAction(e, onDelete)}
- >
-
- {t(($) => $['operation.delete'], { ns: 'common' })}
-
-
- )}
-
- )
-}
-
-type AppCardOperationsMenuContentProps = Omit<
- AppCardOperationsMenuProps,
- 'shouldShowOpenInExploreOption'
->
-
-export function AppCardOperationsMenuContent(props: AppCardOperationsMenuContentProps) {
- const { data: systemFeatures } = useSuspenseQuery(systemFeaturesQueryOptions())
- const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp } = useGetUserCanAccessApp({
- appId: props.app.id,
- enabled: systemFeatures.webapp_auth.enabled,
- })
- const needsPublishBeforeExplore =
- requiresPublishedWorkflowInExplore(props.app) && !props.app.workflow?.id
-
- const shouldShowOpenInExploreOption =
- !props.app.has_draft_trigger &&
- (needsPublishBeforeExplore ||
- !systemFeatures.webapp_auth.enabled ||
- (!isGettingUserCanAccessApp && Boolean(userCanAccessApp?.result)))
-
- return (
- &
appListPages: AppPagination[]
hasNextPage: boolean
isFetchNextPageError: boolean
+ isError: boolean
isFetching: boolean
isFetchingNextPage: boolean
isPlaceholderData: boolean
@@ -68,12 +69,10 @@ function CatalogSkeleton() {
const { t } = useTranslation()
return (
-
+ a:focus-visible]:after:inset-ring-2 has-[>a:focus-visible]:after:inset-ring-state-accent-solid has-[>button:focus-visible]:after:inset-ring-2 has-[>button:focus-visible]:after:inset-ring-state-accent-solid motion-reduce:transition-none",
+ !isPreviewOnly &&
+ 'hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 has-data-popup-open:bg-components-card-bg-alt has-data-popup-open:shadow-md has-data-popup-open:shadow-shadow-shadow-5 [@media(hover:none)]:bg-components-card-bg-alt',
+ )}
+ >
{isPreviewOnly ? (
+
)
},
)
diff --git a/web/app/components/apps/app-card/interactions.tsx b/web/app/components/apps/app-card/interactions.tsx
new file mode 100644
index 00000000000..0bdb03c2101
--- /dev/null
+++ b/web/app/components/apps/app-card/interactions.tsx
@@ -0,0 +1,757 @@
+'use client'
+
+import type {
+ AppPartial,
+ EnvironmentVariableItemResponse,
+} from '@dify/contracts/api/console/apps/types.gen'
+import type { FormEventHandler, MouseEvent, ReactElement } from 'react'
+import type { DuplicateAppModalProps } from '@/app/components/app/duplicate-modal'
+import type { CreateAppModalProps } from '@/app/components/explore/create-app-modal'
+import { zIconType } from '@dify/contracts/api/console/apps/zod.gen'
+import {
+ AlertDialog,
+ AlertDialogActions,
+ AlertDialogCancelButton,
+ AlertDialogConfirmButton,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogTitle,
+} from '@langgenius/dify-ui/alert-dialog'
+import { Button } from '@langgenius/dify-ui/button'
+import { cn } from '@langgenius/dify-ui/cn'
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuSeparator,
+ ContextMenuTrigger,
+} from '@langgenius/dify-ui/context-menu'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@langgenius/dify-ui/dropdown-menu'
+import { Field, FieldLabel } from '@langgenius/dify-ui/field'
+import { IconButton } from '@langgenius/dify-ui/icon-button'
+import { InputGroup, InputGroupAddon, InputGroupInput } from '@langgenius/dify-ui/input-group'
+import { toast } from '@langgenius/dify-ui/toast'
+import { Toggle } from '@langgenius/dify-ui/toggle'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
+import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
+import { useAtomValue } from 'jotai'
+import { useCallback, useMemo, useState } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
+import { useExportAppDsl, useExportWorkflowAppDsl } from '@/app/components/app/use-export-app-dsl'
+import StarIcon from '@/app/components/base/icons/src/vender/Star'
+import { buildInstalledAppPath } from '@/app/components/explore/installed-app/routes'
+import {
+ getStepByStepTourDropdownMenuContentProps,
+ useStepByStepTourControlledDropdown,
+} from '@/app/components/step-by-step-tour/dropdown-menu'
+import { workspacePermissionKeysAtom } from '@/context/permission-state'
+import { useProviderContext } from '@/context/provider-context'
+import { userProfileQueryOptions } from '@/features/account-profile/client'
+import { systemFeaturesQueryOptions } from '@/features/system-features/client'
+import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
+import { AccessMode } from '@/models/access-control'
+import dynamic from '@/next/dynamic'
+import { useRouter } from '@/next/navigation'
+import { useGetUserCanAccessApp } from '@/service/access-control/use-app-access-control'
+import { consoleQuery } from '@/service/client'
+import { fetchInstalledAppList } from '@/service/explore'
+import { AppModeEnum } from '@/types/app'
+import { getRedirection } from '@/utils/app-redirection'
+import { getAppACLCapabilities, hasPermission } from '@/utils/permission'
+import { basePath } from '@/utils/var'
+
+const EditAppModal = dynamic(() => import('@/app/components/explore/create-app-modal'), {
+ ssr: false,
+})
+const DuplicateAppModal = dynamic(() => import('@/app/components/app/duplicate-modal'), {
+ ssr: false,
+})
+const SwitchAppModal = dynamic(() => import('@/app/components/app/switch-app-modal'), {
+ ssr: false,
+})
+const DSLExportConfirmModal = dynamic(
+ () => import('@/app/components/workflow/dsl-export-confirm-modal'),
+ {
+ ssr: false,
+ },
+)
+
+const OPERATIONS_MENU_POPUP_CLASS_NAME = 'min-w-[216px]'
+const APP_MODES_REQUIRING_PUBLISHED_WORKFLOW_IN_EXPLORE = new Set
+
+ {activeDialog === 'edit' && (
+
+
+
+ {starToggleLabel}
+
+ {shouldShowOperationsMenu && (
+
+ $['operation.exporting'], { ns: 'common' })
+ : t(($) => $['operation.moreActionsFor'], {
+ ns: 'common',
+ name: app.name,
+ })
+ }
+ disabled={isExporting}
+ className="data-popup-open:bg-state-base-hover"
+ >
+
+
+ }
+ />
+
+
+
+ )}
+
+ $.loading, { ns: 'common' })}
- >
- $['studio.allApps'], { ns: 'app' })}
+ />
+ )}
$.loading, { ns: 'common' })}>
+
)
}
@@ -85,6 +84,7 @@ function AppListCatalogContent({
hasActiveFilters,
hasNextPage,
isFetchNextPageError,
+ isError,
isFetching,
isFetchingNextPage,
isPlaceholderData,
@@ -118,6 +118,9 @@ function AppListCatalogContent({
const hasResolvedFirstPage = appListPages.length > 0
const hasAnyApp = (appListPages[0]?.total ?? 0) > 0
+ const emptyMessage = t(($) => $['filterEmpty.noApps'], { ns: 'app' })
+ const resultStatusMessage =
+ !isError && !isPlaceholderData && hasResolvedFirstPage && !hasAnyApp ? emptyMessage : ''
const showFirstEmptyState =
!isPlaceholderData && !hasAnyApp && canCreateApp && hasResolvedFirstPage && !hasActiveFilters
const showNoCreateEmptyState =
@@ -134,6 +137,9 @@ function AppListCatalogContent({
return (
<>
+
+ {resultStatusMessage}
+
{showFirstEmptyState ? (
-
+
{hasAnyApp ? (
- apps.map((app, index) => (
- $['studio.allApps'], { ns: 'app' })
+ : undefined
+ }
+ aria-labelledby={starredApps.length > 0 ? ALL_APPS_HEADING_ID : undefined}
+ className={APP_LIST_GRID_CLASS_NAME}
+ >
+ {apps.map((app, index) => (
+
+
)}
{hasNextPage && (
<>
- $['newApp.dropDSLToCreateApp'], { ns: 'app' })}
>
@@ -318,6 +344,7 @@ export function AppListCatalog(props: AppListCatalogProps) {
hasActiveFilters={hasActiveFilters}
hasNextPage={appList.hasNextPage}
isFetchNextPageError={appList.isFetchNextPageError}
+ isError={appList.isError}
isFetching={appList.isFetching}
isFetchingNextPage={appList.isFetchingNextPage}
isPlaceholderData={appList.isPlaceholderData}
diff --git a/web/app/components/apps/app-sort-filter.tsx b/web/app/components/apps/app-sort-filter.tsx
index 8593a3c36c5..fbb6ac1a614 100644
--- a/web/app/components/apps/app-sort-filter.tsx
+++ b/web/app/components/apps/app-sort-filter.tsx
@@ -49,7 +49,7 @@ export function AppSortFilter({ value, onChange }: AppSortFilterProps) {
className="flex h-8 cursor-pointer items-center rounded-lg border-none bg-components-input-bg-normal py-1 pr-2.5 pl-2 text-left whitespace-nowrap outline-hidden hover:bg-state-base-hover focus-visible:ring-2 focus-visible:ring-state-accent-solid data-popup-open:bg-state-base-hover"
>
- {sortByLabel}
+ {sortByLabel}{' '}
{activeOption.text}
diff --git a/web/app/components/apps/creators-filter.tsx b/web/app/components/apps/creators-filter.tsx
index 63c6be49b6c..b5de0249425 100644
--- a/web/app/components/apps/creators-filter.tsx
+++ b/web/app/components/apps/creators-filter.tsx
@@ -1,14 +1,22 @@
'use client'
import { Avatar } from '@langgenius/dify-ui/avatar'
-import { Checkbox } from '@langgenius/dify-ui/checkbox'
import { cn } from '@langgenius/dify-ui/cn'
import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuTrigger,
-} from '@langgenius/dify-ui/dropdown-menu'
-import { Input } from '@langgenius/dify-ui/input'
+ Combobox,
+ ComboboxInput,
+ ComboboxInputGroup,
+ ComboboxItem,
+ ComboboxItemIndicator,
+ ComboboxItemText,
+ ComboboxList,
+ ComboboxPopup,
+ ComboboxPortal,
+ ComboboxPositioner,
+ ComboboxTrigger,
+ ComboboxValue,
+} from '@langgenius/dify-ui/combobox'
+import { IconButton } from '@langgenius/dify-ui/icon-button'
import { useSuspenseQuery } from '@tanstack/react-query'
import { useCallback, useMemo, useRef, useState } from 'react'
import { useTranslation } from 'react-i18next'
@@ -38,6 +46,7 @@ const CreatorsFilter = ({ value, onChange }: CreatorsFilterProps) => {
})
const { data: membersData } = useMembers()
const [keywords, setKeywords] = useState('')
+ const triggerRef = useRef(null)
const searchInputRef = useRef(null)
const creatorOptions = useMemo(() => {
@@ -58,189 +67,187 @@ const CreatorsFilter = ({ value, onChange }: CreatorsFilterProps) => {
}))
}, [currentUserId, membersData?.accounts])
- const filteredCreators = useMemo(() => {
- const normalizedKeywords = keywords.trim().toLowerCase()
- if (!normalizedKeywords) return creatorOptions
-
- return creatorOptions.filter((creator) => {
- const keyword = normalizedKeywords
- return creator.name.toLowerCase().includes(keyword)
- })
- }, [creatorOptions, keywords])
-
+ const creatorMap = useMemo(
+ () => new Map(creatorOptions.map((creator) => [creator.id, creator])),
+ [creatorOptions],
+ )
+ const selectedCreatorValues = useMemo(() => {
+ return value.map(
+ (id) =>
+ creatorMap.get(id) ?? {
+ id,
+ name: id,
+ avatarUrl: null,
+ isYou: false,
+ },
+ )
+ }, [creatorMap, value])
const selectedCreators = useMemo(() => {
- const creatorMap = new Map(creatorOptions.map((creator) => [creator.id, creator]))
return value
.map((id) => creatorMap.get(id))
.filter((creator): creator is CreatorOption => Boolean(creator))
- }, [creatorOptions, value])
+ }, [creatorMap, value])
- const toggleCreator = useCallback(
- (creatorId: string) => {
- if (value.includes(creatorId)) {
- onChange(value.filter((id) => id !== creatorId))
- return
- }
-
- onChange([...value, creatorId])
- },
- [onChange, value],
+ const handleValueChange = useCallback(
+ (creators: CreatorOption[]) => onChange(creators.map((creator) => creator.id)),
+ [onChange],
)
- const resetCreators = useCallback(() => {
+ const clearCreatorQuery = useCallback(() => {
+ setKeywords('')
+ searchInputRef.current?.focus()
+ }, [])
+
+ const handleSelectionClear = useCallback(() => {
onChange([])
setKeywords('')
+ triggerRef.current?.focus()
}, [onChange])
const selectedCount = value.length
const selectedAvatarCreators = selectedCreators.slice(0, 3)
- const isSelected = selectedCount > 0
+ const creatorFilterLabel = t(($) => $['studio.filters.creators'], { ns: 'app' })
+ const resetLabel = t(($) => $['studio.filters.reset'], { ns: 'app' })
+ const selectedCountLabel =
+ selectedCount > 0
+ ? t(($) => $['dynamicSelect.selected'], {
+ ns: 'common',
+ count: selectedCount,
+ })
+ : ''
return (
-
- 0 && '-ml-1')}
- />
- ))}
-
- {`+${selectedCount}`}
- $['studio.filters.reset'], { ns: 'app' })}
- className="ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded-xs text-text-quaternary outline-hidden hover:text-text-tertiary focus-visible:ring-2 focus-visible:ring-state-accent-solid"
- onClick={(event) => {
- event.stopPropagation()
- resetCreators()
- }}
- onKeyDown={(event) => {
- if (event.key !== 'Enter' && event.key !== ' ') return
-
- event.preventDefault()
- event.stopPropagation()
- resetCreators()
- }}
- >
-
-
-
- )}
-
-
-
-
+ multiple
+ autoHighlight
+ items={creatorOptions}
+ value={selectedCreatorValues}
+ inputValue={keywords}
+ isItemEqualToValue={(creator, selectedCreator) => creator.id === selectedCreator.id}
+ itemToStringLabel={(creator) => creator.name}
+ itemToStringValue={(creator) => creator.id}
+ onInputValueChange={setKeywords}
+ onValueChange={handleValueChange}
+ >
+
+
+ $['studio.filters.creators'], { ns: 'app' })}
+ className="w-[min(280px,var(--available-width))] min-w-[min(var(--anchor-width),var(--available-width))] bg-components-panel-bg-blur text-sm text-text-secondary backdrop-blur-[5px]"
+ >
+ className="max-h-60 px-1 pt-0 pb-1">
+ {(creator) => (
+
+
+
+
+
+
+ )}
+
+
+
+
+
)
}
diff --git a/web/app/components/apps/import-from-marketplace-template-modal.tsx b/web/app/components/apps/import-from-marketplace-template-modal.tsx
index 2891d12e620..c28a24b8230 100644
--- a/web/app/components/apps/import-from-marketplace-template-modal.tsx
+++ b/web/app/components/apps/import-from-marketplace-template-modal.tsx
@@ -1,7 +1,7 @@
'use client'
import { Button } from '@langgenius/dify-ui/button'
-import { Dialog, DialogContent } from '@langgenius/dify-ui/dialog'
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
import { toast } from '@langgenius/dify-ui/toast'
import { RiCloseLine } from '@remixicon/react'
import { useCallback, useMemo, useRef, useState } from 'react'
@@ -73,22 +73,34 @@ const ImportFromMarketplaceTemplateModal = ({
}}
>
-
-
- $['studio.filters.searchCreators'], { ns: 'app' })}
- className={cn(
- 'pl-6.5 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',
- keywords && 'pr-6.5',
- )}
- value={keywords}
- onChange={(e) => setKeywords(e.target.value)}
- placeholder={t(($) => $['studio.filters.searchCreators'], { ns: 'app' })}
- />
- {!!keywords && (
-
- )}
-
- {isSelected && (
-
+
+
- >
+
+
+ {creatorFilterLabel}
+
+ {selectedCount > 0 ? (
+ <>
+
+ {selectedAvatarCreators.map((creator, index) => (
+ 0 && '-ml-1')}
+ />
+ ))}
+
+ {`+${selectedCount}`}
+
+ ) : (
+
+ )}
+
+ {selectedCountLabel}
+
+
+ {selectedCount > 0 && (
+
+
+
+ )}
+
+
- {filteredCreators.map((creator) => {
- const checked = value.includes(creator.id)
-
- return (
-
- )
- })}
-
-
-
+ >
+
+
+ $['studio.filters.searchCreators'], { ns: 'app' })}
+ className="block h-4.5 grow px-1 py-0 [&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none"
+ placeholder={t(($) => $['studio.filters.searchCreators'], { ns: 'app' })}
+ />
+
+ {!!keywords && (
+ $['operation.clear'], { ns: 'common' })}
+ className="me-0 shrink-0 text-text-quaternary hover:bg-transparent hover:text-text-tertiary focus-visible:bg-components-input-bg-hover focus-visible:ring-inset"
+ onClick={clearCreatorQuery}
+ >
+
+
+ )}
+
+
+
- {t(($) => $['marketplace.template.modalTitle'], { ns: 'app' })}
-
-
+
+
+ {t(($) => $['marketplace.template.modalTitle'], { ns: 'app' })}
+
+ $['operation.close'], { ns: 'common' })}
+ className="flex size-8 cursor-pointer items-center border-none bg-transparent p-0 outline-hidden focus-visible:ring-2 focus-visible:ring-state-accent-solid"
+ >
+
-
+
{isLoading && (
-
)}
{isError && (
- Loading...
+
+ {t(($) => $.loading, { ns: 'common' })}
+
+
+ a:focus-visible]:after:inset-ring-2 has-[>a:focus-visible]:after:inset-ring-state-accent-solid has-[>button:focus-visible]:after:inset-ring-2 has-[>button:focus-visible]:after:inset-ring-state-accent-solid motion-reduce:transition-none",
+ !isPreviewOnly &&
+ 'hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5 has-data-popup-open:bg-components-card-bg-alt has-data-popup-open:shadow-md has-data-popup-open:shadow-shadow-shadow-5 [@media(hover:none)]:bg-components-card-bg-alt',
+ )}
+ >
{isPreviewOnly ? (
+
)
},
)
diff --git a/web/app/components/apps/starred-app-list.tsx b/web/app/components/apps/starred-app-list.tsx
index ec3b9f5f74b..9d1a1e41695 100644
--- a/web/app/components/apps/starred-app-list.tsx
+++ b/web/app/components/apps/starred-app-list.tsx
@@ -12,11 +12,16 @@ type StarredAppListProps = {
stepByStepTourHighlightedCardCount?: number
}
-function SectionDivider({ label }: { label: string }) {
+const STARRED_APPS_HEADING_ID = 'starred-apps-heading'
+export const ALL_APPS_HEADING_ID = 'all-apps-heading'
+
+export function AppListSectionHeading({ id, label }: { id: string; label: string }) {
return (
)
@@ -34,8 +39,17 @@ export function StarredAppList({
return (
<>
- $['studio.starred'], { ns: 'app' })} />
- $['studio.allApps'], { ns: 'app' })} />
+
)
}
diff --git a/web/app/components/base/amplitude/__tests__/registration-tracking.spec.ts b/web/app/components/base/amplitude/__tests__/registration-tracking.spec.ts
index 30c6707a702..e5979a79623 100644
--- a/web/app/components/base/amplitude/__tests__/registration-tracking.spec.ts
+++ b/web/app/components/base/amplitude/__tests__/registration-tracking.spec.ts
@@ -1,55 +1,182 @@
import {
- flushRegistrationSuccess,
+ discardRegistrationSessionState,
REGISTRATION_SUCCESS_STORAGE_KEY,
+} from '../registration-session-state'
+import {
+ coordinateRegistrationConsent,
+ flushRegistrationSuccess,
rememberRegistrationSuccess,
+ subscribeRegistrationSuccess,
} from '../registration-tracking'
const mockTrackEvent = vi.hoisted(() => vi.fn())
+const mockAmplitudeInitialized = vi.hoisted(() => ({ value: true }))
const mockConsent = vi.hoisted(() => ({
- value: 'granted' as 'unknown' | 'denied' | 'granted',
+ value: 'granted' as 'unknown' | 'denied' | 'granted' | 'disabled',
}))
vi.mock('../utils', () => ({
trackEvent: (...args: unknown[]) => mockTrackEvent(...args),
}))
+vi.mock('../init', () => ({
+ getIsAmplitudeInitialized: () => mockAmplitudeInitialized.value,
+}))
+
vi.mock('@/app/components/base/analytics-consent/consent-store', () => ({
getAnalyticsConsent: () => mockConsent.value,
}))
+const successResult = () => ({
+ promise: Promise.resolve({ code: 200 }),
+})
+
+const getStoredMarker = () =>
+ JSON.parse(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)!)
+
describe('registration tracking', () => {
beforeEach(() => {
vi.clearAllMocks()
vi.unstubAllGlobals()
+ vi.useRealTimers()
window.sessionStorage.clear()
mockConsent.value = 'granted'
+ mockAmplitudeInitialized.value = true
+ mockTrackEvent.mockImplementation(successResult)
+ coordinateRegistrationConsent('denied')
+ mockConsent.value = 'granted'
+ vi.spyOn(globalThis.crypto, 'randomUUID').mockReturnValue(
+ '11111111-1111-4111-8111-111111111111',
+ )
})
- // Captures the registration event for a later flush instead of firing it right away.
- describe('rememberRegistrationSuccess', () => {
- it('should store the base event and not track immediately when there is no utm info', () => {
- rememberRegistrationSuccess({ method: 'email' })
+ afterEach(() => {
+ discardRegistrationSessionState()
+ vi.useRealTimers()
+ })
- expect(JSON.parse(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)!)).toEqual({
- eventName: 'user_registration_success',
- properties: { method: 'email' },
+ describe('rememberRegistrationSuccess', () => {
+ it('stores a versioned marker with stable delivery metadata and allowlisted attribution', () => {
+ vi.setSystemTime(new Date('2026-08-26T09:00:00.000Z'))
+
+ const persisted = rememberRegistrationSuccess({
+ method: 'email',
+ utmInfo: {
+ utm_source: 'linkedin',
+ utm_medium: 'social',
+ utm_campaign: 'launch',
+ utm_content: 'hero',
+ utm_term: 'agents',
+ slug: 'agent-launch',
+ unexpected: 'discard-me',
+ nested: { unsafe: true },
+ },
+ })
+
+ const occurredAt = Date.now()
+ expect(getStoredMarker()).toEqual({
+ version: 2,
+ registrationId: '11111111-1111-4111-8111-111111111111',
+ occurredAt,
+ expiresAt: occurredAt + 24 * 60 * 60 * 1000,
+ eventName: 'user_registration_success_with_utm',
+ method: 'email',
+ attribution: {
+ utm_source: 'linkedin',
+ utm_medium: 'social',
+ utm_campaign: 'launch',
+ utm_content: 'hero',
+ utm_term: 'agents',
+ slug: 'agent-launch',
+ },
})
expect(mockTrackEvent).not.toHaveBeenCalled()
+ expect(persisted).toBe(true)
})
- it('should store the utm event and merge utm info into properties when utm info is present', () => {
- rememberRegistrationSuccess({
- method: 'oauth',
- utmInfo: { utm_source: 'linkedin', slug: 'agent-launch' },
+ it('persists the latest email marker while consent is unknown so a later grant can flush it', async () => {
+ mockConsent.value = 'unknown'
+ rememberRegistrationSuccess({ method: 'email', utmInfo: { utm_source: 'first' } })
+ rememberRegistrationSuccess({ method: 'email', utmInfo: { utm_source: 'latest' } })
+
+ expect(getStoredMarker()).toMatchObject({
+ version: 2,
+ method: 'email',
+ attribution: { utm_source: 'latest' },
})
- expect(JSON.parse(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)!)).toEqual({
- eventName: 'user_registration_success_with_utm',
- properties: { method: 'oauth', utm_source: 'linkedin', slug: 'agent-launch' },
- })
+ await flushRegistrationSuccess()
+ expect(mockTrackEvent).not.toHaveBeenCalled()
+
+ mockConsent.value = 'granted'
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(1)
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
})
- it('should swallow errors when writing to sessionStorage fails', () => {
+ it('discards an unknown-consent marker on denial before a later grant can flush it', async () => {
+ mockConsent.value = 'unknown'
+ rememberRegistrationSuccess({ method: 'email' })
+
+ coordinateRegistrationConsent('denied')
+ mockConsent.value = 'granted'
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).not.toHaveBeenCalled()
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ })
+
+ it('discards a pending marker and GA guard at an account boundary', async () => {
+ mockConsent.value = 'unknown'
+ rememberRegistrationSuccess({ method: 'email' })
+ window.sessionStorage.setItem('oauth_registration_ga_sent', 'true')
+
+ discardRegistrationSessionState()
+ mockConsent.value = 'granted'
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).not.toHaveBeenCalled()
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ expect(window.sessionStorage.getItem('oauth_registration_ga_sent')).toBeNull()
+ })
+
+ it.each(['denied', 'disabled'] as const)(
+ 'discards a stored marker when consent changes to %s',
+ (consent) => {
+ rememberRegistrationSuccess({ method: 'email' })
+
+ coordinateRegistrationConsent(consent)
+
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ },
+ )
+
+ it('persists an oauth marker while consent is unknown so a reload can still flush it', async () => {
+ mockConsent.value = 'unknown'
+ rememberRegistrationSuccess({ method: 'oauth' })
+
+ expect(getStoredMarker()).toMatchObject({ method: 'oauth' })
+
+ mockConsent.value = 'granted'
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(1)
+ })
+
+ it('notifies consumers only after a marker is stored', () => {
+ const listener = vi.fn()
+ const unsubscribe = subscribeRegistrationSuccess(listener)
+
+ rememberRegistrationSuccess({ method: 'email' })
+
+ expect(listener).toHaveBeenCalledTimes(1)
+ unsubscribe()
+ })
+
+ it('swallows sessionStorage write errors without notifying consumers', () => {
+ const listener = vi.fn()
+ const unsubscribe = subscribeRegistrationSuccess(listener)
vi.stubGlobal('window', {
sessionStorage: {
getItem: vi.fn(() => null),
@@ -60,158 +187,365 @@ describe('registration tracking', () => {
},
})
- try {
- expect(() => rememberRegistrationSuccess({ method: 'email' })).not.toThrow()
- } finally {
- vi.unstubAllGlobals()
- }
+ expect(rememberRegistrationSuccess({ method: 'email' })).toBe(false)
+ expect(listener).not.toHaveBeenCalled()
+ unsubscribe()
+ })
+ })
+
+ describe('flushRegistrationSuccess', () => {
+ it('waits for a successful SDK result before acknowledging the marker', async () => {
+ let resolveTrack!: (result: { code: number }) => void
+ mockTrackEvent.mockReturnValue({
+ promise: new Promise((resolve) => {
+ resolveTrack = resolve
+ }),
+ })
+ vi.setSystemTime(new Date('2026-08-26T09:00:00.000Z'))
+ rememberRegistrationSuccess({ method: 'oauth', utmInfo: { utm_source: 'blog' } })
+
+ const flushPromise = flushRegistrationSuccess()
+
+ expect(getStoredMarker()).toBeTruthy()
+ expect(mockTrackEvent).toHaveBeenCalledWith(
+ 'user_registration_success_with_utm',
+ {
+ method: 'oauth',
+ utm_source: 'blog',
+ registration_id: '11111111-1111-4111-8111-111111111111',
+ event_version: 2,
+ tracking_contract_version: 'consent_wait_v2',
+ },
+ {
+ insert_id: '11111111-1111-4111-8111-111111111111',
+ time: Date.now(),
+ },
+ )
+
+ resolveTrack({ code: 200 })
+ await flushPromise
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
})
- it.each(['unknown', 'denied'] as const)(
- 'should not cache an event while consent is %s',
- (consent) => {
- mockConsent.value = consent
+ it.each([
+ ['unknown consent', () => (mockConsent.value = 'unknown')],
+ ['uninitialized Amplitude', () => (mockAmplitudeInitialized.value = false)],
+ ])('defers without deleting for %s', async (_label, makeIneligible) => {
+ rememberRegistrationSuccess({ method: 'email' })
+ makeIneligible()
+
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).not.toHaveBeenCalled()
+ expect(getStoredMarker()).toBeTruthy()
+ })
+
+ it('discards a pending marker when consent is denied', async () => {
+ rememberRegistrationSuccess({ method: 'oauth' })
+ mockConsent.value = 'denied'
+
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).not.toHaveBeenCalled()
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ })
+
+ it('retains the marker on SDK rejection or a non-success result and reuses its id and time', async () => {
+ vi.setSystemTime(new Date('2026-08-26T09:00:00.000Z'))
+ rememberRegistrationSuccess({ method: 'email' })
+ const marker = getStoredMarker()
+ mockTrackEvent
+ .mockReturnValueOnce({ promise: Promise.reject(new Error('network failed')) })
+ .mockReturnValueOnce({ promise: Promise.resolve({ code: 500 }) })
+ .mockImplementation(successResult)
+
+ await flushRegistrationSuccess()
+ await flushRegistrationSuccess()
+
+ expect(getStoredMarker()).toEqual(marker)
+ expect(mockTrackEvent.mock.calls[0]?.[2]).toEqual({
+ insert_id: marker.registrationId,
+ time: marker.occurredAt,
+ })
+ expect(mockTrackEvent.mock.calls[1]?.[2]).toEqual({
+ insert_id: marker.registrationId,
+ time: marker.occurredAt,
+ })
+ })
+
+ it.each(['rejected acknowledgement', 'non-success acknowledgement'] as const)(
+ 'continues with a replacement marker after a %s',
+ async (oldAcknowledgement) => {
+ const firstRegistrationId = 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa'
+ const replacementRegistrationId = 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb'
+ vi.spyOn(globalThis.crypto, 'randomUUID')
+ .mockReturnValueOnce(firstRegistrationId)
+ .mockReturnValueOnce(replacementRegistrationId)
+ let resolveOldAcknowledgement!: (result: { code: number }) => void
+ let rejectOldAcknowledgement!: (error: Error) => void
+ const pendingOldAcknowledgement = new Promise<{ code: number }>((resolve, reject) => {
+ resolveOldAcknowledgement = resolve
+ rejectOldAcknowledgement = reject
+ })
+ mockTrackEvent
+ .mockReturnValueOnce({ promise: pendingOldAcknowledgement })
+ .mockImplementation(successResult)
rememberRegistrationSuccess({ method: 'email' })
+ const firstFlush = flushRegistrationSuccess()
+ rememberRegistrationSuccess({ method: 'email' })
+ const replacementFlush = flushRegistrationSuccess()
+ expect(replacementFlush).toBe(firstFlush)
+ expect(mockTrackEvent).toHaveBeenCalledTimes(1)
+
+ if (oldAcknowledgement === 'rejected acknowledgement')
+ rejectOldAcknowledgement(new Error('network failed'))
+ else resolveOldAcknowledgement({ code: 500 })
+ await firstFlush
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(2)
+ expect(mockTrackEvent.mock.calls[1]?.[2]).toEqual({
+ insert_id: replacementRegistrationId,
+ time: expect.any(Number),
+ })
expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
},
)
- })
- // Replays the remembered event exactly once, after the user ID has been attached.
- describe('flushRegistrationSuccess', () => {
- it('should track the remembered event and clear it from storage', () => {
- rememberRegistrationSuccess({ method: 'email', utmInfo: { utm_source: 'blog' } })
-
- flushRegistrationSuccess()
+ it('retries an acknowledgement-failed marker after the backoff delay', async () => {
+ vi.useFakeTimers()
+ rememberRegistrationSuccess({ method: 'email' })
+ const marker = getStoredMarker()
+ mockTrackEvent
+ .mockReturnValueOnce({ promise: Promise.reject(new Error('network failed')) })
+ .mockImplementation(successResult)
+ await flushRegistrationSuccess()
+ expect(getStoredMarker()).toEqual(marker)
expect(mockTrackEvent).toHaveBeenCalledTimes(1)
- expect(mockTrackEvent).toHaveBeenCalledWith('user_registration_success_with_utm', {
- method: 'email',
- utm_source: 'blog',
+
+ await vi.advanceTimersByTimeAsync(1000)
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(2)
+ expect(mockTrackEvent.mock.calls[1]?.[2]).toEqual({
+ insert_id: marker.registrationId,
+ time: marker.occurredAt,
})
expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
})
- it('should do nothing when there is no pending event', () => {
- flushRegistrationSuccess()
+ it('does not retry an acknowledgement-failed marker after an account boundary', async () => {
+ rememberRegistrationSuccess({ method: 'email' })
+ mockTrackEvent.mockReturnValueOnce({ promise: Promise.reject(new Error('network failed')) })
+ await flushRegistrationSuccess()
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).not.toBeNull()
+
+ discardRegistrationSessionState()
+ await flushRegistrationSuccess()
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(1)
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ })
+
+ it.each([
+ ['session discard', 'resolves'] as const,
+ ['session discard', 'rejects'] as const,
+ ['denied consent', 'resolves'] as const,
+ ['disabled analytics', 'resolves'] as const,
+ ])(
+ 'isolates a new registration flush after %s while the old SDK acknowledgement %s',
+ async (invalidation, oldAcknowledgement) => {
+ const accountARegistrationId = 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa'
+ const accountBRegistrationId = 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb'
+ vi.spyOn(globalThis.crypto, 'randomUUID')
+ .mockReturnValueOnce(accountARegistrationId)
+ .mockReturnValueOnce(accountBRegistrationId)
+
+ let resolveAccountA!: (result: { code: number }) => void
+ let rejectAccountA!: (error: Error) => void
+ let resolveAccountB!: (result: { code: number }) => void
+ const accountAAcknowledgement = new Promise<{ code: number }>((resolve, reject) => {
+ resolveAccountA = resolve
+ rejectAccountA = reject
+ })
+ const accountBAcknowledgement = new Promise<{ code: number }>((resolve) => {
+ resolveAccountB = resolve
+ })
+ mockTrackEvent
+ .mockReturnValueOnce({ promise: accountAAcknowledgement })
+ .mockReturnValueOnce({ promise: accountBAcknowledgement })
+
+ rememberRegistrationSuccess({ method: 'email' })
+ const accountAFlush = flushRegistrationSuccess()
+
+ if (invalidation === 'session discard') {
+ discardRegistrationSessionState()
+ } else {
+ const terminalConsent = invalidation === 'denied consent' ? 'denied' : 'disabled'
+ mockConsent.value = terminalConsent
+ coordinateRegistrationConsent(terminalConsent)
+ mockConsent.value = 'granted'
+ }
+
+ rememberRegistrationSuccess({ method: 'email' })
+ const accountBMarker = window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)
+ const accountBFlush = flushRegistrationSuccess()
+
+ const settleAccountA = () => {
+ if (oldAcknowledgement === 'resolves') resolveAccountA({ code: 200 })
+ else rejectAccountA(new Error('account A request failed'))
+ }
+
+ try {
+ expect(accountBMarker).not.toBeNull()
+ expect(accountBFlush).not.toBe(accountAFlush)
+ expect(mockTrackEvent).toHaveBeenCalledTimes(2)
+ expect(mockTrackEvent.mock.calls.map((call) => call[2])).toEqual([
+ { insert_id: accountARegistrationId, time: expect.any(Number) },
+ { insert_id: accountBRegistrationId, time: expect.any(Number) },
+ ])
+
+ settleAccountA()
+ await accountAFlush
+
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBe(
+ accountBMarker,
+ )
+ expect(flushRegistrationSuccess()).toBe(accountBFlush)
+ expect(mockTrackEvent).toHaveBeenCalledTimes(2)
+
+ resolveAccountB({ code: 200 })
+ await accountBFlush
+
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ } finally {
+ settleAccountA()
+ resolveAccountB({ code: 200 })
+ await Promise.allSettled([accountAFlush, accountBFlush])
+ }
+ },
+ )
+
+ it('coalesces concurrent flushes into one SDK send', async () => {
+ let resolveTrack!: (result: { code: number }) => void
+ mockTrackEvent.mockReturnValue({
+ promise: new Promise((resolve) => {
+ resolveTrack = resolve
+ }),
+ })
+ rememberRegistrationSuccess({ method: 'email' })
+
+ const first = flushRegistrationSuccess()
+ const second = flushRegistrationSuccess()
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(1)
+ resolveTrack({ code: 200 })
+ await Promise.all([first, second])
+ })
+
+ it('discards expired and malformed markers without tracking', async () => {
+ vi.setSystemTime(new Date('2026-08-26T09:00:00.000Z'))
+ rememberRegistrationSuccess({ method: 'email' })
+ vi.setSystemTime(new Date('2026-08-27T09:00:00.000Z'))
+
+ await flushRegistrationSuccess()
+ expect(mockTrackEvent).not.toHaveBeenCalled()
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+
+ const malformedMarkers = [
+ '{not-json',
+ JSON.stringify({ version: 1, eventName: 'user_registration_success' }),
+ JSON.stringify({
+ version: 2,
+ registrationId: 'id',
+ occurredAt: Date.now(),
+ expiresAt: Date.now() + 1000,
+ eventName: 'arbitrary_event',
+ method: 'email',
+ attribution: {},
+ }),
+ ]
+
+ for (const raw of malformedMarkers) {
+ window.sessionStorage.setItem(REGISTRATION_SUCCESS_STORAGE_KEY, raw)
+ await flushRegistrationSuccess()
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
+ }
expect(mockTrackEvent).not.toHaveBeenCalled()
})
- it('should fire the event at most once across repeated flushes', () => {
- rememberRegistrationSuccess({ method: 'oauth' })
+ it('accepts a persisted timestamp just inside the five-minute clock-skew allowance', async () => {
+ vi.setSystemTime(new Date('2026-08-26T09:04:59.999Z'))
+ rememberRegistrationSuccess({ method: 'email' })
+ vi.setSystemTime(new Date('2026-08-26T09:00:00.000Z'))
- flushRegistrationSuccess()
- flushRegistrationSuccess()
+ await flushRegistrationSuccess()
expect(mockTrackEvent).toHaveBeenCalledTimes(1)
})
- it('should discard a pending event when consent was revoked before flush', () => {
- rememberRegistrationSuccess({ method: 'oauth' })
- mockConsent.value = 'denied'
+ it('rejects a persisted timestamp just outside the five-minute clock-skew allowance', async () => {
+ vi.setSystemTime(new Date('2026-08-26T09:05:00.001Z'))
+ rememberRegistrationSuccess({ method: 'email' })
+ vi.setSystemTime(new Date('2026-08-26T09:00:00.000Z'))
- flushRegistrationSuccess()
+ await flushRegistrationSuccess()
expect(mockTrackEvent).not.toHaveBeenCalled()
expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
})
- it('should clear malformed pending data without tracking', () => {
- window.sessionStorage.setItem(REGISTRATION_SUCCESS_STORAGE_KEY, '{not-json')
-
- flushRegistrationSuccess()
-
- expect(mockTrackEvent).not.toHaveBeenCalled()
- expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
- })
-
- it('should clear the pending entry without tracking when it has no event name', () => {
- window.sessionStorage.setItem(
- REGISTRATION_SUCCESS_STORAGE_KEY,
- JSON.stringify({ properties: { method: 'email' } }),
- )
-
- flushRegistrationSuccess()
-
- expect(mockTrackEvent).not.toHaveBeenCalled()
- expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBeNull()
- })
-
- it('should stop without tracking when reading from sessionStorage throws', () => {
+ it('handles storage read errors without throwing', async () => {
vi.stubGlobal('window', {
sessionStorage: {
getItem: () => {
throw new Error('read failed')
},
setItem: vi.fn(),
- removeItem: vi.fn(),
- },
- })
-
- try {
- expect(() => flushRegistrationSuccess()).not.toThrow()
- expect(mockTrackEvent).not.toHaveBeenCalled()
- } finally {
- vi.unstubAllGlobals()
- }
- })
-
- it('should still track when clearing the pending entry fails', () => {
- const pending = { eventName: 'user_registration_success', properties: { method: 'email' } }
- vi.stubGlobal('window', {
- sessionStorage: {
- getItem: () => JSON.stringify(pending),
- setItem: vi.fn(),
removeItem: () => {
throw new Error('remove failed')
},
},
})
- try {
- flushRegistrationSuccess()
-
- expect(mockTrackEvent).toHaveBeenCalledWith('user_registration_success', {
- method: 'email',
- })
- } finally {
- vi.unstubAllGlobals()
- }
- })
- })
-
- // Both producers and the consumer must degrade gracefully when sessionStorage is
- // missing (SSR) or blocked (privacy mode / disabled storage).
- describe('when sessionStorage is unavailable', () => {
- it('should no-op without throwing when window is undefined', () => {
- vi.stubGlobal('window', undefined)
-
- try {
- expect(() => rememberRegistrationSuccess({ method: 'email' })).not.toThrow()
- expect(() => flushRegistrationSuccess()).not.toThrow()
- expect(mockTrackEvent).not.toHaveBeenCalled()
- } finally {
- vi.unstubAllGlobals()
- }
+ await expect(flushRegistrationSuccess()).resolves.toBeUndefined()
+ expect(mockTrackEvent).not.toHaveBeenCalled()
})
- it('should no-op without throwing when accessing sessionStorage throws', () => {
+ it('retains the same marker when acknowledgement removal fails', async () => {
+ rememberRegistrationSuccess({ method: 'email' })
+ const raw = window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)
+ const removeItem = vi.fn(() => {
+ throw new Error('remove failed')
+ })
+ vi.stubGlobal('window', {
+ sessionStorage: {
+ getItem: () => raw,
+ setItem: vi.fn(),
+ removeItem,
+ },
+ })
+
+ await expect(flushRegistrationSuccess()).resolves.toBeUndefined()
+ await expect(flushRegistrationSuccess()).resolves.toBeUndefined()
+
+ expect(mockTrackEvent).toHaveBeenCalledTimes(2)
+ expect(mockTrackEvent.mock.calls[0]?.[2]).toEqual(mockTrackEvent.mock.calls[1]?.[2])
+ expect(removeItem).toHaveBeenCalledTimes(2)
+ })
+
+ it('no-ops when sessionStorage access is blocked', async () => {
vi.stubGlobal('window', {
get sessionStorage() {
throw new Error('storage disabled')
},
})
- try {
- expect(() => rememberRegistrationSuccess({ method: 'oauth' })).not.toThrow()
- expect(() => flushRegistrationSuccess()).not.toThrow()
- expect(mockTrackEvent).not.toHaveBeenCalled()
- } finally {
- vi.unstubAllGlobals()
- }
+ expect(() => rememberRegistrationSuccess({ method: 'email' })).not.toThrow()
+ await expect(flushRegistrationSuccess()).resolves.toBeUndefined()
+ expect(mockTrackEvent).not.toHaveBeenCalled()
})
})
})
diff --git a/web/app/components/base/amplitude/registration-consent-coordinator.tsx b/web/app/components/base/amplitude/registration-consent-coordinator.tsx
new file mode 100644
index 00000000000..8d19d05cdc2
--- /dev/null
+++ b/web/app/components/base/amplitude/registration-consent-coordinator.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useAnalyticsConsent } from '@/app/components/base/analytics-consent/consent-store'
+import { coordinateRegistrationConsent } from './registration-tracking'
+
+export function RegistrationConsentCoordinator() {
+ const consent = useAnalyticsConsent()
+
+ useEffect(() => {
+ coordinateRegistrationConsent(consent)
+ }, [consent])
+
+ return null
+}
diff --git a/web/app/components/base/amplitude/registration-session-state.ts b/web/app/components/base/amplitude/registration-session-state.ts
new file mode 100644
index 00000000000..5eae9390cb1
--- /dev/null
+++ b/web/app/components/base/amplitude/registration-session-state.ts
@@ -0,0 +1,99 @@
+export const REGISTRATION_SUCCESS_STORAGE_KEY = 'pending_registration_success_event'
+export const OAUTH_REGISTRATION_GA_SENT_KEY = 'oauth_registration_ga_sent'
+const FLUSH_RETRY_DELAYS_MS = [1000, 4000, 16000] as const
+
+export const REGISTRATION_METHODS = ['email', 'oauth'] as const
+
+export const ATTRIBUTION_KEYS = [
+ 'utm_source',
+ 'utm_medium',
+ 'utm_campaign',
+ 'utm_content',
+ 'utm_term',
+ 'slug',
+] as const
+
+export type RegistrationMethod = (typeof REGISTRATION_METHODS)[number]
+export type RegistrationAttribution = Partial>
+
+export type RegistrationIntent = {
+ registrationId: string
+ occurredAt: number
+ method: RegistrationMethod
+ attribution: RegistrationAttribution
+}
+
+let registrationDeliveryGeneration = 0
+let flushRetryTimer: ReturnType | null = null
+let flushRetryAttempt = 0
+
+export const getRegistrationSessionStorage = (): Storage | null => {
+ try {
+ if (typeof window === 'undefined') return null
+ return window.sessionStorage
+ } catch {
+ return null
+ }
+}
+
+export const removeStoredRegistrationMarker = (storage = getRegistrationSessionStorage()) => {
+ try {
+ storage?.removeItem(REGISTRATION_SUCCESS_STORAGE_KEY)
+ } catch {}
+}
+
+export const hasSentOAuthRegistrationGA = () => {
+ try {
+ return getRegistrationSessionStorage()?.getItem(OAUTH_REGISTRATION_GA_SENT_KEY) === 'true'
+ } catch {
+ return false
+ }
+}
+
+export const markOAuthRegistrationGASent = () => {
+ try {
+ getRegistrationSessionStorage()?.setItem(OAUTH_REGISTRATION_GA_SENT_KEY, 'true')
+ } catch {}
+}
+
+export const clearOAuthRegistrationGAGuard = () => {
+ try {
+ getRegistrationSessionStorage()?.removeItem(OAUTH_REGISTRATION_GA_SENT_KEY)
+ } catch {}
+}
+
+export const getRegistrationDeliveryGeneration = () => registrationDeliveryGeneration
+
+export const clearRegistrationFlushRetry = () => {
+ if (flushRetryTimer !== null) {
+ clearTimeout(flushRetryTimer)
+ flushRetryTimer = null
+ }
+ flushRetryAttempt = 0
+}
+
+export const scheduleRegistrationFlushRetry = (runFlush: () => void) => {
+ if (flushRetryAttempt >= FLUSH_RETRY_DELAYS_MS.length) return
+
+ const delay = FLUSH_RETRY_DELAYS_MS[flushRetryAttempt]
+ flushRetryAttempt += 1
+ const generation = registrationDeliveryGeneration
+ if (flushRetryTimer !== null) clearTimeout(flushRetryTimer)
+
+ flushRetryTimer = setTimeout(() => {
+ flushRetryTimer = null
+ if (generation !== registrationDeliveryGeneration) return
+ runFlush()
+ }, delay)
+}
+
+export const invalidateRegistrationDeliveryState = () => {
+ registrationDeliveryGeneration += 1
+ clearRegistrationFlushRetry()
+ removeStoredRegistrationMarker()
+}
+
+export const discardRegistrationSessionState = () => {
+ invalidateRegistrationDeliveryState()
+ clearOAuthRegistrationGAGuard()
+}
diff --git a/web/app/components/base/amplitude/registration-tracking.ts b/web/app/components/base/amplitude/registration-tracking.ts
index 5562d2173c4..15c11bc6590 100644
--- a/web/app/components/base/amplitude/registration-tracking.ts
+++ b/web/app/components/base/amplitude/registration-tracking.ts
@@ -1,38 +1,121 @@
+import type {
+ RegistrationAttribution,
+ RegistrationIntent,
+ RegistrationMethod,
+} from './registration-session-state'
+import type { AnalyticsConsent } from '@/app/components/base/analytics-consent/consent-store'
import { getAnalyticsConsent } from '@/app/components/base/analytics-consent/consent-store'
+import { getIsAmplitudeInitialized } from './init'
+import {
+ ATTRIBUTION_KEYS,
+ clearRegistrationFlushRetry,
+ getRegistrationDeliveryGeneration,
+ getRegistrationSessionStorage,
+ invalidateRegistrationDeliveryState,
+ REGISTRATION_METHODS,
+ REGISTRATION_SUCCESS_STORAGE_KEY,
+ removeStoredRegistrationMarker,
+ scheduleRegistrationFlushRetry,
+} from './registration-session-state'
import { trackEvent } from './utils'
-/**
- * Storage key for a registration success event that is waiting to be sent to
- * Amplitude until a user ID has been attached.
- */
-export const REGISTRATION_SUCCESS_STORAGE_KEY = 'pending_registration_success_event'
+const REGISTRATION_MARKER_VERSION = 2
+const REGISTRATION_MARKER_TTL_MS = 24 * 60 * 60 * 1000
+// Browser clocks may be corrected between registration and delivery. Permit a small
+// correction, but reject timestamps far enough ahead to corrupt Amplitude ordering.
+const REGISTRATION_FUTURE_CLOCK_SKEW_ALLOWANCE_MS = 5 * 60 * 1000
+const SUCCESSFUL_TRACK_RESULT_MIN = 200
+const SUCCESSFUL_TRACK_RESULT_MAX = 299
-type RegistrationMethod = 'email' | 'oauth'
+const REGISTRATION_EVENT_NAMES = [
+ 'user_registration_success',
+ 'user_registration_success_with_utm',
+] as const
-type PendingRegistrationSuccessEvent = {
- eventName: string
- properties: Record
+type RegistrationEventName = (typeof REGISTRATION_EVENT_NAMES)[number]
+
+type PendingRegistrationSuccessEvent = RegistrationIntent & {
+ version: typeof REGISTRATION_MARKER_VERSION
+ expiresAt: number
+ eventName: RegistrationEventName
}
-const getSessionStorage = (): Storage | null => {
+let registrationSnapshot = 0
+let activeFlush: { generation: number; promise: Promise } | null = null
+const registrationListeners = new Set<() => void>()
+
+const isRecord = (value: unknown): value is Record =>
+ Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+
+const isRegistrationMethod = (value: unknown): value is RegistrationMethod =>
+ typeof value === 'string' && REGISTRATION_METHODS.includes(value as RegistrationMethod)
+
+const isRegistrationEventName = (value: unknown): value is RegistrationEventName =>
+ typeof value === 'string' && REGISTRATION_EVENT_NAMES.includes(value as RegistrationEventName)
+
+const notifyRegistrationMarkerStored = () => {
+ registrationSnapshot += 1
+ registrationListeners.forEach((listener) => listener())
+}
+
+const createRegistrationId = () => {
try {
- if (typeof window === 'undefined') return null
- return window.sessionStorage
+ return globalThis.crypto.randomUUID()
} catch {
- return null
+ return `${Date.now()}-${Math.random().toString(36).slice(2)}`
+ }
+}
+
+export const normalizeRegistrationAttribution = (
+ value?: Record | null,
+): RegistrationAttribution | null => {
+ if (!value) return null
+
+ const attribution: RegistrationAttribution = {}
+ ATTRIBUTION_KEYS.forEach((key) => {
+ const item = value[key]
+ if (typeof item !== 'string') return
+
+ const normalized = item.trim()
+ if (normalized) attribution[key] = normalized
+ })
+
+ return Object.keys(attribution).length ? attribution : null
+}
+
+const createRegistrationIntent = (
+ method: RegistrationMethod,
+ utmInfo?: Record | null,
+): RegistrationIntent => ({
+ registrationId: createRegistrationId(),
+ occurredAt: Date.now(),
+ method,
+ attribution: normalizeRegistrationAttribution(utmInfo) ?? {},
+})
+
+const storeRegistrationIntent = (intent: RegistrationIntent) => {
+ const storage = getRegistrationSessionStorage()
+ if (!storage) return false
+
+ const pending: PendingRegistrationSuccessEvent = {
+ ...intent,
+ version: REGISTRATION_MARKER_VERSION,
+ expiresAt: intent.occurredAt + REGISTRATION_MARKER_TTL_MS,
+ eventName: Object.keys(intent.attribution).length
+ ? 'user_registration_success_with_utm'
+ : 'user_registration_success',
+ }
+
+ try {
+ storage.setItem(REGISTRATION_SUCCESS_STORAGE_KEY, JSON.stringify(pending))
+ clearRegistrationFlushRetry()
+ notifyRegistrationMarkerStored()
+ return true
+ } catch {
+ return false
}
}
-/**
- * Remember a registration success event after analytics consent so it can be sent
- * to Amplitude *after* the user ID is attached (see `flushRegistrationSuccess`).
- *
- * Amplitude attributes events to whatever identity is active when `track` runs. At
- * registration time the client does not yet know the user ID, so firing the event
- * immediately records it under an anonymous profile. We persist the event here and
- * replay it once `setUserId` runs in the bootstrap effects after the redirect. An
- * event produced before analytics consent is granted is dropped instead of queued.
- */
export const rememberRegistrationSuccess = ({
method,
utmInfo,
@@ -40,49 +123,157 @@ export const rememberRegistrationSuccess = ({
method: RegistrationMethod
utmInfo?: Record | null
}) => {
- if (getAnalyticsConsent() !== 'granted') return
-
- const storage = getSessionStorage()
- if (!storage) return
-
- const pending: PendingRegistrationSuccessEvent = {
- eventName: utmInfo ? 'user_registration_success_with_utm' : 'user_registration_success',
- properties: { method, ...utmInfo },
+ const consent = getAnalyticsConsent()
+ if (consent === 'denied' || consent === 'disabled') {
+ invalidateRegistrationDeliveryState()
+ return false
}
- try {
- storage.setItem(REGISTRATION_SUCCESS_STORAGE_KEY, JSON.stringify(pending))
- } catch {}
+ // Persist even while consent is unknown. Flush waits for grant + Amplitude init
+ // + user identity, so a later full-page redirect still has the marker.
+ return storeRegistrationIntent(createRegistrationIntent(method, utmInfo))
}
-/**
- * Send a previously remembered registration success event to Amplitude.
- *
- * MUST be called after `setUserId` so the event lands on the identified user profile.
- * No-op when nothing is pending. The pending entry is removed before tracking so the
- * event fires at most once even if this runs multiple times.
- */
-export const flushRegistrationSuccess = () => {
- const storage = getSessionStorage()
+export const coordinateRegistrationConsent = (consent: AnalyticsConsent) => {
+ if (consent === 'denied' || consent === 'disabled') invalidateRegistrationDeliveryState()
+}
+
+export const subscribeRegistrationSuccess = (listener: () => void) => {
+ registrationListeners.add(listener)
+ return () => registrationListeners.delete(listener)
+}
+
+export const getRegistrationSuccessSnapshot = () => registrationSnapshot
+
+const isRegistrationAttribution = (value: unknown): value is RegistrationAttribution => {
+ if (!isRecord(value)) return false
+
+ return Object.entries(value).every(
+ ([key, item]) =>
+ ATTRIBUTION_KEYS.includes(key as (typeof ATTRIBUTION_KEYS)[number]) &&
+ typeof item === 'string' &&
+ Boolean(item.trim()),
+ )
+}
+
+const parsePendingRegistration = (raw: string): PendingRegistrationSuccessEvent | null => {
+ try {
+ const value: unknown = JSON.parse(raw)
+ if (!isRecord(value)) return null
+ if (value.version !== REGISTRATION_MARKER_VERSION) return null
+ if (typeof value.registrationId !== 'string' || !value.registrationId) return null
+ if (typeof value.occurredAt !== 'number' || !Number.isFinite(value.occurredAt)) return null
+ if (typeof value.expiresAt !== 'number' || !Number.isFinite(value.expiresAt)) return null
+ if (value.expiresAt !== value.occurredAt + REGISTRATION_MARKER_TTL_MS) return null
+ if (!isRegistrationEventName(value.eventName)) return null
+ if (!isRegistrationMethod(value.method)) return null
+ if (!isRegistrationAttribution(value.attribution)) return null
+
+ const hasAttribution = Object.keys(value.attribution).length > 0
+ if (hasAttribution !== (value.eventName === 'user_registration_success_with_utm')) return null
+
+ return value as PendingRegistrationSuccessEvent
+ } catch {
+ return null
+ }
+}
+
+const runRegistrationFlush = async (generation: number) => {
+ const isStale = () => generation !== getRegistrationDeliveryGeneration()
+ if (isStale()) return
+
+ const consent = getAnalyticsConsent()
+ if (consent === 'unknown') return
+
+ const storage = getRegistrationSessionStorage()
if (!storage) return
- let raw: string | null = null
- try {
- raw = storage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)
- } catch {
+ if (consent === 'denied' || consent === 'disabled') {
+ invalidateRegistrationDeliveryState()
return
}
+ if (!getIsAmplitudeInitialized()) return
- if (!raw) return
+ while (true) {
+ if (isStale()) return
- try {
- storage.removeItem(REGISTRATION_SUCCESS_STORAGE_KEY)
- } catch {}
+ let raw: string | null
+ try {
+ raw = storage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)
+ } catch {
+ return
+ }
+ if (!raw) return
- if (getAnalyticsConsent() !== 'granted') return
+ const pending = parsePendingRegistration(raw)
+ const now = Date.now()
+ if (
+ !pending ||
+ pending.expiresAt <= now ||
+ pending.occurredAt > now + REGISTRATION_FUTURE_CLOCK_SKEW_ALLOWANCE_MS
+ ) {
+ removeStoredRegistrationMarker(storage)
+ return
+ }
- try {
- const pending = JSON.parse(raw) as PendingRegistrationSuccessEvent
- if (pending?.eventName) trackEvent(pending.eventName, pending.properties)
- } catch {}
+ let trackResult: ReturnType
+ try {
+ trackResult = trackEvent(
+ pending.eventName,
+ {
+ method: pending.method,
+ ...pending.attribution,
+ registration_id: pending.registrationId,
+ event_version: REGISTRATION_MARKER_VERSION,
+ tracking_contract_version: 'consent_wait_v2',
+ },
+ {
+ insert_id: pending.registrationId,
+ time: pending.occurredAt,
+ },
+ )
+ } catch {
+ return
+ }
+ if (!trackResult) return
+
+ let acknowledged = false
+ try {
+ const result: { code?: unknown } = await trackResult.promise
+ acknowledged =
+ typeof result.code === 'number' &&
+ result.code >= SUCCESSFUL_TRACK_RESULT_MIN &&
+ result.code <= SUCCESSFUL_TRACK_RESULT_MAX
+ } catch {}
+ if (isStale()) return
+
+ let currentRaw: string | null
+ try {
+ currentRaw = storage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)
+ } catch {
+ return
+ }
+ if (currentRaw !== raw) continue
+ if (!acknowledged) {
+ scheduleRegistrationFlushRetry(() => {
+ void flushRegistrationSuccess()
+ })
+ return
+ }
+
+ clearRegistrationFlushRetry()
+ removeStoredRegistrationMarker(storage)
+ return
+ }
+}
+
+export function flushRegistrationSuccess() {
+ const generation = getRegistrationDeliveryGeneration()
+ if (activeFlush?.generation === generation) return activeFlush.promise
+
+ const promise = runRegistrationFlush(generation).finally(() => {
+ if (activeFlush?.promise === promise) activeFlush = null
+ })
+ activeFlush = { generation, promise }
+ return promise
}
diff --git a/web/app/components/base/amplitude/utils.ts b/web/app/components/base/amplitude/utils.ts
index 58354463fc1..bb6021d0ad1 100644
--- a/web/app/components/base/amplitude/utils.ts
+++ b/web/app/components/base/amplitude/utils.ts
@@ -9,8 +9,13 @@ const canUseAmplitude = () => getAnalyticsConsent() === 'granted' && getIsAmplit
* @param eventName Event name
* @param eventProperties Event properties (optional)
*/
-export const trackEvent = (eventName: string, eventProperties?: Record) => {
+export const trackEvent = (
+ eventName: string,
+ eventProperties?: Record,
+ eventOptions?: amplitude.Types.EventOptions,
+) => {
if (!canUseAmplitude()) return
+ if (eventOptions) return amplitude.track(eventName, eventProperties, eventOptions)
return amplitude.track(eventName, eventProperties)
}
diff --git a/web/app/components/base/analytics-consent/__tests__/analytics-disabled.spec.tsx b/web/app/components/base/analytics-consent/__tests__/analytics-disabled.spec.tsx
new file mode 100644
index 00000000000..65443ba0046
--- /dev/null
+++ b/web/app/components/base/analytics-consent/__tests__/analytics-disabled.spec.tsx
@@ -0,0 +1,26 @@
+import { render, waitFor } from '@testing-library/react'
+import { REGISTRATION_SUCCESS_STORAGE_KEY } from '../../amplitude/registration-session-state'
+import {
+ coordinateRegistrationConsent,
+ rememberRegistrationSuccess,
+} from '../../amplitude/registration-tracking'
+import { AnalyticsDisabled } from '../analytics-disabled'
+import { getAnalyticsConsent, setAnalyticsConsent } from '../consent-store'
+
+describe('AnalyticsDisabled', () => {
+ beforeEach(() => {
+ window.sessionStorage.clear()
+ coordinateRegistrationConsent('denied')
+ setAnalyticsConsent('granted')
+ })
+
+ it('terminally discards a pending registration marker', async () => {
+ rememberRegistrationSuccess({ method: 'email' })
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).not.toBeNull()
+
+ render( = {
@@ -94,9 +100,13 @@ describe('CloudAnalytics', () => {
return values[name] ?? null
})
- const { queryByTestId } = await renderCloudAnalytics()
+ const result = await getCloudAnalyticsResult()
+ const { queryByTestId } = render(result)
expect(queryByTestId('cloud-analytics-layout-boundary')).toBeNull()
+ expect(result).not.toBeNull()
+ const { getAnalyticsConsent } = await import('../consent-store')
+ expect(getAnalyticsConsent()).toBe('disabled')
})
it.each(['COMMUNITY', 'ENTERPRISE'] as const)(
@@ -109,11 +119,16 @@ describe('CloudAnalytics', () => {
},
)
- it('does not render when System Features are unavailable', async () => {
+ it('suspends analytics without deleting pending registration state when System Features are unavailable', async () => {
queryClient.removeQueries({ queryKey: systemFeaturesQueryKey })
+ window.sessionStorage.setItem(REGISTRATION_SUCCESS_STORAGE_KEY, 'pending-marker')
- const { queryByTestId } = await renderCloudAnalytics()
+ const result = await getCloudAnalyticsResult()
+ const { queryByTestId } = render(result)
expect(queryByTestId('cloud-analytics-layout-boundary')).toBeNull()
+ const { getAnalyticsConsent } = await import('../consent-store')
+ expect(getAnalyticsConsent()).toBe('unknown')
+ expect(window.sessionStorage.getItem(REGISTRATION_SUCCESS_STORAGE_KEY)).toBe('pending-marker')
})
})
diff --git a/web/app/components/base/analytics-consent/analytics-disabled.tsx b/web/app/components/base/analytics-consent/analytics-disabled.tsx
new file mode 100644
index 00000000000..a562e67c51a
--- /dev/null
+++ b/web/app/components/base/analytics-consent/analytics-disabled.tsx
@@ -0,0 +1,14 @@
+'use client'
+
+import { useEffect } from 'react'
+import { coordinateRegistrationConsent } from '@/app/components/base/amplitude/registration-tracking'
+import { setAnalyticsConsent } from './consent-store'
+
+export function AnalyticsDisabled() {
+ useEffect(() => {
+ setAnalyticsConsent('disabled')
+ coordinateRegistrationConsent('disabled')
+ }, [])
+
+ return null
+}
diff --git a/web/app/components/base/analytics-consent/cloud-analytics.tsx b/web/app/components/base/analytics-consent/cloud-analytics.tsx
index 9b53224b494..cf4bd0055f7 100644
--- a/web/app/components/base/analytics-consent/cloud-analytics.tsx
+++ b/web/app/components/base/analytics-consent/cloud-analytics.tsx
@@ -1,6 +1,7 @@
import { COOKIEYES_SITE_KEY, IS_PROD, WEB_PREFIX } from '@/config'
import { getCachedSystemFeatures } from '@/features/system-features/server'
import { headers } from '@/next/headers'
+import { AnalyticsDisabled } from './analytics-disabled'
import { CloudAnalyticsLayoutBoundary } from './cloud-analytics-layout-boundary'
import { isCloudAnalyticsRequest } from './request-boundary'
@@ -19,7 +20,7 @@ export async function CloudAnalytics() {
webPrefix: WEB_PREFIX,
})
- if (!enabled) return null
+ if (!enabled) return = ({
icon,
background,
imageUrl,
+ decorative = false,
className,
innerIcon,
coverElement,
@@ -110,6 +112,7 @@ const AppIcon: FC = ({
showEditIcon = false,
}) => {
const isValidImageIcon = iconType === 'image' && imageUrl
+ const isDecorative = decorative && !onClick
const emojiIcon = icon && icon !== '' ? icon : '🤖'
const isHydrated = useIsHydrated()
const Icon = isHydrated ? = ({
onKeyDown={onClick ? handleKeyDown : undefined}
role={onClick ? 'button' : undefined}
tabIndex={onClick ? 0 : undefined}
+ aria-hidden={isDecorative || undefined}
>
{isValidImageIcon ? (
- 
+
) : (
innerIcon || Icon
)}
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 67343c7834c..1f4194d3918 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -17,6 +17,7 @@ import SpeechToText from '@/app/components/base/features/new-feature-panel/speec
import TextToSpeech from '@/app/components/base/features/new-feature-panel/text-to-speech'
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useModalContext } from '@/context/modal-context'
type Props = Readonly<{
show: boolean
@@ -56,10 +57,11 @@ const NewFeaturePanel = ({
const { t } = useTranslation()
const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
+ const { hasBlockingModalOpen } = useModalContext()
return (
{
has_more: false,
limit: 10,
page: 1,
+ publication_counts: { drafts: 0, published: 1 },
total: 1,
})
diff --git a/web/app/components/header/account-setting/access-rules-page/permission-set-modal/__tests__/index.spec.tsx b/web/app/components/header/account-setting/access-rules-page/permission-set-modal/__tests__/index.spec.tsx
index 7c4b00da20e..764b51cb52c 100644
--- a/web/app/components/header/account-setting/access-rules-page/permission-set-modal/__tests__/index.spec.tsx
+++ b/web/app/components/header/account-setting/access-rules-page/permission-set-modal/__tests__/index.spec.tsx
@@ -19,6 +19,7 @@ const expectedAppACLPermissionKeys = [
'app.acl.tracing_config',
'app.acl.log_and_annotation',
'app.acl.access_config',
+ 'app.acl.access_point_manage',
]
const getPermissionKeyMatcher = (permissionKey: string) =>
diff --git a/web/app/components/integrations/tool-provider-card.tsx b/web/app/components/integrations/tool-provider-card.tsx
index f6aca486a20..27dc904c968 100644
--- a/web/app/components/integrations/tool-provider-card.tsx
+++ b/web/app/components/integrations/tool-provider-card.tsx
@@ -131,13 +131,13 @@ function IntegrationsToolProviderCard({
{t(($) => $['marketplace.template.fetchFailed'], { ns: 'app' })}
@@ -103,6 +115,7 @@ const ImportFromMarketplaceTemplateModal = ({
iconType={template.icon_file_key ? 'image' : 'emoji'}
icon={template.icon || 'page_facing_up'}
background={template.icon_file_key ? undefined : template.icon_background}
+ decorative
imageUrl={
template.icon_file_key
? `${MARKETPLACE_API_PREFIX}/templates/${template.id}/icon`
diff --git a/web/app/components/apps/starred-app-card.tsx b/web/app/components/apps/starred-app-card.tsx
index 5d3e7da6ae6..253ee98af87 100644
--- a/web/app/components/apps/starred-app-card.tsx
+++ b/web/app/components/apps/starred-app-card.tsx
@@ -17,7 +17,7 @@ import Link from '@/next/link'
import { getRedirectionPath } from '@/utils/app-redirection'
import { hasOnlyAppPreviewPermission } from '@/utils/permission'
import { formatTime } from '@/utils/time'
-import { AppCardActionBar } from './app-card/action-bar'
+import { AppCardInteractions } from './app-card/interactions'
type StarredAppCardProps = {
app: AppPartial
@@ -55,10 +55,8 @@ export const StarredAppCard = memo(
isRbacEnabled,
})
const cardClassName = cn(
- 'flex h-18 min-w-0 items-center gap-3 overflow-hidden rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg px-4 py-3 shadow-xs outline-hidden transition-shadow duration-200',
- isPreviewOnly
- ? 'cursor-not-allowed opacity-60 focus-visible:ring-2 focus-visible:ring-state-accent-solid'
- : 'hover:shadow-lg focus-visible:ring-2 focus-visible:ring-state-accent-solid',
+ 'flex h-18 min-w-0 items-center gap-3 rounded-xl px-4 py-3 outline-hidden',
+ isPreviewOnly ? 'cursor-not-allowed opacity-60' : 'cursor-pointer',
)
const showPreviewOnlyAccessWarning = useCallback(() => {
toast.warning(t(($) => $.noAccessResourcePermission, { ns: 'app' }))
@@ -73,6 +71,7 @@ export const StarredAppCard = memo(
icon={app.icon ?? undefined}
background={app.icon_background}
imageUrl={app.icon_url}
+ decorative
/>
-
{label}
+ + {label} +
+ $['studio.starred'], { ns: 'app' })}
+ />
+
- -
{apps.map((app, index) => (
{!!org && (
<>
-
+ ((resolve) => {
+ resolveSearch = resolve
+ })
+ mockInstalledApps = [createInstalledApp()]
+ mockInstalledAppsRequest.mockImplementation(async ({ query }: { query: { name?: string } }) => {
+ if (!query.name) {
+ return {
+ installed_apps: mockInstalledApps,
+ has_more: false,
+ next_cursor: null,
+ }
+ }
+
+ await searchPending
+ return {
+ installed_apps: [],
+ has_more: false,
+ next_cursor: null,
+ }
+ })
+
+ renderMainNav()
+
+ const webAppsRegion = await screen.findByRole('region', {
+ name: 'explore.sidebar.webApps',
+ })
+ await user.click(screen.getByRole('button', { name: 'common.operation.search' }))
+ const resultStatus = within(webAppsRegion).getByRole('status')
+ expect(resultStatus).toBeEmptyDOMElement()
+
+ await user.type(screen.getByPlaceholderText('common.mainNav.webApps.searchPlaceholder'), 'z')
+
+ await waitFor(() => {
+ expect(webAppsRegion).toHaveAttribute('aria-busy', 'true')
+ })
+ expect(resultStatus).toBeEmptyDOMElement()
+
+ act(() => {
+ resolveSearch?.()
+ })
+
+ await waitFor(() => {
+ expect(webAppsRegion).toHaveAttribute('aria-busy', 'false')
+ expect(resultStatus).toHaveTextContent('common.mainNav.webApps.noResults')
+ })
+ expect(within(webAppsRegion).getByRole('status')).toBe(resultStatus)
+ })
+
it('hides the installed web apps section while installed apps are loading', () => {
mockInstalledAppsPending = true
diff --git a/web/app/components/main-nav/components/web-apps-section.tsx b/web/app/components/main-nav/components/web-apps-section.tsx
index e86f63bee3f..e12e9e7cce4 100644
--- a/web/app/components/main-nav/components/web-apps-section.tsx
+++ b/web/app/components/main-nav/components/web-apps-section.tsx
@@ -128,6 +128,12 @@ const WebAppsSectionContent = () => {
})
const canLoadMore = !installedAppsQuery.isFetching && !installedAppsQuery.error
+ const noResultsMessage = t(($) => $['mainNav.webApps.noResults'], { ns: 'common' })
+ const showNoResults =
+ !installedAppsQuery.isError &&
+ !installedAppsQuery.isFetching &&
+ !installedAppsQuery.isPlaceholderData &&
+ installedApps.length === 0
const handleSearchTextChange = (value: string) => {
scrollRef.current?.scrollTo({ top: 0 })
@@ -249,13 +255,16 @@ const WebAppsSectionContent = () => {
$['sidebar.webApps'], { ns: 'explore' })}
style={{ overflowX: 'hidden' }}
className="overscroll-contain"
role="region"
>
+
{org}
/
)}
-
+
diff --git a/web/app/components/main-nav/__tests__/index.spec.tsx b/web/app/components/main-nav/__tests__/index.spec.tsx
index 390df3b4a28..9408839897d 100644
--- a/web/app/components/main-nav/__tests__/index.spec.tsx
+++ b/web/app/components/main-nav/__tests__/index.spec.tsx
@@ -1441,6 +1441,57 @@ describe('MainNav', () => {
)
})
+ it('announces no installed web app results only after the search settles', async () => {
+ const user = userEvent.setup()
+ let resolveSearch: (() => void) | undefined
+ const searchPending = new Promise
{name}
+ {showNoResults ? noResultsMessage : ''}
+
{installedAppsQuery.isError && !installedAppsQuery.isFetchNextPageError && (
{
)}
- {!installedAppsQuery.isError && installedApps.length === 0 && (
-
- {t(($) => $['mainNav.webApps.noResults'], { ns: 'common' })}
-
+ {showNoResults && (
+ {noResultsMessage}
)}
{webAppRows.length > 0 && (
{
}
export function OAuthRegistrationAnalytics() {
+ const analyticsConsent = useAnalyticsConsent()
const searchParams = useSearchParams()
const oauthNewUserParam = searchParams.get(OAUTH_NEW_USER_PARAM)
- const handledParamRef = useRef(null)
+ const gaHandledRef = useRef(false)
+ const amplitudeHandledRef = useRef(false)
+ const cleanedRef = useRef(false)
+ const utmInfoRef = useRef | undefined>(
+ undefined,
+ )
useEffect(() => {
- if (oauthNewUserParam === null || handledParamRef.current === oauthNewUserParam) return
-
- handledParamRef.current = oauthNewUserParam
- const oauthNewUser = oauthNewUserParam === 'true'
- if (!oauthNewUser) {
- removeOAuthNewUserParam()
+ if (oauthNewUserParam === null) {
+ clearOAuthRegistrationGAGuard()
return
}
- let utmInfo: Record | null = null
- const utmInfoStr = Cookies.get('utm_info')
- if (utmInfoStr) {
- try {
- const parsed: unknown = JSON.parse(utmInfoStr)
- if (isRecord(parsed)) utmInfo = parsed
- } catch (e) {
- console.error('Failed to parse utm_info cookie:', e)
+ const oauthNewUser = oauthNewUserParam === 'true'
+ if (!oauthNewUser) {
+ if (!cleanedRef.current) {
+ cleanedRef.current = true
+ clearOAuthRegistrationGAGuard()
+ removeOAuthNewUserParam()
}
+ return
}
+ if (utmInfoRef.current === undefined) {
+ let parsedUtmInfo: Record | null = null
+ const utmInfoStr = Cookies.get('utm_info')
+ if (utmInfoStr) {
+ try {
+ const parsed: unknown = JSON.parse(utmInfoStr)
+ if (isRecord(parsed)) parsedUtmInfo = parsed
+ } catch (e) {
+ console.error('Failed to parse utm_info cookie:', e)
+ }
+ }
+ utmInfoRef.current = normalizeRegistrationAttribution(parsedUtmInfo)
+ }
+ const utmInfo = utmInfoRef.current
+
const eventName = utmInfo ? 'user_registration_success_with_utm' : 'user_registration_success'
- // Defer the Amplitude event until the user ID is attached. The app context
- // external sync replays it after setUserId runs. Firing it here would record it under an
- // anonymous Amplitude profile (no user ID set yet).
- rememberRegistrationSuccess({ method: 'oauth', utmInfo })
+ if (!gaHandledRef.current) {
+ gaHandledRef.current = true
+ if (!hasSentOAuthRegistrationGA()) {
+ sendGAEvent(eventName, {
+ method: 'oauth',
+ ...utmInfo,
+ })
+ markOAuthRegistrationGASent()
+ }
+ }
- sendGAEvent(eventName, {
- method: 'oauth',
- ...utmInfo,
- })
+ if (
+ (analyticsConsent === 'unknown' || analyticsConsent === 'granted') &&
+ !amplitudeHandledRef.current
+ ) {
+ const persisted = rememberRegistrationSuccess({ method: 'oauth', utmInfo })
+ if (!persisted) return
+ amplitudeHandledRef.current = true
+ }
- Cookies.remove('utm_info')
- removeOAuthNewUserParam()
- }, [oauthNewUserParam])
+ if (!cleanedRef.current) {
+ cleanedRef.current = true
+ Cookies.remove('utm_info')
+ removeOAuthNewUserParam()
+ }
+ }, [analyticsConsent, oauthNewUserParam])
return null
}
diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx
index 2d9ef6ce036..9989cd454cb 100644
--- a/web/app/components/plugins/card/base/org-info.tsx
+++ b/web/app/components/plugins/card/base/org-info.tsx
@@ -13,7 +13,7 @@ const OrgInfo = ({ className, orgName, packageName, packageNameClassName }: Prop
{orgName && (
<>
{orgName}
@@ -23,7 +23,7 @@ const OrgInfo = ({ className, orgName, packageName, packageNameClassName }: Prop
)}
= ({
return (
{
if (!open) onHide()
}}
>
-
+
diff --git a/web/app/components/plugins/plugin-item/__tests__/index.spec.tsx b/web/app/components/plugins/plugin-item/__tests__/index.spec.tsx
index 95215e021de..b988542d401 100644
--- a/web/app/components/plugins/plugin-item/__tests__/index.spec.tsx
+++ b/web/app/components/plugins/plugin-item/__tests__/index.spec.tsx
@@ -32,13 +32,13 @@ vi.mock('../../hooks', () => ({
}),
}))
-const mockCurrentPluginID = vi.fn((): string | undefined => undefined)
-const mockSetCurrentPluginID = vi.fn()
+const mockSelectedItem = vi.fn((): { type: 'plugin'; id: string } | undefined => undefined)
+const mockSetSelectedItem = vi.fn()
vi.mock('../../plugin-page/context', () => ({
usePluginPageContext: (selector: (v: Record) => unknown) => {
const context = {
- currentPluginID: mockCurrentPluginID(),
- setCurrentPluginID: mockSetCurrentPluginID,
+ selectedItem: mockSelectedItem(),
+ setSelectedItem: mockSetSelectedItem,
}
return selector(context)
},
@@ -174,7 +174,7 @@ describe('PluginItem', () => {
beforeEach(() => {
vi.clearAllMocks()
mockTheme.mockReturnValue('light')
- mockCurrentPluginID.mockReturnValue(undefined)
+ mockSelectedItem.mockReturnValue(undefined)
mockEnableMarketplace.mockReturnValue(true)
mockLangGeniusVersionInfo.mockReturnValue(createLangGeniusVersionInfo('1.0.0'))
mockGetValueFromI18nObject.mockImplementation((obj: Record) => obj?.en_US || '')
@@ -588,7 +588,7 @@ describe('PluginItem', () => {
// ==================== User Interactions Tests ====================
describe('User Interactions', () => {
- it('should call setCurrentPluginID when plugin is clicked', () => {
+ it('should select the plugin when its card is clicked', () => {
// Arrange
const plugin = createPluginDetail({ plugin_id: 'test-plugin-id' })
@@ -598,12 +598,15 @@ describe('PluginItem', () => {
fireEvent.click(pluginContainer)
// Assert
- expect(mockSetCurrentPluginID).toHaveBeenCalledWith('test-plugin-id')
+ expect(mockSetSelectedItem).toHaveBeenCalledWith({
+ type: 'plugin',
+ id: 'test-plugin-id',
+ })
})
it('should highlight selected plugin', () => {
// Arrange
- mockCurrentPluginID.mockReturnValue('test-plugin-id')
+ mockSelectedItem.mockReturnValue({ type: 'plugin', id: 'test-plugin-id' })
const plugin = createPluginDetail({ plugin_id: 'test-plugin-id' })
// Act
@@ -611,12 +614,14 @@ describe('PluginItem', () => {
// Assert
const pluginContainer = container.firstChild as HTMLElement
- expect(pluginContainer).toHaveClass('border-components-option-card-option-selected-border')
+ expect(pluginContainer).toHaveClass(
+ 'after:inset-ring-components-option-card-option-selected-border',
+ )
})
it('should not highlight unselected plugin', () => {
// Arrange
- mockCurrentPluginID.mockReturnValue('other-plugin-id')
+ mockSelectedItem.mockReturnValue({ type: 'plugin', id: 'other-plugin-id' })
const plugin = createPluginDetail({ plugin_id: 'test-plugin-id' })
// Act
@@ -625,7 +630,7 @@ describe('PluginItem', () => {
// Assert
const pluginContainer = container.firstChild as HTMLElement
expect(pluginContainer).not.toHaveClass(
- 'border-components-option-card-option-selected-border',
+ 'after:inset-ring-components-option-card-option-selected-border',
)
})
@@ -638,8 +643,8 @@ describe('PluginItem', () => {
const actionArea = screen.getByTestId('plugin-action').parentElement
fireEvent.click(actionArea!)
- // Assert - setCurrentPluginID should not be called
- expect(mockSetCurrentPluginID).not.toHaveBeenCalled()
+ // Assert - selecting the plugin should not be triggered
+ expect(mockSetSelectedItem).not.toHaveBeenCalled()
})
it('should only reveal actions on card hover or focus', () => {
@@ -651,9 +656,18 @@ describe('PluginItem', () => {
// Assert
expect(screen.getByTestId('plugin-action').parentElement).toHaveClass(
+ 'absolute',
+ 'top-1/2',
+ 'right-0',
+ '-translate-y-1/2',
+ 'pointer-events-none',
'opacity-0',
+ 'group-hover/plugin-item:pointer-events-auto',
'group-hover/plugin-item:opacity-100',
- 'focus-within:opacity-100',
+ 'group-focus-within/plugin-item:pointer-events-auto',
+ 'group-focus-within/plugin-item:opacity-100',
+ '[@media(hover:none)]:pointer-events-auto',
+ '[@media(hover:none)]:opacity-100',
)
})
})
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 05d0ed90da5..db723f6cfed 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -47,8 +47,10 @@ const PluginItem: FC = ({
}) => {
const { t } = useTranslation()
const { theme } = useTheme()
- const currentPluginID = usePluginPageContext((v) => v.currentPluginID)
- const setCurrentPluginID = usePluginPageContext((v) => v.setCurrentPluginID)
+ const selectedPluginID = usePluginPageContext((v) =>
+ v.selectedItem?.type === 'plugin' ? v.selectedItem.id : undefined,
+ )
+ const setSelectedItem = usePluginPageContext((v) => v.setSelectedItem)
const { refreshPluginList } = useRefreshPluginList()
const {
@@ -118,19 +120,20 @@ const PluginItem: FC = ({
return (
{
- setCurrentPluginID(plugin.plugin_id)
+ setSelectedItem({ type: 'plugin', id: plugin.plugin_id })
}}
>
@@ -186,10 +189,14 @@ const PluginItem: FC = ({
}
/>
-
-
-
+
e.stopPropagation()}
>
= ({
+
{/* Organization & Name */}
{
- const currentPluginID = usePluginPageContext((v) => v.currentPluginID)
- const setCurrentPluginID = usePluginPageContext((v) => v.setCurrentPluginID)
+ const selectedItem = usePluginPageContext((v) => v.selectedItem)
+ const setSelectedItem = usePluginPageContext((v) => v.setSelectedItem)
const options = usePluginPageContext((v) => v.options)
return (
()
+ const [selectedItem, setSelectedItem] = useState()
const { data: enable_marketplace } = useSuspenseQuery({
...systemFeaturesQueryOptions(),
@@ -56,8 +56,8 @@ export const PluginPageContextProvider = ({
- currentPluginID: string | undefined
- setCurrentPluginID: (pluginID?: string) => void
+ selectedItem: PluginPageSelection | undefined
+ setSelectedItem: (item?: PluginPageSelection) => void
filters: FilterState
setFilters: (filter: FilterState) => void
activeTab: PluginPageTab
@@ -26,8 +30,8 @@ const emptyContainerRef: RefObject = { current: null }
export const PluginPageContext = createContext({
containerRef: emptyContainerRef,
- currentPluginID: undefined,
- setCurrentPluginID: noop,
+ selectedItem: undefined,
+ setSelectedItem: noop,
filters: {
categories: [],
tags: [],
diff --git a/web/app/components/plugins/plugin-page/plugins-panel-results.tsx b/web/app/components/plugins/plugin-page/plugins-panel-results.tsx
index 1031fbf45e4..3d0f46513f9 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel-results.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel-results.tsx
@@ -43,8 +43,8 @@ type PluginsPanelResultsProps = {
isLastPage: boolean
keywords: string
loadNextPage: () => void
+ onSelectBuiltinTool: (id: string) => void
scrollAreaLabel?: string
- setCurrentBuiltinToolID: (id: string) => void
showCategoryEmptyState: boolean
tagFilterValue: string[]
}
@@ -71,8 +71,8 @@ const PluginsPanelResults = ({
isLastPage,
keywords,
loadNextPage,
+ onSelectBuiltinTool,
scrollAreaLabel,
- setCurrentBuiltinToolID,
showCategoryEmptyState,
tagFilterValue,
}: PluginsPanelResultsProps) => {
@@ -152,7 +152,7 @@ const PluginsPanelResults = ({
data-step-by-step-tour-target={
filteredList.length === 0 && index === 0 ? firstBuiltinToolTarget : undefined
}
- onClick={() => setCurrentBuiltinToolID(collection.id)}
+ onClick={() => onSelectBuiltinTool(collection.id)}
>
v.currentPluginID)
- const setCurrentPluginID = usePluginPageContext((v) => v.setCurrentPluginID)
- const [currentBuiltinToolID, setCurrentBuiltinToolID] = useState()
+ const selectedItem = usePluginPageContext((v) => v.selectedItem)
+ const setSelectedItem = usePluginPageContext((v) => v.setSelectedItem)
const containerRef = useRef(null)
const { run: handleFilterChange } = useDebounceFn(
@@ -186,18 +185,17 @@ const PluginsPanel = ({
sourceCount: categoryList.length + builtinTools.length,
})
- const currentPluginDetail = useMemo(() => {
- const detail = pluginListWithLatestVersion.find(
- (plugin) => plugin.plugin_id === currentPluginID,
- )
- return detail
- }, [currentPluginID, pluginListWithLatestVersion])
+ const currentPluginID = selectedItem?.type === 'plugin' ? selectedItem.id : undefined
+ const currentBuiltinToolID = selectedItem?.type === 'builtinTool' ? selectedItem.id : undefined
+ const currentPluginDetail = useMemo(
+ () => pluginListWithLatestVersion.find((plugin) => plugin.plugin_id === currentPluginID),
+ [currentPluginID, pluginListWithLatestVersion],
+ )
const currentBuiltinTool = useMemo(() => {
return filteredBuiltinTools.find((collection) => collection.id === currentBuiltinToolID)
}, [currentBuiltinToolID, filteredBuiltinTools])
- const handleHide = () => setCurrentPluginID(undefined)
- const handleBuiltinToolHide = () => setCurrentBuiltinToolID(undefined)
+ const handleDetailHide = () => setSelectedItem(undefined)
const hasToolMarketplacePanel = enableMarketplace && isToolIntegrationPage
const categoryMarketplace =
enableMarketplace && hasEmbeddedMarketplace ? fixedCategory : undefined
@@ -284,7 +282,7 @@ const PluginsPanel = ({
keywords={filters.searchQuery}
loadNextPage={loadNextPage}
scrollAreaLabel={scrollAreaLabel}
- setCurrentBuiltinToolID={setCurrentBuiltinToolID}
+ onSelectBuiltinTool={(id) => setSelectedItem({ type: 'builtinTool', id })}
tagFilterValue={filters.tags}
canDeletePlugin={canDeletePlugin}
canUpdatePlugin={canUpdatePlugin}
@@ -327,14 +325,14 @@ const PluginsPanel = ({
onUpdate={() => {
invalidateInstalledPluginList(fixedCategory)
}}
- onHide={handleHide}
+ onHide={handleDetailHide}
canDeletePlugin={canDeletePlugin}
canUpdatePlugin={canUpdatePlugin}
/>
{currentBuiltinTool && !currentBuiltinTool.plugin_id && (
{
opacity: '0.7',
zIndex: '1001',
})
+
+ await user.click(addBlockTrigger)
+
+ expect(screen.queryByRole('tab', { name: 'workflow.tabs.start' })).not.toBeInTheDocument()
})
it('should prefer the running stroke color when the edge is selected', () => {
- render(
+ renderWorkflowComponent(
{
})
it('should use the fail-branch running color while the connected node is hovering', () => {
- render(
+ renderWorkflowComponent(
{
})
it('should fall back to the default edge color when no highlight state is active', () => {
- render(
+ renderWorkflowComponent(
{
})
describe('inContainer filtering', () => {
- it('should exclude Iteration, Loop, End, DataSource, KnowledgeBase, HumanInput when inContainer=true', () => {
+ it('should allow HumanInput while excluding unsupported blocks when inContainer=true', () => {
const { result } = renderWorkflowHook(() => useAvailableBlocks(BlockEnum.LLM, true), {
hooksStoreProps,
})
@@ -155,7 +155,7 @@ describe('useAvailableBlocks', () => {
expect(result.current.availableNextBlocks).not.toContain(BlockEnum.End)
expect(result.current.availableNextBlocks).not.toContain(BlockEnum.DataSource)
expect(result.current.availableNextBlocks).not.toContain(BlockEnum.KnowledgeBase)
- expect(result.current.availableNextBlocks).not.toContain(BlockEnum.HumanInput)
+ expect(result.current.availableNextBlocks).toContain(BlockEnum.HumanInput)
})
it('should exclude LoopEnd when not in container', () => {
diff --git a/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts b/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
index 0eab5ad8af2..2d2353b6971 100644
--- a/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
+++ b/web/app/components/workflow/hooks/__tests__/use-nodes-interactions.spec.ts
@@ -1183,15 +1183,14 @@ describe('useNodesInteractions', () => {
)
})
- // Nested container paste restrictions should stay aligned with available block filtering.
- describe('nested container paste restrictions', () => {
+ // Nested container paste behavior should stay aligned with available block filtering.
+ describe('nested container paste behavior', () => {
const disallowedNestedPasteNodeTypes = [
BlockEnum.End,
BlockEnum.Iteration,
BlockEnum.Loop,
BlockEnum.DataSource,
BlockEnum.KnowledgeBase,
- BlockEnum.HumanInput,
]
const createNodeMeta = (type: BlockEnum) => ({
@@ -1205,7 +1204,7 @@ describe('useNodesInteractions', () => {
},
})
- const runDisallowedPasteScenario = async (
+ const pasteNodeIntoContainer = async (
containerType: BlockEnum.Iteration | BlockEnum.Loop,
nodeType: BlockEnum,
) => {
@@ -1263,23 +1262,48 @@ describe('useNodesInteractions', () => {
const pastedNodes = rfState.setNodes.mock.calls.at(-1)?.[0] as Node[]
- expect(pastedNodes).toHaveLength(1)
- expect(pastedNodes[0]?.id).toBe(containerId)
- expect(pastedNodes[0]?.data._children).toEqual([])
- expect(
- pastedNodes.some((node) => node.data.type === nodeType && node.parentId === containerId),
- ).toBe(false)
+ return { containerId, pastedNodes }
}
it.each(disallowedNestedPasteNodeTypes)(
'should not paste %s into an iteration container',
async (nodeType) => {
- await runDisallowedPasteScenario(BlockEnum.Iteration, nodeType)
+ const { containerId, pastedNodes } = await pasteNodeIntoContainer(
+ BlockEnum.Iteration,
+ nodeType,
+ )
+
+ expect(pastedNodes).toHaveLength(1)
+ expect(pastedNodes[0]?.id).toBe(containerId)
+ expect(pastedNodes[0]?.data._children).toEqual([])
},
)
- it('should not paste human-input into a loop container', async () => {
- await runDisallowedPasteScenario(BlockEnum.Loop, BlockEnum.HumanInput)
- })
+ it.each([BlockEnum.Iteration, BlockEnum.Loop] as const)(
+ 'should paste human-input into a %s container',
+ async (containerType) => {
+ const { containerId, pastedNodes } = await pasteNodeIntoContainer(
+ containerType,
+ BlockEnum.HumanInput,
+ )
+ const container = pastedNodes.find((node) => node.id === containerId)
+ const pastedHumanInput = pastedNodes.find(
+ (node) => node.data.type === BlockEnum.HumanInput && node.parentId === containerId,
+ )
+ const isIteration = containerType === BlockEnum.Iteration
+
+ expect(pastedHumanInput).toBeDefined()
+ expect(pastedHumanInput?.data).toMatchObject({
+ isInIteration: isIteration,
+ iteration_id: isIteration ? containerId : undefined,
+ isInLoop: !isIteration,
+ loop_id: isIteration ? undefined : containerId,
+ })
+ expect(container?.data._children).toContainEqual({
+ nodeId: pastedHumanInput?.id,
+ nodeType: BlockEnum.HumanInput,
+ })
+ },
+ )
})
})
diff --git a/web/app/components/workflow/hooks/use-available-blocks.ts b/web/app/components/workflow/hooks/use-available-blocks.ts
index 675a36be49a..6ebb1933f28 100644
--- a/web/app/components/workflow/hooks/use-available-blocks.ts
+++ b/web/app/components/workflow/hooks/use-available-blocks.ts
@@ -11,8 +11,7 @@ const availableBlocksFilter = (nodeType: BlockEnum, inContainer?: boolean) => {
nodeType === BlockEnum.Loop ||
nodeType === BlockEnum.End ||
nodeType === BlockEnum.DataSource ||
- nodeType === BlockEnum.KnowledgeBase ||
- nodeType === BlockEnum.HumanInput)
+ nodeType === BlockEnum.KnowledgeBase)
)
return false
diff --git a/web/app/components/workflow/hooks/use-nodes-interactions.ts b/web/app/components/workflow/hooks/use-nodes-interactions.ts
index 4b2ea7bf6a8..6d38ddf853f 100644
--- a/web/app/components/workflow/hooks/use-nodes-interactions.ts
+++ b/web/app/components/workflow/hooks/use-nodes-interactions.ts
@@ -1786,7 +1786,6 @@ export const useNodesInteractions = () => {
BlockEnum.Loop,
BlockEnum.DataSource,
BlockEnum.KnowledgeBase,
- BlockEnum.HumanInput,
]
// Same-canvas copy keeps the source container selected, so only treat a
// selected container as the paste target when it is not part of the clipboard.
diff --git a/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx b/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
index 490f656f284..b659664ddfb 100644
--- a/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
+++ b/web/app/components/workflow/nodes/_base/components/__tests__/node-handle.spec.tsx
@@ -1,6 +1,7 @@
import type { ReactNode } from 'react'
import type { CommonNodeType } from '@/app/components/workflow/types'
import { fireEvent, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { BlockEnum } from '@/app/components/workflow/types'
import { NodeSourceHandle, NodeTargetHandle } from '../node-handle'
@@ -210,6 +211,16 @@ describe('node-handle', () => {
// Target-side tests cover selector visibility, connection locking, and status rendering.
describe('NodeTargetHandle', () => {
+ it('should show the start tab when adding a node before the target node', async () => {
+ const user = userEvent.setup()
+
+ renderTargetHandle()
+
+ await user.click(screen.getByTestId('handle-target-handle'))
+
+ expect(screen.getByRole('tab', { name: 'workflow.tabs.start' })).toBeInTheDocument()
+ })
+
it('should toggle the target add trigger', () => {
renderTargetHandle()
@@ -260,6 +271,16 @@ describe('node-handle', () => {
// Source-side tests cover selector opening paths, previous-node selection, and status styling.
describe('NodeSourceHandle', () => {
+ it('should show the start tab when adding a node after the source node', async () => {
+ const user = userEvent.setup()
+
+ renderSourceHandle()
+
+ await user.click(screen.getByTestId('handle-source-handle'))
+
+ expect(screen.getByRole('tab', { name: 'workflow.tabs.start' })).toBeInTheDocument()
+ })
+
it('should toggle the source add trigger', () => {
renderSourceHandle()
diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 955e5eb2f87..30a22ab512c 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
@@ -79,6 +79,7 @@ export const NodeTargetHandle = memo(
'z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
'after:absolute after:top-1 after:left-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
'transition-all hover:scale-125',
+ open && 'scale-125',
data._runningStatus === NodeRunningStatus.Succeeded &&
'after:bg-workflow-link-line-success-handle',
data._runningStatus === NodeRunningStatus.Failed &&
@@ -106,6 +107,7 @@ export const NodeTargetHandle = memo(
nextNodeTargetHandle: handleId,
}}
placement="left"
+ showStartTab
triggerClassName={`
absolute left-0 top-0 opacity-0 pointer-events-none transition-opacity duration-150
${nodeSelectorClassName}
@@ -206,6 +208,7 @@ export const NodeSourceHandle = memo(
'group/handle z-1 size-4! rounded-none! border-none! bg-transparent! outline-hidden!',
'after:absolute after:top-1 after:right-1.5 after:h-2 after:w-0.5 after:bg-workflow-link-line-handle',
'transition-all hover:scale-125',
+ open && 'scale-125',
data._runningStatus === NodeRunningStatus.Succeeded &&
'after:bg-workflow-link-line-success-handle',
data._runningStatus === NodeRunningStatus.Failed &&
@@ -252,6 +255,7 @@ export const NodeSourceHandle = memo(
data-popup-open:opacity-100
`}
availableBlocksTypes={availableNextBlocks}
+ showStartTab
/>
)}
diff --git a/web/app/components/workflow/nodes/agent-v2/__tests__/panel.spec.tsx b/web/app/components/workflow/nodes/agent-v2/__tests__/panel.spec.tsx
index 4cface45094..d53e1150749 100644
--- a/web/app/components/workflow/nodes/agent-v2/__tests__/panel.spec.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/__tests__/panel.spec.tsx
@@ -263,30 +263,11 @@ vi.mock('../components/save-inline-agent-to-roster-dialog', () => ({
onSaved,
}: {
open: boolean
- onSaved: (binding: {
- agent_id?: string | null
- binding_type: 'inline_agent' | 'roster_agent'
- current_snapshot_id?: string | null
- id: string
- node_id: string
- workflow_id: string
- }) => void
+ onSaved: (agentId: string) => void
}) =>
open ? (
{
{
}),
)
})
+
+ it('keeps one source snapshot while open and uses the latest agent after reopening', async () => {
+ const user = userEvent.setup()
+ const onOpenChange = vi.fn()
+ const onSaved = vi.fn()
+ const updatedInlineAgent = {
+ ...inlineAgent,
+ description: 'Updated source description.',
+ icon: '🦊',
+ icon_background: '#FFEDD5',
+ role: 'Updated source role',
+ }
+ const { rerender } = render(
+
+ pending: boolean
+ onCancel: () => void
+ onSubmit: (formValues: AgentFormValues, agentIcon: AgentIconSelection) => void
+}
+
+function SaveInlineAgentToRosterFormSession({
+ initialAgent,
+ nameInputRef,
+ pending,
+ onCancel,
+ onSubmit,
+}: SaveInlineAgentToRosterFormSessionProps) {
+ const { t } = useTranslation('agentV2')
+ const { t: tCommon } = useTranslation('common')
+ const [initialValues] = useState(() => ({
+ fields: {
+ description: initialAgent.description ?? '',
+ name: '',
+ role: initialAgent.role ?? '',
+ } satisfies AgentFormValues,
+ icon: createAgentIconSelection(initialAgent),
+ }))
+ const [agentIcon, setAgentIcon] = useState(initialValues.icon)
+ const [iconPickerOpen, setIconPickerOpen] = useState(false)
+
+ return (
+ <>
+
+ className="flex min-h-0 flex-1 flex-col"
+ onFormSubmit={(formValues) => onSubmit(formValues, agentIcon)}
+ >
+ $['roster.saveToRosterForm.changeIcon'])}
+ onIconClick={() => setIconPickerOpen(true)}
+ />
+ (() =>
- initialAgent ? createAgentIconSelection(initialAgent) : defaultAgentIcon,
- )
+ const nameInputRef = useRef(null)
const appSaveToRosterMutation = useMutation(
consoleQuery.apps.byAppId.workflows.draft.nodes.byNodeId.agentComposer.saveToRoster.post.mutationOptions(),
)
@@ -69,33 +128,20 @@ export function SaveInlineAgentToRosterDialog({
)
const isSavingToRoster =
appSaveToRosterMutation.isPending || snippetSaveToRosterMutation.isPending
-
const handleOpenChange = (nextOpen: boolean) => {
- if (nextOpen) {
- setName('')
- setDescription(initialAgent?.description ?? '')
- setRole(initialAgent?.role ?? '')
- setAgentIcon(initialAgent ? createAgentIconSelection(initialAgent) : defaultAgentIcon)
- } else {
- setIconPickerOpen(false)
- }
+ if (!nextOpen && isSavingToRoster) return
onOpenChange(nextOpen)
}
- const handleSubmit = (formValues: AgentFormValues) => {
+ const handleSubmit = (formValues: AgentFormValues, agentIcon: AgentIconSelection) => {
if (isSavingToRoster) return
- if (!flowId) return
-
- const trimmedName = formValues.name?.trim() ?? ''
- const trimmedRole = formValues.role?.trim() ?? ''
-
const body = {
variant: 'workflow' as const,
save_strategy: 'save_to_roster' as const,
- new_agent_name: trimmedName,
- description: formValues.description?.trim() ?? '',
- role: trimmedRole,
+ new_agent_name: formValues.name.trim(),
+ description: formValues.description.trim(),
+ role: formValues.role.trim(),
icon_type: agentIcon.type,
icon: agentIcon.type === 'image' ? agentIcon.fileId : agentIcon.icon,
icon_background: agentIcon.type === 'emoji' ? agentIcon.background : undefined,
@@ -105,9 +151,8 @@ export function SaveInlineAgentToRosterDialog({
const binding = composerState.binding
if (binding?.binding_type !== 'roster_agent' || !binding.agent_id) return
- toast.success(t(($) => $['roster.saveToRosterSuccess']))
- onSaved(binding)
- handleOpenChange(false)
+ onSaved(binding.agent_id)
+ onOpenChange(false)
},
}
@@ -142,75 +187,31 @@ export function SaveInlineAgentToRosterDialog({
return (
<>
- {
- setAgentIcon(icon)
- }}
- />
)
}
diff --git a/web/app/components/workflow/nodes/agent-v2/panel.tsx b/web/app/components/workflow/nodes/agent-v2/panel.tsx
index ee5c6b9e6b5..1c12d645377 100644
--- a/web/app/components/workflow/nodes/agent-v2/panel.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/panel.tsx
@@ -131,7 +131,6 @@ export function AgentV2Panel({ id, data }: NodePanelProps) {
requestKey: number
} | null>(null)
const [isOutputVariablesCollapsed, setIsOutputVariablesCollapsed] = useState(true)
- const [saveToRosterSessionKey, setSaveToRosterSessionKey] = useState(0)
const { handleNodeDataUpdate, handleNodeDataUpdateWithSyncDraft } = useNodeDataUpdate()
const openInlineAgentPanelNodeId = useStore((state) => state.openInlineAgentPanelNodeId)
const setOpenInlineAgentPanelNodeId = useStore((state) => state.setOpenInlineAgentPanelNodeId)
@@ -186,7 +185,12 @@ export function AgentV2Panel({ id, data }: NodePanelProps) {
const isAgentBindingPending =
isInlineAgentPending || isInlineAgentWaitingForCreation || isCreatingInlineAgent
const canStartFromScratch = inputs.agent_binding?.binding_type !== 'inline_agent'
- const canSaveInlineToRoster = isInlineAgentReady && !!inlineAgent
+ const saveToRosterTarget =
+ configsMap?.flowId &&
+ (configsMap.flowType === FlowType.appFlow || configsMap.flowType === FlowType.snippet)
+ ? { flowId: configsMap.flowId, flowType: configsMap.flowType }
+ : null
+ const canSaveInlineToRoster = isInlineAgentReady && !!inlineAgent && !!saveToRosterTarget
const inlineComposerStateForPanel = inlineAgentQuery.data
const displayedAgent =
rosterAgentQuery.data ??
@@ -378,14 +382,11 @@ export function AgentV2Panel({ id, data }: NodePanelProps) {
])
const handleSaveInlineToRosterOpen = useCallback(() => {
- setSaveToRosterSessionKey((key) => key + 1)
setIsSaveToRosterDialogOpen(true)
}, [])
const handleInlineSavedToRoster = useCallback(
- (binding: AgentComposerBindingResponse) => {
- if (binding.binding_type !== 'roster_agent' || !binding.agent_id) return
-
+ (agentId: string) => {
setOpenInlineAgentPanelNodeId(undefined)
setIsInlineAgentPanelOpenedFromTrigger(false)
setIsRosterAgentPanelOpen(true)
@@ -395,7 +396,7 @@ export function AgentV2Panel({ id, data }: NodePanelProps) {
delete draft._openInlineAgentPanel
draft.agent_binding = {
binding_type: 'roster_agent',
- agent_id: binding.agent_id!,
+ agent_id: agentId,
}
})
inputsRef.current = newInputs
@@ -698,17 +699,17 @@ export function AgentV2Panel({ id, data }: NodePanelProps) {
onSaveInlineToRoster={canSaveInlineToRoster ? handleSaveInlineToRosterOpen : undefined}
onStartFromScratch={canStartFromScratch ? handleStartFromScratch : undefined}
/>
-
-
+
-
+
+
)
}
@@ -62,7 +70,9 @@ describe('PluginPageContextProvider', () => {
expect(screen.getByRole('status', { name: 'Available tabs' })).toHaveTextContent('1')
})
- it('keeps the query-state tab and updates the current plugin id', () => {
+ it('keeps the query-state tab and replaces the selected item', async () => {
+ const user = userEvent.setup()
+
renderWithProviders(
{pluginList.map((plugin, index) => (
-
@@ -250,13 +280,14 @@ vi.mock('@/app/components/plugins/plugin-detail-panel', () => ({
detail?: PluginDetail
onHide: () => void
onUpdate: () => void
- }) => (
- mockSetSelectedItem({ type: 'plugin', id: plugin.plugin_id })}
>
{plugin.plugin_id}
-
+
))}
{children}
- {detail?.plugin_id ?? 'none'}
-
-
-
- ),
+ }) =>
+ detail ? (
+
+ {detail.plugin_id}
+
+
+
+ ) : null,
}))
const createPlugin = (
@@ -324,7 +355,7 @@ describe('PluginsPanel', () => {
},
)
mockState.filters = { categories: [], tags: [], searchQuery: '' }
- mockState.currentPluginID = undefined
+ mockState.selectedItem = undefined
mockUseInstalledPluginList.mockReturnValue({
data: { plugins: [] },
isLoading: false,
@@ -544,6 +575,43 @@ describe('PluginsPanel', () => {
expect(screen.queryByTestId('builtin-tool-detail')).not.toBeInTheDocument()
})
+ it('replaces the builtin tool detail when an installed plugin is selected', async () => {
+ vi.useRealTimers()
+ const user = userEvent.setup()
+ mockPluginListWithLatestVersion.mockReturnValue([
+ createPlugin('tool-plugin', 'Tool Plugin', [], PluginCategoryEnum.tool),
+ ])
+ mockUseInstalledPluginList.mockReturnValue({
+ data: {
+ plugins: [],
+ builtin_tools: [createBuiltinTool('builtin-tool', 'Builtin Tool')],
+ },
+ isLoading: false,
+ isFetching: false,
+ isLastPage: true,
+ loadNextPage: mockLoadNextPage,
+ })
+
+ render(
-
diff --git a/web/app/components/workflow/nodes/agent-v2/components/__tests__/save-inline-agent-to-roster-dialog.spec.tsx b/web/app/components/workflow/nodes/agent-v2/components/__tests__/save-inline-agent-to-roster-dialog.spec.tsx
index 97a0ff5323c..2e6a40f8560 100644
--- a/web/app/components/workflow/nodes/agent-v2/components/__tests__/save-inline-agent-to-roster-dialog.spec.tsx
+++ b/web/app/components/workflow/nodes/agent-v2/components/__tests__/save-inline-agent-to-roster-dialog.spec.tsx
@@ -1,5 +1,5 @@
import type { AgentComposerAgentResponse } from '@dify/contracts/api/console/apps/types.gen'
-import { render, screen, within } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { FlowType } from '@/types/common'
import { SaveInlineAgentToRosterDialog } from '../save-inline-agent-to-roster-dialog'
@@ -112,7 +112,6 @@ const renderDialog = (agent: AgentComposerAgentResponse = inlineAgent) => {
+
+ {t(($) => $['roster.saveToRosterDialog.title'])}
+
+
+ {t(($) => $['roster.saveToRosterDialog.description'])}
+
+
+
+
+
+
+
+ = {}): EmailConfig => ({
...overrides,
})
+const TestEmailSenderHarness = () => {
+ const [open, setOpen] = useState(true)
+
+ return (
+ <>
+
+ = {}): FormInputItem => ({
type: InputVarType.paragraph,
output_variable_name: 'user_name',
@@ -251,6 +272,70 @@ describe('human-input/delivery-method/test-email-sender', () => {
expect(handleOpenChange).toHaveBeenCalledWith(false)
})
+ it('should start a fresh session after closing and reopening', async () => {
+ const user = userEvent.setup()
+ const { requests } = setupFetch()
+ renderWithProviders(
+
const getOriginVar = (valueSelector: string[], list: NodeOutPutVar[]) => {
const targetVar = list.find((item) => item.nodeId === valueSelector[0])
if (!targetVar) return undefined
@@ -117,10 +119,9 @@ const formatEmailSenderInputs = (
}
}
-const EmailSenderModal = ({
+const EmailSenderContent = ({
nodeId,
deliveryId,
- open,
onOpenChange,
jumpToEmailConfigModal,
config,
@@ -128,7 +129,7 @@ const EmailSenderModal = ({
formInputs,
nodesOutputVars = [],
availableNodes = [],
-}: EmailSenderModalProps) => {
+}: EmailSenderContentProps) => {
const { t } = useTranslation()
const { data: userProfileEmail } = useSuspenseQuery({
...userProfileQueryOptions(),
@@ -258,142 +259,49 @@ const EmailSenderModal = ({
if (done) {
return (
-