refactor(web): use css icon for code generator

web/app/components/workflow/nodes/_base/components/__tests__/code-generator-button.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+import CodeGenerateBtn from '../code-generator-button'
+
+vi.mock('@/app/components/app/configuration/config/code-generator/get-code-generator-res', () => ({
+  GetCodeGeneratorResModal: () => <div role="dialog" aria-label="code generator" />,
+}))
+
+vi.mock('@/app/components/workflow/hooks-store', () => ({
+  useHooksStore: (selector: (state: { configsMap: { flowId: string } }) => unknown) =>
+    selector({ configsMap: { flowId: 'flow-1' } }),
+}))
+
+describe('CodeGenerateBtn', () => {
+  it('should open the code generator from the named action', async () => {
+    const user = userEvent.setup()
+    render(<CodeGenerateBtn nodeId="node-1" codeLanguages={CodeLanguage.python3} />)
+
+    await user.click(screen.getByRole('button', { name: 'appDebug.operation.automatic' }))
+
+    expect(screen.getByRole('dialog', { name: 'code generator' })).toBeInTheDocument()
+  })
+})

web/app/components/workflow/nodes/_base/components/code-generator-button.tsx

@@ -5,9 +5,9 @@ import type { GenRes } from '@/service/debug'
 import { cn } from '@langgenius/dify-ui/cn'
 import * as React from 'react'
 import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { GetCodeGeneratorResModal } from '@/app/components/app/configuration/config/code-generator/get-code-generator-res'
 import { ActionButton } from '@/app/components/base/action-button'
-import { Generator } from '@/app/components/base/icons/src/vender/other'
 import { AppModeEnum } from '@/types/app'
 import { useHooksStore } from '../../../hooks-store'
 
@@ -26,6 +26,7 @@ const CodeGenerateBtn: FC<Props> = ({
   codeLanguages,
   onGenerated,
 }) => {
+  const { t } = useTranslation()
   const [showAutomatic, setShowAutomatic] = useState(false)
   const handleAutomaticRes = useCallback(
     (res: GenRes) => {
@@ -38,8 +39,12 @@ const CodeGenerateBtn: FC<Props> = ({
 
   return (
     <div className={cn(className)}>
-      <ActionButton className="hover:bg-[#155EFF]/8" onClick={() => setShowAutomatic(true)}>
-        <Generator className="size-4 text-primary-600" />
+      <ActionButton
+        aria-label={t(($) => $['operation.automatic'], { ns: 'appDebug' })}
+        className="hover:bg-[#155EFF]/8"
+        onClick={() => setShowAutomatic(true)}
+      >
+        <span aria-hidden className="i-custom-vender-other-generator size-4 text-primary-600" />
       </ActionButton>
       {showAutomatic && (
         <GetCodeGeneratorResModal