From c7fbc5c36321f72334f9a8f00083b1ba15b15632 Mon Sep 17 00:00:00 2001
From: daniele-mng <daniele.mangiagli@greenbone.net>
Date: Mon, 25 Nov 2024 18:12:08 +0100
Subject: [PATCH] fix: start page add more tabs dialog

---
 package-lock.json                           | 12 +++++
 src/web/pages/start/confirmremovedialog.jsx |  5 +-
 src/web/pages/start/newdashboarddialog.jsx  | 60 +++++++++++----------
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 63abe9f3c6..6947511e47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3977,6 +3977,18 @@
         }
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.6.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
+      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.15.0.tgz",
diff --git a/src/web/pages/start/confirmremovedialog.jsx b/src/web/pages/start/confirmremovedialog.jsx
index 5d185d5331..3aa9e7aed3 100644
--- a/src/web/pages/start/confirmremovedialog.jsx
+++ b/src/web/pages/start/confirmremovedialog.jsx
@@ -11,7 +11,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';
 
@@ -43,6 +45,7 @@ const ConfirmRemoveDialog = ({
           rightButtonTitle={_('Remove')}
           onLeftButtonClick={onDeny}
           onRightButtonClick={() => onConfirm(dashboardId)}
+          rightButtonAction={DELETE_ACTION}
         />
       </DialogContent>
     </Dialog>
diff --git a/src/web/pages/start/newdashboarddialog.jsx b/src/web/pages/start/newdashboarddialog.jsx
index 294fc211d2..83ac8fc035 100644
--- a/src/web/pages/start/newdashboarddialog.jsx
+++ b/src/web/pages/start/newdashboarddialog.jsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import React from 'react';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -71,12 +69,9 @@ const EMPTY_DISPLAYS = [];
 
 const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
   const [_] = useTranslation();
-  const defaultDisplayChoices = [
-    {
-      label: _('Default'),
-      key: 'default',
-      value: DEFAULT_DISPLAYS,
-    },
+
+  const uniqueDisplayChoices = [
+    {label: _('Default'), key: 'default', value: DEFAULT_DISPLAYS},
     {
       label: _('Scan Displays'),
       key: 'scan-displays',
@@ -92,26 +87,34 @@ const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
       key: 'secinfo-displays',
       value: SECINFO_DEFAULT_DISPLAYS,
     },
-    {
-      label: _('Empty'),
-      key: 'empty',
-      value: EMPTY_DISPLAYS,
-    },
-    ...additionalDisplayChoices,
-  ];
+    {label: _('Empty'), key: 'empty', value: EMPTY_DISPLAYS},
+    ...additionalDisplayChoices.map(choice => ({
+      label: choice.label,
+      key: `${choice.label}-${JSON.stringify(choice.value)}`,
+      value: choice.value,
+    })),
+  ].filter(
+    (choice, index, self) =>
+      index === self.findIndex(item => item.key === choice.key),
+  );
+
   return (
     <SaveDialog
       buttonTitle={_('Add')}
       title={_('Add new Dashboard')}
-      defaultValues={{
-        title: _('Unnamed'),
-        defaultDisplays: DEFAULT_DISPLAYS,
-      }}
+      defaultValues={{title: _('Unnamed'), defaultDisplays: 'default'}}
       onClose={onClose}
-      onSave={onSave}
+      onSave={values =>
+        onSave({
+          ...values,
+          defaultDisplays: uniqueDisplayChoices.find(
+            choice => choice.key === values.defaultDisplays,
+          )?.value,
+        })
+      }
     >
       {({values, onValueChange}) => (
-        <React.Fragment>
+        <>
           <FormGroup title={_('Dashboard Title')}>
             <TextField
               name="title"
@@ -123,12 +126,15 @@ const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
           <FormGroup title={_('Initial Displays')}>
             <Select
               name="defaultDisplays"
-              items={defaultDisplayChoices}
+              items={uniqueDisplayChoices.map(({label, key}) => ({
+                label,
+                value: key,
+              }))}
               value={values.defaultDisplays}
               onChange={onValueChange}
             />
           </FormGroup>
-        </React.Fragment>
+        </>
       )}
     </SaveDialog>
   );
@@ -137,14 +143,12 @@ const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
 NewDashboardDialog.propTypes = {
   additionalDisplayChoices: PropTypes.arrayOf(
     PropTypes.shape({
-      label: PropTypes.toString,
-      value: PropTypes.array,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.array.isRequired,
     }),
-  ),
+  ).isRequired,
   onClose: PropTypes.func.isRequired,
   onSave: PropTypes.func.isRequired,
 };
 
 export default NewDashboardDialog;
-
-// vim: set ts=2 sw=2 tw=80: