Skip to content

Commit

Permalink
Fixes bug with broken tooltips (elastic#29290) (elastic#29312)
Browse files Browse the repository at this point in the history 
* Removes pivotal tooltip in favor of EUI tooltip component b/c pivotal components do not work with React 16.6

* Fixes snapshot test for changed tooltip markup

* Adds ID props to EUI tooltips to avoid aria described by values breaking snapshots
  • Loading branch information
@jasonrhodes
jasonrhodes authored Jan 25, 2019
1 parent e99b24e commit 92fb20e
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 81 deletions.
140 changes: 96 additions & 44 deletions ...pm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -510,23 +510,36 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
<div
className="c1"
>
<a
aria-describedby="overlay1"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
About to blow up!
</a>
<div
aria-describedby="overlay2"
className="c3"
<a
aria-describedby="error-message-tooltip"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
onBlur={[Function]}
onFocus={[Function]}
>
About to blow up!
</a>
</span>
<br />
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
elasticapm.contrib.django.client.capture
</div>
<div
aria-describedby="error-culprit-tooltip"
className="c3"
onBlur={[Function]}
onFocus={[Function]}
>
elasticapm.contrib.django.client.capture
</div>
</span>
</div>
</div>
</td>
Expand Down Expand Up @@ -589,23 +602,36 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
<div
className="c1"
>
<a
aria-describedby="overlay3"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
AssertionError:
</a>
<div
aria-describedby="overlay4"
className="c3"
<a
aria-describedby="error-message-tooltip"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
onBlur={[Function]}
onFocus={[Function]}
>
AssertionError:
</a>
</span>
<br />
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
opbeans.views.oopsie
</div>
<div
aria-describedby="error-culprit-tooltip"
className="c3"
onBlur={[Function]}
onFocus={[Function]}
>
opbeans.views.oopsie
</div>
</span>
</div>
</div>
</td>
Expand Down Expand Up @@ -668,23 +694,36 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
<div
className="c1"
>
<a
aria-describedby="overlay5"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
AssertionError: Bad luck!
</a>
<div
aria-describedby="overlay6"
className="c3"
<a
aria-describedby="error-message-tooltip"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
onBlur={[Function]}
onFocus={[Function]}
>
AssertionError: Bad luck!
</a>
</span>
<br />
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
opbeans.tasks.update_stats
</div>
<div
aria-describedby="error-culprit-tooltip"
className="c3"
onBlur={[Function]}
onFocus={[Function]}
>
opbeans.tasks.update_stats
</div>
</span>
</div>
</div>
</td>
Expand Down Expand Up @@ -747,23 +786,36 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
<div
className="c1"
>
<a
aria-describedby="overlay7"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
Customer with ID 8517 not found
</a>
<div
aria-describedby="overlay8"
className="c3"
<a
aria-describedby="error-message-tooltip"
className="euiLink euiLink--primary c2"
href="#/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?_g=(time:(from:now-24h,mode:quick,to:now))&_a="
onBlur={[Function]}
onFocus={[Function]}
>
Customer with ID 8517 not found
</a>
</span>
<br />
<span
className="euiToolTipAnchor"
onMouseOut={[Function]}
onMouseOver={[Function]}
>
opbeans.views.customer
</div>
<div
aria-describedby="error-culprit-tooltip"
className="c3"
onBlur={[Function]}
onFocus={[Function]}
>
opbeans.views.customer
</div>
</span>
</div>
</div>
</td>
Expand Down
18 changes: 12 additions & 6 deletions x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,11 @@

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { EuiBasicTable, EuiBadge } from '@elastic/eui';
import { EuiBasicTable, EuiBadge, EuiToolTip } from '@elastic/eui';
import numeral from '@elastic/numeral';
import moment from 'moment';
import { toQuery, fromQuery, history } from '../../../shared/Links/url_helpers';
import { KibanaLink } from '../../../shared/Links/KibanaLink';
import TooltipOverlay from '../../../shared/TooltipOverlay';
import styled from 'styled-components';
import {
unit,
Expand Down Expand Up @@ -107,14 +106,21 @@ class List extends Component {
render: (message, item) => {
return (
<MessageAndCulpritCell>
<TooltipOverlay content={message || NOT_AVAILABLE_LABEL}>
<EuiToolTip
id="error-message-tooltip"
content={message || NOT_AVAILABLE_LABEL}
>
<MessageLink hash={`/${serviceName}/errors/${item.groupId}`}>
{message || NOT_AVAILABLE_LABEL}
</MessageLink>
</TooltipOverlay>
<TooltipOverlay content={item.culprit || NOT_AVAILABLE_LABEL}>
</EuiToolTip>
<br />
<EuiToolTip
id="error-culprit-tooltip"
content={item.culprit || NOT_AVAILABLE_LABEL}
>
<Culprit>{item.culprit || NOT_AVAILABLE_LABEL}</Culprit>
</TooltipOverlay>
</EuiToolTip>
</MessageAndCulpritCell>
);
}
Expand Down
7 changes: 3 additions & 4 deletions x-pack/plugins/apm/public/components/app/TraceOverview/TraceList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
Expand All @@ -12,8 +13,6 @@ import { fontSizes, truncate } from '../../../style/variables';
import { asMillis } from '../../../utils/formatters';
import { ImpactBar } from '../../shared/ImpactBar';
import { ITableColumn, ManagedTable } from '../../shared/ManagedTable';
// @ts-ignore
import TooltipOverlay from '../../shared/TooltipOverlay';
import { TransactionLink } from '../../shared/TransactionLink';

const StyledTransactionLink = styled(TransactionLink)`
Expand All @@ -36,11 +35,11 @@ const traceListColumns: ITableColumn[] = [
width: '40%',
sortable: true,
render: (name, group: ITransactionGroup) => (
<TooltipOverlay content={name}>
<EuiToolTip id="trace-transaction-link-tooltip" content={name}>
<StyledTransactionLink transaction={group.sample}>
{name}
</StyledTransactionLink>
</TooltipOverlay>
</EuiToolTip>
)
},
{
Expand Down
9 changes: 6 additions & 3 deletions x-pack/plugins/apm/public/components/app/TransactionOverview/List/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
*/

import { i18n } from '@kbn/i18n';
import { EuiToolTip } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import TooltipOverlay from '../../../shared/TooltipOverlay';
import { asMillis, asDecimal } from '../../../../utils/formatters';
import { ImpactBar } from '../../../shared/ImpactBar';
import { fontFamilyCode, truncate } from '../../../../style/variables';
Expand Down Expand Up @@ -38,11 +38,14 @@ export default function TransactionList({ items, serviceName, ...rest }) {
const transactionPath = `/${serviceName}/transactions/${encodedType}/${encodedName}`;

return (
<TooltipOverlay content={transactionName || NOT_AVAILABLE_LABEL}>
<EuiToolTip
id="transaction-name-link-tooltip"
content={transactionName || NOT_AVAILABLE_LABEL}
>
<TransactionNameLink hash={transactionPath}>
{transactionName || NOT_AVAILABLE_LABEL}
</TransactionNameLink>
</TooltipOverlay>
</EuiToolTip>
);
}
},
Expand Down
24 changes: 0 additions & 24 deletions x-pack/plugins/apm/public/components/shared/TooltipOverlay.js
View file

This file was deleted.

0 comments on commit 92fb20e

Please sign in to comment.