From 40545905260d1f1f1bfa0f1a11fb4810780b0b03 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Tue, 13 Feb 2024 10:56:37 +0000
Subject: [PATCH] Tempo: Use grafana/ui divider (#82141)

* Use Grafana divider

* Remove custom divider
---
 .betterer.results                             |  5 --
 .../TraceTimelineViewer/SpanDetail/index.tsx  |  5 +-
 .../TraceView/components/common/Divider.tsx   | 56 -------------------
 3 files changed, 2 insertions(+), 64 deletions(-)
 delete mode 100644 public/app/features/explore/TraceView/components/common/Divider.tsx

diff --git a/.betterer.results b/.betterer.results
index 21054bcc4dc..4ac26099498 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -3612,11 +3612,6 @@ exports[`better eslint`] = {
     "public/app/features/explore/TraceView/components/common/CopyIcon.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/features/explore/TraceView/components/common/Divider.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
     "public/app/features/explore/TraceView/components/common/LabeledList.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
diff --git a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
index 0bd2bbe0c26..87ba15592c8 100644
--- a/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
+++ b/public/app/features/explore/TraceView/components/TraceTimelineViewer/SpanDetail/index.tsx
@@ -21,12 +21,11 @@ import { DataFrame, dateTimeFormat, GrafanaTheme2, IconName, LinkModel } from '@
 import { TraceToProfilesOptions } from '@grafana/o11y-ds-frontend';
 import { config, locationService, reportInteraction } from '@grafana/runtime';
 import { TimeZone } from '@grafana/schema';
-import { DataLinkButton, Icon, TextArea, useStyles2 } from '@grafana/ui';
+import { DataLinkButton, Divider, Icon, TextArea, useStyles2 } from '@grafana/ui';
 import { RelatedProfilesTitle } from '@grafana-plugins/tempo/resultTransformer';
 
 import { pyroscopeProfileIdTagKey } from '../../../createSpanLink';
 import { autoColor } from '../../Theme';
-import { Divider } from '../../common/Divider';
 import LabeledList from '../../common/LabeledList';
 import { KIND, LIBRARY_NAME, LIBRARY_VERSION, STATUS, STATUS_MESSAGE, TRACE_STATE } from '../../constants/span';
 import { SpanLinkFunc, TNil } from '../../types';
@@ -329,7 +328,7 @@ export default function SpanDetail(props: SpanDetailProps) {
       </div>
       <span style={{ marginRight: '10px' }}>{logLinkButton}</span>
       {profileLinkButton}
-      <Divider type={'horizontal'} />
+      <Divider spacing={1} />
       <div>
         <div>
           <AccordianKeyValues
diff --git a/public/app/features/explore/TraceView/components/common/Divider.tsx b/public/app/features/explore/TraceView/components/common/Divider.tsx
deleted file mode 100644
index edb43d863c0..00000000000
--- a/public/app/features/explore/TraceView/components/common/Divider.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { css, cx } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
-
-import { autoColor } from '../Theme';
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    Divider: css`
-      background: ${autoColor(theme, '#ddd')};
-    `,
-
-    DividerVertical: css`
-      label: DividerVertical;
-      display: inline-block;
-      width: 1px;
-      height: 0.9em;
-      margin: 0 8px;
-      vertical-align: middle;
-    `,
-
-    DividerHorizontal: css`
-      label: DividerHorizontal;
-      display: block;
-      height: 1px;
-      width: 100%;
-      margin-top: ${theme.spacing(2)};
-      margin-bottom: ${theme.spacing(0.5)};
-      clear: both;
-      vertical-align: middle;
-      position: relative;
-      top: -0.06em;
-    `,
-  };
-};
-
-interface Props {
-  className?: string;
-  style?: React.CSSProperties;
-  type?: 'vertical' | 'horizontal';
-}
-export function Divider({ className, style, type }: Props) {
-  const styles = useStyles2(getStyles);
-  return (
-    <div
-      style={style}
-      className={cx(
-        styles.Divider,
-        type === 'horizontal' ? styles.DividerHorizontal : styles.DividerVertical,
-        className
-      )}
-    />
-  );
-}