1import { DataFrame, DataLink, VariableSuggestion } from '@grafana/data';
2import React, { FC, useState } from 'react';
3import { DataLinkEditor } from '../DataLinkEditor';
4import { Button } from '../../Button';
5import { Modal } from '../../Modal/Modal';
6
7interface DataLinkEditorModalContentProps {
8  link: DataLink;
9  index: number;
10  data: DataFrame[];
11  getSuggestions: () => VariableSuggestion[];
12  onSave: (index: number, ink: DataLink) => void;
13  onCancel: (index: number) => void;
14}
15
16export const DataLinkEditorModalContent: FC<DataLinkEditorModalContentProps> = ({
17  link,
18  index,
19  getSuggestions,
20  onSave,
21  onCancel,
22}) => {
23  const [dirtyLink, setDirtyLink] = useState(link);
24  return (
25    <>
26      <DataLinkEditor
27        value={dirtyLink}
28        index={index}
29        isLast={false}
30        suggestions={getSuggestions()}
31        onChange={(index, link) => {
32          setDirtyLink(link);
33        }}
34      />
35      <Modal.ButtonRow>
36        <Button variant="secondary" onClick={() => onCancel(index)} fill="outline">
37          Cancel
38        </Button>
39        <Button
40          onClick={() => {
41            onSave(index, dirtyLink);
42          }}
43        >
44          Save
45        </Button>
46      </Modal.ButtonRow>
47    </>
48  );
49};
50