opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-26 23:04:55 +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; index: number;
data: DataFrame[]; data: DataFrame[];
suggestions: VariableSuggestion[]; suggestions: VariableSuggestion[];
onChange: (index: number, ink: DataLink) => void; onSave: (index: number, ink: DataLink) => void;
onClose: () => void; onCancel: (index: number) => void;
} }
export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = ({ export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = ({
link, link,
index, index,
suggestions, suggestions,
onChange, onSave,
onClose, onCancel,
}) => { }) => {
const [dirtyLink, setDirtyLink] = useState(link); const [dirtyLink, setDirtyLink] = useState(link);
return ( return (
@ -35,13 +35,12 @@ export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = (
<HorizontalGroup> <HorizontalGroup>
<Button <Button
onClick={() => { onClick={() => {
onChange(index, dirtyLink); onSave(index, dirtyLink);
onClose();
}} }}
> >
Save Save
</Button> </Button>
<Button variant="secondary" onClick={() => onClose()}> <Button variant="secondary" onClick={() => onCancel(index)}>
Cancel Cancel
</Button> </Button>
</HorizontalGroup> </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 }) => { export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ links, onChange, suggestions, data }) => {
const theme = useTheme(); const theme = useTheme();
const [editIndex, setEditIndex] = useState<number | null>(null); const [editIndex, setEditIndex] = useState<number | null>(null);
const [isNew, setIsNew] = useState(false);
const styles = getDataLinksInlineEditorStyles(theme); const styles = getDataLinksInlineEditorStyles(theme);
const linksSafe: DataLink[] = links ?? []; const linksSafe: DataLink[] = links ?? [];
const isEditing = editIndex !== null && linksSafe[editIndex] !== undefined; const isEditing = editIndex !== null;
const onDataLinkChange = (index: number, link: DataLink) => { 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); const update = cloneDeep(linksSafe);
update[index] = link; update[index] = link;
onChange(update); onChange(update);
setEditIndex(null);
}; };
const onDataLinkAdd = () => { const onDataLinkAdd = () => {
let update = cloneDeep(linksSafe); let update = cloneDeep(linksSafe);
setEditIndex(update.length);
setIsNew(true);
};
update.push({ const onDataLinkCancel = (index: number) => {
title: '', if (isNew) {
url: '', setIsNew(false);
}); }
setEditIndex(null);
setEditIndex(update.length - 1);
onChange(update);
}; };
const onDataLinkRemove = (index: number) => { const onDataLinkRemove = (index: number) => {
@ -72,15 +86,15 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({ li
title="Edit link" title="Edit link"
isOpen={true} isOpen={true}
onDismiss={() => { onDismiss={() => {
setEditIndex(null); onDataLinkCancel(editIndex);
}} }}
> >
<DataLinkEditorModalContent <DataLinkEditorModalContent
index={editIndex} index={editIndex}
link={linksSafe[editIndex]} link={isNew ? { title: '', url: '' } : linksSafe[editIndex]}
data={data} data={data}
onChange={onDataLinkChange} onSave={onDataLinkChange}
onClose={() => setEditIndex(null)} onCancel={onDataLinkCancel}
suggestions={suggestions} suggestions={suggestions}
/> />
</Modal> </Modal>