Change: Rework dialog components to use Modal as base

Update Dialog component to use the Model component from opensight for improved UI.
greenbone · Jun 6, 2024 · 2abf16e · 2abf16e
1 parent 43601a4
commit 2abf16e
Show file tree

Hide file tree

Showing 9 changed files with 174 additions and 400 deletions.
diff --git a/src/web/components/dialog/composercontent.jsx b/src/web/components/dialog/composercontent.jsx
@@ -20,19 +20,15 @@ import React from 'react';
 
 import styled from 'styled-components';
 
-import _ from 'gmp/locale';
-
 import {NO_VALUE, YES_VALUE} from 'gmp/parser';
 
 import PropTypes from 'web/utils/proptypes';
+import Theme from 'web/utils/theme';
 
 import CheckBox from 'web/components/form/checkbox';
 import FormGroup from 'web/components/form/formgroup';
 
-import Divider from 'web/components/layout/divider';
-import Layout from 'web/components/layout/layout';
-
-import Theme from 'web/utils/theme';
+import useTranslation from 'web/hooks/useTranslation';
 
 export const COMPOSER_CONTENT_DEFAULTS = {
   includeNotes: YES_VALUE,
@@ -52,20 +48,24 @@ const FilterField = styled.div`
 `;
 
 const ComposerContent = ({
-  filterFieldTitle = _(
-    'To change the filter, please filter your results on the report page. This filter will not be stored as default.',
-  ),
+  filterFieldTitle,
   filterString,
   includeNotes,
   includeOverrides,
   onValueChange,
-}) => (
-  <Layout flex="column">
-    <FormGroup title={_('Results Filter')} titleSize="3">
-      <FilterField title={filterFieldTitle}>{filterString}</FilterField>
-    </FormGroup>
-    <FormGroup title={_('Include')} titleSize="3">
-      <Divider>
+}) => {
+  const [_] = useTranslation();
+  filterFieldTitle =
+    filterFieldTitle ||
+    _(
+      'To change the filter, please filter your results on the report page. This filter will not be stored as default.',
+    );
+  return (
+    <>
+      <FormGroup title={_('Results Filter')}>
+        <FilterField title={filterFieldTitle}>{filterString}</FilterField>
+      </FormGroup>
+      <FormGroup title={_('Include')} direction="row">
         <CheckBox
           data-testid="includeNotes"
           name="includeNotes"
@@ -93,10 +93,10 @@ const ComposerContent = ({
           toolTipTitle={_('TLS Certificates are always included for now')}
           onChange={onValueChange}
         />
-      </Divider>
-    </FormGroup>
-  </Layout>
-);
+      </FormGroup>
+    </>
+  );
+};
 
 ComposerContent.propTypes = {
   filterFieldTitle: PropTypes.string,

diff --git a/src/web/components/dialog/confirmationdialog.jsx b/src/web/components/dialog/confirmationdialog.jsx
@@ -15,40 +15,36 @@
  * 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 React from 'react';
-
-import _ from 'gmp/locale';
+import React, {useCallback} from 'react';
 
 import PropTypes from 'web/utils/proptypes';
 
 import Dialog from 'web/components/dialog/dialog';
 import DialogContent from 'web/components/dialog/content';
-import ScrollableContent from 'web/components/dialog/scrollablecontent';
-import DialogTitle from 'web/components/dialog/title';
 import DialogTwoButtonFooter from 'web/components/dialog/twobuttonfooter';
 
-const DEFAULT_DIALOG_WIDTH = '400px';
+import useTranslation from 'web/hooks/useTranslation';
 
-const ConfirmationDialogContent = props => {
-  const handleResume = () => {
-    const {onResumeClick} = props;
+const DEFAULT_DIALOG_WIDTH = '400px';
 
+const ConfirmationDialogContent = ({
+  content,
+  close,
+  rightButtonTitle,
+  onResumeClick,
+}) => {
+  const handleResume = useCallback(() => {
     if (onResumeClick) {
       onResumeClick();
     }
-  };
-
-  const {content, moveprops, title, rightButtonTitle} = props;
+  }, [onResumeClick]);
 
   return (
     <DialogContent>
-      <DialogTitle title={title} onCloseClick={props.close} {...moveprops} />
-      <ScrollableContent data-testid="confirmationdialog-content">
-        {content}
-      </ScrollableContent>
+      {content}
       <DialogTwoButtonFooter
         rightButtonTitle={rightButtonTitle}
-        onLeftButtonClick={props.close}
+        onLeftButtonClick={close}
         onRightButtonClick={handleResume}
       />
     </DialogContent>
@@ -58,7 +54,6 @@ const ConfirmationDialogContent = props => {
 ConfirmationDialogContent.propTypes = {
   close: PropTypes.func.isRequired,
   content: PropTypes.elementOrString,
-  moveprops: PropTypes.object,
   rightButtonTitle: PropTypes.string,
   title: PropTypes.string.isRequired,
   onResumeClick: PropTypes.func.isRequired,
@@ -68,18 +63,19 @@ const ConfirmationDialog = ({
   width = DEFAULT_DIALOG_WIDTH,
   content,
   title,
-  rightButtonTitle = _('OK'),
+  rightButtonTitle,
   onClose,
   onResumeClick,
 }) => {
+  const [_] = useTranslation();
+
+  rightButtonTitle = rightButtonTitle || _('OK');
   return (
-    <Dialog width={width} onClose={onClose} resizable={false}>
-      {({close, moveProps}) => (
+    <Dialog width={width} onClose={onClose} title={title}>
+      {({close}) => (
         <ConfirmationDialogContent
           close={close}
-          moveprops={moveProps}
           content={content}
-          title={title}
           rightButtonTitle={rightButtonTitle}
           onResumeClick={onResumeClick}
         />
@@ -98,5 +94,3 @@ ConfirmationDialog.propTypes = {
 };
 
 export default ConfirmationDialog;
-
-// vim: set ts=2 sw=2 tw=80:
diff --git a/src/web/components/dialog/content.jsx b/src/web/components/dialog/content.jsx
@@ -18,17 +18,12 @@
 
 import styled from 'styled-components';
 
-import Theme from 'web/utils/theme';
-
 const DialogContent = styled.div`
   display: flex;
   flex-direction: column;
   height: inherit;
   padding: 0;
-  background: ${Theme.white};
-  box-shadow: 5px 5px 10px ${Theme.mediumGray};
-  border-radius: 3px;
-  border: 1px solid ${Theme.mediumGray};
+  gap: 20px;
 `;
 
 export default DialogContent;