LogDetails: Fix copy button visibility (#74663)

* 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>

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

@@ -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.
+    });
+  });
 });

public/app/features/logs/components/LogDetailsRow.tsx

@@ -75,12 +75,11 @@ const getStyles = memoizeOne((theme: GrafanaTheme2) => {
       align-items: center;
       line-height: 22px;
 
-      .show-on-hover {
+      .log-details-value-copy {
-        display: inline;
         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)}>
+        <tr className={rowStyles.logDetailsValue}>
-          <td className={style.logsDetailsIcon}>
+          <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)}