From 466d96a2011e1b605a8e95dc3381974b0d97564e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= Date: Tue, 16 Apr 2024 15:00:01 +0200 Subject: [PATCH] Change: Update usersettings dialog to new UI --- src/web/pages/usersettings/defaultspart.js | 11 +- src/web/pages/usersettings/dialog.js | 28 +++-- src/web/pages/usersettings/filterpart.js | 8 +- src/web/pages/usersettings/generalpart.js | 119 ++++++++---------- src/web/pages/usersettings/severitypart.js | 39 +++--- .../pages/usersettings/usersettingspage.js | 10 +- 6 files changed, 105 insertions(+), 110 deletions(-) diff --git a/src/web/pages/usersettings/defaultspart.js b/src/web/pages/usersettings/defaultspart.js index 9eb3785ff0..2233225b0d 100644 --- a/src/web/pages/usersettings/defaultspart.js +++ b/src/web/pages/usersettings/defaultspart.js @@ -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 ( {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.js b/src/web/pages/usersettings/dialog.js index 784a936945..6a5f6c236a 100644 --- a/src/web/pages/usersettings/dialog.js +++ b/src/web/pages/usersettings/dialog.js @@ -21,7 +21,6 @@ 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'; @@ -29,15 +28,16 @@ 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'; @@ -45,7 +45,7 @@ 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.js b/src/web/pages/usersettings/filterpart.js index e01b71540f..13c98f66aa 100644 --- a/src/web/pages/usersettings/filterpart.js +++ b/src/web/pages/usersettings/filterpart.js @@ -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 ( @@ -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.js b/src/web/pages/usersettings/generalpart.js index efd58320b1..2dc9dcc40b 100644 --- a/src/web/pages/usersettings/generalpart.js +++ b/src/web/pages/usersettings/generalpart.js @@ -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,55 +93,45 @@ const GeneralPart = ({ errors, onChange, }) => { + const [_] = useTranslation(); return ( - - + <> + - - - - - - - - - - - - - - - + + + + + + + - +