Change: Update usersettings dialog to new UI

greenbone · Jun 6, 2024 · 2cd26aa · 2cd26aa
1 parent 8c4d8a0
commit 2cd26aa
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 110 deletions.
diff --git a/src/web/pages/usersettings/defaultspart.jsx b/src/web/pages/usersettings/defaultspart.jsx
@@ -18,14 +18,14 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import FormGroup from 'web/components/form/formgroup';
 import Select from 'web/components/form/select';
 
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems, UNSET_VALUE} from 'web/utils/render';
-import withCapabilities from 'web/utils/withCapabilities';
+
+import useCapabilities from 'web/utils/useCapabilities';
+import useTranslation from 'web/hooks/useTranslation';
 
 const DefaultsPart = ({
   alerts,
@@ -45,9 +45,10 @@ const DefaultsPart = ({
   defaultSshCredential,
   defaultSchedule,
   defaultTarget,
-  capabilities,
   onChange,
 }) => {
+  const capabilities = useCapabilities();
+  const [_] = useTranslation();
   return (
     <React.Fragment>
       {capabilities.mayAccess('alert') && (
@@ -176,6 +177,6 @@ DefaultsPart.propTypes = {
   onChange: PropTypes.func,
 };
 
-export default withCapabilities(DefaultsPart);
+export default DefaultsPart;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/usersettings/dialog.jsx b/src/web/pages/usersettings/dialog.jsx
@@ -21,31 +21,31 @@ import styled from 'styled-components';
 
 import {connect} from 'react-redux';
 
-import _ from 'gmp/locale';
 import {isDefined} from 'gmp/utils/identity';
 
 import {parseFloat, parseYesNo} from 'gmp/parser';
 
 import SaveDialog from 'web/components/dialog/savedialog';
 
 import Section from 'web/components/section/section';
+import Column from 'web/components/layout/column';
 
 import useFormValues from 'web/components/form/useFormValues';
 import useFormValidation from 'web/components/form/useFormValidation';
 
-import compose from 'web/utils/compose';
-import withGmp from 'web/utils/withGmp';
-import withCapabilities from 'web/utils/withCapabilities';
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+import useCapabilities from 'web/utils/useCapabilities';
+
 import DefaultsPart from './defaultspart';
 import FilterPart from './filterpart';
 import GeneralPart from './generalpart';
 import SeverityPart from './severitypart';
 import {userSettingsRules} from './validationrules';
 
 // necessary to stretch FormGroups to full width inside of Section
-const FormGroupSizer = styled.div`
+const FormGroupSizer = styled(Column)`
   width: 100%;
 `;
 
@@ -110,7 +110,6 @@ let UserSettingsDialog = ({
   dfnCertFilter,
   onClose,
   onSave,
-  capabilities,
 }) => {
   const settings = {
     timezone,
@@ -166,14 +165,19 @@ let UserSettingsDialog = ({
     dfnCertFilter,
   };
 
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
   const [error, setError] = useState();
   const [formValues, handleValueChange] = useFormValues(settings);
 
-  const handleSave = useCallback(values => {
-    onSave(values).catch(err => {
-      setError(err.message);
-    })
-  }, [onSave]);
+  const handleSave = useCallback(
+    values => {
+      onSave(values).catch(err => {
+        setError(err.message);
+      });
+    },
+    [onSave],
+  );
 
   const {hasError, errors, validate} = useFormValidation(
     userSettingsRules,
@@ -365,6 +369,6 @@ UserSettingsDialog = connect(rootState => {
   };
 })(UserSettingsDialog);
 
-export default compose(withGmp, withCapabilities)(UserSettingsDialog);
+export default UserSettingsDialog;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/usersettings/filterpart.jsx b/src/web/pages/usersettings/filterpart.jsx
@@ -18,14 +18,13 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import FormGroup from 'web/components/form/formgroup';
 import Select from 'web/components/form/select';
 
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems, UNSET_VALUE} from 'web/utils/render';
-import withCapabilities from 'web/utils/withCapabilities';
+
+import useTranslation from 'web/hooks/useTranslation';
 
 const filterFilters = (filters, type) =>
   filters.filter(filter => filter.filter_type === type);
@@ -63,6 +62,7 @@ const FilterPart = ({
   filters = [],
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
     <React.Fragment>
       <FormGroup title={_('Alerts Filter')} titleSize="3">
@@ -383,6 +383,6 @@ FilterPart.propTypes = {
   onChange: PropTypes.func,
 };
 
-export default withCapabilities(FilterPart);
+export default FilterPart;
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/usersettings/generalpart.jsx b/src/web/pages/usersettings/generalpart.jsx
@@ -19,7 +19,6 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import _ from 'gmp/locale';
 import {parseYesNo, YES_VALUE, NO_VALUE} from 'gmp/parser';
 import {isDefined} from 'gmp/utils/identity';
 
@@ -29,14 +28,13 @@ import PasswordField from 'web/components/form/passwordfield';
 import Select from 'web/components/form/select';
 import TextField from 'web/components/form/textfield';
 import TimeZoneSelect from 'web/components/form/timezoneselect';
-import Divider from 'web/components/layout/divider';
 
 import Languages from 'web/utils/languages';
-
 import PropTypes from 'web/utils/proptypes';
-
 import Theme from 'web/utils/theme';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const renderLanguageItems = () =>
   Object.entries(Languages).map(([code, {name, native_name}]) => ({
     value: code,
@@ -48,6 +46,7 @@ const NotificationDiv = styled.div`
 `;
 
 const Notification = ({newPassword, oldPassword, confPassword}) => {
+  const [_] = useTranslation();
   let color;
   let text;
 
@@ -86,7 +85,6 @@ const GeneralPart = ({
   confPassword,
   userInterfaceLanguage,
   rowsPerPage,
-  maxRowsPerPage,
   detailsExportFileName,
   listExportFileName,
   reportExportFileName,
@@ -95,106 +93,91 @@ const GeneralPart = ({
   errors,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <React.Fragment>
-      <FormGroup title={_('Timezone')} titleSize="3">
+    <>
+      <FormGroup title={_('Timezone')}>
         <TimeZoneSelect name="timezone" value={timezone} onChange={onChange} />
       </FormGroup>
-      <FormGroup title={_('Change Password')} titleSize="3">
-        <Divider flex="column">
-          <FormGroup title={_('Old')}>
-            <PasswordField
-              name="oldPassword"
-              value={oldPassword}
-              grow="1"
-              size="30"
-              autoComplete="off"
-              onChange={onChange}
-            />
-          </FormGroup>
-          <FormGroup title={_('New')}>
-            <PasswordField
-              name="newPassword"
-              value={newPassword}
-              grow="1"
-              size="30"
-              color="red"
-              autoComplete="off"
-              onChange={onChange}
-            />
-          </FormGroup>
-          <FormGroup title={_('Confirm')}>
-            <PasswordField
-              name="confPassword"
-              value={confPassword}
-              grow="1"
-              size="30"
-              autoComplete="off"
-              border="red"
-              onChange={onChange}
-            />
-          </FormGroup>
-          <FormGroup title=" ">
-            <Notification
-              newPassword={newPassword}
-              oldPassword={oldPassword}
-              confPassword={confPassword}
-            />
-          </FormGroup>
-        </Divider>
+      <FormGroup title={_('Change Password')}>
+        <PasswordField
+          grow="1"
+          title={_('Old')}
+          name="oldPassword"
+          value={oldPassword}
+          autoComplete="off"
+          onChange={onChange}
+        />
+        <PasswordField
+          grow="1"
+          title={_('New')}
+          name="newPassword"
+          value={newPassword}
+          autoComplete="off"
+          onChange={onChange}
+        />
+        <PasswordField
+          title={_('Confirm')}
+          name="confPassword"
+          value={confPassword}
+          autoComplete="off"
+          onChange={onChange}
+        />
+      </FormGroup>
+      <FormGroup title=" ">
+        <Notification
+          newPassword={newPassword}
+          oldPassword={oldPassword}
+          confPassword={confPassword}
+        />
       </FormGroup>
-      <FormGroup title={_('User Interface Language')} titleSize="3">
+      <FormGroup title={_('User Interface Language')}>
         <Select
           name="userInterfaceLanguage"
           value={userInterfaceLanguage}
           items={renderLanguageItems()}
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup title={_('Rows Per Page')} titleSize="3">
+      <FormGroup title={_('Rows Per Page')}>
         <TextField
           name="rowsPerPage"
           hasError={shouldWarn && !!errors.rowsPerPage}
           errorContent={errors.rowsPerPage}
           value={rowsPerPage}
-          size="19"
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup title={_('Details Export File Name')} titleSize="3">
+      <FormGroup title={_('Details Export File Name')}>
         <TextField
           name="detailsExportFileName"
           value={detailsExportFileName}
-          size="19"
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup title={_('List Export File Name')} titleSize="3">
+      <FormGroup title={_('List Export File Name')}>
         <TextField
           name="listExportFileName"
           value={listExportFileName}
-          size="19"
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup title={_('Report Export File Name')} titleSize="3">
+      <FormGroup title={_('Report Export File Name')}>
         <TextField
           name="reportExportFileName"
           value={reportExportFileName}
-          size="19"
-          onChange={onChange}
-        />
-      </FormGroup>
-      <FormGroup title={_('Auto Cache Rebuild')} titleSize="3">
-        <Checkbox
-          name="autoCacheRebuild"
-          checked={parseYesNo(autoCacheRebuild) === YES_VALUE}
-          checkedValue={YES_VALUE}
-          unCheckedValue={NO_VALUE}
           onChange={onChange}
         />
       </FormGroup>
-    </React.Fragment>
+      <Checkbox
+        title={_('Auto Cache Rebuild')}
+        name="autoCacheRebuild"
+        checked={parseYesNo(autoCacheRebuild) === YES_VALUE}
+        checkedValue={YES_VALUE}
+        unCheckedValue={NO_VALUE}
+        onChange={onChange}
+      />
+    </>
   );
 };