= []
- readonly disconnect = vi.fn()
- readonly observe = vi.fn()
- readonly takeRecords = () => []
- readonly unobserve = vi.fn()
-
- constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
- observers.push({ callback, options })
- }
- },
- )
- Object.assign(mocks.sourceAppsQuery, {
- data: { pages: [{ data: [] }] },
- error: null,
- hasNextPage: false,
- isFetching: false,
- isFetchingNextPage: false,
- isLoading: false,
- isPlaceholderData: false,
- })
- })
-
- afterEach(() => {
- vi.unstubAllGlobals()
- })
-
- it('should hide the import DSL option when deployment DSL import is disabled', () => {
- render(
-
-
- ,
- )
-
- expect(screen.getByText(/createGuide\.methods\.bindApp\.title/)).toBeInTheDocument()
- expect(screen.queryByText(/createGuide\.methods\.importDsl\.title/)).not.toBeInTheDocument()
- expect(
- screen.queryByText(/createGuide\.methods\.importDsl\.description/),
- ).not.toBeInTheDocument()
- expect(
- screen.getByRole('textbox', { name: /createGuide\.source\.sourceApp/ }),
- ).toBeInTheDocument()
- })
-
- it('should use infinite scroll to load more source apps', () => {
- Object.assign(mocks.sourceAppsQuery, {
- data: {
- pages: [
- {
- data: [
- {
- id: 'app-1',
- name: 'Workflow App',
- },
- ],
- },
- ],
- },
- hasNextPage: true,
- })
-
- render(
-
-
- ,
- )
-
- act(() => {
- getInfiniteScrollObserver()?.callback(
- [{ isIntersecting: true } as IntersectionObserverEntry],
- {} as IntersectionObserver,
- )
- })
-
- expect(mocks.sourceAppsQuery.fetchNextPage).toHaveBeenCalledWith({ cancelRefetch: false })
- expect(
- screen.queryByRole('button', { name: /createModal\.loadMoreApps/ }),
- ).not.toBeInTheDocument()
- })
-})
diff --git a/web/features/deployments/create-guide/ui/layout.tsx b/web/features/deployments/create-guide/ui/layout.tsx
deleted file mode 100644
index 1e8ffecb3e6..00000000000
--- a/web/features/deployments/create-guide/ui/layout.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-'use client'
-
-import type { ReactNode } from 'react'
-import type { GuideStep } from '@/features/deployments/create-guide/state/types'
-import { cn } from '@langgenius/dify-ui/cn'
-import {
- ScrollArea,
- ScrollAreaContent,
- ScrollAreaScrollbar,
- ScrollAreaThumb,
- ScrollAreaViewport,
-} from '@langgenius/dify-ui/scroll-area'
-import { useTranslation } from 'react-i18next'
-import { TitleTooltip } from '@/features/deployments/shared/components/title-tooltip'
-
-const GUIDE_PROGRESS_STEPS: GuideStep[] = ['source', 'release', 'target']
-
-function GuideStepIntro({ activeStep }: { activeStep: GuideStep }) {
- const { t } = useTranslation('deployments')
-
- let title: string
- let description: string
-
- if (activeStep === 'source') {
- title = t(($) => $['createGuide.source.title'])
- description = t(($) => $['createGuide.method.description'])
- } else if (activeStep === 'release') {
- title = t(($) => $['createGuide.release.title'])
- description = t(($) => $['createGuide.release.description'])
- } else if (activeStep === 'target') {
- title = t(($) => $['createGuide.target.title'])
- description = t(($) => $['createGuide.target.description'])
- } else {
- return null
- }
-
- return (
-
-
{title}
-
{description}
-
- {GUIDE_PROGRESS_STEPS.map((step, index) => {
- const isActive = step === activeStep
- const isComplete = index < activeIndex
- const label = t(($) => $[`createGuide.steps.${step}`])
-
- return (
-
- -
-
- {label}
-
-
- )
- })}
-
- )
-}
-
-function GuideProgressSummary({ activeStep }: { activeStep: GuideStep }) {
- const { t } = useTranslation('deployments')
- const activeIndex = GUIDE_PROGRESS_STEPS.indexOf(activeStep)
- const activeStepNumber = activeIndex + 1
-
- let activeStepLabel: string
- if (activeStep === 'source') activeStepLabel = t(($) => $['createGuide.steps.source'])
- else if (activeStep === 'release') activeStepLabel = t(($) => $['createGuide.steps.release'])
- else if (activeStep === 'target') activeStepLabel = t(($) => $['createGuide.steps.target'])
- else return null
-
- if (activeIndex < 0) return null
-
- return (
-
-
- {activeStepLabel}
-
- {activeStepNumber}/{GUIDE_PROGRESS_STEPS.length}
-
-
-
- {GUIDE_PROGRESS_STEPS.map((step, index) => (
-
- ))}
-
-
-
{title}
-
- {description}
-
-
- {contentScrollable ? (
-
-
- {children}
-
-
-
-
-
- ) : (
-
{children}
- )}
- {actions}
-
-
-
$['createGuide.title'])}
- className="flex h-full w-full max-w-210 flex-col px-5 sm:px-8 lg:px-10"
- >
-
-
-
- {t(($) => $['createGuide.title'])}
-
-
-
-
-
-
-
- {children}
-
-
-
-
-
-
-
- )
-}
-
-function DeploymentInfoSection() {
- const { t } = useTranslation('deployments')
-
- return (
-
-
- {t(($) => $['createGuide.release.deployInfo'])}
-
-
-
-
- )
-}
-
-function InitialReleaseSection() {
- const { t } = useTranslation('deployments')
-
- return (
-
-
- {t(($) => $['createGuide.release.firstVersion'])}
-
-
-
-
- )
-}
-
-function InstanceNameField() {
- const { t } = useTranslation('deployments')
- const instanceName = useAtomValue(instanceNameAtom)
- const setInstanceName = useSetAtom(setInstanceNameAtom)
- const method = useAtomValue(effectiveMethodAtom)
- const selectedApp = useAtomValue(selectedAppAtom)
- const dslDefaultAppName = useAtomValue(dslDefaultAppNameAtom)
- const instanceNamePlaceholder =
- method === 'importDsl'
- ? dslDefaultAppName || t(($) => $['createGuide.dsl.defaultAppName'])
- : selectedApp?.name
- const hasInstanceNameConflict = useAtomValue(hasInstanceNameConflictAtom)
- const instanceNameError = hasInstanceNameConflict
- ? t(($) => $['createGuide.release.instanceNameConflict'])
- : undefined
- const instanceNameErrorId = 'create-guide-instance-name-error'
-
- return (
-
-
-
setInstanceName(event.target.value)}
- placeholder={instanceNamePlaceholder}
- required
- aria-invalid={instanceNameError ? true : undefined}
- aria-describedby={instanceNameError ? instanceNameErrorId : undefined}
- className="h-9"
- />
- {instanceNameError && (
-
- {instanceNameError}
-
- )}
-
-
- {t(($) => $['createGuide.release.instanceDescription'])}
-
-