fix: delete button dialogs

greenbone · Nov 28, 2024 · 83c15d8 · 83c15d8
1 parent 1699ae8
commit 83c15d8
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 172 deletions.
diff --git a/src/web/components/dialog/confirmationdialog.jsx b/src/web/components/dialog/confirmationdialog.jsx
@@ -9,7 +9,9 @@ import PropTypes from 'web/utils/proptypes';
 
 import Dialog from 'web/components/dialog/dialog';
 import DialogContent from 'web/components/dialog/content';
-import DialogTwoButtonFooter from 'web/components/dialog/twobuttonfooter';
+import DialogTwoButtonFooter, {
+  DELETE_ACTION,
+} from 'web/components/dialog/twobuttonfooter';
 
 import useTranslation from 'web/hooks/useTranslation';
 
@@ -21,6 +23,7 @@ const ConfirmationDialogContent = ({
   rightButtonTitle,
   onResumeClick,
   loading,
+  rightButtonAction,
 }) => {
   const handleResume = useCallback(() => {
     if (onResumeClick) {
@@ -36,6 +39,7 @@ const ConfirmationDialogContent = ({
         onLeftButtonClick={close}
         onRightButtonClick={handleResume}
         loading={loading}
+        rightButtonAction={rightButtonAction}
       />
     </DialogContent>
   );
@@ -47,13 +51,15 @@ ConfirmationDialogContent.propTypes = {
   rightButtonTitle: PropTypes.string,
   onResumeClick: PropTypes.func.isRequired,
   loading: PropTypes.bool,
+  rightButtonAction: PropTypes.oneOf([undefined, DELETE_ACTION]),
 };
 
 const ConfirmationDialog = ({
   width = DEFAULT_DIALOG_WIDTH,
   content,
   title,
   rightButtonTitle,
+  rightButtonAction,
   onClose,
   onResumeClick,
   loading,
@@ -70,6 +76,7 @@ const ConfirmationDialog = ({
           rightButtonTitle={rightButtonTitle}
           onResumeClick={onResumeClick}
           loading={loading}
+          rightButtonAction={rightButtonAction}
         />
       )}
     </Dialog>
@@ -84,6 +91,7 @@ ConfirmationDialog.propTypes = {
   onClose: PropTypes.func.isRequired,
   onResumeClick: PropTypes.func.isRequired,
   loading: PropTypes.bool,
+  rightButtonAction: PropTypes.oneOf([undefined, DELETE_ACTION]),
 };
 
 export default ConfirmationDialog;
diff --git a/src/web/components/dialog/twobuttonfooter.jsx b/src/web/components/dialog/twobuttonfooter.jsx
@@ -13,22 +13,26 @@ import Button from 'web/components/form/button';
 
 import useTranslation from 'web/hooks/useTranslation';
 
+export const DELETE_ACTION = 'delete';
+
 const DialogTwoButtonFooter = ({
   leftButtonTitle,
   rightButtonTitle,
   onLeftButtonClick,
   onRightButtonClick,
   loading = false,
   isLoading = loading,
+  rightButtonAction,
 }) => {
   const [_] = useTranslation();
   leftButtonTitle = leftButtonTitle || _('Cancel');
+  const isRightButtonAction = DELETE_ACTION === rightButtonAction;
   return (
     <DialogFooterLayout align={['space-between', 'center']} shrink="0">
       <Button
         data-testid="dialog-close-button"
         disabled={isLoading}
-        variant="outline"
+        variant={isRightButtonAction ? 'default' : 'outline'}
         onClick={onLeftButtonClick}
       >
         {leftButtonTitle}
@@ -37,6 +41,7 @@ const DialogTwoButtonFooter = ({
         data-testid="dialog-save-button"
         onClick={onRightButtonClick}
         isLoading={isLoading}
+        variant={isRightButtonAction ? 'danger' : 'filled'}
       >
         {rightButtonTitle}
       </Button>
@@ -51,6 +56,7 @@ DialogTwoButtonFooter.propTypes = {
   rightButtonTitle: PropTypes.string.isRequired,
   onLeftButtonClick: PropTypes.func,
   onRightButtonClick: PropTypes.func,
+  rightButtonAction: PropTypes.oneOf([undefined, DELETE_ACTION]),
 };
 
 export default DialogTwoButtonFooter;

diff --git a/src/web/entities/footer.jsx b/src/web/entities/footer.jsx
@@ -24,6 +24,7 @@ import TableFooter from 'web/components/table/footer';
 import TableRow from 'web/components/table/row';
 
 import useTranslation from 'web/hooks/useTranslation';
+import {DELETE_ACTION} from 'web/components/dialog/twobuttonfooter';
 
 const DIALOG_TYPES = {
   TRASH: 'trash',
@@ -162,6 +163,7 @@ export const EntitiesFooter = ({
           content={configDialog.dialogText}
           title={configDialog.dialogTitle}
           rightButtonTitle={configDialog.dialogButtonTitle}
+          rightButtonAction={DELETE_ACTION}
           width="500px"
         />
       )}

diff --git a/src/web/pages/extras/trashcanpage.jsx b/src/web/pages/extras/trashcanpage.jsx
@@ -62,6 +62,7 @@ import useUserSessionTimeout from 'web/hooks/useUserSessionTimeout';
 import useDialogNotification from 'web/components/notification/useDialogNotification';
 import DialogNotification from 'web/components/notification/dialognotification';
 import ConfirmationDialog from 'web/components/dialog/confirmationdialog';
+import {DELETE_ACTION} from 'web/components/dialog/twobuttonfooter';
 
 const Col = styled.col`
   width: 50%;
@@ -441,6 +442,7 @@ const TrashCan = () => {
             rightButtonTitle={_('Confirm')}
             loading={isEmptyingTrash || isLoading}
             width="500px"
+            rightButtonAction={DELETE_ACTION}
           />
         )}
         <LinkTarget id="Contents" />