IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Fix data links edit icons being off screen

* Remove unused imports

* Review
This commit is contained in:
Dominik Prokop 2022-12-08 09:32:22 -08:00 committed by GitHub
parent dedf292228
commit 6f930f4836
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
View File

@ -7,7 +7,6 @@ import { stylesFactory, useTheme2 } from '../../../themes';
import { isCompactUrl } from '../../../utils/dataLinks'; import { isCompactUrl } from '../../../utils/dataLinks';
import { FieldValidationMessage } from '../../Forms/FieldValidationMessage'; import { FieldValidationMessage } from '../../Forms/FieldValidationMessage';
import { IconButton } from '../../IconButton/IconButton'; import { IconButton } from '../../IconButton/IconButton';
import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout';
export interface DataLinksListItemProps { export interface DataLinksListItemProps {
index: number; index: number;
@ -31,26 +30,24 @@ export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, on
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<VerticalGroup spacing="xs"> <div className={styles.titleWrapper}>
<HorizontalGroup justify="space-between" align="flex-start" width="100%"> <div className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}>
<div className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}> {hasTitle ? title : 'Data link title not provided'}
{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, isCompactExploreUrl && styles.errored)}
title={url}
>
{hasUrl ? url : 'Data link url not provided'}
</div> </div>
{isCompactExploreUrl && ( <div className={styles.actionButtons}>
<FieldValidationMessage>Explore data link may not work in the future. Please edit.</FieldValidationMessage> <IconButton name="pen" onClick={onEdit} />
)} <IconButton name="times" onClick={onRemove} />
</VerticalGroup> </div>
</div>
<div
className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}
title={url}
>
{hasUrl ? url : 'Data link url not provided'}
</div>
{isCompactExploreUrl && (
<FieldValidationMessage>Explore data link may not work in the future. Please edit.</FieldValidationMessage>
)}
</div> </div>
); );
}; };
@ -63,6 +60,19 @@ const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme2) => {
&:last-child { &:last-child {
margin-bottom: 0; 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;
`, `,
errored: css` errored: css`
color: ${theme.colors.error.text}; color: ${theme.colors.error.text};