Merge branch 'master' into fix/data-import-error

package.json

@@ -69,7 +69,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "git-revision-webpack-plugin": "^5.0.0",
-    "glob": "^10.3.4",
+    "glob": "^10.3.5",
     "html-replace-webpack-plugin": "^2.6.0",
     "html-webpack-plugin": "^5.5.1",
     "husky": "^8.0.3",

test/e2e/tests/surveyDelete.js

@@ -12,17 +12,18 @@ const deleteSurvey = async (surveyToDelete) => {
 
   await page.click(getSelector(TestId.dashboard.advancedFunctionsBtn, 'button'))
 
+  const modalSelector = getSelector(TestId.modal.modal)
+
   await Promise.all([
-    page.waitForSelector(getSelector(TestId.modal.modal)),
+    page.waitForSelector(modalSelector),
     page.click(getSelector(TestId.dashboard.surveyDeleteBtn, 'button')),
   ])
 
   await page.fill(getSelector(TestId.dialogConfirm.strongConfirmInput), name)
 
-  // Click div[role="dialog"] >> text="Delete"
   await Promise.all([
     page.waitForNavigation(/* { url: `{BASE_URL}/app/home/surveys/` } */),
-    page.click('div[role="dialog"] >> text="Delete"'),
+    page.click(`${modalSelector} >> text="Delete"`),
   ])
 
   await expect(page).toHaveText(`Survey ${name} has been deleted`)

test/e2e/tests/templateDelete.js

@@ -21,17 +21,18 @@ export default () =>
 
         await page.click(getSelector(TestId.dashboard.advancedFunctionsBtn, 'button'))
 
+        const modalSelector = getSelector(TestId.modal.modal)
+
         await Promise.all([
-          page.waitForSelector(getSelector(TestId.modal.modal)),
+          page.waitForSelector(modalSelector),
           page.click(getSelector(TestId.dashboard.surveyDeleteBtn, 'button')),
         ])
 
         await page.fill(getSelector(TestId.dialogConfirm.strongConfirmInput), name)
 
-        // Click div[role="dialog"] >> text="Delete"
         await Promise.all([
           page.waitForNavigation(/* { url: `{BASE_URL}/app/home/templates/` } */),
-          page.click('div[role="dialog"] >> text="Delete"'),
+          page.click(`${modalSelector} >> text="Delete"`),
         ])
 
         await expect(page.url()).toBe(`${BASE_URL}/app/home/templates/`)

webapp/components/markdown.js

@@ -7,7 +7,13 @@ const Markdown = (props) => {
   const [output, setOutput] = useState('')
 
   useEffect(() => {
-    setOutput(marked.parse(source))
+    setOutput(
+      marked.parse(source, {
+        // disable deprecated options
+        headerIds: false,
+        mangle: false,
+      })
+    )
   }, [source])
 
   return <Container className={className} dangerouslySetInnerHTML={{ __html: output }} />

webapp/components/modal.js

@@ -1,8 +1,10 @@
 import './modal.scss'
-import React from 'react'
-import * as R from 'ramda'
 
-import { KeyboardMap } from '@webapp/utils/keyboardMap'
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+import MuiModal from '@mui/material/Modal'
+import Fade from '@mui/material/Fade'
+
 import { TestId } from '@webapp/utils/testId'
 
 export const ModalClose = ({ _children, onClose }) => (
@@ -17,43 +19,39 @@ export const ModalBody = ({ children }) => <div className="modal-body">{children
 
 export const ModalFooter = ({ children }) => <div className="modal-footer">{children}</div>
 
-export class Modal extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = { closed: false }
-  }
-
-  componentDidMount() {
-    window.addEventListener('keydown', this)
-    this.setState({ closed: false })
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('keydown', this)
-  }
-
-  handleEvent(e) {
-    const { onClose, closeOnEsc = true } = this.props
-
-    if (e.type === 'keydown' && e.keyCode === KeyboardMap.Esc) {
-      if (closeOnEsc && onClose) onClose()
-    }
-  }
-
-  render() {
-    const { children, isOpen = true, className = '' } = this.props
-
-    return R.propEq('closed', true)(this.state) ? null : (
-      <div
-        className={`modal ${className}`}
-        data-testid={TestId.modal.modal}
-        tabIndex="-1"
-        role="dialog"
-        style={{ display: isOpen ? 'block' : 'none' }}
-      >
+export const Modal = (props) => {
+  const { children, className, closeOnEsc, onClose: onCloseProp } = props
+
+  const onClose = useCallback(
+    (event) => {
+      onCloseProp?.(event)
+    },
+    [onCloseProp]
+  )
+
+  return (
+    <MuiModal
+      className={`modal ${className}`}
+      data-testid={TestId.modal.modal}
+      disableEscapeKeyDown={!closeOnEsc}
+      onClose={onClose}
+      open
+    >
+      <Fade in timeout={500}>
         <div className="modal-content">{children}</div>
-      </div>
-    )
-  }
+      </Fade>
+    </MuiModal>
+  )
+}
+
+Modal.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  closeOnEsc: PropTypes.bool,
+  onClose: PropTypes.func,
+}
+
+Modal.defaultProps = {
+  className: '',
+  closeOnEsc: true,
 }

webapp/components/modal.scss

@@ -2,18 +2,6 @@
 
 $borderRadius: 2px;
 
-.modal {
-  display: none;
-  position: fixed;
-  z-index: $zIndex19AppModal;
-  left: 0;
-  top: 0;
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  background-color: rgba($black, 0.7);
-}
-
 .modal-content {
   position: relative;
   display: flex;
@@ -25,8 +13,6 @@ $borderRadius: 2px;
   border: none;
   border-radius: $borderRadius;
   outline: 0;
-  animation-name: animatetop;
-  animation-duration: 0.4s;
   margin: 10vh 20vw auto;
   padding: 1rem 2rem;
   box-shadow: $shadow3;
@@ -77,13 +63,3 @@ $borderRadius: 2px;
   margin-right: 5px;
 }
 
-@keyframes animatetop {
-  from {
-    transform: translateY(-100px);
-    opacity: 0;
-  }
-  to {
-    transform: none;
-    opacity: 1;
-  }
-}

webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefEntitySelectorDialog.js

@@ -45,7 +45,7 @@ export const NodeDefEntitySelectorDialog = (props) => {
     !selectedEntityDefUuid || (isEntitySelectable && !isEntitySelectable?.(selectedEntityDefUuid))
 
   return (
-    <Modal isOpen={true} className="survey-form__node-def-entity-selector-dialog" closeOnEsc={true} onClose={onClose}>
+    <Modal className="survey-form__node-def-entity-selector-dialog" onClose={onClose}>
       <ModalHeader>{i18n.t(title, { nodeDefName: NodeDef.getName(currentNodeDef) })}</ModalHeader>
 
       <ModalBody>

webapp/components/survey/SurveyForm/nodeDefs/components/nodeDefMultipleEditDialog.js

@@ -13,7 +13,7 @@ const NodeDefMultipleEditDialog = (props) => {
   const i18n = useI18n()
 
   return (
-    <Modal isOpen={true} className="survey-form__node-def-multiple-edit-dialog" closeOnEsc={true} onClose={onClose}>
+    <Modal className="survey-form__node-def-multiple-edit-dialog" onClose={onClose}>
       <ModalHeader>{label}</ModalHeader>
 
       <ModalBody>{React.createElement(NodeDefUiProps.getComponent(nodeDef), props)}</ModalBody>

webapp/style/_vars.scss

@@ -35,7 +35,6 @@ $zIndex6Tooltip: 6;
 $zIndex10TopOfApp: 10;
 $zIndex15UserMenu: 15;
 $zIndex18PanelRight: 18;
-$zIndex19AppModal: 19;
 $zIndex20AppModalConfirm: 20;
 $zIndex20Dropdown: 20;
 $zIndex80AppNotification: 80;

webapp/style/cssVars.scss

@@ -38,7 +38,6 @@
   --zIndex10TopOfApp: #{$zIndex10TopOfApp};
   --zIndex15UserMenu: #{$zIndex15UserMenu};
   --zIndex18PanelRight: #{$zIndex18PanelRight};
-  --zIndex19AppModal: #{$zIndex19AppModal};
   --zIndex20Dropdown: #{$zIndex20Dropdown};
   --zIndex80AppNotification: #{$zIndex80AppNotification};
   --zIndex90AppError: #{$zIndex90AppError};

webapp/views/App/views/Data/RecordsCloneModal/RecordsCloneModal.js

@@ -100,7 +100,7 @@ export const RecordsCloneModal = (props) => {
   }
 
   return (
-    <Modal className="records-clone">
+    <Modal className="records-clone" onClose={onClose}>
       <ModalHeader>
         <span>{i18n.t('dataView.recordsClone.title')}</span>
         <ModalClose onClose={onClose} />

webapp/views/Arena/Routes/DialogConfirm/DialogConfirm.js

@@ -29,7 +29,7 @@ const DialogConfirm = () => {
   } = useDialogConfirm()
 
   return key ? (
-    <Modal className="dialog-confirm">
+    <Modal className="dialog-confirm" onClose={() => dispatch(DialogConfirmActions.onDialogConfirmCancel())}>
       {headerText && (
         <ModalHeader>
           <h5 className="dialog-confirm__header">{i18n.t(headerText)}</h5>

yarn.lock

@@ -7730,10 +7730,10 @@ glob@^10.2.5:
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
     path-scurry "^1.10.1"
 
-glob@^10.3.4:
-  version "10.3.4"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.4.tgz#c85c9c7ab98669102b6defda76d35c5b1ef9766f"
-  integrity sha512-6LFElP3A+i/Q8XQKEvZjkEWEOTgAIALR9AO2rwT8bgPhDd1anmqDJDZ6lLddI4ehxxxR1S5RIqKe1uapMQfYaQ==
+glob@^10.3.5:
+  version "10.3.5"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-10.3.5.tgz#4c0e46b5bccd78ac42b06a7eaaeb9ee34062968e"
+  integrity sha512-bYUpUD7XDEHI4Q2O5a7PXGvyw4deKR70kHiDxzQbe925wbZknhOzUt2xBgTkYL6RBcVeXYuD9iNYeqoWbBZQnA==
   dependencies:
     foreground-child "^3.1.0"
     jackspeak "^2.0.3"