Change: Adjust dashboard dialogs for new UI

greenbone · Jun 6, 2024 · 68e39d9 · 68e39d9
1 parent beaf28a
commit 68e39d9
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 47 deletions.
diff --git a/src/web/pages/start/confirmremovedialog.jsx b/src/web/pages/start/confirmremovedialog.jsx
@@ -19,15 +19,14 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import Dialog from 'web/components/dialog/dialog';
 import DialogContent from 'web/components/dialog/content';
-import DialogTitle from 'web/components/dialog/title';
 import DialogTwoButtonFooter from 'web/components/dialog/twobuttonfooter';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const Content = styled.div`
   padding: 5px 15px;
 `;
@@ -37,15 +36,14 @@ const ConfirmRemoveDialog = ({
   dashboardId,
   onConfirm,
   onDeny,
-}) => (
-  <Dialog width="450px" minHeight={100} minWidth={200} onClose={onDeny}>
-    {({moveProps}) => (
+}) => {
+  const [_] = useTranslation();
+  return (
+    <Dialog
+      onClose={onDeny}
+      title={_('Remove Dashboard {{name}}', {name: dashboardTitle})}
+    >
       <DialogContent>
-        <DialogTitle
-          title={_('Remove Dashboard {{name}}', {name: dashboardTitle})}
-          onCloseClick={onDeny}
-          {...moveProps}
-        />
         <Content>
           {_(
             'Do you really want to remove the Dashboard {{name}} and its ' +
@@ -59,9 +57,9 @@ const ConfirmRemoveDialog = ({
           onRightButtonClick={() => onConfirm(dashboardId)}
         />
       </DialogContent>
-    )}
-  </Dialog>
-);
+    </Dialog>
+  );
+};
 
 ConfirmRemoveDialog.propTypes = {
   dashboardId: PropTypes.string.isRequired,

diff --git a/src/web/pages/start/editdashboarddialog.jsx b/src/web/pages/start/editdashboarddialog.jsx
@@ -17,50 +17,48 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 import {MAX_TITLE_LENGTH} from './newdashboarddialog';
 
 const EditDashboardDialog = ({
   dashboardId,
   dashboardTitle,
   onClose,
   onSave,
-}) => (
-  <SaveDialog
-    title={_('Edit Dashboard')}
-    width="550px"
-    minHeight={165}
-    minWidth={340}
-    defaultValues={{
-      dashboardId,
-      dashboardTitle,
-    }}
-    onClose={onClose}
-    onSave={onSave}
-  >
-    {({values, onValueChange}) => (
-      <React.Fragment>
-        <FormGroup title={_('Dashboard Title')} titleSize={4}>
+}) => {
+  const [_] = useTranslation();
+  return (
+    <SaveDialog
+      title={_('Edit Dashboard')}
+      defaultValues={{
+        dashboardId,
+        dashboardTitle,
+      }}
+      onClose={onClose}
+      onSave={onSave}
+    >
+      {({values, onValueChange}) => (
+        <FormGroup title={_('Dashboard Title')}>
           <TextField
-            grow
+            grow="1"
             name="dashboardTitle"
             maxLength={MAX_TITLE_LENGTH}
             value={values.dashboardTitle}
             onChange={onValueChange}
           />
         </FormGroup>
-      </React.Fragment>
-    )}
-  </SaveDialog>
-);
+      )}
+    </SaveDialog>
+  );
+};
 
 EditDashboardDialog.propTypes = {
   dashboardId: PropTypes.id.isRequired,
@@ -70,5 +68,3 @@ EditDashboardDialog.propTypes = {
 };
 
 export default EditDashboardDialog;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/start/newdashboarddialog.jsx b/src/web/pages/start/newdashboarddialog.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import SaveDialog from 'web/components/dialog/savedialog';
@@ -45,6 +43,8 @@ import {TasksSeverityDisplay} from 'web/pages/tasks/dashboard/severityclassdispl
 import {TasksStatusDisplay} from 'web/pages/tasks/dashboard/statusdisplay';
 /* eslint-enable max-len */
 
+import useTranslation from 'web/hooks/useTranslation';
+
 export const MAX_TITLE_LENGTH = 50;
 
 export const DEFAULT_DISPLAYS = [
@@ -82,6 +82,7 @@ const SECINFO_DEFAULT_DISPLAYS = [
 const EMPTY_DISPLAYS = [];
 
 const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
+  const [_] = useTranslation();
   const defaultDisplayChoices = [
     {
       label: _('Default'),
@@ -114,9 +115,6 @@ const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
     <SaveDialog
       buttonTitle={_('Add')}
       title={_('Add new Dashboard')}
-      width="550px"
-      minHeight={165}
-      minWidth={340}
       defaultValues={{
         title: _('Unnamed'),
         defaultDisplays: DEFAULT_DISPLAYS,
@@ -126,16 +124,15 @@ const NewDashboardDialog = ({additionalDisplayChoices, onClose, onSave}) => {
     >
       {({values, onValueChange}) => (
         <React.Fragment>
-          <FormGroup title={_('Dashboard Title')} titleSize={4}>
+          <FormGroup title={_('Dashboard Title')}>
             <TextField
-              grow
               name="title"
               maxLength={MAX_TITLE_LENGTH}
               value={values.title}
               onChange={onValueChange}
             />
           </FormGroup>
-          <FormGroup title={_('Initial Displays')} titleSize={4}>
+          <FormGroup title={_('Initial Displays')}>
             <Select
               name="defaultDisplays"
               items={defaultDisplayChoices}