github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

Wrap inference service in avatar for dark mode support (#212092)

Browse source 
## Summary

Wraps the logos in our service provider list in an avatar so they are
visible in dark mode.

![CleanShot 2025-02-21 at 09 34
11@2x](https://github.com/user-attachments/assets/5bc83ee3-265b-4a8f-a811-cc0d8fd1cfd6)

This does not change the selected state for a provider. These logos will
still look poorly in dark mode, but this seemed like a larger effort
(perhaps someone can help make that more seamless).

We could also just remove the logo when selected. The logos are
beneficial when finding a preferred service, but possibly less so once
I've chosen one.

![CleanShot 2025-02-21 at 09 34
19@2x](https://github.com/user-attachments/assets/00ee3cac-3e6d-4b77-ae00-a88dda62506e)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Samiul Monir <samiul.monir@elastic.co>
This commit is contained in:
Michael DeFazio 2025-02-21 17:25:54 -05:00 • committed by GitHub
parent f0797dbaf1
commit 1a9315c07d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

11
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/inference_service_form_fields.tsx
View file

@ -97,14 +97,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
}
}, []);
const providerIcon = useMemo(
() =>
Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
? SERVICE_PROVIDERS[config?.provider as ServiceProviderKeys].icon
: undefined,
[config?.provider]
);
const providerName = useMemo(
() =>
Object.keys(SERVICE_PROVIDERS).includes(config?.provider)
@ -252,7 +244,7 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
isDisabled={isEdit}
isInvalid={isInvalid}
fullWidth
icon={!config?.provider ? { type: 'sparkles', side: 'left' } : providerIcon}
icon={!config?.provider ? { type: 'sparkles', side: 'left' } : undefined}
>
<EuiFieldText
onClick={toggleProviderPopover}
@ -278,7 +270,6 @@ export const InferenceServiceFormFields: React.FC<InferenceServicesProps> = ({
isEdit,
onClearProvider,
config?.provider,
providerIcon,
toggleProviderPopover,
handleProviderKeyboardOpen,
providerName,

11
x-pack/platform/packages/shared/kbn-inference-endpoint-ui-common/src/components/providers/render_service_provider/service_provider.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { EuiHighlight, EuiIcon } from '@elastic/eui';
import { EuiAvatar, EuiHighlight } from '@elastic/eui';
import React from 'react';
import { ServiceProviderKeys } from '../../../constants';
@ -118,7 +118,14 @@ export const ServiceProviderIcon: React.FC<ServiceProviderProps> = ({ providerKe
const provider = SERVICE_PROVIDERS[providerKey];
return provider ? (
<EuiIcon data-test-subj={`icon-service-provider-${providerKey}`} type={provider.icon} />
<EuiAvatar
name={providerKey}
data-test-subj={`icon-service-provider-${providerKey}`}
iconType={provider.icon}
color="#fff"
size="s"
type="space"
/>
) : null;
};