OpenConceptLab/ocl_issues#1363 | added close icon button on dialog

src/components/common/AddToCollection.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import alertifyjs from 'alertifyjs';
 import {
   Button, Popper, MenuItem, MenuList, Grow, Paper, ClickAwayListener, Tooltip,
-  CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle,
+  CircularProgress, Dialog, DialogActions, DialogContent,
   TextField, InputAdornment, Chip
 } from '@mui/material'
 import {
@@ -18,6 +18,7 @@ import CollectionForm from '../collections/CollectionForm';
 import AddReferencesResult from './AddReferencesResult';
 import ReferenceCascadeDialog from './ReferenceCascadeDialog';
 import MappingReferenceAddOptionsDialog from './MappingReferenceAddOptionsDialog';
+import DialogTitleWithCloseButton from './DialogTitleWithCloseButton';
 
 const NEW_COLLECTION = {id: '__new__', name: 'Create New Collection'}
 
@@ -265,9 +266,9 @@ class AddToCollection extends React.Component {
           )}
         </Popper>
         <Dialog open={openDialog} onClose={this.handleDialogClose}>
-          <DialogTitle>
+          <DialogTitleWithCloseButton onClose={this.handleDialogClose}>
             Add References to Collection
-          </DialogTitle>
+          </DialogTitleWithCloseButton>
           {
             isAdding ?
               <DialogContent style={{textAlign: 'center', margin: '50px'}}><CircularProgress /></DialogContent> :
@@ -288,7 +289,7 @@ class AddToCollection extends React.Component {
           }
           <DialogActions>
             <React.Fragment>
-              <Button onClick={this.handleDialogClose} color="primary" disabled={isAdding}>
+              <Button onClick={this.handleDialogClose} color="secondary" disabled={isAdding}>
                 Cancel
               </Button>
               <Button onClick={this.handleAdd} color="primary" disabled={isAdding}>

src/components/common/DialogTitleWithCloseButton.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  IconButton, DialogTitle
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+
+const DialogTitleWithCloseButton = ({ children, onClose, ...other }) => {
+  return (
+    <DialogTitle sx={{ m: 0, p: 2 }} {...other}>
+      { children }
+      {
+        onClose &&
+          <IconButton
+            aria-label="close"
+            onClick={onClose}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: 8,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+      }
+    </DialogTitle>
+  )
+}
+
+export default DialogTitleWithCloseButton;

src/components/common/ReferenceCascadeDialog.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import {
-  Button, Dialog, DialogActions, DialogContent, DialogTitle, DialogContentText,
+  Button, Dialog, DialogActions, DialogContent, DialogContentText,
   FormControlLabel, Tooltip, CircularProgress, FormControl, RadioGroup, Radio,
   Accordion, AccordionSummary, AccordionDetails, Typography
 } from '@mui/material'
 import {
   Help as HelpIcon,
   ExpandMore as ExpandMoreIcon,
 } from '@mui/icons-material'
+import DialogTitleWithCloseButton from './DialogTitleWithCloseButton';
 
 
 const ReferenceCascadeDialog = ({ references, collectionName, onCascadeChange, open, onClose, title, onAdd, isAdding, collection, noCascadePayloadFunc, cascadeMappingsFunc, cascadeToConceptsFunc, cascadeOpenMRSFunc }) => {
@@ -137,14 +138,14 @@ const ReferenceCascadeDialog = ({ references, collectionName, onCascadeChange, o
             <Dialog open={open} onClose={onClose}>
               {
                 title &&
-                  <DialogTitle>
+                  <DialogTitleWithCloseButton onClose={onClose}>
                     {title}
-                  </DialogTitle>
+                  </DialogTitleWithCloseButton>
               }
               { getContent() }
               <DialogActions>
                 <React.Fragment>
-                  <Button onClick={onClose} color="primary" disabled={isAdding}>
+                  <Button onClick={onClose} color="secondary" disabled={isAdding}>
                     Cancel
                   </Button>
                   <Button onClick={onAdd} color="primary" disabled={isAdding}>