maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

uptime add title to waterfall sidebar truncated text (#87102)

Browse source 
* uptime add title to waterfall sidebar truncated text

* Uptime add tooltip and screen reader only text to MiddleTruncatedText

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Dominique Clarke 2021-01-05 09:06:43 -05:00 committed by GitHub
parent 875fde58fe
commit f0f88437b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.test.tsx
View file

@ -5,35 +5,37 @@
*/
import { getChunks, MiddleTruncatedText } from './middle_truncated_text';
import { shallowWithIntl } from '@kbn/test/jest';
import { render, within } from '@testing-library/react';
import React from 'react';
const longString =
'this-is-a-really-really-really-really-really-really-really-really-long-string.madeup.extension';
const first = 'this-is-a-really-really-really-really-really-really-really-really-long-string.made';
const last = 'up.extension';
describe('getChunks', () => {
it('Calculates chunks correctly', () => {
const result = getChunks(longString);
expect(result).toEqual({
first: 'this-is-a-really-really-really-really-really-really-really-really-long-string.made',
last: 'up.extension',
first,
last,
});
});
});
describe('Component', () => {
it('Renders correctly', () => {
expect(shallowWithIntl(<MiddleTruncatedText text={longString} />)).toMatchInlineSnapshot(`
<styled.div>
<styled.div>
<styled.span>
this-is-a-really-really-really-really-really-really-really-really-long-string.made
</styled.span>
<styled.span>
up.extension
</styled.span>
</styled.div>
</styled.div>
`);
it('renders truncated text', () => {
const { getByText } = render(<MiddleTruncatedText text={longString} />);
expect(getByText(first)).toBeInTheDocument();
expect(getByText(last)).toBeInTheDocument();
});
it('renders screen reader only text', () => {
const { getByTestId } = render(<MiddleTruncatedText text={longString} />);
const { getByText } = within(getByTestId('middleTruncatedTextSROnly'));
expect(getByText(longString)).toBeInTheDocument();
});
});

22
x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
View file

@ -6,6 +6,7 @@
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { EuiScreenReaderOnly, EuiToolTip } from '@elastic/eui';
const OuterContainer = styled.div`
width: 100%;
@ -13,7 +14,7 @@ const OuterContainer = styled.div`
position: relative;
`;
const InnerContainer = styled.div`
const InnerContainer = styled.span`
position: absolute;
top: 0;
bottom: 0;
@ -51,11 +52,18 @@ export const MiddleTruncatedText = ({ text }: { text: string }) => {
}, [text]);
return (
<OuterContainer>
<InnerContainer>
<FirstChunk>{chunks.first}</FirstChunk>
<LastChunk>{chunks.last}</LastChunk>
</InnerContainer>
</OuterContainer>
<>
<OuterContainer>
<EuiScreenReaderOnly>
<span data-test-subj="middleTruncatedTextSROnly">{text}</span>
</EuiScreenReaderOnly>
<EuiToolTip content={text} position="top" data-test-subj="middleTruncatedTextToolTip">
<InnerContainer aria-hidden={true}>
<FirstChunk>{chunks.first}</FirstChunk>
<LastChunk>{chunks.last}</LastChunk>
</InnerContainer>
</EuiToolTip>
</OuterContainer>
</>
);
};