diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx index 03fcfdd6623..17b7f843927 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx @@ -5,7 +5,6 @@ import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data'; import { stylesFactory, useTheme2 } from '../../../themes'; import { IconButton } from '../../IconButton/IconButton'; -import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout'; export interface DataLinksListItemProps { index: number; @@ -27,20 +26,18 @@ export const DataLinksListItem: FC = ({ link, onEdit, on return (
- - -
- {hasTitle ? title : 'Data link title not provided'} -
- - - - -
-
- {hasUrl ? url : 'Data link url not provided'} +
+
+ {hasTitle ? title : 'Data link title not provided'}
- +
+ + +
+
+
+ {hasUrl ? url : 'Data link url not provided'} +
); }; @@ -53,6 +50,19 @@ const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme2) => { &:last-child { margin-bottom: 0; } + display: flex; + flex-direction: column; + `, + titleWrapper: css` + label: data-links-list-item-title; + justify-content: space-between; + display: flex; + width: 100%; + align-items: center; + `, + actionButtons: css` + margin-left: ${theme.spacing(1)}; + display: flex; `, notConfigured: css` font-style: italic;