mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Workplace Search] Remove unused components and redundant link (#112971)
* Remove user_icon and user_option_item components They are no longer needed after the removal of Standard Auth * Remove link wrapping image It duplicates the link below the image and creates a redundant "external link" icon * Fix typo Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Vadim Yakhin
GitHub
parent
be1ee57a03
commit
9e95786b42
7 changed files with 11 additions and 287 deletions
|
|
@ -1,8 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
export { UserIcon } from './user_icon';
|
||||
|
|
@ -1,137 +0,0 @@
|
|||
.user-icon {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
font-weight: 500;
|
||||
background: $euiColorPrimary;
|
||||
color: $euiColorEmptyShade;
|
||||
|
||||
&:not(.user-icon--small) {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
&--small {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
font-size: .875rem;
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
&__text {
|
||||
text-shadow: 0 1px 2px rgba($euiColorInk, .08);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.125rem;
|
||||
color: $euiColorEmptyShade;
|
||||
font-weight: 500;
|
||||
|
||||
.user-icon--small & {
|
||||
font-size: .87rem;
|
||||
}
|
||||
}
|
||||
|
||||
&__image {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.group-avatars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding-top: 4px;
|
||||
|
||||
&__additional {
|
||||
line-height: 2;
|
||||
vertical-align: middle;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.group-user-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
& > * {
|
||||
pointer-events: none;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
&__text {
|
||||
padding-bottom: 2px;
|
||||
z-index: 2;
|
||||
line-height: 1;
|
||||
font-weight: 500;
|
||||
color: $euiColorEmptyShade;
|
||||
font-size: .875rem;
|
||||
text-shadow: 0 1px 2px rgba($euiColorInk, .08);
|
||||
}
|
||||
|
||||
&__image {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.groups-tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&:hover &__container {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&__container {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
box-shadow: 0 0 12px rgba($euiColorInk, .15);
|
||||
background: $euiColorGhost;
|
||||
text-align: left;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 125px;
|
||||
padding: 6px 10px 6px 10px;
|
||||
border-radius: 3px;
|
||||
z-index: 5;
|
||||
top: 100%;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__text:before {
|
||||
content:'';
|
||||
display:block;
|
||||
width:0;
|
||||
height:0;
|
||||
position:absolute;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid $euiColorGhost;
|
||||
top: -6px;
|
||||
left: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { users } from '../../../__mocks__/users.mock';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { UserIcon } from './user_icon';
|
||||
|
||||
describe('SourcesTable', () => {
|
||||
it('renders with picture', () => {
|
||||
const wrapper = shallow(<UserIcon {...users[0]} />);
|
||||
|
||||
expect(wrapper.find('.user-icon')).toHaveLength(1);
|
||||
expect(wrapper.find('.avatar__image')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders without picture', () => {
|
||||
const user = {
|
||||
...users[0],
|
||||
pictureUrl: null,
|
||||
};
|
||||
const wrapper = shallow(<UserIcon {...user} />);
|
||||
|
||||
expect(wrapper.find('.user-icon')).toHaveLength(1);
|
||||
expect(wrapper.find('.avatar__text')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('renders fallback "alt" value when name not present', () => {
|
||||
const user = {
|
||||
...users[0],
|
||||
name: null,
|
||||
};
|
||||
const wrapper = shallow(<UserIcon {...user} />);
|
||||
|
||||
expect(wrapper.find('img').prop('alt')).toEqual(user.email);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { User } from '../../../types';
|
||||
|
||||
import './user_icon.scss';
|
||||
|
||||
export const UserIcon: React.FC<User> = ({ name, pictureUrl, color, initials, email }) => (
|
||||
<div className="user-icon user-icon--small" style={{ backgroundColor: color }}>
|
||||
{pictureUrl ? (
|
||||
<img src={pictureUrl} className="avatar__image" alt={name || email} />
|
||||
) : (
|
||||
<span className="avatar__text">{initials}</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { users } from '../../../__mocks__/users.mock';
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
|
||||
import { UserIcon } from '../../../components/shared/user_icon';
|
||||
|
||||
import { UserOptionItem } from './user_option_item';
|
||||
|
||||
const user = users[0];
|
||||
|
||||
describe('UserOptionItem', () => {
|
||||
it('renders', () => {
|
||||
const wrapper = shallow(<UserOptionItem user={user} />);
|
||||
|
||||
expect(wrapper.find(UserIcon)).toHaveLength(1);
|
||||
expect(wrapper.find(EuiFlexGroup)).toHaveLength(1);
|
||||
expect(wrapper.find(EuiFlexItem)).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('falls back to email when name not present', () => {
|
||||
const wrapper = shallow(<UserOptionItem user={{ ...user, name: null }} />);
|
||||
const nameItem = wrapper.find(EuiFlexItem).last();
|
||||
|
||||
expect(nameItem.prop('children')).toEqual(user.email);
|
||||
});
|
||||
});
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
|
||||
import { UserIcon } from '../../../components/shared/user_icon';
|
||||
import { User } from '../../../types';
|
||||
|
||||
interface UserOptionItemProps {
|
||||
user: User;
|
||||
}
|
||||
|
||||
export const UserOptionItem: React.FC<UserOptionItemProps> = ({ user }) => (
|
||||
<EuiFlexGroup gutterSize="xs" justifyContent="flexStart" alignItems="center">
|
||||
<EuiFlexItem grow={false}>
|
||||
<UserIcon {...user} />
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>{user.name || user.email}</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
);
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { EuiSpacer, EuiTitle, EuiText, EuiButton, EuiLink } from '@elastic/eui';
|
||||
import { EuiSpacer, EuiTitle, EuiText, EuiButton } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
|
||||
|
|
@ -32,18 +32,16 @@ export const SetupGuide: React.FC = () => {
|
|||
<SetPageChrome trail={[SETUP_GUIDE_TITLE]} />
|
||||
<SendTelemetry action="viewed" metric="setup_guide" />
|
||||
|
||||
<EuiLink href={GETTING_STARTED_LINK_URL} target="_blank">
|
||||
<img
|
||||
className="setupGuide__thumbnail"
|
||||
src={GettingStarted}
|
||||
alt={i18n.translate('xpack.enterpriseSearch.workplaceSearch.setupGuide.imageAlt', {
|
||||
defaultMessage:
|
||||
'Getting started with Workplace Search - a guide to show you how to get Workplace Search up and running',
|
||||
})}
|
||||
width="1280"
|
||||
height-="720"
|
||||
/>
|
||||
</EuiLink>
|
||||
<img
|
||||
className="setupGuide__thumbnail"
|
||||
src={GettingStarted}
|
||||
alt={i18n.translate('xpack.enterpriseSearch.workplaceSearch.setupGuide.imageAlt', {
|
||||
defaultMessage:
|
||||
'Getting started with Workplace Search - a guide to show you how to get Workplace Search up and running',
|
||||
})}
|
||||
width="1280"
|
||||
height="720"
|
||||
/>
|
||||
|
||||
<EuiTitle size="s">
|
||||
<p>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue