81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { useState } from 'react';
|
|
|
|
import { reportInteraction } from '@grafana/runtime';
|
|
import { ConfirmModal, Space, Text } from '@grafana/ui';
|
|
|
|
import { FolderPicker } from '../../../core/components/Select/FolderPicker';
|
|
import { Trans, t } from '../../../core/internationalization';
|
|
|
|
export interface RestoreModalProps {
|
|
isOpen: boolean;
|
|
onConfirm: (restoreTarget: string) => Promise<void>;
|
|
onDismiss: () => void;
|
|
selectedDashboards: string[];
|
|
dashboardOrigin: string[];
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export const RestoreModal = ({
|
|
onConfirm,
|
|
onDismiss,
|
|
selectedDashboards,
|
|
dashboardOrigin,
|
|
isLoading,
|
|
...props
|
|
}: RestoreModalProps) => {
|
|
const [restoreTarget, setRestoreTarget] = useState<string | undefined>(() => {
|
|
// Preselect the restore target and therefore enable the confirm button if all selected dashboards come from the same folder
|
|
return dashboardOrigin.length > 0 &&
|
|
dashboardOrigin.every((originalLocation) => originalLocation === dashboardOrigin[0])
|
|
? dashboardOrigin[0]
|
|
: undefined;
|
|
});
|
|
const numberOfDashboards = selectedDashboards.length;
|
|
|
|
const onRestore = async () => {
|
|
reportInteraction('grafana_restore_confirm_clicked', {
|
|
item_counts: {
|
|
dashboard: numberOfDashboards,
|
|
},
|
|
});
|
|
if (restoreTarget !== undefined) {
|
|
await onConfirm(restoreTarget);
|
|
onDismiss();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ConfirmModal
|
|
body={
|
|
<>
|
|
<Text element="p">
|
|
<Trans i18nKey="recently-deleted.restore-modal.text" count={numberOfDashboards}>
|
|
This action will restore {{ numberOfDashboards }} dashboards.
|
|
</Trans>
|
|
</Text>
|
|
<Space v={3} />
|
|
<Text element="p">
|
|
<Trans i18nKey="recently-deleted.restore-modal.folder-picker-text" count={numberOfDashboards}>
|
|
Please choose a folder where your dashboards will be restored.
|
|
</Trans>
|
|
</Text>
|
|
<Space v={1} />
|
|
<FolderPicker onChange={setRestoreTarget} value={restoreTarget} />
|
|
</>
|
|
// TODO: replace by list of dashboards (list up to 5 dashboards) or number (from 6 dashboards)?
|
|
}
|
|
confirmText={
|
|
isLoading
|
|
? t('recently-deleted.restore-modal.restore-loading', 'Restoring...')
|
|
: t('recently-deleted.restore-modal.restore-button', 'Restore')
|
|
}
|
|
confirmButtonVariant="primary"
|
|
onDismiss={onDismiss}
|
|
onConfirm={onRestore}
|
|
title={t('recently-deleted.restore-modal.title', 'Restore Dashboards')}
|
|
disabled={restoreTarget === undefined}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|