public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v9.3.x] Panel Edit: Fix data links edit icons being off screen when provided title is too long (#60082)

Browse Source 
* Panel Edit: Fix data links edit icons being off screen when provided title is too long (#59829)

* Fix data links edit icons being off screen

* Remove unused imports

* Review

(cherry picked from commit 6f930f4836)

* Fix backport
This commit is contained in:
Dominik Prokop
2022-12-09 03:38:12 -08:00
committed by GitHub
parent 8680534e33
commit 4bdebf338c
1 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+24 -14
View File
@@ -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<DataLinksListItemProps> = ({ link, onEdit, on
return (
<div className={styles.wrapper}>
<VerticalGroup spacing="xs">
<HorizontalGroup justify="space-between" align="flex-start" width="100%">
<div className={cx(styles.title, !hasTitle && styles.notConfigured)}>
{hasTitle ? title : 'Data link title not provided'}
</div>
<HorizontalGroup>
<IconButton name="pen" onClick={onEdit} />
<IconButton name="times" onClick={onRemove} />
</HorizontalGroup>
</HorizontalGroup>
<div className={cx(styles.url, !hasUrl && styles.notConfigured)} title={url}>
{hasUrl ? url : 'Data link url not provided'}
<div className={styles.titleWrapper}>
<div className={cx(styles.url, !hasUrl && styles.notConfigured)}>
{hasTitle ? title : 'Data link title not provided'}
</div>
</VerticalGroup>
<div className={styles.actionButtons}>
<IconButton name="pen" onClick={onEdit} />
<IconButton name="times" onClick={onRemove} />
</div>
</div>
<div className={cx(styles.url, !hasUrl && styles.notConfigured)} title={url}>
{hasUrl ? url : 'Data link url not provided'}
</div>
</div>
);
};
@@ -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;