Layout adjustments (surveys list, category import modal)

webapp/components/form/TextInput.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { TextField as MuiTextField } from '@mui/material'
 import classNames from 'classnames'
 
+import { useI18n } from '@webapp/store/system'
+
 export const TextInput = (props) => {
   const {
     autoComplete,
@@ -11,17 +13,19 @@ export const TextInput = (props) => {
     disabled,
     endAdornment,
     id,
-    label,
+    label: labelProp,
     name,
     onChange: onChangeProp,
-    placeholder,
+    placeholder: placeholderProp,
     readOnly,
     startAdornment,
     textTransformFunction,
     type,
     value,
   } = props
 
+  const i18n = useI18n()
+
   const onChange = useCallback(
     (e) => {
       const value = e.target.value
@@ -31,6 +35,9 @@ export const TextInput = (props) => {
     [onChangeProp, textTransformFunction]
   )
 
+  const label = labelProp ? i18n.t(labelProp) : labelProp
+  const placeholder = placeholderProp ? i18n.t(placeholderProp) : placeholderProp
+
   return (
     <MuiTextField
       autoComplete={autoComplete}

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,
 }

webapp/components/survey/CategoryDetails/ImportSummary/ImportSummary.js

@@ -5,9 +5,8 @@ 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'
 
 import TableHeader from './TableHeader'
 import TableRow from './TableRow'
@@ -17,18 +16,18 @@ import { State, useActions } from '../store'
 const ImportSummary = (props) => {
   const { state, setState } = props
 
-  const i18n = useI18n()
   const Actions = useActions({ setState })
 
   const importSummary = State.getImportSummary(state)
   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">

webapp/components/survey/CategoryDetails/ImportSummary/ImportSummary.scss

@@ -1,7 +1,4 @@
 .category__import-summary {
-  display: grid;
-  grid-template-rows: 1fr 50px;
-
   .modal-header {
     display: grid;
     grid-template-columns: 1fr auto;

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

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>

webapp/components/survey/Surveys/HeaderLeft/HeaderLeft.js

@@ -4,23 +4,26 @@ import PropTypes from 'prop-types'
 import { useI18n } from '@webapp/store/system'
 
 import { FormItem } from '@webapp/components/form/Input'
+import { TextInput } from '@webapp/components/form'
 
 const HeaderLeft = (props) => {
   const { handleSearch, search } = props
 
   const i18n = useI18n()
 
   return (
-    <header>
+    <div>
       <FormItem label={i18n.t('surveysView.filter')}>
-        <input
+        <TextInput
           className="surveys__header-left__input-search"
-          placeholder={i18n.t('surveysView.filterPlaceholder')}
           defaultValue={search}
-          onChange={(e) => handleSearch(e.target.value)}
+          onChange={(val) => {
+            handleSearch(val)
+          }}
+          placeholder="surveysView.filterPlaceholder"
         />
       </FormItem>
-    </header>
+    </div>
   )
 }
 

webapp/components/survey/Surveys/Surveys.scss

@@ -1,9 +1,10 @@
 .table.surveys {
-  header {
+  .table__header {
     column-gap: 5rem;
 
     input {
-      width: 20rem;
+      width: 25rem;
+      padding: 0.5rem;
     }
   }
 }

webapp/style/table.scss

@@ -1,6 +1,6 @@
 @import 'webapp/style/vars';
 
-$tableHeaderHeight: 40px;
+$tableHeaderHeight: 50px;
 $tableFooterHeight: 30px;
 
 .table {
@@ -13,6 +13,7 @@ $tableFooterHeight: 30px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: $tableHeaderHeight;
 }
 
 .table__content {

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

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')}>

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)} />