chore: handle modal render logic in app

dhis2 · Nov 30, 2023 · d5e3cd0 · d5e3cd0
1 parent 3fd14c2
commit d5e3cd0
Show file tree

Hide file tree

Showing 14 changed files with 184 additions and 132 deletions.
diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js b/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();
 });

diff --git a/cypress/e2e/WorkingLists/TeiWorkingLists/TeiWorkingListsUser/index.js b/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('[data-test="dhis2-uicore-modal"]')
+    cy.get('aside[role="dialog"]')
         .contains('Registering unit')
         .find('input')
         .click();
 
-    cy.get('[data-test="dhis2-uicore-modal"]')
+    cy.get('aside[role="dialog"]')
         .contains('Save')
         .click();
 });
@@ -522,9 +522,7 @@ When('you change the sharing settings', () => {
     cy.contains('Select a level').click();
     cy.get('[data-test="dhis2-uicore-popper"]').contains('View and edit').click({ force: true });
     cy.get('[data-test="dhis2-uicore-button"]').contains('Give access').click({ force: true });
-    cy.get('[data-test="sharing-dialog"]').within(() => {
-        cy.get('[data-test="dhis2-uicore-button"]').contains('Close').click({ force: true });
-    });
+    cy.get('[data-test="dhis2-uicore-button"]').contains('Close').click({ force: true });
 });
 
 Then('you see the new sharing settings', () => {

diff --git a/...taEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js b/...taEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js
@@ -10,6 +10,10 @@ type Props = {
 
 export const ExistingTEIDialog = (props: Props) => {
     const { open, ...passOnProps } = props;
+    if (!open) {
+        return null;
+    }
+
     return (
         <Modal
             hide={!open}

diff --git a/src/core_modules/capture-core/components/DataEntry/withAskToCreateNew.js b/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;

diff --git a/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js b/src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js
@@ -245,30 +245,34 @@ const getSaveHandler = (
                         onSave={this.handleSaveAttempt}
                         {...filteredProps}
                     />
-                    <Modal
-                        hide={!this.state.messagesDialogOpen}
-                        onClose={this.handleAbortDialog}
-                    >
-                        <MessagesDialogContents
-                            open={this.state.messagesDialogOpen}
-                            onAbort={this.handleAbortDialog}
-                            onSave={this.handleSaveDialog}
-                            errors={errors}
-                            warnings={warnings}
-                            isCompleting={this.isCompleting}
-                            validationStrategy={calculatedFoundation.validationStrategy}
-                        />
-                    </Modal>
-                    <Modal
-                        hide={!this.state.waitForPromisesDialogOpen}
-                    >
-                        <ModalTitle>
-                            {i18n.t('Operations running')}
-                        </ModalTitle>
-                        <ModalContent>
-                            {this.getDialogWaitForUploadContents()}
-                        </ModalContent>
-                    </Modal>
+                    {this.state.messagesDialogOpen && (
+                        <Modal
+                            hide={!this.state.messagesDialogOpen}
+                            onClose={this.handleAbortDialog}
+                        >
+                            <MessagesDialogContents
+                                open={this.state.messagesDialogOpen}
+                                onAbort={this.handleAbortDialog}
+                                onSave={this.handleSaveDialog}
+                                errors={errors}
+                                warnings={warnings}
+                                isCompleting={this.isCompleting}
+                                validationStrategy={calculatedFoundation.validationStrategy}
+                            />
+                        </Modal>
+                    )}
+                    {this.state.waitForPromisesDialogOpen && (
+                        <Modal
+                            hide={!this.state.waitForPromisesDialogOpen}
+                        >
+                            <ModalTitle>
+                                {i18n.t('Operations running')}
+                            </ModalTitle>
+                            <ModalContent>
+                                {this.getDialogWaitForUploadContents()}
+                            </ModalContent>
+                        </Modal>
+                    )}
                 </div>
             );
         }

diff --git a/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js b/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js
@@ -5,26 +5,32 @@ import type { Props } from './discardDialog.types';
 
 export const DiscardDialog = ({
     open, header, text, cancelText, onCancel, destructiveText, onDestroy,
-}: Props) => (
-    <Modal hide={!open} onClose={onCancel} small>
-        <ModalTitle>
-            {header}
-        </ModalTitle>
-        <ModalContent>
-            <div style={{ margin: '5px 0' }}>
-                {text}
-            </div>
-        </ModalContent>
-        <ModalActions>
-            <ButtonStrip end>
-                <Button onClick={onCancel} secondary>
-                    {cancelText}
-                </Button>
-                <Button onClick={onDestroy} destructive>
-                    {destructiveText}
-                </Button>
-            </ButtonStrip>
-        </ModalActions>
-    </Modal>
-);
+}: Props) => {
+    if (!open) {
+        return null;
+    }
+
+    return (
+        <Modal hide={!open} onClose={onCancel} small>
+            <ModalTitle>
+                {header}
+            </ModalTitle>
+            <ModalContent>
+                <div style={{ margin: '5px 0' }}>
+                    {text}
+                </div>
+            </ModalContent>
+            <ModalActions>
+                <ButtonStrip end>
+                    <Button onClick={onCancel} secondary>
+                        {cancelText}
+                    </Button>
+                    <Button onClick={onDestroy} destructive>
+                        {destructiveText}
+                    </Button>
+                </ButtonStrip>
+            </ModalActions>
+        </Modal>
+    );
+};
 
diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
@@ -96,25 +96,27 @@ class Index extends React.Component<Props> {
                     message={<span>{message}</span>}
                     action={this.getAction()}
                 />
-                <Modal
-                    hide={!isDialogOpen}
-                >
-                    <ModalTitle>
-                        {
+                {isDialogOpen && (
+                    <Modal
+                        hide={!isDialogOpen}
+                    >
+                        <ModalTitle>
+                            {
                             // $FlowFixMe[prop-missing] automated comment
-                            isDialogOpen ? message && message.title : ''}
-                    </ModalTitle>
-                    <ModalContent>
-                        {
+                                isDialogOpen ? message && message.title : ''}
+                        </ModalTitle>
+                        <ModalContent>
+                            {
                             // $FlowFixMe[prop-missing] automated comment
-                            isDialogOpen ? message && message.content : ''}
-                    </ModalContent>
-                    <ModalActions>
-                        <Button onClick={this.handleClose} primary>
-                            {i18n.t('Close')}
-                        </Button>
-                    </ModalActions>
-                </Modal>
+                                isDialogOpen ? message && message.content : ''}
+                        </ModalContent>
+                        <ModalActions>
+                            <Button onClick={this.handleClose} primary>
+                                {i18n.t('Close')}
+                            </Button>
+                        </ModalActions>
+                    </Modal>
+                )}
             </React.Fragment>
         );
     }

diff --git a/...modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js b/...modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js
@@ -36,6 +36,10 @@ export const ColumnSelectorDialog = ({ columns, open, onClose, onSave }: Props)
         setColumnList(sortedList);
     };
 
