Fix cryptic css in Traceview component (#33780)

* Fix css interpolation error

* Fix console errors in tests

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.test.js

@@ -19,7 +19,10 @@ import SpanBarRow from './SpanBarRow';
 import SpanTreeOffset from './SpanTreeOffset';
 import ReferencesButton from './ReferencesButton';
 
-jest.mock('./SpanTreeOffset');
+jest.mock('./SpanTreeOffset', () => {
+  // eslint-disable-next-line react/display-name
+  return () => <span>SpanTreeOffset</span>;
+});
 
 describe('<SpanBarRow>', () => {
   const spanID = 'some-id';
@@ -59,7 +62,6 @@ describe('<SpanBarRow>', () => {
   beforeEach(() => {
     props.onDetailToggled.mockReset();
     props.onChildrenToggled.mockReset();
-    SpanTreeOffset.mockReturnValue(() => {});
     wrapper = mount(<SpanBarRow {...props} />);
   });
 

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanBarRow.tsx

@@ -31,83 +31,68 @@ import { TNil } from '../types';
 import { TraceSpan } from '../types/trace';
 import { autoColor, createStyle, Theme, withTheme } from '../Theme';
 
+const spanBarClassName = 'spanBar';
+const spanBarLabelClassName = 'spanBarLabel';
+const nameWrapperClassName = 'nameWrapper';
+const nameWrapperMatchingFilterClassName = 'nameWrapperMatchingFilter';
+const viewClassName = 'jaegerView';
+const nameColumnClassName = 'nameColumn';
+
 const getStyles = createStyle((theme: Theme) => {
-  const spanBar = css`
-    label: spanBar;
-  `;
-  const spanBarLabel = css`
-    label: spanBarLabel;
-  `;
-  const nameWrapper = css`
-    label: nameWrapper;
-    background: ${autoColor(theme, '#f8f8f8')};
-    line-height: 27px;
-    overflow: hidden;
-    display: flex;
-    &:hover {
-      border-right: 1px solid ${autoColor(theme, '#bbb')};
-      float: left;
-      min-width: calc(100% + 1px);
-      overflow: visible;
-    }
-  `;
-
-  const nameWrapperMatchingFilter = css`
-    label: nameWrapperMatchingFilter;
-    background-color: ${autoColor(theme, '#fffce4')};
-  `;
-
-  const endpointName = css`
-    label: endpointName;
-    color: ${autoColor(theme, '#808080')};
-  `;
-
-  const view = css`
-    label: view;
-    position: relative;
-  `;
-
-  const viewExpanded = css`
-    label: viewExpanded;
-    background: ${autoColor(theme, '#f8f8f8')};
-    outline: 1px solid ${autoColor(theme, '#ddd')};
-  `;
-
-  const viewExpandedAndMatchingFilter = css`
-    label: viewExpandedAndMatchingFilter;
-    background: ${autoColor(theme, '#fff3d7')};
-    outline: 1px solid ${autoColor(theme, '#ddd')};
-  `;
-
-  const nameColumn = css`
-    label: nameColumn;
-    position: relative;
-    white-space: nowrap;
-    z-index: 1;
-    &:hover {
-      z-index: 1;
-    }
-  `;
-
   return {
-    spanBar,
+    nameWrapper: css`
-    spanBarLabel,
+      label: nameWrapper;
-    nameWrapper,
+      background: ${autoColor(theme, '#f8f8f8')};
-    nameWrapperMatchingFilter,
+      line-height: 27px;
-    nameColumn,
+      overflow: hidden;
-    endpointName,
+      display: flex;
-    view,
+      &:hover {
-    viewExpanded,
+        border-right: 1px solid ${autoColor(theme, '#bbb')};
-    viewExpandedAndMatchingFilter,
+        float: left;
+        min-width: calc(100% + 1px);
+        overflow: visible;
+      }
+    `,
+    nameWrapperMatchingFilter: css`
+      label: nameWrapperMatchingFilter;
+      background-color: ${autoColor(theme, '#fffce4')};
+    `,
+    nameColumn: css`
+      label: nameColumn;
+      position: relative;
+      white-space: nowrap;
+      z-index: 1;
+      &:hover {
+        z-index: 1;
+      }
+    `,
+    endpointName: css`
+      label: endpointName;
+      color: ${autoColor(theme, '#808080')};
+    `,
+    view: css`
+      label: view;
+      position: relative;
+    `,
+    viewExpanded: css`
+      label: viewExpanded;
+      background: ${autoColor(theme, '#f8f8f8')};
+      outline: 1px solid ${autoColor(theme, '#ddd')};
+    `,
+    viewExpandedAndMatchingFilter: css`
+      label: viewExpandedAndMatchingFilter;
+      background: ${autoColor(theme, '#fff3d7')};
+      outline: 1px solid ${autoColor(theme, '#ddd')};
+    `,
     row: css`
       label: row;
-      &:hover .${spanBar} {
+      &:hover .${spanBarClassName} {
         opacity: 1;
       }
-      &:hover .${spanBarLabel} {
+      &:hover .${spanBarLabelClassName} {
         color: ${autoColor(theme, '#000')};
       }
-      &:hover .${nameWrapper} {
+      &:hover .${nameWrapperClassName} {
         background: #f8f8f8;
         background: linear-gradient(
           90deg,
@@ -116,14 +101,14 @@ const getStyles = createStyle((theme: Theme) => {
           ${autoColor(theme, '#eee')}
         );
       }
-      &:hover .${view} {
+      &:hover .${viewClassName} {
         background-color: ${autoColor(theme, '#f5f5f5')};
         outline: 1px solid ${autoColor(theme, '#ddd')};
       }
     `,
     rowClippingLeft: css`
       label: rowClippingLeft;
-      & .${nameColumn}::before {
+      & .${nameColumnClassName}::before {
         content: ' ';
         height: 100%;
         position: absolute;
@@ -139,7 +124,7 @@ const getStyles = createStyle((theme: Theme) => {
     `,
     rowClippingRight: css`
       label: rowClippingRight;
-      & .${view}::before {
+      & .${viewClassName}::before {
         content: ' ';
         height: 100%;
         position: absolute;
@@ -155,27 +140,27 @@ const getStyles = createStyle((theme: Theme) => {
     `,
     rowExpanded: css`
       label: rowExpanded;
-      & .${spanBar} {
+      & .${spanBarClassName} {
         opacity: 1;
       }
-      & .${spanBarLabel} {
+      & .${spanBarLabelClassName} {
         color: ${autoColor(theme, '#000')};
       }
-      & .${nameWrapper}, &:hover .${nameWrapper} {
+      & .${nameWrapperClassName}, &:hover .${nameWrapperClassName} {
         background: ${autoColor(theme, '#f0f0f0')};
         box-shadow: 0 1px 0 ${autoColor(theme, '#ddd')};
       }
-      & .${nameWrapperMatchingFilter} {
+      & .${nameWrapperMatchingFilterClassName} {
         background: ${autoColor(theme, '#fff3d7')};
       }
-      &:hover .${view} {
+      &:hover .${viewClassName} {
         background: ${autoColor(theme, '#eee')};
       }
     `,
     rowMatchingFilter: css`
       label: rowMatchingFilter;
       background-color: ${autoColor(theme, '#fffce4')};
-      &:hover .${nameWrapper} {
+      &:hover .${nameWrapperClassName} {
         background: linear-gradient(
           90deg,
           ${autoColor(theme, '#fff5e1')},
@@ -183,7 +168,7 @@ const getStyles = createStyle((theme: Theme) => {
           ${autoColor(theme, '#ffe6c9')}
         );
       }
-      &:hover .${view} {
+      &:hover .${viewClassName} {
         background-color: ${autoColor(theme, '#fff3d7')};
         outline: 1px solid ${autoColor(theme, '#ddd')};
       }
@@ -191,7 +176,7 @@ const getStyles = createStyle((theme: Theme) => {
 
     rowExpandedAndMatchingFilter: css`
       label: rowExpandedAndMatchingFilter;
-      &:hover .${view} {
+      &:hover .${viewClassName} {
         background: ${autoColor(theme, '#ffeccf')};
       }
     `,
@@ -230,7 +215,7 @@ const getStyles = createStyle((theme: Theme) => {
       &:focus {
         text-decoration: none;
       }
-      &:hover > .${endpointName} {
+      &:hover > small {
         color: ${autoColor(theme, '#000')};
       }
     `,
@@ -398,8 +383,13 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
           className
         )}
       >
-        <TimelineRow.Cell className={styles.nameColumn} width={columnDivision}>
+        <TimelineRow.Cell className={cx(styles.nameColumn, nameColumnClassName)} width={columnDivision}>
-          <div className={cx(styles.nameWrapper, { [styles.nameWrapperMatchingFilter]: isMatchingFilter })}>
+          <div
+            className={cx(styles.nameWrapper, nameWrapperClassName, {
+              [styles.nameWrapperMatchingFilter]: isMatchingFilter,
+              nameWrapperMatchingFilter: isMatchingFilter,
+            })}
+          >
             <SpanTreeOffset
               childrenVisible={isChildrenExpanded}
               span={span}
@@ -490,7 +480,7 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
           </div>
         </TimelineRow.Cell>
         <TimelineRow.Cell
-          className={cx(styles.view, {
+          className={cx(styles.view, viewClassName, {
             [styles.viewExpanded]: isDetailExpanded,
             [styles.viewExpandedAndMatchingFilter]: isMatchingFilter && isDetailExpanded,
           })}
@@ -511,8 +501,8 @@ export class UnthemedSpanBarRow extends React.PureComponent<SpanBarRowProps> {
             longLabel={longLabel}
             traceStartTime={traceStartTime}
             span={span}
-            labelClassName={`${styles.spanBarLabel} ${hintClassName}`}
+            labelClassName={`${spanBarLabelClassName} ${hintClassName}`}
-            className={styles.spanBar}
+            className={spanBarClassName}
           />
         </TimelineRow.Cell>
       </TimelineRow>

packages/jaeger-ui-components/src/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx

@@ -25,10 +25,9 @@ import { UIDropdown, UIIcon, UIMenu, UIMenuItem } from '../../uiElementsContext'
 import { autoColor, createStyle, Theme, useTheme } from '../../Theme';
 import { ubInlineBlock, uWidth100 } from '../../uberUtilityStyles';
 
+const copyIconClassName = 'copyIcon';
+
 export const getStyles = createStyle((theme: Theme) => {
-  const copyIcon = css`
-    label: copyIcon;
-  `;
   return {
     KeyValueTable: css`
       label: KeyValueTable;
@@ -52,7 +51,7 @@ export const getStyles = createStyle((theme: Theme) => {
       &:nth-child(2n) > td {
         background: ${autoColor(theme, '#f5f5f5')};
       }
-      &:not(:hover) .${copyIcon} {
+      &:not(:hover) .${copyIconClassName} {
         display: none;
       }
     `,
@@ -71,7 +70,6 @@ export const getStyles = createStyle((theme: Theme) => {
       vertical-align: middle;
       font-weight: bold;
     `,
-    copyIcon,
   };
 });
 
@@ -162,7 +160,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
                 <td>{valueMarkup}</td>
                 <td className={styles.copyColumn}>
                   <CopyIcon
-                    className={styles.copyIcon}
+                    className={copyIconClassName}
                     copyText={JSON.stringify(row, null, 2)}
                     tooltipTitle="Copy JSON"
                   />

packages/jaeger-ui-components/src/url/ReferenceLink.test.js

@@ -55,9 +55,14 @@ describe(ReferenceLink, () => {
     });
 
     it('throws if ExternalLinkContext is not set', () => {
+      // Prevent writing to stderr during this render.
+      const err = console.error;
+      console.error = jest.fn();
       expect(() => mount(<ReferenceLink reference={externalRef} focusSpan={focusMock} />)).toThrow(
         'ExternalLinkContext'
       );
+      // Restore writing to stderr.
+      console.error = err;
     });
   });
   describe('focus span', () => {