From e760cc059b500f8775c36b17087ba30a446d0f36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Ricks?= <bjoern.ricks@greenbone.net>
Date: Tue, 30 Apr 2024 14:35:19 +0200
Subject: [PATCH] Update and improve layout of alert dialog

---
 .../pages/alerts/alembavfiremethodpart.jsx    |  45 ++--
 src/web/pages/alerts/condition.jsx            |   5 +-
 .../pages/alerts/contentcomposerdialog.jsx    |  96 +++-----
 src/web/pages/alerts/dialog.jsx               | 211 ++++++++---------
 src/web/pages/alerts/emailmethodpart.jsx      | 216 +++++++++---------
 src/web/pages/alerts/event.jsx                |   5 +-
 .../filtercountchangedconditionpart.jsx       |  12 +-
 .../alerts/filtercountleastconditionpart.jsx  |  12 +-
 src/web/pages/alerts/httpmethodpart.jsx       |   5 +-
 src/web/pages/alerts/method.jsx               |   9 +-
 src/web/pages/alerts/scpmethodpart.jsx        |  43 ++--
 src/web/pages/alerts/secinfoeventpart.jsx     | 119 +++++-----
 src/web/pages/alerts/sendmethodpart.jsx       |  44 ++--
 .../alerts/severitychangedconditionpart.jsx   |  12 +-
 .../alerts/severityleastconditionpart.jsx     |  12 +-
 src/web/pages/alerts/smbmethodpart.jsx        |  56 ++---
 src/web/pages/alerts/snmpmethodpart.jsx       |  14 +-
 src/web/pages/alerts/sourcefiremethodpart.jsx |   5 +-
 src/web/pages/alerts/starttaskmethodpart.jsx  |  27 ++-
 src/web/pages/alerts/taskeventpart.jsx        |  96 ++++----
 src/web/pages/alerts/ticketeventpart.jsx      |  59 ++---
 .../pages/alerts/tippingpointmethodpart.jsx   |  42 ++--
 src/web/pages/alerts/verinicemethodpart.jsx   |  44 ++--
 23 files changed, 570 insertions(+), 619 deletions(-)

