From 83c15d8bf54d793deac76ede7b89ca9463f3e561 Mon Sep 17 00:00:00 2001
From: daniele-mng <daniele.mangiagli@greenbone.net>
Date: Mon, 11 Nov 2024 16:45:08 +0100
Subject: [PATCH] fix: delete button dialogs

---
 .../components/dialog/confirmationdialog.jsx  |  10 +-
 src/web/components/dialog/twobuttonfooter.jsx |   8 +-
 src/web/entities/footer.jsx                   |   2 +
 src/web/pages/extras/trashcanpage.jsx         |   2 +
 src/web/pages/users/dialog.jsx                | 341 +++++++++---------
 5 files changed, 191 insertions(+), 172 deletions(-)

diff --git a/src/web/components/dialog/confirmationdialog.jsx b/src/web/components/dialog/confirmationdialog.jsx
index 72df7b0424..de6705427b 100644
--- 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,6 +51,7 @@ ConfirmationDialogContent.propTypes = {
   rightButtonTitle: PropTypes.string,
   onResumeClick: PropTypes.func.isRequired,
   loading: PropTypes.bool,
+  rightButtonAction: PropTypes.oneOf([undefined, DELETE_ACTION]),
 };
 
 const ConfirmationDialog = ({
@@ -54,6 +59,7 @@ const ConfirmationDialog = ({
   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
index 1c2228c23a..29669fd15a 100644
--- a/src/web/components/dialog/twobuttonfooter.jsx
+++ b/src/web/components/dialog/twobuttonfooter.jsx
@@ -13,6 +13,8 @@ import Button from 'web/components/form/button';
 
 import useTranslation from 'web/hooks/useTranslation';
 
+export const DELETE_ACTION = 'delete';
+
 const DialogTwoButtonFooter = ({
   leftButtonTitle,
   rightButtonTitle,
@@ -20,15 +22,17 @@ const DialogTwoButtonFooter = ({
   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
index b9dea16f85..5098f25901 100644
--- 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
index 1bdc141409..073a00b520 100644
--- 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" />
diff --git a/src/web/pages/users/dialog.jsx b/src/web/pages/users/dialog.jsx
index e36b33333d..e25c1443d1 100644
--- a/src/web/pages/users/dialog.jsx
+++ b/src/web/pages/users/dialog.jsx
@@ -33,6 +33,7 @@ import Row from 'web/components/layout/row';
 import useTranslation from 'web/hooks/useTranslation';
 import useUserName from 'web/hooks/useUserName';
 import useCapabilities from 'web/hooks/useCapabilities';
+import {DELETE_ACTION} from 'web/components/dialog/twobuttonfooter';
 
 const Dialog = ({
   roleIds: initialRoleIds = [],
@@ -158,197 +159,197 @@ const Dialog = ({
   const hasRadiusEnabled = settings.get('method:radius_connect').enabled;
 
   return (
-    <React.Fragment>
-      <SaveDialog
-        title={title}
-        values={controlledValues}
-        onClose={onClose}
-        onSave={handleSaveClick}
-        defaultValues={data}
-      >
-        {({values: state, onValueChange}) => (
-          <React.Fragment>
-            <FormGroup title={_('Login Name')}>
-              <TextField
-                name="name"
-                value={state.name}
-                onChange={onValueChange}
-              />
-            </FormGroup>
-
-            <FormGroup title={_('Comment')}>
-              <TextField
-                name="comment"
-                value={state.comment}
-                onChange={onValueChange}
-              />
-            </FormGroup>
-
-            {!isEdit && (
-              <FormGroup title={_('Authentication')} flex="column">
-                <Row>
-                  <Radio
-                    title={_('Password')}
-                    name="auth_method"
-                    value={AUTH_METHOD_PASSWORD}
-                    checked={state.auth_method === AUTH_METHOD_PASSWORD}
-                    onChange={onValueChange}
-                  />
-                  <PasswordField
-                    grow="1"
-                    name="password"
-                    autoComplete="new-password"
-                    value={state.password}
-                    onChange={onValueChange}
-                  />
-                </Row>
-                {hasLdapEnabled && (
-                  <Radio
-                    title={_('LDAP Authentication Only')}
-                    name="auth_method"
-                    value={AUTH_METHOD_LDAP}
-                    checked={state.auth_method === AUTH_METHOD_LDAP}
-                    onChange={onValueChange}
-                  />
-                )}
-                {hasRadiusEnabled && (
-                  <Radio
-                    title={_('RADIUS Authentication Only')}
-                    name="auth_method"
-                    value={AUTH_METHOD_RADIUS}
-                    checked={state.auth_method === AUTH_METHOD_RADIUS}
-                    onChange={onValueChange}
-                  />
-                )}
-              </FormGroup>
-            )}
-
-            {isEdit && (
-              <FormGroup title={_('Authentication')}>
+    <SaveDialog
+      title={title}
+      values={controlledValues}
+      onClose={onClose}
+      onSave={handleSaveClick}
+      defaultValues={data}
+    >
+      {({values: state, onValueChange}) => (
+        <>
+          <FormGroup title={_('Login Name')}>
+            <TextField
+              name="name"
+              value={state.name}
+              onChange={onValueChange}
+            />
+          </FormGroup>
+
+          <FormGroup title={_('Comment')}>
+            <TextField
+              name="comment"
+              value={state.comment}
+              onChange={onValueChange}
+            />
+          </FormGroup>
+
+          {!isEdit && (
+            <FormGroup title={_('Authentication')} flex="column">
+              <Row>
                 <Radio
-                  title={_('Password: Use existing Password')}
+                  title={_('Password')}
                   name="auth_method"
                   value={AUTH_METHOD_PASSWORD}
                   checked={state.auth_method === AUTH_METHOD_PASSWORD}
                   onChange={onValueChange}
                 />
-                <Row>
-                  <Radio
-                    title={_('New Password')}
-                    name="auth_method"
-                    value={AUTH_METHOD_NEW_PASSWORD}
-                    checked={state.auth_method === AUTH_METHOD_NEW_PASSWORD}
-                    onChange={onValueChange}
-                  />
-                  <PasswordField
-                    grow="1"
-                    name="password"
-                    autoComplete="new-password"
-                    disabled={state.auth_method !== AUTH_METHOD_NEW_PASSWORD}
-                    value={state.password}
-                    onChange={onValueChange}
-                  />
-                </Row>
-                {hasLdapEnabled && (
-                  <Radio
-                    title={_('LDAP Authentication Only')}
-                    name="auth_method"
-                    value={AUTH_METHOD_LDAP}
-                    checked={state.auth_method === AUTH_METHOD_LDAP}
-                    onChange={onValueChange}
-                  />
-                )}
-                {hasRadiusEnabled && (
-                  <Radio
-                    title={_('RADIUS Authentication Only')}
-                    name="auth_method"
-                    value={AUTH_METHOD_RADIUS}
-                    checked={state.auth_method === AUTH_METHOD_RADIUS}
-                    onChange={onValueChange}
-                  />
-                )}
-              </FormGroup>
-            )}
-            {capabilities.mayAccess('roles') && (
-              <FormGroup title={_('Roles')}>
-                <MultiSelect
-                  name="role_ids"
-                  items={rolesOptions}
-                  value={roleIds}
-                  onChange={handleRoleIdsChange}
+                <PasswordField
+                  grow="1"
+                  name="password"
+                  autoComplete="new-password"
+                  value={state.password}
+                  onChange={onValueChange}
                 />
-              </FormGroup>
-            )}
-
-            {capabilities.mayAccess('groups') && (
-              <FormGroup title={_('Groups')}>
-                <MultiSelect
-                  name="group_ids"
-                  items={groupsOptions}
-                  value={state.group_ids}
+              </Row>
+              {hasLdapEnabled && (
+                <Radio
+                  title={_('LDAP Authentication Only')}
+                  name="auth_method"
+                  value={AUTH_METHOD_LDAP}
+                  checked={state.auth_method === AUTH_METHOD_LDAP}
                   onChange={onValueChange}
                 />
-              </FormGroup>
-            )}
-
-            <FormGroup title={_('Host Access')}>
-              <Row>
+              )}
+              {hasRadiusEnabled && (
                 <Radio
-                  name="hosts_allow"
-                  title={_('Allow all and deny')}
-                  value={ACCESS_ALLOW_ALL}
-                  checked={state.hosts_allow === ACCESS_ALLOW_ALL}
+                  title={_('RADIUS Authentication Only')}
+                  name="auth_method"
+                  value={AUTH_METHOD_RADIUS}
+                  checked={state.auth_method === AUTH_METHOD_RADIUS}
                   onChange={onValueChange}
                 />
+              )}
+            </FormGroup>
+          )}
+
+          {isEdit && (
+            <FormGroup title={_('Authentication')}>
+              <Radio
+                title={_('Password: Use existing Password')}
+                name="auth_method"
+                value={AUTH_METHOD_PASSWORD}
+                checked={state.auth_method === AUTH_METHOD_PASSWORD}
+                onChange={onValueChange}
+              />
+              <Row>
                 <Radio
-                  name="hosts_allow"
-                  title={_('Deny all and allow')}
-                  value={ACCESS_DENY_ALL}
-                  checked={state.hosts_allow === ACCESS_DENY_ALL}
+                  title={_('New Password')}
+                  name="auth_method"
+                  value={AUTH_METHOD_NEW_PASSWORD}
+                  checked={state.auth_method === AUTH_METHOD_NEW_PASSWORD}
+                  onChange={onValueChange}
+                />
+                <PasswordField
+                  grow="1"
+                  name="password"
+                  autoComplete="new-password"
+                  disabled={state.auth_method !== AUTH_METHOD_NEW_PASSWORD}
+                  value={state.password}
                   onChange={onValueChange}
                 />
               </Row>
-              <TextField
-                grow="1"
-                name="access_hosts"
-                value={state.access_hosts}
+              {hasLdapEnabled && (
+                <Radio
+                  title={_('LDAP Authentication Only')}
+                  name="auth_method"
+                  value={AUTH_METHOD_LDAP}
+                  checked={state.auth_method === AUTH_METHOD_LDAP}
+                  onChange={onValueChange}
+                />
+              )}
+              {hasRadiusEnabled && (
+                <Radio
+                  title={_('RADIUS Authentication Only')}
+                  name="auth_method"
+                  value={AUTH_METHOD_RADIUS}
+                  checked={state.auth_method === AUTH_METHOD_RADIUS}
+                  onChange={onValueChange}
+                />
+              )}
+            </FormGroup>
+          )}
+          {capabilities.mayAccess('roles') && (
+            <FormGroup title={_('Roles')}>
+              <MultiSelect
+                name="role_ids"
+                items={rolesOptions}
+                value={roleIds}
+                onChange={handleRoleIdsChange}
+              />
+            </FormGroup>
+          )}
+
+          {capabilities.mayAccess('groups') && (
+            <FormGroup title={_('Groups')}>
+              <MultiSelect
+                name="group_ids"
+                items={groupsOptions}
+                value={state.group_ids}
                 onChange={onValueChange}
               />
             </FormGroup>
-            {confirmationDialogVisibleSuperAdmin && (
-              <ConfirmationDialog
-                content={_(
-                  'Please note: You are about to change your own personal user data ' +
-                    'as Super Admin! It is not possible to change the login name. ' +
-                    'If you have modified the login name, neither the login name nor ' +
-                    'any other changes made will be saved. ' +
-                    'If you have made any modifications other than the login name, ' +
-                    'the data will be saved when clicking OK, and you will be logged ' +
-                    'out immediately.',
-                )}
-                title={_('Save Super Admin User')}
-                width="400px"
-                onClose={closeConfirmationDialogSuperAdmin}
-                onResumeClick={handleResumeClickSuperAdmin}
+          )}
+
+          <FormGroup title={_('Host Access')}>
+            <Row>
+              <Radio
+                name="hosts_allow"
+                title={_('Allow all and deny')}
+                value={ACCESS_ALLOW_ALL}
+                checked={state.hosts_allow === ACCESS_ALLOW_ALL}
+                onChange={onValueChange}
               />
-            )}
-            {confirmationDialogVisible && (
-              <ConfirmationDialog
-                content={_(
-                  'Please note: You are about to create a user ' +
-                    'without a role. This user will not have any ' +
-                    'permissions and as a result will not be able to login.',
-                )}
-                title={_('User without a role')}
-                width="400px"
-                onClose={closeConfirmationDialog}
-                onResumeClick={handleResumeClick}
+              <Radio
+                name="hosts_allow"
+                title={_('Deny all and allow')}
+                value={ACCESS_DENY_ALL}
+                checked={state.hosts_allow === ACCESS_DENY_ALL}
+                onChange={onValueChange}
               />
-            )}
-          </React.Fragment>
-        )}
-      </SaveDialog>
-    </React.Fragment>
+            </Row>
+            <TextField
+              grow="1"
+              name="access_hosts"
+              value={state.access_hosts}
+              onChange={onValueChange}
+            />
+          </FormGroup>
+          {confirmationDialogVisibleSuperAdmin && (
+            <ConfirmationDialog
+              content={_(
+                'Please note: You are about to change your own personal user data ' +
+                  'as Super Admin! It is not possible to change the login name. ' +
+                  'If you have modified the login name, neither the login name nor ' +
+                  'any other changes made will be saved. ' +
+                  'If you have made any modifications other than the login name, ' +
+                  'the data will be saved when clicking OK, and you will be logged ' +
+                  'out immediately.',
+              )}
+              title={_('Save Super Admin User')}
+              width="400px"
+              onClose={closeConfirmationDialogSuperAdmin}
+              onResumeClick={handleResumeClickSuperAdmin}
+              rightButtonAction={DELETE_ACTION}
+            />
+          )}
+          {confirmationDialogVisible && (
+            <ConfirmationDialog
+              content={_(
+                'Please note: You are about to create a user ' +
+                  'without a role. This user will not have any ' +
+                  'permissions and as a result will not be able to login.',
+              )}
+              title={_('User without a role')}
+              width="400px"
+              onClose={closeConfirmationDialog}
+              onResumeClick={handleResumeClick}
+              rightButtonAction={DELETE_ACTION}
+            />
+          )}
+        </>
+      )}
+    </SaveDialog>
   );
 };