diff --git a/frontend/src/components/common/ConfirmDialog.tsx b/frontend/src/components/common/ConfirmDialog.tsx index a503fd43d9..9d2c0b0511 100644 --- a/frontend/src/components/common/ConfirmDialog.tsx +++ b/frontend/src/components/common/ConfirmDialog.tsx @@ -3,13 +3,13 @@ import MuiDialog, { DialogProps as MuiDialogProps } from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; -import React from 'react'; +import React, { ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { DialogTitle } from './Dialog'; export interface ConfirmDialogProps extends MuiDialogProps { title: string; - description: string; + description: string | ReactNode; onConfirm: () => void; handleClose: () => void; } diff --git a/frontend/src/components/common/Resource/DeleteMultipleButton.tsx b/frontend/src/components/common/Resource/DeleteMultipleButton.tsx new file mode 100644 index 0000000000..c7b8119263 --- /dev/null +++ b/frontend/src/components/common/Resource/DeleteMultipleButton.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useDispatch } from 'react-redux'; +import { KubeObject } from '../../../lib/k8s/KubeObject'; +import { CallbackActionOptions, clusterAction } from '../../../redux/clusterActionSlice'; +import { + EventStatus, + HeadlampEventType, + useEventCallback, +} from '../../../redux/headlampEventSlice'; +import { AppDispatch } from '../../../redux/stores/store'; +import ActionButton, { ButtonStyle } from '../ActionButton'; +import { ConfirmDialog } from '../Dialog'; + +interface DeleteMultipleButtonProps { + items?: KubeObject[]; + options?: CallbackActionOptions; + buttonStyle?: ButtonStyle; + afterConfirm?: () => void; +} + +interface DeleteMultipleButtonDescriptionProps { + items?: KubeObject[]; +} + +function DeleteMultipleButtonDescription(props: DeleteMultipleButtonDescriptionProps) { + const { t } = useTranslation(['translation']); + return ( +
+ {t('Are you sure you want to delete following items?')} +