diff --git a/src/web/pages/alerts/alembavfiremethodpart.jsx b/src/web/pages/alerts/alembavfiremethodpart.jsx
index 261e1b95f3..8d13fb7ad5 100644
--- a/src/web/pages/alerts/alembavfiremethodpart.jsx
+++ b/src/web/pages/alerts/alembavfiremethodpart.jsx
@@ -17,13 +17,8 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {USERNAME_PASSWORD_CREDENTIAL_TYPE} from 'gmp/models/credential';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 import withPrefix from 'web/utils/withPrefix';
@@ -39,6 +34,8 @@ import NewIcon from 'web/components/icon/newicon';
 
 import {VFIRE_CALL_DESCRIPTION} from 'web/pages/alerts/dialog';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const VFIRE_CREDENTIAL_TYPES = [USERNAME_PASSWORD_CREDENTIAL_TYPE];
 
 const AlembaVfireMethodPart = ({
@@ -64,8 +61,9 @@ const AlembaVfireMethodPart = ({
   credentials = credentials.filter(
     cred => cred.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE,
   );
+  const [_] = useTranslation();
   return (
-    <Layout flex="column" grow="1">
+    <>
       <FormGroup title={_('Report Formats')}>
         <MultiSelect
           name={'report_format_ids'}
@@ -84,26 +82,23 @@ const AlembaVfireMethodPart = ({
         />
       </FormGroup>
 
-      <FormGroup title={_('Credential')}>
-        <Divider>
-          <Select
-            name={prefix + 'vfire_credential'}
-            items={renderSelectItems(credentials)}
-            value={vFireCredential}
-            onChange={onCredentialChange}
-          />
-          <Layout>
-            <NewIcon
-              size="small"
-              title={_('Create a credential')}
-              value={VFIRE_CREDENTIAL_TYPES}
-              onClick={onNewVfireCredentialClick}
-            />
-          </Layout>
-        </Divider>
+      <FormGroup title={_('Credential')} direction="row">
+        <Select
+          grow="1"
+          name={prefix + 'vfire_credential'}
+          items={renderSelectItems(credentials)}
+          value={vFireCredential}
+          onChange={onCredentialChange}
+        />
+        <NewIcon
+          size="small"
+          title={_('Create a credential')}
+          value={VFIRE_CREDENTIAL_TYPES}
+          onClick={onNewVfireCredentialClick}
+        />
       </FormGroup>
 
-      <FormGroup title={_('Session Type')}>
+      <FormGroup title={_('Session Type')} direction="row">
         <Radio
           title={_('Analyst')}
           name={prefix + 'vfire_session_type'}
@@ -183,7 +178,7 @@ const AlembaVfireMethodPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/web/pages/alerts/condition.jsx b/src/web/pages/alerts/condition.jsx
index 9fa830195b..dbf431302b 100644
--- a/src/web/pages/alerts/condition.jsx
+++ b/src/web/pages/alerts/condition.jsx
@@ -15,8 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import {parseInt} from 'gmp/parser';
@@ -33,7 +31,10 @@ import {
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const Condition = ({condition = {}, event}) => {
+  const [_] = useTranslation();
   if (!isDefined(condition.type) || !isDefined(condition.data)) {
     return null;
   }
diff --git a/src/web/pages/alerts/contentcomposerdialog.jsx b/src/web/pages/alerts/contentcomposerdialog.jsx
index 13e0521193..63306e204f 100644
--- a/src/web/pages/alerts/contentcomposerdialog.jsx
+++ b/src/web/pages/alerts/contentcomposerdialog.jsx
@@ -18,10 +18,6 @@
 
 import React from 'react';
 
-import styled from 'styled-components';
-
-import _ from 'gmp/locale';
-
 import {NO_VALUE, YES_VALUE} from 'gmp/parser';
 
 import {isDefined} from 'gmp/utils/identity';
@@ -38,12 +34,7 @@ import CheckBox from 'web/components/form/checkbox';
 import FormGroup from 'web/components/form/formgroup';
 import Select from 'web/components/form/select';
 
-import Layout from 'web/components/layout/layout';
-import Divider from 'web/components/layout/divider';
-
-const StyledDiv = styled.div`
-  text-align: end;
-`;
+import useTranslation from 'web/hooks/useTranslation';
 
 const ContentComposerDialog = ({
   filterId = UNSET_VALUE,
@@ -57,6 +48,7 @@ const ContentComposerDialog = ({
   onSave,
   onChange,
 }) => {
+  const [_] = useTranslation();
   const filter =
     filterId === UNSET_VALUE ? undefined : filters.find(f => f.id === filterId);
 
@@ -76,54 +68,42 @@ const ContentComposerDialog = ({
       onClose={onClose}
       onSave={onSave}
     >
-      {({values, onValueChange}) => (
-        <Layout flex="column">
-          <FormGroup title={_('Report Result Filter')} titleSize="3">
-            <Select
-              name="filterId"
-              value={filterId}
-              items={renderSelectItems(filters, UNSET_VALUE)}
-              onChange={onFilterIdChange}
-            />
-          </FormGroup>
-          <ComposerContent
-            filterFieldTitle={_(
-              'To change the filter, please select a filter' +
-                ' from the dropdown menu.',
-            )}
-            filterString={isDefined(filter) ? filter.toFilterString() : ''}
-            includeNotes={values.includeNotes}
-            includeOverrides={values.includeOverrides}
-            onValueChange={onChange}
-          />
-          <FormGroup title={_('Pagination')} titleSize="3">
-            <Divider>
-              <CheckBox
-                data-testid="ignorePagination"
-                name="ignorePagination"
-                checked={values.ignorePagination}
-                checkedValue={YES_VALUE}
-                uncheckedValue={NO_VALUE}
-                title={_('Ignore')}
-                onChange={onChange}
-              />
-            </Divider>
-          </FormGroup>
-          <StyledDiv>
-            <CheckBox
-              name="storeAsDefault"
-              checked={values.storeAsDefault}
-              checkedValue={YES_VALUE}
-              unCheckedValue={NO_VALUE}
-              toolTipTitle={_(
-                'Store indicated settings (without filter) as default',
-              )}
-              title={_('Store as default')}
-              onChange={onChange}
-            />
-          </StyledDiv>
-        </Layout>
-      )}
+      <FormGroup title={_('Report Result Filter')}>
+        <Select
+          name="filterId"
+          value={filterId}
+          items={renderSelectItems(filters, UNSET_VALUE)}
+          onChange={onFilterIdChange}
+        />
+      </FormGroup>
+      <ComposerContent
+        filterFieldTitle={_(
+          'To change the filter, please select a filter' +
+            ' from the dropdown menu.',
+        )}
+        filterString={isDefined(filter) ? filter.toFilterString() : ''}
+        includeNotes={includeNotes}
+        includeOverrides={includeOverrides}
+        onValueChange={onChange}
+      />
+      <CheckBox
+        data-testid="ignorePagination"
+        name="ignorePagination"
+        checked={ignorePagination}
+        checkedValue={YES_VALUE}
+        uncheckedValue={NO_VALUE}
+        title={_('Ignore Pagination')}
+        onChange={onChange}
+      />
+      <CheckBox
+        name="storeAsDefault"
+        checked={storeAsDefault}
+        checkedValue={YES_VALUE}
+        unCheckedValue={NO_VALUE}
+        toolTipTitle={_('Store indicated settings (without filter) as default')}
+        title={_('Store as default')}
+        onChange={onChange}
+      />
     </SaveDialog>
   );
 };
diff --git a/src/web/pages/alerts/dialog.jsx b/src/web/pages/alerts/dialog.jsx
index db4e3514c5..5701b320ef 100644
--- a/src/web/pages/alerts/dialog.jsx
+++ b/src/web/pages/alerts/dialog.jsx
@@ -62,7 +62,7 @@ import YesNoRadio from 'web/components/form/yesnoradio';
 import ReportIcon from 'web/components/icon/reporticon';
 
 import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
 
 import {UNSET_VALUE} from 'web/utils/render';
 import withCapabilities from 'web/utils/withCapabilities';
@@ -507,13 +507,12 @@ class AlertDialog extends React.Component {
       >
         {({values, onValueChange}) => {
           return (
-            <Layout flex="column">
+            <>
               <FormGroup title={_('Name')}>
                 <TextField
                   name="name"
                   grow="1"
                   value={values.name}
-                  size="30"
                   onChange={onValueChange}
                 />
               </FormGroup>
@@ -523,92 +522,88 @@ class AlertDialog extends React.Component {
                   name="comment"
                   value={values.comment}
                   grow="1"
-                  size="30"
                   onChange={onValueChange}
                 />
               </FormGroup>
 
-              <FormGroup title={_('Event')} flex="column">
-                <Divider flex="column">
-                  <TaskEventPart
-                    prefix="event_data"
-                    event={values.event}
-                    status={values.event_data_status}
-                    onEventChange={value =>
-                      this.handleEventChange(value, onValueChange)
-                    }
+              <FormGroup title={_('Event')}>
+                <TaskEventPart
+                  prefix="event_data"
+                  event={values.event}
+                  status={values.event_data_status}
+                  onEventChange={value =>
+                    this.handleEventChange(value, onValueChange)
+                  }
+                  onChange={onValueChange}
+                />
+
+                <SecInfoEventPart
+                  prefix="event_data"
+                  event={values.event}
+                  secinfoType={values.event_data_secinfo_type}
+                  feedEvent={values.event_data_feed_event}
+                  onEventChange={value =>
+                    this.handleEventChange(value, onValueChange)
+                  }
+                  onChange={onValueChange}
+                />
+
+                <TicketEventPart
+                  event={values.event}
+                  onEventChange={value =>
+                    this.handleEventChange(value, onValueChange)
+                  }
+                />
+              </FormGroup>
+
+              <FormGroup title={_('Condition')}>
+                <Radio
+                  title={_('Always')}
+                  name="condition"
+                  value={CONDITION_TYPE_ALWAYS}
+                  checked={values.condition === CONDITION_TYPE_ALWAYS}
+                  onChange={onValueChange}
+                />
+
+                {taskEvent && (
+                  <SeverityLeastConditionPart
+                    prefix="condition_data"
+                    condition={values.condition}
+                    severity={values.condition_data_severity}
                     onChange={onValueChange}
                   />
+                )}
 
-                  <SecInfoEventPart
-                    prefix="event_data"
-                    event={values.event}
-                    secinfoType={values.event_data_secinfo_type}
-                    feedEvent={values.event_data_feed_event}
-                    onEventChange={value =>
-                      this.handleEventChange(value, onValueChange)
-                    }
+                {taskEvent && (
+                  <SeverityChangedConditionPart
+                    prefix="condition_data"
+                    condition={values.condition}
+                    direction={values.condition_data_direction}
                     onChange={onValueChange}
                   />
-                  <TicketEventPart
-                    event={values.event}
-                    onEventChange={value =>
-                      this.handleEventChange(value, onValueChange)
-                    }
+                )}
+
+                {(secinfoEvent || taskEvent) && (
+                  <FilterCountLeastConditionPart
+                    prefix="condition_data"
+                    condition={values.condition}
+                    atLeastFilterId={values.condition_data_at_least_filter_id}
+                    atLeastCount={values.condition_data_at_least_count}
+                    filters={values.condition_data_filters}
+                    onChange={onValueChange}
                   />
-                </Divider>
-              </FormGroup>
-
-              <FormGroup title={_('Condition')} flex="column">
-                <Divider flex="column">
-                  <Radio
-                    title={_('Always')}
-                    name="condition"
-                    value={CONDITION_TYPE_ALWAYS}
-                    checked={values.condition === CONDITION_TYPE_ALWAYS}
+                )}
+
+                {taskEvent && (
+                  <FilterCountChangedConditionPart
+                    prefix="condition_data"
+                    condition={values.condition}
+                    filterId={values.condition_data_filter_id}
+                    count={values.condition_data_count}
+                    filters={values.condition_data_filters}
                     onChange={onValueChange}
                   />
-
-                  {taskEvent && (
-                    <SeverityLeastConditionPart
-                      prefix="condition_data"
-                      condition={values.condition}
-                      severity={values.condition_data_severity}
-                      onChange={onValueChange}
-                    />
-                  )}
-
-                  {taskEvent && (
-                    <SeverityChangedConditionPart
-                      prefix="condition_data"
-                      condition={values.condition}
-                      direction={values.condition_data_direction}
-                      onChange={onValueChange}
-                    />
-                  )}
-
-                  {(secinfoEvent || taskEvent) && (
-                    <FilterCountLeastConditionPart
-                      prefix="condition_data"
-                      condition={values.condition}
-                      atLeastFilterId={values.condition_data_at_least_filter_id}
-                      atLeastCount={values.condition_data_at_least_count}
-                      filters={values.condition_data_filters}
-                      onChange={onValueChange}
-                    />
-                  )}
-
-                  {taskEvent && (
-                    <FilterCountChangedConditionPart
-                      prefix="condition_data"
-                      condition={values.condition}
-                      filterId={values.condition_data_filter_id}
-                      count={values.condition_data_count}
-                      filters={values.condition_data_filters}
-                      onChange={onValueChange}
-                    />
-                  )}
-                </Divider>
+                )}
               </FormGroup>
 
               {secinfoEvent && (
@@ -632,46 +627,42 @@ class AlertDialog extends React.Component {
               )}
 
               {taskEvent && (
-                <FormGroup title={_('Delta Report')} flex="column">
-                  <Divider flex="column">
+                <FormGroup title={_('Delta Report')}>
+                  <Radio
+                    title={_('None')}
+                    name="method_data_delta_type"
+                    value={DELTA_TYPE_NONE}
+                    checked={values.method_data_delta_type === DELTA_TYPE_NONE}
+                    onChange={onValueChange}
+                  />
+
+                  <Radio
+                    title={_('Previous completed report of the same task')}
+                    name="method_data_delta_type"
+                    value={DELTA_TYPE_PREVIOUS}
+                    checked={
+                      values.method_data_delta_type === DELTA_TYPE_PREVIOUS
+                    }
+                    onChange={onValueChange}
+                  />
+
+                  <Row>
                     <Radio
-                      title={_('None')}
+                      title={_('Report with ID')}
                       name="method_data_delta_type"
-                      value={DELTA_TYPE_NONE}
+                      value={DELTA_TYPE_REPORT}
                       checked={
-                        values.method_data_delta_type === DELTA_TYPE_NONE
+                        values.method_data_delta_type === DELTA_TYPE_REPORT
                       }
                       onChange={onValueChange}
                     />
-
-                    <Radio
-                      title={_('Previous completed report of the same task')}
-                      name="method_data_delta_type"
-                      value={DELTA_TYPE_PREVIOUS}
-                      checked={
-                        values.method_data_delta_type === DELTA_TYPE_PREVIOUS
-                      }
+                    <TextField
+                      grow="1"
+                      name="method_data_delta_report_id"
+                      value={values.method_data_delta_report_id}
                       onChange={onValueChange}
                     />
-
-                    <Divider>
-                      <Radio
-                        title={_('Report with ID')}
-                        name="method_data_delta_type"
-                        value={DELTA_TYPE_REPORT}
-                        checked={
-                          values.method_data_delta_type === DELTA_TYPE_REPORT
-                        }
-                        onChange={onValueChange}
-                      />
-                      <TextField
-                        grow="1"
-                        name="method_data_delta_report_id"
-                        value={values.method_data_delta_report_id}
-                        onChange={onValueChange}
-                      />
-                    </Divider>
-                  </Divider>
+                  </Row>
                 </FormGroup>
               )}
 
@@ -862,7 +853,7 @@ class AlertDialog extends React.Component {
                   onChange={onValueChange}
                 />
               </FormGroup>
-            </Layout>
+            </>
           );
         }}
       </SaveDialog>
diff --git a/src/web/pages/alerts/emailmethodpart.jsx b/src/web/pages/alerts/emailmethodpart.jsx
index 9c03906bcd..1d8b6cda94 100644
--- a/src/web/pages/alerts/emailmethodpart.jsx
+++ b/src/web/pages/alerts/emailmethodpart.jsx
@@ -18,8 +18,6 @@
 
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {
   isTaskEvent,
   isSecinfoEvent,
@@ -40,18 +38,16 @@ import Radio from 'web/components/form/radio';
 
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import IconDivider from 'web/components/layout/icondivider';
-import Layout from 'web/components/layout/layout';
+import Row from 'web/components/layout/row';
 
-import compose from 'web/utils/compose';
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems, UNSET_VALUE} from 'web/utils/render';
-import withCapabilities from 'web/utils/withCapabilities';
 import withPrefix from 'web/utils/withPrefix';
 
+import useTranslation from 'web/hooks/useTranslation';
+import useCapabilities from 'web/utils/useCapabilities';
+
 const EmailMethodPart = ({
-  capabilities,
   credentials = [],
   fromAddress,
   event,
@@ -69,6 +65,8 @@ const EmailMethodPart = ({
   onCredentialChange,
   onNewCredentialClick,
 }) => {
+  const [_] = useTranslation();
+  const capabilities = useCapabilities();
   const taskEvent = isTaskEvent(event);
   const secinfoEvent = isSecinfoEvent(event);
   const reportFormatItems = renderSelectItems(
@@ -79,7 +77,7 @@ const EmailMethodPart = ({
   );
   credentials = credentials.filter(email_credential_filter);
   return (
-    <Layout flex="column" grow="1">
+    <>
       <FormGroup title={_('To Address')}>
         <TextField
           grow="1"
@@ -110,124 +108,120 @@ const EmailMethodPart = ({
         </FormGroup>
       )}
 
-      <FormGroup title={_('Email Encryption')}>
-        <IconDivider>
-          <Select
-            name={prefix + 'recipient_credential'}
-            value={recipientCredential}
-            items={renderSelectItems(credentials, UNSET_VALUE)}
-            onChange={onCredentialChange}
-          />
-          <NewIcon
-            size="small"
-            value={EMAIL_CREDENTIAL_TYPES}
-            title={_('Create a credential')}
-            onClick={onNewCredentialClick}
-          />
-        </IconDivider>
+      <FormGroup title={_('Email Encryption')} direction="row">
+        <Select
+          grow="1"
+          name={prefix + 'recipient_credential'}
+          value={recipientCredential}
+          items={renderSelectItems(credentials, UNSET_VALUE)}
+          onChange={onCredentialChange}
+        />
+        <NewIcon
+          size="small"
+          value={EMAIL_CREDENTIAL_TYPES}
+          title={_('Create a credential')}
+          onClick={onNewCredentialClick}
+        />
       </FormGroup>
 
       {(taskEvent || secinfoEvent) && (
-        <FormGroup title={_('Content')} flex="column">
-          <Divider flex="column" grow="1">
-            <Radio
-              title={_('Simple Notice')}
-              name={prefix + 'notice'}
-              checked={notice === EMAIL_NOTICE_SIMPLE}
-              value="1"
-              onChange={onChange}
-            />
-
-            {capabilities.mayOp('get_report_formats') && (
-              <Layout flex="column">
-                <Divider>
-                  <Radio
-                    name={prefix + 'notice'}
-                    title={
-                      taskEvent
-                        ? _('Include report')
-                        : _('Include list of resources with message:')
-                    }
-                    checked={notice === EMAIL_NOTICE_INCLUDE}
-                    value="0"
-                    onChange={onChange}
-                  />
-                  {taskEvent && (
-                    <Select
-                      disabled={notice !== EMAIL_NOTICE_INCLUDE}
-                      name={prefix + 'notice_report_format'}
-                      value={noticeReportFormat}
-                      items={reportFormatItems}
-                      onChange={onChange}
-                    />
-                  )}
-                </Divider>
-                <TextArea
-                  disabled={notice !== EMAIL_NOTICE_INCLUDE}
-                  name={prefix + 'message'}
-                  rows="8"
-                  cols="50"
+        <FormGroup title={_('Content')}>
+          <Radio
+            title={_('Simple Notice')}
+            name={prefix + 'notice'}
+            checked={notice === EMAIL_NOTICE_SIMPLE}
+            value="1"
+            onChange={onChange}
+          />
+
+          {capabilities.mayOp('get_report_formats') && (
+            <>
+              <Row>
+                <Radio
+                  name={prefix + 'notice'}
                   title={
-                    notice === EMAIL_NOTICE_INCLUDE
-                      ? undefined
-                      : _('Activate the "include" option to make changes here.')
+                    taskEvent
+                      ? _('Include report')
+                      : _('Include list of resources with message:')
                   }
-                  value={message}
+                  checked={notice === EMAIL_NOTICE_INCLUDE}
+                  value="0"
                   onChange={onChange}
                 />
-              </Layout>
-            )}
-
-            {capabilities.mayOp('get_report_formats') && (
-              <Layout flex="column">
-                <Layout>
-                  <Divider>
-                    <Radio
-                      name={prefix + 'notice'}
-                      title={
-                        taskEvent
-                          ? _('Attach report')
-                          : _('Attach list of resources with message:')
-                      }
-                      checked={notice === EMAIL_NOTICE_ATTACH}
-                      value="2"
-                      onChange={onChange}
-                    />
-                    {taskEvent && (
-                      <Select
-                        disabled={notice !== EMAIL_NOTICE_ATTACH}
-                        name={prefix + 'notice_attach_format'}
-                        value={noticeAttachFormat}
-                        items={renderSelectItems(reportFormats)}
-                        onChange={onChange}
-                      />
-                    )}
-                  </Divider>
-                </Layout>
-                <TextArea
-                  disabled={notice !== EMAIL_NOTICE_ATTACH}
-                  name={prefix + 'message_attach'}
-                  rows="8"
-                  cols="50"
+                {taskEvent && (
+                  <Select
+                    grow="1"
+                    disabled={notice !== EMAIL_NOTICE_INCLUDE}
+                    name={prefix + 'notice_report_format'}
+                    value={noticeReportFormat}
+                    items={reportFormatItems}
+                    onChange={onChange}
+                  />
+                )}
+              </Row>
+              <TextArea
+                disabled={notice !== EMAIL_NOTICE_INCLUDE}
+                name={prefix + 'message'}
+                rows="8"
+                cols="50"
+                title={
+                  notice === EMAIL_NOTICE_INCLUDE
+                    ? undefined
+                    : _('Activate the "include" option to make changes here.')
+                }
+                value={message}
+                onChange={onChange}
+              />
+            </>
+          )}
+
+          {capabilities.mayOp('get_report_formats') && (
+            <>
+              <Row>
+                <Radio
+                  name={prefix + 'notice'}
                   title={
-                    notice === EMAIL_NOTICE_ATTACH
-                      ? undefined
-                      : _('Activate the "attach" option to allow changes here.')
+                    taskEvent
+                      ? _('Attach report')
+                      : _('Attach list of resources with message:')
                   }
-                  value={messageAttach}
+                  checked={notice === EMAIL_NOTICE_ATTACH}
+                  value="2"
                   onChange={onChange}
                 />
-              </Layout>
-            )}
-          </Divider>
+                {taskEvent && (
+                  <Select
+                    grow="1"
+                    disabled={notice !== EMAIL_NOTICE_ATTACH}
+                    name={prefix + 'notice_attach_format'}
+                    value={noticeAttachFormat}
+                    items={renderSelectItems(reportFormats)}
+                    onChange={onChange}
+                  />
+                )}
+              </Row>
+              <TextArea
+                disabled={notice !== EMAIL_NOTICE_ATTACH}
+                name={prefix + 'message_attach'}
+                rows="8"
+                cols="50"
+                title={
+                  notice === EMAIL_NOTICE_ATTACH
+                    ? undefined
+                    : _('Activate the "attach" option to allow changes here.')
+                }
+                value={messageAttach}
+                onChange={onChange}
+              />
+            </>
+          )}
         </FormGroup>
       )}
-    </Layout>
+    </>
   );
 };
 
 EmailMethodPart.propTypes = {
-  capabilities: PropTypes.capabilities.isRequired,
   credentials: PropTypes.array,
   event: PropTypes.string.isRequired,
   fromAddress: PropTypes.string.isRequired,
@@ -246,6 +240,6 @@ EmailMethodPart.propTypes = {
   onNewCredentialClick: PropTypes.func,
 };
 
-export default compose(withCapabilities, withPrefix)(EmailMethodPart);
+export default withPrefix(EmailMethodPart);
 
 // vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/pages/alerts/event.jsx b/src/web/pages/alerts/event.jsx
index ec4f1d4d79..c02127771f 100644
--- a/src/web/pages/alerts/event.jsx
+++ b/src/web/pages/alerts/event.jsx
@@ -15,8 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  */
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import {secInfoTypeName} from 'gmp/models/secinfo';
@@ -31,7 +29,10 @@ import {
 
 import PropTypes from 'web/utils/proptypes';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const Event = ({event = {}}) => {
+  const [_] = useTranslation();
   if (!isDefined(event.type) || !isDefined(event.data)) {
     return null;
   }
diff --git a/src/web/pages/alerts/filtercountchangedconditionpart.jsx b/src/web/pages/alerts/filtercountchangedconditionpart.jsx
index 54e04bfa2e..c1c0a6a313 100644
--- a/src/web/pages/alerts/filtercountchangedconditionpart.jsx
+++ b/src/web/pages/alerts/filtercountchangedconditionpart.jsx
@@ -17,9 +17,7 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
 import Layout from 'web/components/layout/layout';
 
 import PropTypes from 'web/utils/proptypes';
@@ -30,6 +28,8 @@ import Select from 'web/components/form/select';
 import Spinner from 'web/components/form/spinner';
 import Radio from 'web/components/form/radio';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const VALUE = 'Filter count changed';
 
 const FilterCountChangedConditionPart = ({
@@ -40,8 +40,9 @@ const FilterCountChangedConditionPart = ({
   prefix,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <Divider>
+    <Row>
       <Radio
         title={_('Filter')}
         value={VALUE}
@@ -61,11 +62,10 @@ const FilterCountChangedConditionPart = ({
         name={prefix + 'count'}
         type="int"
         min="0"
-        size="5"
         onChange={onChange}
       />
       <Layout>{_('result(s) more than previous scan')}</Layout>
-    </Divider>
+    </Row>
   );
 };
 
diff --git a/src/web/pages/alerts/filtercountleastconditionpart.jsx b/src/web/pages/alerts/filtercountleastconditionpart.jsx
index f13dde18b2..95d850a118 100644
--- a/src/web/pages/alerts/filtercountleastconditionpart.jsx
+++ b/src/web/pages/alerts/filtercountleastconditionpart.jsx
@@ -17,9 +17,7 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
 import Layout from 'web/components/layout/layout';
 
 import PropTypes from 'web/utils/proptypes';
@@ -30,6 +28,8 @@ import Select from 'web/components/form/select';
 import Spinner from 'web/components/form/spinner';
 import Radio from 'web/components/form/radio';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const VALUE = 'Filter count at least';
 
 const FilterCountLeastConditionPart = ({
@@ -40,8 +40,9 @@ const FilterCountLeastConditionPart = ({
   prefix,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <Divider>
+    <Row>
       <Radio
         title={_('Filter')}
         value={VALUE}
@@ -61,11 +62,10 @@ const FilterCountLeastConditionPart = ({
         name={prefix + 'at_least_count'}
         type="int"
         min="0"
-        size="5"
         onChange={onChange}
       />
       <Layout>{_('result(s) NVT(s)')}</Layout>
-    </Divider>
+    </Row>
   );
 };
 
diff --git a/src/web/pages/alerts/httpmethodpart.jsx b/src/web/pages/alerts/httpmethodpart.jsx
index ad24dc4a7d..1e2e4cd0cb 100644
--- a/src/web/pages/alerts/httpmethodpart.jsx
+++ b/src/web/pages/alerts/httpmethodpart.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 
 import withPrefix from 'web/utils/withPrefix';
@@ -26,7 +24,10 @@ import withPrefix from 'web/utils/withPrefix';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const HttpMethodPart = ({prefix, URL, onChange}) => {
+  const [_] = useTranslation();
   return (
     <FormGroup title={_('HTTP Get URL')}>
       <TextField
diff --git a/src/web/pages/alerts/method.jsx b/src/web/pages/alerts/method.jsx
index 3c95b4250e..720fabe1d2 100644
--- a/src/web/pages/alerts/method.jsx
+++ b/src/web/pages/alerts/method.jsx
@@ -19,8 +19,6 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import _ from 'gmp/locale';
-
 import {isDefined} from 'gmp/utils/identity';
 
 import {
@@ -54,6 +52,8 @@ import TableRow from 'web/components/table/row';
 
 import {Col} from 'web/entity/page';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const Table = styled(SimpleTable)`
   margin-top: 5px;
   margin-left: 45px;
@@ -68,6 +68,7 @@ const Pre = styled.pre`
 `;
 
 const Method = ({method = {}, details = false, reportFormats = []}) => {
+  const [_] = useTranslation();
   if (!isDefined(method.type)) {
     return null;
   }
@@ -450,8 +451,8 @@ const Method = ({method = {}, details = false, reportFormats = []}) => {
                     {data.notice.value === EMAIL_NOTICE_INCLUDE
                       ? _('Include Content')
                       : data.notice.value === EMAIL_NOTICE_ATTACH
-                      ? _('Attach Content')
-                      : _('Simple Notice')}
+                        ? _('Attach Content')
+                        : _('Simple Notice')}
                   </TableData>
                 </TableRow>
               )}
diff --git a/src/web/pages/alerts/scpmethodpart.jsx b/src/web/pages/alerts/scpmethodpart.jsx
index 8df23f6b16..c28a69754c 100644
--- a/src/web/pages/alerts/scpmethodpart.jsx
+++ b/src/web/pages/alerts/scpmethodpart.jsx
@@ -17,16 +17,11 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {
   SSH_CREDENTIAL_TYPES,
   ssh_credential_filter,
 } from 'gmp/models/credential';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 
 import {renderSelectItems} from 'web/utils/render';
@@ -40,6 +35,8 @@ import TextArea from 'web/components/form/textarea';
 
 import NewIcon from 'web/components/icon/newicon';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const ScpMethodPart = ({
   prefix,
   credentials = [],
@@ -54,26 +51,24 @@ const ScpMethodPart = ({
   onCredentialChange,
   onNewCredentialClick,
 }) => {
+  const [_] = useTranslation();
   credentials = credentials.filter(ssh_credential_filter);
   return (
-    <Layout flex="column" grow="1">
-      <FormGroup title={_('Credential')}>
-        <Divider>
-          <Select
-            name={prefix + 'scp_credential'}
-            value={scpCredential}
-            items={renderSelectItems(credentials)}
-            onChange={onCredentialChange}
-          />
-          <Layout>
-            <NewIcon
-              size="small"
-              value={SSH_CREDENTIAL_TYPES}
-              title={_('Create a credential')}
-              onClick={onNewCredentialClick}
-            />
-          </Layout>
-        </Divider>
+    <>
+      <FormGroup title={_('Credential')} direction="row">
+        <Select
+          grow="1"
+          name={prefix + 'scp_credential'}
+          value={scpCredential}
+          items={renderSelectItems(credentials)}
+          onChange={onCredentialChange}
+        />
+        <NewIcon
+          size="small"
+          value={SSH_CREDENTIAL_TYPES}
+          title={_('Create a credential')}
+          onClick={onNewCredentialClick}
+        />
       </FormGroup>
 
       <FormGroup title={_('Host')}>
@@ -123,7 +118,7 @@ const ScpMethodPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/web/pages/alerts/secinfoeventpart.jsx b/src/web/pages/alerts/secinfoeventpart.jsx
index c45dbb09e3..6e83c47cde 100644
--- a/src/web/pages/alerts/secinfoeventpart.jsx
+++ b/src/web/pages/alerts/secinfoeventpart.jsx
@@ -17,11 +17,9 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {EVENT_TYPE_NEW_SECINFO, isSecinfoEvent} from 'gmp/models/alert';
 
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
 
 import Select from 'web/components/form/select';
 import Radio from 'web/components/form/radio';
@@ -29,6 +27,8 @@ import Radio from 'web/components/form/radio';
 import PropTypes from 'web/utils/proptypes';
 import withPrefix from 'web/utils/withPrefix';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const SecinfoEventPart = ({
   event,
   feedEvent,
@@ -36,60 +36,65 @@ const SecinfoEventPart = ({
   secinfoType,
   onChange,
   onEventChange,
-}) => (
-  <Divider>
-    <Radio
-      name="event"
-      value={EVENT_TYPE_NEW_SECINFO}
-      checked={event === EVENT_TYPE_NEW_SECINFO}
-      onChange={onEventChange}
-    />
-    <Select
-      disabled={!isSecinfoEvent(event)}
-      items={[
-        {
-          value: 'new',
-          label: _('New'),
-        },
-        {
-          value: 'updated',
-          label: _('Updated'),
-        },
-      ]}
-      value={feedEvent}
-      name={prefix + 'feed_event'}
-      onChange={onChange}
-    />
-    <Select
-      disabled={!isSecinfoEvent(event)}
-      items={[
-        {
-          value: 'nvt',
-          label: _('NVTs'),
-        },
-        {
-          value: 'cve',
-          label: _('CVEs'),
-        },
-        {
-          value: 'cpe',
-          label: _('CPEs'),
-        },
-        {
-          value: 'cert_bund_adv',
-          label: _('CERT-Bund Advisories'),
-        },
-        {
-          value: 'dfn_cert_adv',
-          label: _('DFN-CERT Advisories'),
-        },
-      ]}
-      value={secinfoType}
-      name={prefix + 'secinfo_type'}
-      onChange={onChange}
-    />
-  </Divider>
-);
+}) => {
+  const [_] = useTranslation();
+  return (
+    <Row>
+      <Radio
+        name="event"
+        value={EVENT_TYPE_NEW_SECINFO}
+        checked={event === EVENT_TYPE_NEW_SECINFO}
+        onChange={onEventChange}
+      />
+      <Select
+        grow="1"
+        disabled={!isSecinfoEvent(event)}
+        items={[
+          {
+            value: 'new',
+            label: _('New'),
+          },
+          {
+            value: 'updated',
+            label: _('Updated'),
+          },
+        ]}
+        value={feedEvent}
+        name={prefix + 'feed_event'}
+        onChange={onChange}
+      />
+      <Select
+        grow="1"
+        disabled={!isSecinfoEvent(event)}
+        items={[
+          {
+            value: 'nvt',
+            label: _('NVTs'),
+          },
+          {
+            value: 'cve',
+            label: _('CVEs'),
+          },
+          {
+            value: 'cpe',
+            label: _('CPEs'),
+          },
+          {
+            value: 'cert_bund_adv',
+            label: _('CERT-Bund Advisories'),
+          },
+          {
+            value: 'dfn_cert_adv',
+            label: _('DFN-CERT Advisories'),
+          },
+        ]}
+        value={secinfoType}
+        name={prefix + 'secinfo_type'}
+        onChange={onChange}
+      />
+    </Row>
+  );
+};
 
 SecinfoEventPart.propTypes = {
   event: PropTypes.string.isRequired,
diff --git a/src/web/pages/alerts/sendmethodpart.jsx b/src/web/pages/alerts/sendmethodpart.jsx
index 6ef6cf8efb..5a46cdac86 100644
--- a/src/web/pages/alerts/sendmethodpart.jsx
+++ b/src/web/pages/alerts/sendmethodpart.jsx
@@ -17,11 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 import withPrefix from 'web/utils/withPrefix';
@@ -30,6 +25,8 @@ import Select from 'web/components/form/select';
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const SendMethodPart = ({
   prefix,
   reportFormats,
@@ -38,25 +35,24 @@ const SendMethodPart = ({
   sendReportFormat,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <Layout flex="column" grow="1">
-      <FormGroup title={_('Send to host')}>
-        <Divider>
-          <TextField
-            name={prefix + 'send_host'}
-            value={sendHost}
-            size="30"
-            onChange={onChange}
-          />
-          <Layout>{_('on port')}</Layout>
-          <TextField
-            name={prefix + 'send_port'}
-            value={sendPort}
-            maxLength="6"
-            size="6"
-            onChange={onChange}
-          />
-        </Divider>
+    <>
+      <FormGroup title={_('Send to host')} direction="row">
+        <TextField
+          grow="1"
+          name={prefix + 'send_host'}
+          value={sendHost}
+          onChange={onChange}
+        />
+        {_('on port')}
+        <TextField
+          name={prefix + 'send_port'}
+          value={sendPort}
+          maxLength="6"
+          size="6"
+          onChange={onChange}
+        />
       </FormGroup>
 
       <FormGroup title={_('Report')}>
@@ -67,7 +63,7 @@ const SendMethodPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/web/pages/alerts/severitychangedconditionpart.jsx b/src/web/pages/alerts/severitychangedconditionpart.jsx
index 56cdb27a6e..9b4f5a405c 100644
--- a/src/web/pages/alerts/severitychangedconditionpart.jsx
+++ b/src/web/pages/alerts/severitychangedconditionpart.jsx
@@ -17,9 +17,7 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
 
 import PropTypes from 'web/utils/proptypes';
 import withPrefix from 'web/utils/withPrefix';
@@ -27,6 +25,8 @@ import withPrefix from 'web/utils/withPrefix';
 import Select from 'web/components/form/select';
 import Radio from 'web/components/form/radio';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const VALUE = 'Severity changed';
 
 const SeverityChangedConditionPart = ({
@@ -35,8 +35,9 @@ const SeverityChangedConditionPart = ({
   prefix,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <Divider>
+    <Row>
       <Radio
         title={_('Severity Level')}
         value={VALUE}
@@ -45,6 +46,7 @@ const SeverityChangedConditionPart = ({
         onChange={onChange}
       />
       <Select
+        grow="1"
         items={[
           {
             value: 'changed',
@@ -63,7 +65,7 @@ const SeverityChangedConditionPart = ({
         name={prefix + 'direction'}
         onChange={onChange}
       />
-    </Divider>
+    </Row>
   );
 };
 
diff --git a/src/web/pages/alerts/severityleastconditionpart.jsx b/src/web/pages/alerts/severityleastconditionpart.jsx
index 47110cfa72..da858d11cb 100644
--- a/src/web/pages/alerts/severityleastconditionpart.jsx
+++ b/src/web/pages/alerts/severityleastconditionpart.jsx
@@ -17,9 +17,7 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
 
 import PropTypes from 'web/utils/proptypes';
 import withPrefix from 'web/utils/withPrefix';
@@ -27,6 +25,8 @@ import withPrefix from 'web/utils/withPrefix';
 import Spinner from 'web/components/form/spinner';
 import Radio from 'web/components/form/radio';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const VALUE = 'Severity at least';
 
 const SeverityLeastConditionPart = ({
@@ -35,8 +35,9 @@ const SeverityLeastConditionPart = ({
   prefix,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <Divider>
+    <Row>
       <Radio
         title={_('Severity at least')}
         value={VALUE}
@@ -49,10 +50,9 @@ const SeverityLeastConditionPart = ({
         name={prefix + 'severity'}
         type="float"
         min="0"
-        size="5"
         onChange={onChange}
       />
-    </Divider>
+    </Row>
   );
 };
 
diff --git a/src/web/pages/alerts/smbmethodpart.jsx b/src/web/pages/alerts/smbmethodpart.jsx
index 8815f5aeff..6f107408a7 100644
--- a/src/web/pages/alerts/smbmethodpart.jsx
+++ b/src/web/pages/alerts/smbmethodpart.jsx
@@ -17,17 +17,11 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-import {_l} from 'gmp/locale/lang';
-
 import {
   SMB_CREDENTIAL_TYPES,
   smb_credential_filter,
 } from 'gmp/models/credential';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 
 import {renderSelectItems} from 'web/utils/render';
@@ -39,12 +33,7 @@ import TextField from 'web/components/form/textfield';
 
 import NewIcon from 'web/components/icon/newicon';
 
-const smbMaxProtocolItems = [
-  {label: _l('Default'), value: ''},
-  {label: 'NT1', value: 'NT1'},
-  {label: 'SMB2', value: 'SMB2'},
-  {label: 'SMB3', value: 'SMB3'},
-];
+import useTranslation from 'web/hooks/useTranslation';
 
 const SmbMethodPart = ({
   prefix,
@@ -60,8 +49,16 @@ const SmbMethodPart = ({
   onCredentialChange,
 }) => {
   credentials = credentials.filter(smb_credential_filter);
+  const [_] = useTranslation();
+  const smbMaxProtocolItems = [
+    {label: _('Default'), value: ''},
+    {label: 'NT1', value: 'NT1'},
+    {label: 'SMB2', value: 'SMB2'},
+    {label: 'SMB3', value: 'SMB3'},
+  ];
+
   return (
-    <Layout flex="column" grow="1">
+    <>
       <FormGroup title=" ">
         <span>
           {_(
@@ -72,23 +69,20 @@ const SmbMethodPart = ({
         </span>
       </FormGroup>
 
-      <FormGroup title={_('Credential')}>
-        <Divider>
-          <Select
-            name={prefix + 'smb_credential'}
-            items={renderSelectItems(credentials)}
-            value={smbCredential}
-            onChange={onCredentialChange}
-          />
-          <Layout>
-            <NewIcon
-              size="small"
-              value={SMB_CREDENTIAL_TYPES}
-              title={_('Create a credential')}
-              onClick={onNewCredentialClick}
-            />
-          </Layout>
-        </Divider>
+      <FormGroup title={_('Credential')} direction="row">
+        <Select
+          grow="1"
+          name={prefix + 'smb_credential'}
+          items={renderSelectItems(credentials)}
+          value={smbCredential}
+          onChange={onCredentialChange}
+        />
+        <NewIcon
+          size="small"
+          value={SMB_CREDENTIAL_TYPES}
+          title={_('Create a credential')}
+          onClick={onNewCredentialClick}
+        />
       </FormGroup>
 
       <FormGroup title={_('Share path')}>
@@ -126,7 +120,7 @@ const SmbMethodPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/web/pages/alerts/snmpmethodpart.jsx b/src/web/pages/alerts/snmpmethodpart.jsx
index 2864908a04..7fae5c48c9 100644
--- a/src/web/pages/alerts/snmpmethodpart.jsx
+++ b/src/web/pages/alerts/snmpmethodpart.jsx
@@ -17,16 +17,14 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import withPrefix from 'web/utils/withPrefix';
 
 import FormGroup from 'web/components/form/formgroup';
 import TextField from 'web/components/form/textfield';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const SnmpMethodPart = ({
   prefix,
   snmpAgent,
@@ -34,11 +32,11 @@ const SnmpMethodPart = ({
   snmpMessage,
   onChange,
 }) => {
+  const [_] = useTranslation();
   return (
-    <Layout flex="column" grow="1">
+    <>
       <FormGroup title={_('Community')}>
         <TextField
-          size="30"
           name={prefix + 'snmp_community'}
           value={snmpCommunity}
           onChange={onChange}
@@ -47,7 +45,6 @@ const SnmpMethodPart = ({
 
       <FormGroup title={_('Agent')}>
         <TextField
-          size="30"
           name={prefix + 'snmp_agent'}
           value={snmpAgent}
           onChange={onChange}
@@ -56,13 +53,12 @@ const SnmpMethodPart = ({
 
       <FormGroup title={_('Message')}>
         <TextField
-          size="30"
           name={prefix + 'snmp_message'}
           value={snmpMessage}
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/web/pages/alerts/sourcefiremethodpart.jsx b/src/web/pages/alerts/sourcefiremethodpart.jsx
index bfaa3f6ce6..3135a80569 100644
--- a/src/web/pages/alerts/sourcefiremethodpart.jsx
+++ b/src/web/pages/alerts/sourcefiremethodpart.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {
   PASSWORD_ONLY_CREDENTIAL_TYPE,
   password_only_credential_filter,
@@ -39,6 +37,8 @@ import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems, UNSET_VALUE} from 'web/utils/render';
 import withPrefix from 'web/utils/withPrefix';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const SourcefireMethodPart = ({
   credentials,
   pkcs12Credential,
@@ -49,6 +49,7 @@ const SourcefireMethodPart = ({
   onCredentialChange,
   onNewCredentialClick,
 }) => {
+  const [_] = useTranslation();
   const credentialOptions = credentials.filter(password_only_credential_filter);
   return (
     <Layout flex="column" grow="1">
diff --git a/src/web/pages/alerts/starttaskmethodpart.jsx b/src/web/pages/alerts/starttaskmethodpart.jsx
index 777852616b..5908bbfe25 100644
--- a/src/web/pages/alerts/starttaskmethodpart.jsx
+++ b/src/web/pages/alerts/starttaskmethodpart.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 import withPrefix from 'web/utils/withPrefix';
@@ -26,16 +24,21 @@ import withPrefix from 'web/utils/withPrefix';
 import Select from 'web/components/form/select';
 import FormGroup from 'web/components/form/formgroup';
 
-const StartTaskMethodPart = ({prefix, tasks, startTaskTask, onChange}) => (
-  <FormGroup title={_('Start Task')}>
-    <Select
-      name={prefix + 'start_task_task'}
-      value={startTaskTask}
-      items={renderSelectItems(tasks)}
-      onChange={onChange}
-    />
-  </FormGroup>
-);
+import useTranslation from 'web/hooks/useTranslation';
+
+const StartTaskMethodPart = ({prefix, tasks, startTaskTask, onChange}) => {
+  const [_] = useTranslation();
+  return (
+    <FormGroup title={_('Start Task')}>
+      <Select
+        name={prefix + 'start_task_task'}
+        value={startTaskTask}
+        items={renderSelectItems(tasks)}
+        onChange={onChange}
+      />
+    </FormGroup>
+  );
+};
 
 StartTaskMethodPart.propTypes = {
   prefix: PropTypes.string,
diff --git a/src/web/pages/alerts/taskeventpart.jsx b/src/web/pages/alerts/taskeventpart.jsx
index c6e18cb156..bee003c287 100644
--- a/src/web/pages/alerts/taskeventpart.jsx
+++ b/src/web/pages/alerts/taskeventpart.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {
   EVENT_TYPE_TASK_RUN_STATUS_CHANGED,
   isTaskEvent,
@@ -27,54 +25,60 @@ import {
 import Radio from 'web/components/form/radio';
 import Select from 'web/components/form/select';
 
-import Divider from 'web/components/layout/divider';
+import Row from 'web/components/layout/row';
 
 import PropTypes from 'web/utils/proptypes';
 import withPrefix from 'web/utils/withPrefix';
 
-const TaskEventPart = ({prefix, event, status, onChange, onEventChange}) => (
-  <Divider>
-    <Radio
-      title={_('Task run status changed to')}
-      name="event"
-      value={EVENT_TYPE_TASK_RUN_STATUS_CHANGED}
-      checked={isTaskEvent(event)}
-      onChange={onEventChange}
-    />
-    <Select
-      disabled={!isTaskEvent(event)}
-      items={[
-        {
-          value: 'Done',
-          label: _('Done'),
-        },
-        {
-          value: 'New',
-          label: _('New'),
-        },
-        {
-          value: 'Requested',
-          label: _('Requested'),
-        },
-        {
-          value: 'Running',
-          label: _('Running'),
-        },
-        {
-          value: 'Stop Requested',
-          label: _('Stop Requested'),
-        },
-        {
-          value: 'Stopped',
-          label: _('Stopped'),
-        },
-      ]}
-      name={prefix + 'status'}
-      value={status}
-      onChange={onChange}
-    />
-  </Divider>
-);
+import useTranslation from 'web/hooks/useTranslation';
+
+const TaskEventPart = ({prefix, event, status, onChange, onEventChange}) => {
+  const [_] = useTranslation();
+  return (
+    <Row>
+      <Radio
+        title={_('Task run status changed to')}
+        name="event"
+        value={EVENT_TYPE_TASK_RUN_STATUS_CHANGED}
+        checked={isTaskEvent(event)}
+        onChange={onEventChange}
+      />
+      <Select
+        grow="1"
+        disabled={!isTaskEvent(event)}
+        items={[
+          {
+            value: 'Done',
+            label: _('Done'),
+          },
+          {
+            value: 'New',
+            label: _('New'),
+          },
+          {
+            value: 'Requested',
+            label: _('Requested'),
+          },
+          {
+            value: 'Running',
+            label: _('Running'),
+          },
+          {
+            value: 'Stop Requested',
+            label: _('Stop Requested'),
+          },
+          {
+            value: 'Stopped',
+            label: _('Stopped'),
+          },
+        ]}
+        name={prefix + 'status'}
+        value={status}
+        onChange={onChange}
+      />
+    </Row>
+  );
+};
 
 TaskEventPart.propTypes = {
   event: PropTypes.string.isRequired,
diff --git a/src/web/pages/alerts/ticketeventpart.jsx b/src/web/pages/alerts/ticketeventpart.jsx
index 4967741398..26dc1afd65 100644
--- a/src/web/pages/alerts/ticketeventpart.jsx
+++ b/src/web/pages/alerts/ticketeventpart.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import {_} from 'gmp/locale/lang';
-
 import {
   EVENT_TYPE_TICKET_RECEIVED,
   EVENT_TYPE_OWNED_TICKET_CHANGED,
@@ -27,34 +25,39 @@ import {
 
 import Radio from 'web/components/form/radio';
 
+import Row from 'web/components/layout/row';
+
 import PropTypes from 'web/utils/proptypes';
-import Divider from 'web/components/layout/divider';
+import useTranslation from 'web/hooks/useTranslation';
 
-const TicketEventPart = ({event, onEventChange}) => (
-  <Divider>
-    <Radio
-      title={_('Ticket Received')}
-      name="event"
-      value={EVENT_TYPE_TICKET_RECEIVED}
-      checked={event === EVENT_TYPE_TICKET_RECEIVED}
-      onChange={onEventChange}
-    />
-    <Radio
-      title={_('Assigned Ticket Changed')}
-      name="event"
-      value={EVENT_TYPE_ASSIGNED_TICKET_CHANGED}
-      checked={event === EVENT_TYPE_ASSIGNED_TICKET_CHANGED}
-      onChange={onEventChange}
-    />
-    <Radio
-      title={_('Owned Ticket Changed')}
-      name="event"
-      value={EVENT_TYPE_OWNED_TICKET_CHANGED}
-      checked={event === EVENT_TYPE_OWNED_TICKET_CHANGED}
-      onChange={onEventChange}
-    />
-  </Divider>
-);
+const TicketEventPart = ({event, onEventChange}) => {
+  const [_] = useTranslation();
+  return (
+    <Row>
+      <Radio
+        title={_('Ticket Received')}
+        name="event"
+        value={EVENT_TYPE_TICKET_RECEIVED}
+        checked={event === EVENT_TYPE_TICKET_RECEIVED}
+        onChange={onEventChange}
+      />
+      <Radio
+        title={_('Assigned Ticket Changed')}
+        name="event"
+        value={EVENT_TYPE_ASSIGNED_TICKET_CHANGED}
+        checked={event === EVENT_TYPE_ASSIGNED_TICKET_CHANGED}
+        onChange={onEventChange}
+      />
+      <Radio
+        title={_('Owned Ticket Changed')}
+        name="event"
+        value={EVENT_TYPE_OWNED_TICKET_CHANGED}
+        checked={event === EVENT_TYPE_OWNED_TICKET_CHANGED}
+        onChange={onEventChange}
+      />
+    </Row>
+  );
+};
 
 TicketEventPart.propTypes = {
   event: PropTypes.string.isRequired,
diff --git a/src/web/pages/alerts/tippingpointmethodpart.jsx b/src/web/pages/alerts/tippingpointmethodpart.jsx
index a385f8daef..20faab50fb 100644
--- a/src/web/pages/alerts/tippingpointmethodpart.jsx
+++ b/src/web/pages/alerts/tippingpointmethodpart.jsx
@@ -17,8 +17,6 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {USERNAME_PASSWORD_CREDENTIAL_TYPE} from 'gmp/models/credential';
 
 import {renderSelectItems} from 'web/utils/render';
@@ -34,8 +32,7 @@ import YesNoRadio from 'web/components/form/yesnoradio';
 
 import NewIcon from 'web/components/icon/newicon';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
+import useTranslation from 'web/hooks/useTranslation';
 
 const TIPPINGPOINT_CREDENTIAL_TYPES = [USERNAME_PASSWORD_CREDENTIAL_TYPE];
 
@@ -49,37 +46,34 @@ const TippingPointMethodPart = ({
   onCredentialChange,
   onNewCredentialClick,
 }) => {
+  const [_] = useTranslation();
   credentials = credentials.filter(
     cred => cred.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE,
   );
   return (
-    <Layout flex="column" grow="1">
+    <>
       <FormGroup title={_('Hostname / IP')}>
         <TextField
           grow="1"
-          size="30"
           name={prefix + 'tp_sms_hostname'}
           value={tpSmsHostname}
           onChange={onChange}
         />
       </FormGroup>
-      <FormGroup title={_('Credential')}>
-        <Divider>
-          <Select
-            items={renderSelectItems(credentials)}
-            name={prefix + 'tp_sms_credential'}
-            value={tpSmsCredential}
-            onChange={onCredentialChange}
-          />
-          <Layout>
-            <NewIcon
-              size="small"
-              title={_('Create a credential')}
-              value={TIPPINGPOINT_CREDENTIAL_TYPES}
-              onClick={onNewCredentialClick}
-            />
-          </Layout>
-        </Divider>
+      <FormGroup title={_('Credential')} direction="row">
+        <Select
+          grow="1"
+          items={renderSelectItems(credentials)}
+          name={prefix + 'tp_sms_credential'}
+          value={tpSmsCredential}
+          onChange={onCredentialChange}
+        />
+        <NewIcon
+          size="small"
+          title={_('Create a credential')}
+          value={TIPPINGPOINT_CREDENTIAL_TYPES}
+          onClick={onNewCredentialClick}
+        />
       </FormGroup>
       <FormGroup title={_('SSL / TLS Certificate')}>
         <FileField
@@ -94,7 +88,7 @@ const TippingPointMethodPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };
 
diff --git a/src/web/pages/alerts/verinicemethodpart.jsx b/src/web/pages/alerts/verinicemethodpart.jsx
index a68b6ee32f..98b2892961 100644
--- a/src/web/pages/alerts/verinicemethodpart.jsx
+++ b/src/web/pages/alerts/verinicemethodpart.jsx
@@ -17,13 +17,8 @@
  */
 import React from 'react';
 
-import _ from 'gmp/locale';
-
 import {USERNAME_PASSWORD_CREDENTIAL_TYPE} from 'gmp/models/credential';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
 import PropTypes from 'web/utils/proptypes';
 import {renderSelectItems} from 'web/utils/render';
 import withPrefix from 'web/utils/withPrefix';
@@ -34,6 +29,8 @@ import TextField from 'web/components/form/textfield';
 
 import NewIcon from 'web/components/icon/newicon';
 
+import useTranslation from 'web/hooks/useTranslation';
+
 const VERINICE_CREDENTIAL_TYPES = [USERNAME_PASSWORD_CREDENTIAL_TYPE];
 
 const VeriniceMethodPart = ({
@@ -47,39 +44,36 @@ const VeriniceMethodPart = ({
   onCredentialChange,
   onNewCredentialClick,
 }) => {
+  const [_] = useTranslation();
   reportFormats = reportFormats.filter(format => format.extension === 'vna');
   credentials = credentials.filter(
     cred => cred.credential_type === USERNAME_PASSWORD_CREDENTIAL_TYPE,
   );
   return (
-    <Layout flex="column" grow="1">
+    <>
       <FormGroup title={_('verinice.PRO URL')}>
         <TextField
           grow="1"
-          size="30"
           name={prefix + 'verinice_server_url'}
           value={veriniceServerUrl}
           onChange={onChange}
         />
       </FormGroup>
 
-      <FormGroup title={_('Credential')}>
-        <Divider>
-          <Select
-            name={prefix + 'verinice_server_credential'}
-            items={renderSelectItems(credentials)}
-            value={veriniceServerCredential}
-            onChange={onCredentialChange}
-          />
-          <Layout>
-            <NewIcon
-              size="small"
-              title={_('Create a credential')}
-              value={VERINICE_CREDENTIAL_TYPES}
-              onClick={onNewCredentialClick}
-            />
-          </Layout>
-        </Divider>
+      <FormGroup title={_('Credential')} direction="row">
+        <Select
+          grow="1"
+          name={prefix + 'verinice_server_credential'}
+          items={renderSelectItems(credentials)}
+          value={veriniceServerCredential}
+          onChange={onCredentialChange}
+        />
+        <NewIcon
+          size="small"
+          title={_('Create a credential')}
+          value={VERINICE_CREDENTIAL_TYPES}
+          onClick={onNewCredentialClick}
+        />
       </FormGroup>
 
       <FormGroup title={_('verinice.PRO Report')}>
@@ -90,7 +84,7 @@ const VeriniceMethodPart = ({
           onChange={onChange}
         />
       </FormGroup>
-    </Layout>
+    </>
   );
 };