1import React from 'react';
2import { css } from '@emotion/css';
3import { Checkbox, Button, Tag, ModalsController } from '@grafana/ui';
4import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';
5import { RevertDashboardModal } from './RevertDashboardModal';
6
7type VersionsTableProps = {
8  versions: DecoratedRevisionModel[];
9  onCheck: (ev: React.FormEvent<HTMLInputElement>, versionId: number) => void;
10};
11export const VersionHistoryTable: React.FC<VersionsTableProps> = ({ versions, onCheck }) => (
12  <table className="filter-table gf-form-group">
13    <thead>
14      <tr>
15        <th className="width-4"></th>
16        <th className="width-4">Version</th>
17        <th className="width-14">Date</th>
18        <th className="width-10">Updated by</th>
19        <th>Notes</th>
20        <th></th>
21      </tr>
22    </thead>
23    <tbody>
24      {versions.map((version, idx) => (
25        <tr key={version.id}>
26          <td>
27            <Checkbox
28              aria-label={`Toggle selection of version ${version.version}`}
29              className={css`
30                display: inline;
31              `}
32              checked={version.checked}
33              onChange={(ev) => onCheck(ev, version.id)}
34            />
35          </td>
36          <td>{version.version}</td>
37          <td>{version.createdDateString}</td>
38          <td>{version.createdBy}</td>
39          <td>{version.message}</td>
40          <td className="text-right">
41            {idx === 0 ? (
42              <Tag name="Latest" colorIndex={17} />
43            ) : (
44              <ModalsController>
45                {({ showModal, hideModal }) => (
46                  <Button
47                    variant="secondary"
48                    size="sm"
49                    icon="history"
50                    onClick={() => {
51                      showModal(RevertDashboardModal, {
52                        version: version.version,
53                        hideModal,
54                      });
55                    }}
56                  >
57                    Restore
58                  </Button>
59                )}
60              </ModalsController>
61            )}
62          </td>
63        </tr>
64      ))}
65    </tbody>
66  </table>
67);
68