OpenConceptLab/ocl_issues#2190 | draggable concept dialog

Author: snyaggarwal

package-lock.json

@@ -21,6 +21,7 @@
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-draggable": "^4.5.0",
     "react-ga4": "^2.1.0",
     "react-hotjar": "^5.5.0",
     "react-i18next": "^12.1.5",

package.json

@@ -0,0 +1,19 @@
+import React from 'react';
+import Draggable from 'react-draggable';
+import Paper from '@mui/material/Paper';
+
+
+const DraggablePaperComponent = props => {
+  const nodeRef = React.useRef(null);
+  return (
+    <Draggable
+      nodeRef={nodeRef}
+      handle="#draggable-dialog-title"
+      cancel={'[class*="MuiDialogContent-root"]'}
+    >
+      <Paper {...props} ref={nodeRef} />
+    </Draggable>
+  );
+}
+
+export default DraggablePaperComponent

src/components/common/DraggablePaperComponent.jsx

@@ -33,7 +33,7 @@ const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested, loading
   }
 
   return (
-    <React.Fragment>
+    <div className='col-xs-12 padding-0' style={{cursor: 'move'}} id='draggable-dialog-title'>
       <div className='col-xs-12 padding-0' style={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
         <span style={{width: 'calc(100% - 40px)'}}>
           {
@@ -89,7 +89,7 @@ const ConceptHeader = ({concept, repo, onClose, repoURL, onEdit, nested, loading
             </span>
       </div>
         }
-    </React.Fragment>
+    </div>
   )
 }
 

src/components/concepts/ConceptHeader.jsx

@@ -74,6 +74,7 @@ import SearchHighlightsDialog from '../search/SearchHighlightsDialog'
 import ConceptHome from '../concepts/ConceptHome'
 import RepoSearchAutocomplete from '../repos/RepoSearchAutocomplete'
 import RepoVersionSearchAutocomplete from '../repos/RepoVersionSearchAutocomplete'
+import DraggablePaperComponent from '../common/DraggablePaperComponent'
 import { HEADERS, SEMANTIC_SEARCH_HEADERS, ROW_STATES, VIEWS, DECISION_TABS } from './constants'
 import MapProjectDeleteConfirmDialog from './MapProjectDeleteConfirmDialog';
 import ConfigurationForm from './ConfigurationForm'
@@ -1520,6 +1521,8 @@ const MapProject = () => {
       {
         showItem?.id &&
           <Dialog
+            PaperComponent={DraggablePaperComponent}
+            aria-labelledby="draggable-dialog-title"
             disableEscapeKeyDown
             open
             onClose={() => setShowItem(false)}