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

[Workplace Search] Display icon for custom api sources when a customer has uploaded one (#127407)

Browse source
This commit is contained in:
Byron Hulcher 2022-03-10 12:43:41 -05:00 • committed by GitHub
parent e2ff008f55
commit a070d7863b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 46 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

10
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.test.tsx
View file

@ -15,9 +15,17 @@ import { SourceIcon } from './';
describe('SourceIcon', () => {
it('renders', () => {
const wrapper = shallow(<SourceIcon name="foo" serviceType="custom" />);
const wrapper = shallow(<SourceIcon name="Jira" serviceType="custom" />);
expect(wrapper.find(EuiIcon)).toHaveLength(1);
expect(wrapper.find('.user-group-source')).toHaveLength(0);
});
it('renders a png icon if one is provided', () => {
const wrapper = shallow(
<SourceIcon name="Jira" serviceType="custom" iconAsBase64="base64encodedstring" />
);
expect(wrapper.find(EuiIcon).prop('type')).toEqual('data:image/png;base64,base64encodedstring');
});
});

11
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_icon/source_icon.tsx
View file

@ -18,11 +18,18 @@ interface SourceIconProps {
name: string;
className?: string;
size?: IconSize;
iconAsBase64?: string;
}
export const SourceIcon: React.FC<SourceIconProps> = ({ name, serviceType, className, size }) => (
export const SourceIcon: React.FC<SourceIconProps> = ({
name,
serviceType,
className,
size,
iconAsBase64,
}) => (
<EuiIcon
type={images[camelCase(serviceType)]}
type={iconAsBase64 ? `data:image/png;base64,${iconAsBase64}` : images[camelCase(serviceType)]}
title={`${name} logo`}
className={className}
size={size}

7
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/source_row/source_row.tsx
View file

@ -70,6 +70,7 @@ export const SourceRow: React.FC<SourceRowProps> = ({
errorReason,
allowsReauth,
activities,
mainIcon,
},
onSearchableToggle,
isOrganization,
@ -115,7 +116,11 @@ export const SourceRow: React.FC<SourceRowProps> = ({
responsive={false}
>
<EuiFlexItem grow={false}>
<SourceIcon serviceType={isIndexing ? 'loadingSmall' : serviceType} name={name} />
<SourceIcon
serviceType={isIndexing ? 'loadingSmall' : serviceType}
name={name}
iconAsBase64={mainIcon}
/>
</EuiFlexItem>
<EuiFlexItem>{name}</EuiFlexItem>
</EuiFlexGroup>

2
x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts
View file

@ -113,6 +113,8 @@ export interface ContentSourceDetails extends ContentSource {
boost: number;
activities: SourceActivity[];
isOauth1: boolean;
altIcon?: string; // base64 encoded png
mainIcon?: string; // base64 encoded png
}
interface DescriptionList {

14
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_info_card.test.tsx
View file

@ -13,18 +13,20 @@ import { EuiBadge, EuiHealth, EuiText, EuiTitle } from '@elastic/eui';
import { SourceIcon } from '../../../components/shared/source_icon';
import { ContentSourceFullData } from '../../../types';
import { SourceInfoCard } from './source_info_card';
describe('SourceInfoCard', () => {
const props = {
sourceName: 'source',
sourceType: 'custom',
dateCreated: '2021-01-20',
const contentSource = {
name: 'source',
serviceType: 'custom',
createdAt: '2021-01-20',
isFederatedSource: true,
};
} as ContentSourceFullData;
it('renders', () => {
const wrapper = shallow(<SourceInfoCard {...props} />);
const wrapper = shallow(<SourceInfoCard contentSource={contentSource} />);
expect(wrapper.find(SourceIcon)).toHaveLength(1);
expect(wrapper.find(EuiBadge)).toHaveLength(1);

19
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_info_card.tsx
View file

@ -7,6 +7,8 @@
import React from 'react';
import moment from 'moment';
import {
EuiBadge,
EuiFlexGroup,
@ -18,30 +20,25 @@ import {
} from '@elastic/eui';
import { SourceIcon } from '../../../components/shared/source_icon';
import { ContentSourceFullData } from '../../../types';
import { REMOTE_SOURCE_LABEL, CREATED_LABEL, STATUS_LABEL, READY_TEXT } from '../constants';
interface SourceInfoCardProps {
sourceName: string;
sourceType: string;
dateCreated: string;
isFederatedSource: boolean;
contentSource: ContentSourceFullData;
}
export const SourceInfoCard: React.FC<SourceInfoCardProps> = ({
sourceName,
sourceType,
dateCreated,
isFederatedSource,
contentSource: { createdAt, name, serviceType, isFederatedSource, mainIcon },
}) => (
<EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="center">
<EuiFlexItem>
<EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
<EuiFlexItem grow={null}>
<SourceIcon serviceType={sourceType} name={sourceType} size="l" />
<SourceIcon serviceType={serviceType} name={name} iconAsBase64={mainIcon} size="l" />
</EuiFlexItem>
<EuiFlexItem>
<EuiTitle size="s">
<h1>{sourceName}</h1>
<h1>{name}</h1>
</EuiTitle>
</EuiFlexItem>
</EuiFlexGroup>
@ -60,7 +57,7 @@ export const SourceInfoCard: React.FC<SourceInfoCardProps> = ({
<EuiFlexItem>
<EuiText textAlign="right" size="s">
<strong>{CREATED_LABEL}</strong>
{dateCreated}
{moment(createdAt).format('MMMM D, YYYY')}
</EuiText>
{isFederatedSource && (

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_layout.test.tsx
View file

@ -46,10 +46,10 @@ describe('SourceLayout', () => {
expect(wrapper.find('.testChild')).toHaveLength(1);
});
it('passes a source name to SourceInfoCard', () => {
it('passes a content source to SourceInfoCard', () => {
const wrapper = shallow(<SourceLayout />);
expect(wrapper.find(SourceInfoCard).prop('sourceName')).toEqual('Jira');
expect(wrapper.find(SourceInfoCard).prop('contentSource')).toEqual(contentSource);
});
it('renders the default Workplace Search layout when on an organization view', () => {

10
x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/source_layout.tsx
View file

@ -8,7 +8,6 @@
import React from 'react';
import { useValues } from 'kea';
import moment from 'moment';
import { EuiButton, EuiCallOut, EuiHorizontalRule, EuiSpacer } from '@elastic/eui';
@ -37,16 +36,11 @@ export const SourceLayout: React.FC<PageTemplateProps> = ({
const { contentSource, dataLoading, diagnosticDownloadButtonVisible } = useValues(SourceLogic);
const { isOrganization } = useValues(AppLogic);
const { name, createdAt, serviceType, isFederatedSource, supportedByLicense } = contentSource;
const { name, supportedByLicense } = contentSource;
const pageHeader = (
<>
<SourceInfoCard
sourceName={name}
sourceType={serviceType}
dateCreated={moment(createdAt).format('MMMM D, YYYY')}
isFederatedSource={isFederatedSource}
/>
<SourceInfoCard contentSource={contentSource} />
<EuiHorizontalRule />
</>
);