Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: [TECH-1541] Replace Material UI Dialog #3460

Merged
merged 9 commits into from
Dec 7, 2023
Merged

chore: [TECH-1541] Replace Material UI Dialog #3460

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
304ca78
chore: replace mui dialog
eirikhaugstulen Nov 5, 2023
c42160c
chore: fix map resizing
eirikhaugstulen Nov 6, 2023
e868c0b
chore: update remaining
eirikhaugstulen Nov 8, 2023
2916968
chore: temp
eirikhaugstulen Nov 14, 2023
9419e82
chore: temp
eirikhaugstulen Nov 15, 2023
3fd14c2
Merge remote-tracking branch 'origin/master' into eh/TECH/TECH-1541_R…
eirikhaugstulen Nov 30, 2023
d5e3cd0
chore: handle modal render logic in app
eirikhaugstulen Nov 30, 2023
6a895f6
Merge remote-tracking branch 'origin/master' into eh/TECH/TECH-1541_R…
eirikhaugstulen Nov 30, 2023
853dcc1
chore: tests
eirikhaugstulen Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 7 additions & 10 deletions ...Entries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIContents.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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
Expand All @@ -61,7 +58,7 @@ const ExistingTEIContentsComponentPlain = ({
/>
</div>
)}
</DialogActions>
</ModalActions>
</React.Fragment>
);
};
Expand Down
10 changes: 4 additions & 6 deletions ...taEntries/withErrorMessagePostProcessor/UniqueTEADuplicate/ExistingTEIDialog.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -11,15 +11,13 @@ type Props = {
export const ExistingTEIDialog = (props: Props) => {
const { open, ...passOnProps } = props;
return (
<Dialog
fullWidth
maxWidth={'md'}
open={open}
<Modal
hide={!open}
onClose={props.onCancel}
>
<ExistingTEILoader
{...passOnProps}
/>
</Dialog>
</Modal>
);
};
22 changes: 8 additions & 14 deletions ...nents/DataEntry/withSaveHandler/MessagesDialogContents/ErrorAndWarningDialog.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: {
Expand Down Expand Up @@ -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>
);
}
Expand Down
24 changes: 9 additions & 15 deletions ...core/components/DataEntry/withSaveHandler/MessagesDialogContents/ErrorDialog.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
// @flow
import * as React from 'react';
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';
import { withStyles } from '@material-ui/core';

