From f09d50130b7becad1ce8499cdd4256ec403077a2 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <SteRiccio@users.noreply.github.com>
Date: Fri, 22 Sep 2023 14:49:32 +0200
Subject: [PATCH] code cleanup

---
 webapp/components/modal.js                    | 19 +++++++++++++++++--
 .../ImportSummary/ImportSummary.js            | 13 +++++++------
 .../components/nodeDefEntitySelectorDialog.js | 11 +++++++----
 .../components/nodeDefMultipleEditDialog.js   |  6 ++----
 webapp/views/App/JobMonitor/JobMonitor.js     |  8 ++------
 .../RecordsCloneModal/RecordsCloneModal.js    |  8 ++------
 .../Routes/DialogConfirm/DialogConfirm.js     | 13 ++++++-------
 7 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/webapp/components/modal.js b/webapp/components/modal.js
index cc83824204..b70638d082 100644
--- a/webapp/components/modal.js
+++ b/webapp/components/modal.js
@@ -6,6 +6,7 @@ import MuiModal from '@mui/material/Modal'
 import Fade from '@mui/material/Fade'
 
 import { TestId } from '@webapp/utils/testId'
+import { useI18n } from '@webapp/store/system'
 
 export const ModalClose = ({ _children, onClose }) => (
   <div className="modal-close" onClick={() => onClose()}>
@@ -20,7 +21,9 @@ export const ModalBody = ({ children }) => <div className="modal-body">{children
 export const ModalFooter = ({ children }) => <div className="modal-footer">{children}</div>
 
 export const Modal = (props) => {
-  const { children, className, closeOnEsc, onClose: onCloseProp } = props
+  const { children, className, closeOnEsc, onClose: onCloseProp, showCloseButton, title, titleParams } = props
+
+  const i18n = useI18n()
 
   const onClose = useCallback(
     (event) => {
@@ -38,7 +41,15 @@ export const Modal = (props) => {
       open
     >
       <Fade in timeout={500}>
-        <div className="modal-content">{children}</div>
+        <div className="modal-content">
+          {(title || showCloseButton) && (
+            <ModalHeader>
+              {title && <span>{i18n.t(title, titleParams)}</span>}
+              {showCloseButton && <ModalClose onClose={onClose} />}
+            </ModalHeader>
+          )}
+          {children}
+        </div>
       </Fade>
     </MuiModal>
   )
@@ -49,9 +60,13 @@ Modal.propTypes = {
   className: PropTypes.string,
   closeOnEsc: PropTypes.bool,
   onClose: PropTypes.func,
+  title: PropTypes.string,
+  titleParams: PropTypes.object,
+  showCloseButton: PropTypes.bool,
 }
 
 Modal.defaultProps = {
   className: '',
   closeOnEsc: true,
+  showCloseButton: false,
 }
diff --git a/webapp/components/survey/CategoryDetails/ImportSummary/ImportSummary.js b/webapp/components/survey/CategoryDetails/ImportSummary/ImportSummary.js
index 8c1cc6570d..6d3b378743 100644
--- a/webapp/components/survey/CategoryDetails/ImportSummary/ImportSummary.js
+++ b/webapp/components/survey/CategoryDetails/ImportSummary/ImportSummary.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types'
 
 import * as CategoryImportSummary from '@core/survey/categoryImportSummary'
 
-import { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader } from '@webapp/components/modal'
+import { Modal, ModalBody, ModalFooter } from '@webapp/components/modal'
 import { Button } from '@webapp/components/buttons'
 import { useI18n } from '@webapp/store/system'
 
@@ -24,11 +24,12 @@ const ImportSummary = (props) => {
   const items = CategoryImportSummary.getItems(importSummary)
 
   return (
-    <Modal className="category__import-summary" onClose={Actions.hideImportSummary}>
-      <ModalHeader>
-        <span>{i18n.t('categoryEdit.importSummary.title')}</span>
-        <ModalClose onClose={Actions.hideImportSummary} />
-      </ModalHeader>
+    <Modal
+      className="category__import-summary"
+      onClose={Actions.hideImportSummary}
+      showCloseButton
+      title="categoryEdit.importSummary.title"
+    >
       <ModalBody>
         <div className="table">
           <div className="table__content">
diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefEntitySelectorDialog.js b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefEntitySelectorDialog.js
index 21a53862bd..72f9e03f1a 100644
--- a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefEntitySelectorDialog.js
+++ b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefEntitySelectorDialog.js
@@ -8,7 +8,7 @@ import { useI18n } from '@webapp/store/system'
 import { useSurvey } from '@webapp/store/survey'
 
 import { Button } from '@webapp/components/buttons'
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@webapp/components/modal'
+import { Modal, ModalBody, ModalFooter } from '@webapp/components/modal'
 import { EntitySelector } from '@webapp/components/survey/NodeDefsSelector'
 import { FormItem } from '@webapp/components/form/Input'
 
@@ -45,9 +45,12 @@ export const NodeDefEntitySelectorDialog = (props) => {
     !selectedEntityDefUuid || (isEntitySelectable && !isEntitySelectable?.(selectedEntityDefUuid))
 
   return (
-    <Modal className="survey-form__node-def-entity-selector-dialog" onClose={onClose}>
-      <ModalHeader>{i18n.t(title, { nodeDefName: NodeDef.getName(currentNodeDef) })}</ModalHeader>
-
+    <Modal
+      className="survey-form__node-def-entity-selector-dialog"
+      onClose={onClose}
+      title={title}
+      titleParams={{ nodeDefName: NodeDef.getName(currentNodeDef) }}
+    >
       <ModalBody>
         <FormItem label={i18n.t(entitySelectLabel)}>
           <EntitySelector
diff --git a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefMultipleEditDialog.js b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefMultipleEditDialog.js
index 413cc22b16..b12dfa57c9 100644
--- a/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefMultipleEditDialog.js
+++ b/webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefMultipleEditDialog.js
@@ -3,7 +3,7 @@ import './nodeDefMultipleEditDialog.scss'
 import React from 'react'
 
 import { useI18n } from '@webapp/store/system'
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@webapp/components/modal'
+import { Modal, ModalBody, ModalFooter } from '@webapp/components/modal'
 
 import * as NodeDefUiProps from '../nodeDefUIProps'
 
@@ -13,9 +13,7 @@ const NodeDefMultipleEditDialog = (props) => {
   const i18n = useI18n()
 
   return (
-    <Modal className="survey-form__node-def-multiple-edit-dialog" onClose={onClose}>
-      <ModalHeader>{label}</ModalHeader>
-
+    <Modal className="survey-form__node-def-multiple-edit-dialog" onClose={onClose} title={label}>
       <ModalBody>{React.createElement(NodeDefUiProps.getComponent(nodeDef), props)}</ModalBody>
 
       <ModalFooter>
diff --git a/webapp/views/App/JobMonitor/JobMonitor.js b/webapp/views/App/JobMonitor/JobMonitor.js
index 452a176cef..615ab5140b 100644
--- a/webapp/views/App/JobMonitor/JobMonitor.js
+++ b/webapp/views/App/JobMonitor/JobMonitor.js
@@ -5,11 +5,10 @@ import { useDispatch } from 'react-redux'
 
 import * as JobSerialized from '@common/job/jobSerialized'
 
-import { useI18n } from '@webapp/store/system'
 import { useJob, JobActions } from '@webapp/store/app'
 
 import { Button } from '@webapp/components/buttons'
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@webapp/components/modal'
+import { Modal, ModalBody, ModalFooter } from '@webapp/components/modal'
 
 import InnerJobs from './InnerJobs'
 import JobErrors from './JobErrors'
@@ -24,7 +23,6 @@ const getCustomCloseButtonComponent = ({ closeButton, job }) => {
 
 const JobMonitor = () => {
   const dispatch = useDispatch()
-  const i18n = useI18n()
   const { job, closeButton, errorKeyHeaderName, errorsExportFileName } = useJob()
 
   if (!job || JobSerialized.isCanceled(job)) return null
@@ -34,9 +32,7 @@ const JobMonitor = () => {
   const jobEnded = JobSerialized.isEnded(job)
 
   return (
-    <Modal className="app-job-monitor" closeOnEsc={false}>
-      <ModalHeader>{i18n.t(`jobs.${JobSerialized.getType(job)}`)}</ModalHeader>
-
+    <Modal className="app-job-monitor" closeOnEsc={false} title={`jobs.${JobSerialized.getType(job)}`}>
       <ModalBody>
         <JobProgress job={job} />
         <JobErrors
diff --git a/webapp/views/App/views/Data/RecordsCloneModal/RecordsCloneModal.js b/webapp/views/App/views/Data/RecordsCloneModal/RecordsCloneModal.js
index 55553935d4..32536b0bb7 100644
--- a/webapp/views/App/views/Data/RecordsCloneModal/RecordsCloneModal.js
+++ b/webapp/views/App/views/Data/RecordsCloneModal/RecordsCloneModal.js
@@ -7,7 +7,7 @@ import { Objects } from '@openforis/arena-core'
 
 import { RecordCycle } from '@core/record/recordCycle'
 
-import { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader } from '@webapp/components/modal'
+import { Modal, ModalBody, ModalFooter } from '@webapp/components/modal'
 import { Button, RadioButtonGroup } from '@webapp/components'
 import { FormItem } from '@webapp/components/form/Input'
 import CycleSelector from '@webapp/components/survey/CycleSelector'
@@ -100,11 +100,7 @@ export const RecordsCloneModal = (props) => {
   }
 
   return (
-    <Modal className="records-clone" onClose={onClose}>
-      <ModalHeader>
-        <span>{i18n.t('dataView.recordsClone.title')}</span>
-        <ModalClose onClose={onClose} />
-      </ModalHeader>
+    <Modal className="records-clone" onClose={onClose} showCloseButton title="dataView.recordsClone.title">
       <ModalBody>
         <FormItem label={i18n.t('dataView.recordsClone.fromCycle')}>{cycleFromLabel}</FormItem>
         <FormItem label={i18n.t('dataView.recordsClone.toCycle')}>
diff --git a/webapp/views/Arena/Routes/DialogConfirm/DialogConfirm.js b/webapp/views/Arena/Routes/DialogConfirm/DialogConfirm.js
index c401f2dd50..eab26f8f75 100644
--- a/webapp/views/Arena/Routes/DialogConfirm/DialogConfirm.js
+++ b/webapp/views/Arena/Routes/DialogConfirm/DialogConfirm.js
@@ -6,7 +6,7 @@ import classNames from 'classnames'
 
 import { DialogConfirmActions, useDialogConfirm } from '@webapp/store/ui'
 
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@webapp/components/modal'
+import { Modal, ModalBody, ModalFooter } from '@webapp/components/modal'
 import { useI18n } from '@webapp/store/system'
 import Markdown from '@webapp/components/markdown'
 import { TestId } from '@webapp/utils/testId'
@@ -29,12 +29,11 @@ const DialogConfirm = () => {
   } = useDialogConfirm()
 
   return key ? (
-    <Modal className="dialog-confirm" onClose={() => dispatch(DialogConfirmActions.onDialogConfirmCancel())}>
-      {headerText && (
-        <ModalHeader>
-          <h5 className="dialog-confirm__header">{i18n.t(headerText)}</h5>
-        </ModalHeader>
-      )}
+    <Modal
+      className="dialog-confirm"
+      onClose={() => dispatch(DialogConfirmActions.onDialogConfirmCancel())}
+      title={headerText}
+    >
       <ModalBody>
         <Markdown className={headerText ? 'highlight' : undefined} source={i18n.t(key, params)} />