From e868c0bf4b8d65fb5c4a483a16489884e34ef711 Mon Sep 17 00:00:00 2001
From: eirikhaugstulen <eirik.haugstulen@gmail.com>
Date: Wed, 8 Nov 2023 10:56:24 +0100
Subject: [PATCH] chore: update remaining

---
 .../TeiWorkingListsUser/index.js              |  2 +-
 .../PolygonField/PolygonField.component.js    |  9 +++--
 .../DownloadDialog.component.js               | 21 +++++------
 .../DeleteConfirmationDialog.component.js     | 23 +++++-------
 .../ExistingTemplateContents.component.js     | 11 +++---
 .../ExistingTemplateDialog.component.js       | 10 ++---
 .../NewTemplateContents.component.js          | 13 +++----
 .../NewTemplateDialog.component.js            | 10 ++---
 .../CoordinateField.component.js              |  2 +-
 .../coordinateField.module.css                |  1 -
 .../PolygonField/PolygonField.component.js    | 37 +++++++++++++++----
 .../PolygonField/polygonField.module.css      |  5 ++-
 12 files changed, 80 insertions(+), 64 deletions(-)

diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
index 1c1574e25d..84b09cc540 100644
--- a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
+++ b/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js
@@ -557,7 +557,7 @@ When('you create a copy of the working list', () => {
 
     cy.intercept('POST', '**/trackedEntityInstanceFilters**').as('newTrackerFilter');
 
-    cy.get('button')
+    cy.get('[data-test="dhis2-uicore-button"]')
         .contains('Save')
         .click();
 
diff --git a/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js b/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js
index 058d82c9c9..47831a9a47 100644
--- a/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js
+++ b/src/core_modules/capture-core/components/FormFields/New/Fields/PolygonField/PolygonField.component.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import withStyles from '@material-ui/core/styles/withStyles';
 import { PolygonField as UIPolygonField } from 'capture-ui';
-import { Dialog, DialogTitle } from '@material-ui/core';
+import { Modal, ModalTitle } from '@dhis2/ui';
 import { typeof orientations } from '../../../New';
 
 const getStyles = () => ({
@@ -44,11 +44,12 @@ class PolygonFieldPlain extends React.Component<Props> {
             // $FlowFixMe[cannot-spread-inexact] automated comment
             <UIPolygonField
                 mapDialog={
-                    <Dialog
+                    <Modal
                         classes={this.dialogClasses}
+                        large
                     >
-                        <DialogTitle key="title">{dialogLabel}</DialogTitle>
-                    </Dialog>
+                        <ModalTitle key="title">{dialogLabel}</ModalTitle>
+                    </Modal>
                 }
                 {...passOnProps}
             />
diff --git a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
index fc79445ce2..8a8603dd86 100644
--- a/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
@@ -3,8 +3,7 @@
 import React, { PureComponent, type ComponentType } from 'react';
 import i18n from '@dhis2/d2-i18n';
 import { withStyles } from '@material-ui/core/styles';
-import { Dialog, DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
-import { Button } from '@dhis2/ui';
+import { Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import type { Props } from './downloadDialog.types';
 
 const getStyles = () => ({
@@ -82,21 +81,21 @@ class DownloadDialogPlain extends PureComponent<Props & CssClasses> {
         const { open, onClose } = this.props;
         return (
             <span>
-                <Dialog
-                    open={!!open}
+                <Modal
+                    hide={!open}
                     onClose={onClose}
-                    fullWidth
+                    position={'center'}
                 >
-                    <DialogTitle>{i18n.t('Download with current filters')}</DialogTitle>
-                    <DialogContent>
+                    <ModalTitle>{i18n.t('Download with current filters')}</ModalTitle>
+                    <ModalContent>
                         {this.renderButtons()}
-                    </DialogContent>
-                    <DialogActions>
+                    </ModalContent>
+                    <ModalActions>
                         <Button onClick={onClose} color="primary">
                             {i18n.t('Close')}
                         </Button>
-                    </DialogActions>
-                </Dialog>
+                    </ModalActions>
+                </Modal>
             </span>
         );
     }
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js
index 137dab9b63..ef26a8e7db 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/DeleteConfirmationDialog.component.js
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@material-ui/core';
-import { Button } from '@dhis2/ui';
+import { Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = () => ({
     buttonContainer: {
@@ -30,17 +29,15 @@ const DeleteConfirmationDialogPlain = (props: Props) => {
     } = props;
 
     return (
-        <Dialog
-            open={open}
+        <Modal
+            hide={!open}
             onClose={onClose}
         >
-            <DialogTitle>{i18n.t('Delete view')}</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    {i18n.t('Do you really want to delete the \'{{templateName}}\' view?', { templateName })}
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions
+            <ModalTitle>{i18n.t('Delete view')}</ModalTitle>
+            <ModalContent>
+                {i18n.t('Do you really want to delete the \'{{templateName}}\' view?', { templateName })}
+            </ModalContent>
+            <ModalActions
                 className={classes.buttonContainer}
             >
                 <Button onClick={onClose}>
@@ -49,8 +46,8 @@ const DeleteConfirmationDialogPlain = (props: Props) => {
                 <Button onClick={onDeleteTemplate} primary>
                     {i18n.t('Confirm')}
                 </Button>
-            </DialogActions>
-        </Dialog>
+            </ModalActions>
+        </Modal>
     );
 };
 
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js
index 28b526c2cb..0efef529f0 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateContents.component.js
@@ -2,8 +2,7 @@
 import * as React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = () => ({
     buttonContainer: {
@@ -22,9 +21,9 @@ const ExistingTemplateContentsPlain = (props: Props) => {
     const { onSaveTemplate, onClose, classes } = props;
     return (
         <React.Fragment>
-            <DialogTitle>{i18n.t('Save')}</DialogTitle>
-            <DialogContent />
-            <DialogActions
+            <ModalTitle>{i18n.t('Save')}</ModalTitle>
+            <ModalContent />
+            <ModalActions
                 className={classes.buttonContainer}
             >
                 <Button onClick={onClose}>
@@ -33,7 +32,7 @@ const ExistingTemplateContentsPlain = (props: Props) => {
                 <Button onClick={onSaveTemplate} primary>
                     {i18n.t('Save')}
                 </Button>
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js
index e8e1af626e..7f37e09761 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/ExistingTemplateDialog.component.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { Dialog } from '@material-ui/core';
+import { Modal } from '@dhis2/ui';
 import { ExistingTemplateContents } from './ExistingTemplateContents.component';
 
 type Props = {
@@ -17,15 +17,15 @@ export const ExistingTemplateDialog = (props: Props) => {
     } = props;
 
     return (
-        <Dialog
-            open={open}
+        <Modal
+            hide={!open}
             onClose={onClose}
-            fullWidth
+            position={'center'}
         >
             <ExistingTemplateContents
                 onSaveTemplate={onSaveTemplate}
                 onClose={onClose}
             />
-        </Dialog>
+        </Modal>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js
index 460069e359..c064f74893 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateContents.component.js
@@ -1,9 +1,8 @@
 // @flow
 import * as React from 'react';
-import { colors, Button } from '@dhis2/ui';
+import { colors, Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import { DialogTitle, DialogContent, DialogActions } from '@material-ui/core';
 import { NewTemplateTextField } from './NewTemplateTextField.component';
 
 const getStyles = (theme: Theme) => ({
@@ -46,8 +45,8 @@ const NewTemplateContentsPlain = (props: Props) => {
 
     return (
         <React.Fragment>
-            <DialogTitle>{i18n.t('Save As view')}</DialogTitle>
-            <DialogContent>
+            <ModalTitle>{i18n.t('Save As view')}</ModalTitle>
+            <ModalContent>
                 <NewTemplateTextField
                     onBlur={nameBlurHandler}
                     className={classes.input}
@@ -64,8 +63,8 @@ const NewTemplateContentsPlain = (props: Props) => {
                 >
                     {error}
                 </div>
-            </DialogContent>
-            <DialogActions
+            </ModalContent>
+            <ModalActions
                 className={classes.buttonContainer}
             >
                 <Button onClick={onClose}>
@@ -74,7 +73,7 @@ const NewTemplateContentsPlain = (props: Props) => {
                 <Button onClick={handleSave} primary>
                     {i18n.t('Save')}
                 </Button>
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };
diff --git a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js
index d10a394168..be40bd8671 100644
--- a/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js
+++ b/src/core_modules/capture-core/components/WorkingLists/WorkingListsBase/TemplateMaintenance/NewTemplateDialog.component.js
@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { Dialog } from '@material-ui/core';
+import { Modal } from '@dhis2/ui';
 import { NewTemplateContents } from './NewTemplateContents.component';
 
 type Props = {
@@ -17,15 +17,15 @@ export const NewTemplateDialog = (props: Props) => {
     } = props;
 
     return (
-        <Dialog
-            open={open}
+        <Modal
+            hide={!open}
             onClose={onClose}
-            fullWidth
+            position={'center'}
         >
             <NewTemplateContents
                 onSaveTemplate={onSaveTemplate}
                 onClose={onClose}
             />
-        </Dialog>
+        </Modal>
     );
 };
diff --git a/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js b/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js
index ef3c0e7b47..568cb0cedc 100644
--- a/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js
+++ b/src/core_modules/capture-ui/CoordinateField/CoordinateField.component.js
@@ -182,7 +182,7 @@ export class CoordinateField extends React.Component<Props, State> {
                     key="map"
                     ref={(mapInstance) => { this.setMapInstance(mapInstance); }}
                 >
-                    <WrappedLeafletSearch position="topright" inputPlaceholder="Search" closeResultsOnClick search={null} mapStateModifier={this.search} showMarker={false} />
+                    <WrappedLeafletSearch position="topleft" inputPlaceholder="Search" closeResultsOnClick search={null} mapStateModifier={this.search} showMarker={false} />
                     <TileLayer
                         url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
                         attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
diff --git a/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css b/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css
index 9be9f06878..9f5709617c 100644
--- a/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css
+++ b/src/core_modules/capture-ui/CoordinateField/coordinateField.module.css
@@ -74,7 +74,6 @@
     width: 100%;
 }
 
-/*Really cant get this map to work - need to have a look*/
 .dialogContent {
     display: flex;
     height: 600px;
diff --git a/src/core_modules/capture-ui/PolygonField/PolygonField.component.js b/src/core_modules/capture-ui/PolygonField/PolygonField.component.js
index fd2bfe043a..7ef585a16c 100644
--- a/src/core_modules/capture-ui/PolygonField/PolygonField.component.js
+++ b/src/core_modules/capture-ui/PolygonField/PolygonField.component.js
@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import i18n from '@dhis2/d2-i18n';
-import { IconCheckmark16, IconLocation16, colors, Button } from '@dhis2/ui';
+import { IconCheckmark16, IconLocation16, colors, Button, ModalContent, ModalActions } from '@dhis2/ui';
 import L from 'leaflet';
 import { Map, TileLayer, FeatureGroup, withLeaflet } from 'react-leaflet';
 import { ReactLeafletSearch } from 'react-leaflet-search-unpolyfilled';
@@ -62,6 +62,8 @@ function coordsToFeatureCollection(coordinates): ?FeatureCollection {
 }
 
 export class PolygonField extends React.Component<Props, State> {
+    mapInstance: ?any;
+
     static defaultProps = {
         mapCenter: [51.505, -0.09],
     }
@@ -75,6 +77,13 @@ export class PolygonField extends React.Component<Props, State> {
         };
     }
 
+    componentDidUpdate() {
+        // Invalidate map size to fix rendering bug
+        if (this.mapInstance && this.state.showMap) {
+            this.mapInstance.leafletElement.invalidateSize();
+        }
+    }
+
     onFeatureGroupReady = (reactFGref: any, featureCollection: ?FeatureCollection) => {
         if (featureCollection) {
             const leafletGeoJSON = new L.GeoJSON(featureCollection);
@@ -134,19 +143,25 @@ export class PolygonField extends React.Component<Props, State> {
         this.closeMap();
     }
 
+    setMapInstance = (mapInstance: any) => {
+        this.mapInstance = mapInstance;
+    }
+
     renderMapDialog = () => {
         const clonedDialog = React.cloneElement(
 
             // $FlowFixMe[incompatible-type] automated comment
             this.props.mapDialog,
-            { open: this.state.showMap, onClose: this.closeMap },
+            { hide: !this.state.showMap, onClose: this.closeMap },
 
             // $FlowFixMe[incompatible-use] automated comment
             [...React.Children.toArray(this.props.mapDialog.props.children), (
-                <div className={defaultClasses.dialogContent} key="dialogContent">
-                    {this.renderMap()}
+                <>
+                    <ModalContent className={defaultClasses.dialogContent} key="dialogContent">
+                        {this.renderMap()}
+                    </ModalContent>
                     {this.renderDialogActions()}
-                </div>
+                </>
             )],
         );
         return clonedDialog;
@@ -159,7 +174,13 @@ export class PolygonField extends React.Component<Props, State> {
         const center = this.getCenter(featureCollection);
         return (
             <div className={defaultClasses.mapContainer}>
-                <Map zoom={zoom} center={center} className={defaultClasses.map} key="map">
+                <Map
+                    zoom={zoom}
+                    center={center}
+                    className={defaultClasses.map}
+                    key="map"
+                    ref={(mapInstance) => { this.setMapInstance(mapInstance); }}
+                >
                     <WrappedLeafletSearch position="topleft" inputPlaceholder="Search" closeResultsOnClick />
                     <TileLayer
                         url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
@@ -190,7 +211,7 @@ export class PolygonField extends React.Component<Props, State> {
     }
 
     renderDialogActions = () => (
-        <div className={defaultClasses.dialogActionOuterContainer}>
+        <ModalActions className={defaultClasses.dialogActionOuterContainer}>
             <div className={defaultClasses.dialogActionInnerContainer}>
                 {/* $FlowFixMe[prop-missing] automated comment */}
                 <Button secondary onClick={this.closeMap}>
@@ -203,7 +224,7 @@ export class PolygonField extends React.Component<Props, State> {
                     {i18n.t('Set area')}
                 </Button>
             </div>
-        </div>
+        </ModalActions>
     );
 
     render() {
diff --git a/src/core_modules/capture-ui/PolygonField/polygonField.module.css b/src/core_modules/capture-ui/PolygonField/polygonField.module.css
index 3aa0c0454f..f4fa6c640e 100644
--- a/src/core_modules/capture-ui/PolygonField/polygonField.module.css
+++ b/src/core_modules/capture-ui/PolygonField/polygonField.module.css
@@ -21,6 +21,8 @@
 .mapContainer {
     flex-grow: 1;
     position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .map {
@@ -30,9 +32,8 @@
 }
 
 .dialogContent {
-    flex-grow: 1;
     display: flex;
     flex-direction: column;
-    padding: 0px 24px 24px 24px;
+    height: 600px;
 }