+    if (!open) {
+        return null;
+    }
+
     return (
         <span>
             <Modal

diff --git a/...es/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js b/...es/capture-core/components/PossibleDuplicatesDialog/PossibleDuplicatesDialog.component.js
@@ -17,6 +17,10 @@ class ReviewDialogClass extends React.Component<Props > {
     render() {
         const { open, onCancel, extraActions, selectedScopeId, dataEntryId, renderCardActions } = this.props;
 
+        if (!open) {
+            return null;
+        }
+
         return (
             <Modal
                 hide={!open}

diff --git a/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withDeleteButton.js b/src/core_modules/capture-core/components/WidgetEventEdit/DataEntry/withDeleteButton.js
@@ -39,33 +39,40 @@ const getDeleteButton = (InnerComponent: React.ComponentType<any>) =>
                     {i18n.t('Delete')}
                 </Button>
 
-                <Modal
-                    hide={!this.state.isOpen}
-                >
-                    <ModalTitle>
-                        {i18n.t('Delete event')}
-                    </ModalTitle>
-                    <ModalContent>
-                        {i18n.t('Deleting an event is permanent and cannot be undone.' + ' ' +
-                        'Are you sure you want to delete this event? ')}
-                    </ModalContent>
-                    <ModalActions>
-                        <ButtonStrip end>
-                            <Button onClick={() => { this.setState({ isOpen: false }); }} secondary>
-                                {i18n.t('No, cancel')}
-                            </Button>
-                            <Button
-                                onClick={() => {
-                                    this.props.onDelete();
-                                    this.setState({ isOpen: false });
-                                }}
-                                destructive
-                            >
-                                {i18n.t('Yes, delete event')}
-                            </Button>
-                        </ButtonStrip>
-                    </ModalActions>
-                </Modal>
+                {this.state.isOpen && (
+                    <Modal
+                        hide={!this.state.isOpen}
+                    >
+                        <ModalTitle>
+                            {i18n.t('Delete event')}
+                        </ModalTitle>
+                        <ModalContent>
+                            {i18n.t('Deleting an event is permanent and cannot be undone.' + ' ' +
+                                'Are you sure you want to delete this event? ')}
+                        </ModalContent>
+                        <ModalActions>
+                            <ButtonStrip end>
+                                <Button
+                                    onClick={() => {
+                                        this.setState({ isOpen: false });
+                                    }}
+                                    secondary
+                                >
+                                    {i18n.t('No, cancel')}
+                                </Button>
+                                <Button
+                                    onClick={() => {
+                                        this.props.onDelete();
+                                        this.setState({ isOpen: false });
+                                    }}
+                                    destructive
+                                >
+                                    {i18n.t('Yes, delete event')}
+                                </Button>
+                            </ButtonStrip>
+                        </ModalActions>
+                    </Modal>
+                )}
             </div>
             ) : null
         )

diff --git a/...s/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js b/...s/WorkingLists/EventWorkingLists/ViewMenuSetup/DownloadDialog/DownloadDialog.component.js
@@ -79,6 +79,11 @@ class DownloadDialogPlain extends PureComponent<Props & CssClasses> {
     }
     render() {
         const { open, onClose } = this.props;
+
+        if (!open) {
+            return null;
+        }
+
         return (
             <span>
                 <Modal