youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 18:08:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: use destructive text color for api-unavailable credential name and remove redundant Unavailable label

Browse Source 
The card-level StatusLabel now shows a red credential name for the
api-unavailable variant to match the Figma design. The "Unavailable"
text was removed since it only belongs inside the dropdown key list.
This commit is contained in:
yyh
2026-03-11 11:56:50 +08:00
parent 250450a54e
commit 08da390678
2 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.spec.tsx
View File

@ -212,7 +212,7 @@ describe('CredentialPanel', () => {
expect(screen.queryByTestId('warning-icon')).not.toBeInTheDocument()
})
it('should show red indicator and "Unavailable" for api-unavailable (exhausted + named unauthorized key)', () => {
it('should show red indicator and credential name for api-unavailable (exhausted + named unauthorized key)', () => {
mockTrialCredits.isExhausted = true
renderWithQueryClient(createProvider({
preferred_provider_type: PreferredProviderTypeEnum.custom,
@ -224,7 +224,6 @@ describe('CredentialPanel', () => {
},
}))
expect(screen.getByTestId('indicator')).toHaveAttribute('data-color', 'red')
expect(screen.getByText(/unavailable/i)).toBeInTheDocument()
expect(screen.getByText('Bad Key')).toBeInTheDocument()
})
})
@ -303,6 +302,27 @@ describe('CredentialPanel', () => {
const { container } = renderWithQueryClient(createProvider())
expect(container.querySelector('.text-text-secondary')).toBeTruthy()
})
it('should use destructive text color for api-unavailable credential name', () => {
mockTrialCredits.isExhausted = true
renderWithQueryClient(createProvider({
preferred_provider_type: PreferredProviderTypeEnum.custom,
custom_configuration: {
status: CustomConfigurationStatusEnum.active,
current_credential_id: undefined,
current_credential_name: 'Bad Key',
available_credentials: [{ credential_id: 'cred-1', credential_name: 'Bad Key' }],
},
}))
expect(screen.getByText('Bad Key')).toHaveClass('text-text-destructive')
})
it('should use secondary text color for api-active credential name', () => {
renderWithQueryClient(createProvider({
preferred_provider_type: PreferredProviderTypeEnum.custom,
}))
expect(screen.getByText('test-credential')).toHaveClass('text-text-secondary')
})
})
describe('Priority change', () => {

11
web/app/components/header/account-setting/model-provider-page/provider-added-card/credential-panel.tsx
View File

@ -82,15 +82,15 @@ function StatusLabel({ variant, credentialName }: {
variant: CardVariant
credentialName: string | undefined
}) {
const { t } = useTranslation()
const dotColor = variant === 'api-unavailable' ? 'red' : 'green'
const isDestructive = isDestructiveVariant(variant)
const dotColor = isDestructive ? 'red' : 'green'
const showWarning = variant === 'api-fallback'
return (
<>
<Indicator className="shrink-0" color={dotColor} />
<span
className="truncate text-text-secondary"
className={`truncate ${isDestructive ? 'text-text-destructive' : 'text-text-secondary'}`}
title={credentialName}
>
{credentialName}
@ -98,11 +98,6 @@ function StatusLabel({ variant, credentialName }: {
{showWarning && (
<Warning className="ml-auto h-3 w-3 shrink-0 text-text-warning" />
)}
{variant === 'api-unavailable' && (
<span className="shrink-0 text-text-destructive system-2xs-medium">
{t('modelProvider.card.unavailable', { ns: 'common' })}
</span>
)}
</>
)
}