From d5e3cd0965cc4733dde86085b58a25bae9a3f8ec Mon Sep 17 00:00:00 2001 From: eirikhaugstulen Date: Thu, 30 Nov 2023 14:11:15 +0100 Subject: [PATCH] chore: handle modal render logic in app --- .../EventWorkingListsUser/index.js | 4 +- .../TeiWorkingListsUser/index.js | 8 +- .../ExistingTEIDialog.component.js | 4 + .../DataEntry/withAskToCreateNew.js | 76 ++++++++++--------- .../withSaveHandler/withSaveHandler.js | 52 +++++++------ .../Dialogs/DiscardDialog.component.js | 50 ++++++------ .../FeedbackBar/FeedbackBar.component.js | 36 ++++----- .../ColumnSelectorDialog.component.js | 4 + .../PossibleDuplicatesDialog.component.js | 4 + .../DataEntry/withDeleteButton.js | 61 ++++++++------- .../DownloadDialog.component.js | 5 ++ .../DeleteConfirmationDialog.component.js | 4 + .../ExistingTemplateDialog.component.js | 4 + .../NewTemplateDialog.component.js | 4 + 14 files changed, 184 insertions(+), 132 deletions(-) diff --git a/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js b/cypress/e2e/WorkingLists/EventWorkingLists/EventWorkingListsUser/index.js index d16c2a84d7..79dd1acad6 100644 --- 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 index 465b37619f..c6adb4c683 100644 --- 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/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js b/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js index 63d7d2d317..5a5505b3c8 100644 --- a/src/core_modules/capture-core/components/DataEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js +++ b/src/core_modules/capture-core/components/DataEntries/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 ( ) => } } - renderAskToCreateNewModal = () => ( - - - {i18n.t('Generate new event')} - - - {i18n.t('Do you want to create another event?')} - - - - - - - - - ) + renderAskToCreateNewModal = () => { + if (!this.state.isOpen) { + return null; + } + + return ( + + + {i18n.t('Generate new event')} + + + {i18n.t('Do you want to create another event?')} + + + + + + + + + ); + } 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 index b17256fb98..a58549fd2b 100644 --- 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} /> - - - - - - {i18n.t('Operations running')} - - - {this.getDialogWaitForUploadContents()} - - + {this.state.messagesDialogOpen && ( + + + + )} + {this.state.waitForPromisesDialogOpen && ( + + + {i18n.t('Operations running')} + + + {this.getDialogWaitForUploadContents()} + + + )} ); } diff --git a/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js b/src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js index 1e745f1899..926637ec0a 100644 --- 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) => ( - - - {header} - - -
- {text} -
- - - - - - - - -); +}: Props) => { + if (!open) { + return null; + } + + return ( + + + {header} + + +
+ {text} +
+ + + + + + + + + ); +}; diff --git a/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js b/src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js index 80fdee4a14..f4406742cc 100644 --- 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 { message={{message}} action={this.getAction()} /> - - - { + {isDialogOpen && ( + + + { // $FlowFixMe[prop-missing] automated comment - isDialogOpen ? message && message.title : ''} - - - { + isDialogOpen ? message && message.title : ''} + + + { // $FlowFixMe[prop-missing] automated comment - isDialogOpen ? message && message.content : ''} - - - - - + isDialogOpen ? message && message.content : ''} + + + + + + )} ); } diff --git a/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js b/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js index 8cb866827c..ff0bad9c19 100644 --- a/src/core_modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js +++ b/src/core_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 ( { render() { const { open, onCancel, extraActions, selectedScopeId, dataEntryId, renderCardActions } = this.props; + if (!open) { + return null; + } + return ( ) => {i18n.t('Delete')} - - - {i18n.t('Delete event')} - - - {i18n.t('Deleting an event is permanent and cannot be undone.' + ' ' + - 'Are you sure you want to delete this event? ')} - - - - - - - - + {this.state.isOpen && ( + + + {i18n.t('Delete event')} + + + {i18n.t('Deleting an event is permanent and cannot be undone.' + ' ' + + 'Are you sure you want to delete this event? ')} + + + + + + + + + )} ) : null ) 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 8a8603dd86..0ed117534b 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 @@ -79,6 +79,11 @@ class DownloadDialogPlain extends PureComponent { } render() { const { open, onClose } = this.props; + + if (!open) { + return null; + } + return ( { classes, } = props; + if (!open) { + return null; + } + return ( { onSaveTemplate, } = props; + if (!open) { + return null; + } + return ( { onSaveTemplate, } = props; + if (!open) { + return null; + } + return (