From a7e3fb2e337a6bb943f379ef91514981dbe431b6 Mon Sep 17 00:00:00 2001
From: yyh <yuanyouhuilyz@gmail.com>
Date: Thu, 5 Mar 2026 13:07:20 +0800
Subject: [PATCH] fix(web): use triangle Warning icon instead of circle error
 icon

Replace i-ri-error-warning-fill (circle exclamation) with the
Warning component (triangle) for api-fallback and credits-fallback
variants to match Figma design.
---
 .../credential-panel.spec.tsx                 | 23 ++++++++-----------
 .../provider-added-card/credential-panel.tsx  |  5 ++--
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
index 852b53047b..5167ced3e1 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
@@ -10,14 +10,12 @@ import {
 import CredentialPanel from './credential-panel'
 
 const {
-  mockEventEmitter,
   mockToastNotify,
   mockUpdateModelList,
   mockUpdateModelProviders,
   mockTrialCredits,
   mockChangePriorityFn,
 } = vi.hoisted(() => ({
-  mockEventEmitter: { emit: vi.fn() },
   mockToastNotify: vi.fn(),
   mockUpdateModelList: vi.fn(),
   mockUpdateModelProviders: vi.fn(),
@@ -34,10 +32,6 @@ vi.mock('@/app/components/base/toast', () => ({
   default: { notify: mockToastNotify },
 }))
 
-vi.mock('@/context/event-emitter', () => ({
-  useEventEmitterContextContext: () => ({ eventEmitter: mockEventEmitter }),
-}))
-
 vi.mock('@/service/client', () => ({
   consoleQuery: {
     modelProviders: {
@@ -78,6 +72,10 @@ vi.mock('@/app/components/header/indicator', () => ({
   default: ({ color }: { color: string }) => <div data-testid="indicator" data-color={color} />,
 }))
 
+vi.mock('@/app/components/base/icons/src/vender/line/alertsAndFeedback/Warning', () => ({
+  default: (props: Record<string, unknown>) => <div data-testid="warning-icon" className={props.className as string} />,
+}))
+
 const createTestQueryClient = () => new QueryClient({
   defaultOptions: {
     queries: { retry: false, gcTime: 0 },
@@ -172,14 +170,14 @@ describe('CredentialPanel', () => {
     })
 
     it('should show warning icon for credits-fallback variant', () => {
-      const { container } = renderWithQueryClient(createProvider({
+      renderWithQueryClient(createProvider({
         preferred_provider_type: PreferredProviderTypeEnum.custom,
         custom_configuration: {
           status: CustomConfigurationStatusEnum.noConfigure,
           available_credentials: [],
         },
       }))
-      expect(container.querySelector('.i-ri-error-warning-fill')).toBeTruthy()
+      expect(screen.getByTestId('warning-icon')).toBeInTheDocument()
     })
   })
 
@@ -193,8 +191,8 @@ describe('CredentialPanel', () => {
 
     it('should show warning icon for api-fallback variant', () => {
       mockTrialCredits.isExhausted = true
-      const { container } = renderWithQueryClient(createProvider())
-      expect(container.querySelector('.i-ri-error-warning-fill')).toBeTruthy()
+      renderWithQueryClient(createProvider())
+      expect(screen.getByTestId('warning-icon')).toBeInTheDocument()
     })
 
     it('should show green indicator for api-active (custom priority + authorized)', () => {
@@ -206,10 +204,10 @@ describe('CredentialPanel', () => {
     })
 
     it('should NOT show warning icon for api-active variant', () => {
-      const { container } = renderWithQueryClient(createProvider({
+      renderWithQueryClient(createProvider({
         preferred_provider_type: PreferredProviderTypeEnum.custom,
       }))
-      expect(container.querySelector('.i-ri-error-warning-fill')).toBeNull()
+      expect(screen.queryByTestId('warning-icon')).not.toBeInTheDocument()
     })
 
     it('should show red indicator and "Unavailable" for api-unavailable (exhausted + named unauthorized key)', () => {
@@ -334,7 +332,6 @@ describe('CredentialPanel', () => {
         )
         expect(mockUpdateModelProviders).toHaveBeenCalled()
         expect(mockUpdateModelList).toHaveBeenCalledWith('llm')
-        expect(mockEventEmitter.emit).not.toHaveBeenCalled()
       })
     })
   })
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
index 04083eb447..89808e682b 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
@@ -5,6 +5,7 @@ import type {
 import type { CardVariant } from './use-credential-panel-state'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
+import Warning from '@/app/components/base/icons/src/vender/line/alertsAndFeedback/Warning'
 import Toast from '@/app/components/base/toast'
 import Indicator from '@/app/components/header/indicator'
 import { consoleQuery } from '@/service/client'
@@ -112,7 +113,7 @@ function TextLabel({ variant }: { variant: CardVariant }) {
         {t(labelKey, { ns: 'common' })}
       </span>
       {variant === 'credits-fallback' && (
-        <span className="i-ri-error-warning-fill h-3 w-3 shrink-0 text-text-warning" />
+        <Warning className="h-3 w-3 shrink-0 text-text-warning" />
       )}
     </>
   )
@@ -136,7 +137,7 @@ function StatusLabel({ variant, credentialName }: {
         {credentialName}
       </span>
       {showWarning && (
-        <span className="i-ri-error-warning-fill h-3 w-3 shrink-0 text-text-warning" />
+        <Warning className="h-3 w-3 shrink-0 text-text-warning" />
       )}
       {variant === 'api-unavailable' && (
         <span className="shrink-0 text-text-destructive system-2xs-medium">