fix(web): show DSL import warning details (#41502)

(cherry picked from commit b70ad7d424)

web/hooks/use-import-dsl.spec.tsx

@@ -1,4 +1,4 @@
-import { act, waitFor } from '@testing-library/react'
+import { act, render, screen, waitFor } from '@testing-library/react'
 import { DSLImportMode, DSLImportStatus } from '@/models/app'
 import { renderHookWithConsoleQuery } from '@/test/console/query-data'
 import { AppModeEnum } from '@/types/app'
@@ -93,6 +93,46 @@ describe('useImportDSL', () => {
     mockResolveImportedAppRedirectionTarget.mockImplementation(async (target) => target)
   })
 
+  it('should show response warnings when an import completes with warnings', async () => {
+    const completedResponse = {
+      id: 'import-1',
+      status: DSLImportStatus.COMPLETED_WITH_WARNINGS,
+      app_id: 'app-1',
+      app_mode: AppModeEnum.WORKFLOW,
+      permission_keys: [],
+      warnings: [
+        {
+          code: 'agent_tool_authorization_required',
+          path: 'agent_packages.agent_1.soul.tools.dify_tools.0',
+          message: "Agent tool 'jina_search' requires authorization.",
+          details: { tool_name: 'jina_search' },
+        },
+      ],
+    }
+    mockImportDSL.mockResolvedValue(completedResponse)
+    mockHandleCheckPluginDependencies.mockResolvedValue(undefined)
+
+    const { result } = renderHookWithConsoleQuery(() => useImportDSL())
+
+    await act(async () => {
+      await result.current.handleImportDSL(
+        {
+          mode: DSLImportMode.YAML_CONTENT,
+          yaml_content: 'app: demo',
+        },
+        { skipRedirectOnSuccess: true },
+      )
+    })
+
+    expect(toastMocks.warning).toHaveBeenCalledWith('app.newApp.caution', {
+      description: expect.anything(),
+    })
+    const warningDescription = toastMocks.warning.mock.calls[0]![1].description
+    render(<>{warningDescription}</>)
+    expect(screen.getByText("Agent tool 'jina_search' requires authorization.")).toBeInTheDocument()
+    expect(screen.queryByText('app.newApp.appCreateDSLWarning')).not.toBeInTheDocument()
+  })
+
   it('should complete a confirmed import that returns warnings', async () => {
     let resolvePluginCheck: (() => void) | undefined
     const pendingResponse = {
@@ -163,8 +203,12 @@ describe('useImportDSL', () => {
     expect(onSuccess).toHaveBeenCalledWith(completedResponse)
     expect(onFailed).not.toHaveBeenCalled()
     expect(toastMocks.warning).toHaveBeenCalledWith('app.newApp.caution', {
-      description: 'app.newApp.appCreateDSLWarning',
+      description: expect.anything(),
     })
+    const warningDescription = toastMocks.warning.mock.calls[0]![1].description
+    render(<>{warningDescription}</>)
+    expect(screen.getByText('Agent file was not included.')).toBeInTheDocument()
+    expect(screen.queryByText('app.newApp.appCreateDSLWarning')).not.toBeInTheDocument()
     expect(mockHandleCheckPluginDependencies).toHaveBeenCalledWith('app-1')
     expect(mockResolveImportedAppRedirectionTarget).toHaveBeenCalledWith({
       id: 'app-1',

web/hooks/use-import-dsl.ts

@@ -3,8 +3,9 @@ import type { AppIconType } from '@/types/app'
 import { toast } from '@langgenius/dify-ui/toast'
 import { useMutation, useSuspenseQuery } from '@tanstack/react-query'
 import { useAtomValue } from 'jotai'
-import { useCallback, useRef, useState } from 'react'
+import { createElement, useCallback, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import DSLImportWarningDescription from '@/app/components/app/create-from-dsl-modal/dsl-import-warning-description'
 import { usePluginDependencies } from '@/app/components/workflow/plugin-dependency/hooks'
 import { workspacePermissionKeysAtom } from '@/context/permission-state'
 import { userProfileQueryOptions } from '@/features/account-profile/client'
@@ -80,7 +81,10 @@ export const useImportDSL = () => {
           )
           const description =
             status === DSLImportStatus.COMPLETED_WITH_WARNINGS
-              ? t(($) => $['newApp.appCreateDSLWarning'], { ns: 'app' })
+              ? createElement(DSLImportWarningDescription, {
+                  warnings: response.warnings,
+                  fallback: t(($) => $['newApp.appCreateDSLWarning'], { ns: 'app' }),
+                })
               : undefined
 
           if (status === DSLImportStatus.COMPLETED) toast.success(message)
@@ -162,7 +166,10 @@ export const useImportDSL = () => {
           )
           const description =
             status === DSLImportStatus.COMPLETED_WITH_WARNINGS
-              ? t(($) => $['newApp.appCreateDSLWarning'], { ns: 'app' })
+              ? createElement(DSLImportWarningDescription, {
+                  warnings: response.warnings,
+                  fallback: t(($) => $['newApp.appCreateDSLWarning'], { ns: 'app' }),
+                })
               : undefined
 
           if (status === DSLImportStatus.COMPLETED) toast.success(message)