opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-08-01 12:52:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

DataLinks: Do not add empty links (#24088)

Browse Source 
* Do not add empty links

* Review
This commit is contained in:
Dominik Prokop
2020-05-04 17:36:57 +02:00
committed by GitHub
parent a5b377e701
commit 89db44e6f3
2 changed files with 32 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,16 +9,16 @@ interface DataLinkEditorModalContentProps {
index: number;
data: DataFrame[];
suggestions: VariableSuggestion[];
onChange: (index: number, ink: DataLink) => void;
onClose: () => void;
onSave: (index: number, ink: DataLink) => void;
onCancel: (index: number) => void;
}
export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = ({
link,
index,
suggestions,
onChange,
onClose,
onSave,
onCancel,
}) => {
const [dirtyLink, setDirtyLink] = useState(link);
return (
@ -35,13 +35,12 @@ export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = (
<HorizontalGroup>
<Button
onClick={() => {
onChange(index, dirtyLink);
onClose();
onSave(index, dirtyLink);
}}
>
Save
</Button>
<Button variant="secondary" onClick={() => onClose()}>
<Button variant="secondary" onClick={() => onCancel(index)}>
Cancel
</Button>
</HorizontalGroup>

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

@ -18,26 +18,40 @@ interface DataLinksInlineEditorProps {
export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ links, onChange, suggestions, data }) => {
const theme = useTheme();
const [editIndex, setEditIndex] = useState<number | null>(null);
const [isNew, setIsNew] = useState(false);
const styles = getDataLinksInlineEditorStyles(theme);
const linksSafe: DataLink[] = links ?? [];
const isEditing = editIndex !== null && linksSafe[editIndex] !== undefined;
const isEditing = editIndex !== null;
const onDataLinkChange = (index: number, link: DataLink) => {
if (isNew) {
if (link.title.trim() === '' && link.url.trim() === '') {
setIsNew(false);
setEditIndex(null);
return;
} else {
setEditIndex(null);
setIsNew(false);
}
}
const update = cloneDeep(linksSafe);
update[index] = link;
onChange(update);
setEditIndex(null);
};
const onDataLinkAdd = () => {
let update = cloneDeep(linksSafe);
setEditIndex(update.length);
setIsNew(true);
};
update.push({
title: '',
url: '',
});
setEditIndex(update.length - 1);
onChange(update);
const onDataLinkCancel = (index: number) => {
if (isNew) {
setIsNew(false);
}
setEditIndex(null);
};
const onDataLinkRemove = (index: number) => {
@ -72,15 +86,15 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
title="Edit link"
isOpen={true}
onDismiss={() => {
setEditIndex(null);
onDataLinkCancel(editIndex);
}}
>
<DataLinkEditorModalContent
index={editIndex}
link={linksSafe[editIndex]}
link={isNew ? { title: '', url: '' } : linksSafe[editIndex]}
data={data}
onChange={onDataLinkChange}
onClose={() => setEditIndex(null)}
onSave={onDataLinkChange}
onCancel={onDataLinkCancel}
suggestions={suggestions}
/>
</Modal>