chore: [TECH-1541] Replace Material UI Dialog

cypress/e2e/SearchPage/index.js

@@ -81,7 +81,6 @@ When('you can close the modal', () => {
         .contains('Back to search')
         .click();
     cy.get('[data-test="dhis2-uicore-modal"]')
-        .contains('No results found')
         .should('not.exist');
 });
 

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule.feature

@@ -1,8 +1,10 @@
 Feature: The user interacts with the widgets Schedule tab
 
+    # Blocked by DHIS2-16229
+    @skip
     Scenario: User cancel after choose a schedule date in schedule tab
         Given you land on the enrollment add event page by having typed #/enrollmentEventNew?programId=IpHINAT79UW&orgUnitId=DiszpKrYNg8&teiId=EaOyKGOIGRp&enrollmentId=wBU0RAsYjKE&stageId=A03MvHHogjR&tab=SCHEDULE
         Then you should see Schedule tab
         Then you choose a schedule date
         When you click cancel in Schedule tab
-        Then you should see confirm dialog
+        Then you should see confirm dialog

cypress/e2e/WidgetsForEnrollmentPages/WidgetsForEventSchedule/index.js

@@ -18,7 +18,7 @@ When('you click cancel in Schedule tab', () => {
 });
 
 Then('you should see confirm dialog', () => {
-    cy.get('[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .find('[data-test="dhis2-uicore-modaltitle"]')
         .contains('Discard unsaved changes?')
         .should('exist');

cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js

@@ -148,12 +148,12 @@ When('you open the column selector', () => {
 });
 
 When('you select Household location and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Household location')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });

cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser.feature

@@ -1,5 +1,13 @@
 Feature: User interacts with tei working lists
 
+  Scenario: The TEI custom working can be shared
+    Given you open the main page with Ngelehun and Malaria focus investigation context
+    And you see the custom TEI working lists
+    And you can load the view with the name Events assigned to me
+    And you create a copy of the working list
+    When you change the sharing settings
+    Then you see the new sharing settings
+
 Scenario: User opens the default working list for a tracker program
 Given you open the main page with Ngelehun and child programme context
 Then the default working list should be displayed
@@ -81,7 +89,7 @@ When you change rows per page to 10
 Then the list should display 10 rows of data
 And for a tracker program the page navigation should show that you are on the first page
 
-Scenario: Show teis ordered ascendingly by first name 
+Scenario: Show teis ordered ascendingly by first name
 Given you open the main page with Ngelehun and child programme context
 When you click the first name column header
 Then the sort arrow should indicate ascending order
@@ -93,13 +101,7 @@ Given you open the main page with Ngelehun and Malaria focus investigation conte
 Then you see the custom TEI working lists
 And you can load the view with the name Events assigned to me
 
-Scenario: The TEI custom working can be shared
-Given you open the main page with Ngelehun and Malaria focus investigation context
-And you see the custom TEI working lists
-And you can load the view with the name Events assigned to me
-And you create a copy of the working list
-When you change the sharing settings
-Then you see the new sharing settings
+
 
 Scenario: The user creates, updates and deletes a TEI custom working list
 Given you open the main page with Ngelehun and Malaria case diagnosis context
@@ -139,7 +141,7 @@ And you select a data element columns and save from the column selector
 Then you see data elements specific filters and columns
 
 @v>=39
-Scenario: While in a program stage working list, the user can filter by both TEA and data elements 
+Scenario: While in a program stage working list, the user can filter by both TEA and data elements
 Given you open the main page with Ngelehun, WHO RMNCH Tracker and First antenatal care visit context
 When you set the enrollment status filter to active
 And you apply the current filter
@@ -152,7 +154,7 @@ And you apply the current filter
 Then the list should display 1 row of data
 
 @v>=39
-Scenario: While in a program stage working list, the user can sort by both TEA and data elements 
+Scenario: While in a program stage working list, the user can sort by both TEA and data elements
 Given you open the main page with Ngelehun, WHO RMNCH Tracker and First antenatal care visit context
 And you set the first name filter to u
 And you apply the current filter

cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js

@@ -246,12 +246,12 @@ When('you open the column selector', () => {
 });
 
 When('you select the registering unit and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Registering unit')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
@@ -544,27 +544,32 @@ Then('you see the new sharing settings', () => {
         .click();
 });
 
-When('you create a copy of the working list', () => {
-    cy.get('[data-test="list-view-menu-button"]')
-        .click();
+When('you create a copy of the working list',
+    () => {
+        cy.get('[data-test="list-view-menu-button"]')
+            .click();
 
-    cy.contains('Save current view as')
-        .click();
+        cy.contains('Save current view as')
+            .click();
 
-    const id = uuid();
-    cy.get('[data-test="view-name-content"]')
-        .type(id);
+        const id = uuid();
+        cy.get('[data-test="view-name-content"]')
+            .type(id);
 
-    cy.intercept('POST', '**/trackedEntityInstanceFilters**').as('newTrackerFilter');
+        cy.intercept('POST', '**/trackedEntityInstanceFilters**')
+            .as('newTrackerFilter');
 
-    cy.get('button')
-        .contains('Save')
-        .click();
+        cy.get('[data-test="new-template-dialog"]')
+            .within(() => {
+                cy.get('[data-test="dhis2-uicore-button"]')
+                    .contains('Save')
+                    .click();
+            });
 
-    cy.wait('@newTrackerFilter', { timeout: 30000 });
+        cy.wait('@newTrackerFilter', { timeout: 30000 });
 
-    cy.reload();
-});
+        cy.reload();
+    });
 
 When('you open the program stage filters from the more filters dropdown menu', () => {
     cy.get('[data-test="tei-working-lists"]')
@@ -602,12 +607,12 @@ When('you select the Foci response program stage', () => {
 });
 
 When('you select a data element columns and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('People included')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
@@ -663,12 +668,12 @@ Then('you see scheduledAt filter', () => {
 });
 
 When('you select a scheduledAt column and save from the column selector', () => {
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Appointment date')
         .find('input')
         .click();
 
-    cy.get('div[role="dialog"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });

src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js

@@ -2,10 +2,7 @@
 import React, { type ComponentType } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import i18n from '@dhis2/d2-i18n';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogActions from '@material-ui/core/DialogActions';
-import { Button } from '@dhis2/ui';
+import { Button, ModalContent, ModalTitle, ModalActions } from '@dhis2/ui';
 import { CardList } from '../../../CardList';
 import type { Props } from './existingTeiContents.types';
 
@@ -35,18 +32,18 @@ const ExistingTEIContentsComponentPlain = ({
 
     return (
         <React.Fragment>
-            <DialogContent>
-                <DialogTitle>
+            <ModalContent>
+                <ModalTitle>
                     {i18n.t('Registered person')}
-                </DialogTitle>
+                </ModalTitle>
                 <CardList
                     currentProgramId={programId}
                     // $FlowFixMe
                     items={items}
                     dataElements={dataElements}
                 />
-            </DialogContent>
-            <DialogActions>
+            </ModalContent>
+            <ModalActions>
                 <Button
                     onClick={onCancel}
                     secondary
@@ -61,7 +58,7 @@ const ExistingTEIContentsComponentPlain = ({
                         />
                     </div>
                 )}
-            </DialogActions>
+            </ModalActions>
         </React.Fragment>
     );
 };

src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react';
-import Dialog from '@material-ui/core/Dialog';
+import { Modal } from '@dhis2/ui';
 import { ExistingTEILoader } from './ExistingTEILoader.container';
 
 type Props = {
@@ -10,16 +10,18 @@ type Props = {
 
 export const ExistingTEIDialog = (props: Props) => {
     const { open, ...passOnProps } = props;
+    if (!open) {
+        return null;
+    }
+
     return (
-        <Dialog
-            fullWidth
-            maxWidth={'md'}
-            open={open}
+        <Modal
+            hide={!open}
             onClose={props.onCancel}
         >
             <ExistingTEILoader
                 {...passOnProps}
             />
-        </Dialog>
+        </Modal>
     );
 };

src/core_modules/capture-core/components/DataEntry/withAskToCreateNew.js

@@ -47,41 +47,47 @@ const askToCreateNewComponent = (InnerComponent: React.ComponentType<any>) =>
             }
         }
 
-        renderAskToCreateNewModal = () => (
-            <Modal
-                hide={!this.state.isOpen}
-                dataTest="modal-ask-to-create-new"
-            >
-                <ModalTitle>
-                    {i18n.t('Generate new event')}
-                </ModalTitle>
-                <ModalContent>
-                    {i18n.t('Do you want to create another event?')}
-                </ModalContent>
-                <ModalActions>
-                    <ButtonStrip end>
-                        <Button
-                            onClick={() => {
-                                this.props.onCancelCreateNew(this.props.itemId);
-                                this.setState({ isOpen: false });
-                            }}
-                            secondary
-                        >
-                            {i18n.t('No, cancel')}
-                        </Button>
-                        <Button
-                            onClick={() => {
-                                this.props.onConfirmCreateNew(this.props.itemId);
-                                this.setState({ isOpen: false });
-                            }}
-                            primary
-                        >
-                            {i18n.t('Yes, create new event')}
-                        </Button>
-                    </ButtonStrip>
-                </ModalActions>
-            </Modal>
-        )
+        renderAskToCreateNewModal = () => {
+            if (!this.state.isOpen) {
+                return null;
+            }
+
+            return (
+                <Modal
+                    hide={!this.state.isOpen}
+                    dataTest="modal-ask-to-create-new"
+                >
+                    <ModalTitle>
+                        {i18n.t('Generate new event')}
+                    </ModalTitle>
+                    <ModalContent>
+                        {i18n.t('Do you want to create another event?')}
+                    </ModalContent>
+                    <ModalActions>
+                        <ButtonStrip end>
+                            <Button
+                                onClick={() => {
+                                    this.props.onCancelCreateNew(this.props.itemId);
+                                    this.setState({ isOpen: false });
+                                }}
+                                secondary
+                            >
+                                {i18n.t('No, cancel')}
+                            </Button>
+                            <Button
+                                onClick={() => {
+                                    this.props.onConfirmCreateNew(this.props.itemId);
+                                    this.setState({ isOpen: false });
+                                }}
+                                primary
+                            >
+                                {i18n.t('Yes, create new event')}
+                            </Button>
+                        </ButtonStrip>
+                    </ModalActions>
+                </Modal>
+            );
+        }
 
         render() {
             const { onSave, ...passOnProps } = this.props;

src/core_modules/capture-core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js

@@ -1,12 +1,8 @@
 // @flow
 import * as React from 'react';
 import { withStyles } from '@material-ui/core';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
 import i18n from '@dhis2/d2-i18n';
-import { Button } from '@dhis2/ui';
+import { Button, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
 
 const getStyles = (theme: Theme) => ({
     errors: {
@@ -134,17 +130,15 @@ class ErrorAndWarningDialogPlain extends React.Component<Props> {
     render() {
         return (
             <React.Fragment>
-                <DialogTitle id="save-dialog-errors-and-warnings-title">
+                <ModalTitle id="save-dialog-errors-and-warnings-title">
                     {i18n.t('Validation errors and warnings')}
-                </DialogTitle>
-                <DialogContent>
-                    <DialogContentText>
-                        {this.getContents()}
-                    </DialogContentText>
-                </DialogContent>
-                <DialogActions>
+                </ModalTitle>
+                <ModalContent>
+                    {this.getContents()}
+                </ModalContent>
+                <ModalActions>
                     {this.getButtons()}
-                </DialogActions>
+                </ModalActions>
             </React.Fragment>
         );
     }