type Props = {
Expand Down Expand Up @@ -52,7 +48,7 @@ class ErrorDialogPlain extends React.Component<Props> {
const { onAbort, onSave, saveEnabled, classes } = this.props;

return (
<div style={{ margin: '0 20px 12px 20px' }}>
<div>
<Button onClick={onAbort} color="primary">
{i18n.t('Back to form')}
</Button>
Expand All @@ -73,17 +69,15 @@ class ErrorDialogPlain extends React.Component<Props> {
render() {
return (
<React.Fragment>
<DialogTitle id="save-dialog-errors-title">
<ModalTitle id="save-dialog-errors-title">
{i18n.t('Validation errors')}
</DialogTitle>
<DialogContent>
<DialogContentText>
{this.getContents()}
</DialogContentText>
</DialogContent>
<DialogActions>
</ModalTitle>
<ModalContent>
{this.getContents()}
</ModalContent>
<ModalActions>
{this.getButtons()}
</DialogActions>
</ModalActions>
</React.Fragment>
);
}
Expand Down
22 changes: 8 additions & 14 deletions ...re/components/DataEntry/withSaveHandler/MessagesDialogContents/WarningDialog.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
// @flow
import * as React from 'react';
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';
import { withStyles } from '@material-ui/core';

type Props = {
Expand Down Expand Up @@ -51,15 +47,13 @@ class WarningDialogPlain extends React.Component<Props> {
const { onAbort, onSave, classes } = this.props;
return (
<React.Fragment>
<DialogTitle id="save-dialog-errors-and-warnings-title">
<ModalTitle id="save-dialog-errors-and-warnings-title">
{i18n.t('Validation warnings')}
</DialogTitle>
<DialogContent>
<DialogContentText>
{this.getContents()}
</DialogContentText>
</DialogContent>
<DialogActions>
</ModalTitle>
<ModalContent>
{this.getContents()}
</ModalContent>
<ModalActions>
<div style={{ margin: '0 20px 12px 20px' }}>
<Button onClick={onAbort} color="primary">
{i18n.t('Back to form')}
Expand All @@ -73,7 +67,7 @@ class WarningDialogPlain extends React.Component<Props> {
{i18n.t('Save anyway')}
</Button>
</div>
</DialogActions>
</ModalActions>
</React.Fragment>
);
}
Expand Down
29 changes: 12 additions & 17 deletions src/core_modules/capture-core/components/DataEntry/withSaveHandler/withSaveHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,7 @@
// @flow
import * as React from 'react';
import log from 'loglevel';
import Dialog from '@material-ui/core/Dialog';
import DialogContent from '@material-ui/core/DialogContent';
import DialogContentText from '@material-ui/core/DialogContentText';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Modal, ModalContent, ModalTitle } from '@dhis2/ui';
import { connect } from 'react-redux';
import i18n from '@dhis2/d2-i18n';
import { errorCreator } from 'capture-core-utils';
Expand Down Expand Up @@ -248,8 +245,8 @@ const getSaveHandler = (
onSave={this.handleSaveAttempt}
{...filteredProps}
/>
<Dialog
open={this.state.messagesDialogOpen}
<Modal
hide={!this.state.messagesDialogOpen}
onClose={this.handleAbortDialog}
>
<MessagesDialogContents
Expand All @@ -261,19 +258,17 @@ const getSaveHandler = (
isCompleting={this.isCompleting}
validationStrategy={calculatedFoundation.validationStrategy}
/>
</Dialog>
<Dialog
open={this.state.waitForPromisesDialogOpen}
</Modal>
<Modal
hide={!this.state.waitForPromisesDialogOpen}
>
<DialogTitle>
<ModalTitle>
{i18n.t('Operations running')}
</DialogTitle>
<DialogContent>
<DialogContentText>
{this.getDialogWaitForUploadContents()}
</DialogContentText>
</DialogContent>
</Dialog>
</ModalTitle>
<ModalContent>
{this.getDialogWaitForUploadContents()}
</ModalContent>
</Modal>
</div>
);
}
Expand Down
4 changes: 3 additions & 1 deletion src/core_modules/capture-core/components/Dialogs/DiscardDialog.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ export const DiscardDialog = ({
{header}
</ModalTitle>
<ModalContent>
{text}
<div style={{ margin: '5px 0' }}>
{text}
</div>
</ModalContent>
<ModalActions>
<ButtonStrip end>
Expand Down
24 changes: 10 additions & 14 deletions src/core_modules/capture-core/components/FeedbackBar/FeedbackBar.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
// @flow
import * as React from 'react';
import SnackBar from '@material-ui/core/Snackbar';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { withStyles } from '@material-ui/core/styles';
import { IconButton } from 'capture-ui';
import { IconCross24, Button } from '@dhis2/ui';
import { IconCross24, Button, Modal, ModalTitle, ModalContent, ModalActions } from '@dhis2/ui';
import i18n from '@dhis2/d2-i18n';
import isDefined from 'd2-utilizr/lib/isDefined';

Expand Down Expand Up @@ -100,25 +96,25 @@ class Index extends React.Component<Props> {
message={<span>{message}</span>}
action={this.getAction()}
/>
<Dialog
open={isDefined(message) && displayType === 'dialog'}
<Modal
hide={!isDialogOpen}
>
<DialogTitle>
<ModalTitle>
{
// $FlowFixMe[prop-missing] automated comment
isDialogOpen ? message && message.title : ''}
</DialogTitle>
<DialogContent>
</ModalTitle>
<ModalContent>
{
// $FlowFixMe[prop-missing] automated comment
isDialogOpen ? message && message.content : ''}
</DialogContent>
<DialogActions>
</ModalContent>
<ModalActions>
<Button onClick={this.handleClose} primary>
{i18n.t('Close')}
</Button>
</DialogActions>
</Dialog>
</ModalActions>
</Modal>
</React.Fragment>
);
}
Expand Down
12 changes: 6 additions & 6 deletions ...apture-core/components/FormFields/New/Fields/CoordinateField/CoordinateField.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@
import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import { CoordinateField as UICoordinateField } from 'capture-ui';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Modal, ModalTitle } from '@dhis2/ui';
import { typeof orientations } from '../../../New';

const getStyles = (theme: Theme) => ({
Expand Down Expand Up @@ -80,11 +79,12 @@ class CoordinateFieldPlain extends React.Component<Props> {
// $FlowFixMe[cannot-spread-inexact] automated comment
<UICoordinateField
mapDialog={
<Dialog
classes={this.dialogClasses}
<Modal
className={this.dialogClasses}
large
>
<DialogTitle key="title">{dialogLabel}</DialogTitle>
</Dialog>
<ModalTitle>{dialogLabel}</ModalTitle>
</Modal>
}
{...passOnProps}
classes={this.passOnClasses}
Expand Down
20 changes: 8 additions & 12 deletions ...modules/capture-core/components/ListView/ColumnSelector/ColumnSelectorDialog.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
// @flow
import React, { useState, useEffect } from 'react';
import { isEqual } from 'lodash';
import { Button } from '@dhis2/ui';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import DialogTitle from '@material-ui/core/DialogTitle';
import { Modal, ModalTitle, ModalContent, ModalActions, Button } from '@dhis2/ui';
import i18n from '@dhis2/d2-i18n';

import { DragDropList } from './DragDropList';
Expand Down Expand Up @@ -42,21 +38,21 @@ export const ColumnSelectorDialog = ({ columns, open, onClose, onSave }: Props)

return (
<span>
<Dialog open={!!open} onClose={onClose} fullWidth>
<DialogTitle>{i18n.t('Columns to show in table')}</DialogTitle>
<DialogContent>
<Modal hide={!open} onClose={onClose}>
<ModalTitle>{i18n.t('Columns to show in table')}</ModalTitle>
<ModalContent>
<DragDropList
listItems={columnList}
handleUpdateListOrder={handleUpdateListOrder}
handleToggle={handleToggle}
/>
</DialogContent>
<DialogActions>
</ModalContent>
<ModalActions>
<Button onClick={handleSave} primary initialFocus>
{i18n.t('Save')}
</Button>
</DialogActions>
</Dialog>
</ModalActions>
</Modal>
</span>
);
};
Loading