IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

LogDetails: Fix copy button visibility (#74663)

Browse Source 
* change css classname

* remove class

* Log details row: refactor style variable and add class to copy container

* Log details row: refactor test

* Prettier

* Update test

* Use toBeVisible

* Remove unsused import

* Update public/app/features/logs/components/LogDetailsRow.test.tsx

* remove `cx`

* fix lint

---------

Co-authored-by: Matias Chomicki <matyax@gmail.com>
This commit is contained in:
Sven Grossmann 2023-09-13 19:45:49 +02:00 committed by GitHub
parent 7b75bc6999
commit 01755608db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/features/logs/components/LogDetailsRow.test.tsx
View File

@ -1,4 +1,4 @@
import { screen, render, fireEvent } from '@testing-library/react';
import { fireEvent, render, screen } from '@testing-library/react';
import React, { ComponentProps } from 'react';
import { LogRowModel } from '@grafana/data';
@ -117,4 +117,13 @@ describe('LogDetailsRow', () => {
expect(screen.getByTestId('logLabelStats')).toBeInTheDocument();
expect(screen.getByTestId('logLabelStats')).toHaveTextContent('another value');
});
describe('copy button', () => {
it('should be invisible unless mouse is over', () => {
setup({ parsedValues: ['test value'] });
// This tests a regression where the button was always visible.
expect(screen.getByTitle('Copy value to clipboard')).not.toBeVisible();
// Asserting visibility on mouse-over is currently not possible.
});
});
});

15
public/app/features/logs/components/LogDetailsRow.tsx
View File

@ -75,12 +75,11 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
align-items: center;
line-height: 22px;
.show-on-hover {
display: inline;
.log-details-value-copy {
visibility: hidden;
}
&:hover {
.show-on-hover {
.log-details-value-copy {
visibility: visible;
}
}
@ -206,7 +205,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
const styles = getStyles(theme);
return (
<div className={cx('show-on-hover', styles.copyButton)}>
<div className={`log-details-value-copy ${styles.copyButton}`}>
<ClipboardButton
getText={() => val}
title="Copy value to clipboard"
@ -254,7 +253,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
} = this.props;
const { showFieldsStats, fieldStats, fieldCount } = this.state;
const styles = getStyles(theme);
const style = getLogRowStyles(theme);
const rowStyles = getLogRowStyles(theme);
const singleKey = parsedKeys == null ? false : parsedKeys.length === 1;
const singleVal = parsedValues == null ? false : parsedValues.length === 1;
const hasFilteringFunctionality = !disableActions && onClickFilterLabel && onClickFilterOutLabel;
@ -273,8 +272,8 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
return (
<>
<tr className={cx(style.logDetailsValue)}>
<td className={style.logsDetailsIcon}>
<tr className={rowStyles.logDetailsValue}>
<td className={rowStyles.logsDetailsIcon}>
<div className={styles.buttonRow}>
{hasFilteringFunctionality && (
<>
@ -311,7 +310,7 @@ class UnThemedLogDetailsRow extends PureComponent<Props, State> {
</td>
{/* Key - value columns */}
<td className={style.logDetailsLabel}>{singleKey ? parsedKeys[0] : this.generateMultiVal(parsedKeys)}</td>
<td className={rowStyles.logDetailsLabel}>{singleKey ? parsedKeys[0] : this.generateMultiVal(parsedKeys)}</td>
<td className={cx(styles.wordBreakAll, wrapLogMessage && styles.wrapLine)}>
<div className={styles.logDetailsValue}>
{singleVal ? parsedValues[0] : this.generateMultiVal(parsedValues, true)}