Update and improve layout of alert dialog

greenbone · Apr 30, 2024 · e760cc0 · e760cc0
1 parent fc66ce7
commit e760cc0
Show file tree

Hide file tree

Showing 23 changed files with 570 additions and 619 deletions.
diff --git 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
@@ -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
@@ -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>
   );
 };