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

Datalinks: UX update (#91657)

Browse Source
This commit is contained in:
Adela Almasan 2024-08-08 08:17:09 -06:00 committed by GitHub
parent 925fd26d14
commit 9001b2e0ee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,7 +94,7 @@ export const DataLinksInlineEditor = ({
if (showOneClick) {
return (
<div className={styles.oneClickOverlay} key={key}>
<span className={styles.oneClickSpan}>One-click</span>
<span className={styles.oneClickSpan}>One-click link</span>
{linkJSX}
</div>
);
@ -112,16 +112,18 @@ export const DataLinksInlineEditor = ({
const key = `${link.title}/${idx}`;
const linkJSX = (
<DataLinksListItem
key={key}
index={idx}
link={link}
onChange={onDataLinkChange}
onEdit={() => setEditIndex(idx)}
onRemove={() => onDataLinkRemove(idx)}
data={data}
itemKey={key}
/>
<div className={styles.itemWrapper}>
<DataLinksListItem
key={key}
index={idx}
link={link}
onChange={onDataLinkChange}
onEdit={() => setEditIndex(idx)}
onRemove={() => onDataLinkRemove(idx)}
data={data}
itemKey={key}
/>
</div>
);
if (idx === 0) {
@ -156,7 +158,7 @@ export const DataLinksInlineEditor = ({
</Modal>
)}
<Button size="sm" icon="plus" onClick={onDataLinkAdd} variant="secondary">
<Button size="sm" icon="plus" onClick={onDataLinkAdd} variant="secondary" className={styles.button}>
Add link
</Button>
</>
@ -168,14 +170,13 @@ const getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({
marginBottom: theme.spacing(2),
display: 'flex',
flexDirection: 'column',
gap: 16,
}),
oneClickOverlay: css({
height: 'auto',
minHeight: 69,
border: `1px dashed ${theme.colors.border.medium}`,
border: `2px dashed ${theme.colors.text.link}`,
fontSize: 10,
color: theme.colors.text.link,
color: theme.colors.text.primary,
marginBottom: theme.spacing(1),
}),
oneClickSpan: css({
padding: 10,
@ -183,4 +184,10 @@ const getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({
marginBottom: -10,
display: 'inline-block',
}),
itemWrapper: css({
padding: '4px 8px 8px 8px',
}),
button: css({
marginLeft: theme.spacing(1),
}),
});