Merge branch 'main' into feat/validation-rule-builder

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "license": "MPL-2.0",
   "description": "Form Builder for O3",
   "browser": "dist/openmrs-esm-form-builder-app.js",

src/components/action-buttons/action-buttons.scss

@@ -4,7 +4,7 @@
   justify-content: flex-end;
   margin: 1rem 0;
 
-  button {
+  > button {
     margin-left: 1rem
   }
 }

src/components/action-buttons/unpublish-form.modal.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
+import styles from '../modals.scss';
 
 interface UnpublishModalProps {
   closeModal: () => void;
@@ -13,6 +14,7 @@ const UnpublishFormModal: React.FC<UnpublishModalProps> = ({ closeModal, onUnpub
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         title={t('unpublishConfirmation', 'Are you sure you want to unpublish this form?')}
       />

src/components/dashboard/delete-form.scss

@@ -1,3 +1,5 @@
+@use '@carbon/layout';
+
 .spinner {
   &:global(.cds--inline-loading) {
     min-height: 1rem;
@@ -7,3 +9,31 @@
     font-size: unset;
   }
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

src/components/form-editor/form-editor.component.tsx

@@ -77,13 +77,22 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
   const [publishedWithErrors, setPublishedWithErrors] = useState(false);
   const [errors, setErrors] = useState<Array<MarkerProps>>([]);
   const [validationOn, setValidationOn] = useState(false);
+  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState('');
 
   const isLoadingFormOrSchema = Boolean(formUuid) && (isLoadingClobdata || isLoadingForm);
 
-  const handleSchemaChange = useCallback((updatedSchema: string) => {
-    setStringifiedSchema(updatedSchema);
+  const resetErrorMessage = useCallback(() => {
+    setInvalidJsonErrorMessage('');
   }, []);
 
+  const handleSchemaChange = useCallback(
+    (updatedSchema: string) => {
+      resetErrorMessage();
+      setStringifiedSchema(updatedSchema);
+    },
+    [resetErrorMessage],
+  );
+
   const launchRestoreDraftSchemaModal = useCallback(() => {
     const dispose = showModal('restore-draft-schema-modal', {
       closeModal: () => dispose(),
@@ -199,12 +208,6 @@ const FormEditorContent: React.FC<TranslationFnProps> = ({ t }) => {
     updateSchema({ ...dummySchema });
   }, [updateSchema]);
 
-  const [invalidJsonErrorMessage, setInvalidJsonErrorMessage] = useState('');
-
-  const resetErrorMessage = useCallback(() => {
-    setInvalidJsonErrorMessage('');
-  }, []);
-
   const renderSchemaChanges = useCallback(() => {
     resetErrorMessage();
     {

src/components/form-editor/restore-draft-schema.modal.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, ModalBody, ModalHeader, ModalFooter } from '@carbon/react';
 import { type Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface RestoreDraftSchemaModalProps {
   closeModal: () => void;
@@ -24,7 +25,11 @@ const RestoreDraftSchemaModal: React.FC<RestoreDraftSchemaModalProps> = ({ close
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('schemaNotFound', 'Schema not found')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('schemaNotFound', 'Schema not found')}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <p>

src/components/interactive-builder/add-question.modal.tsx

@@ -7,9 +7,9 @@ import {
   Form,
   FormGroup,
   FormLabel,
-  Layer,
   InlineLoading,
   InlineNotification,
+  Layer,
   ModalBody,
   ModalFooter,
   ModalHeader,
@@ -19,11 +19,11 @@ import {
   Search,
   Select,
   SelectItem,
+  SelectSkeleton,
   Stack,
   Tag,
   TextInput,
   Tile,
-  SelectSkeleton,
 } from '@carbon/react';
 import { ArrowUpRight } from '@carbon/react/icons';
 import { showSnackbar, useConfig, useDebounce } from '@openmrs/esm-framework';
@@ -46,8 +46,8 @@ import type {
 import { useConceptLookup } from '../../hooks/useConceptLookup';
 import { usePatientIdentifierTypes } from '../../hooks/usePatientIdentifierTypes';
 import { usePersonAttributeTypes } from '../../hooks/usePersonAttributeTypes';
-import styles from './question-modal.scss';
 import { useProgramWorkStates, usePrograms } from '../../hooks/useProgramStates';
+import styles from './question-modal.scss';
 
 interface AddQuestionModalProps {
   closeModal: () => void;
@@ -303,7 +303,11 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
 
   return (
     <>
-      <ModalHeader title={t('createNewQuestion', 'Create a new question')} closeModal={closeModal} />
+      <ModalHeader
+        className={styles.modalHeader}
+        title={t('createNewQuestion', 'Create a new question')}
+        closeModal={closeModal}
+      />
       <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <FormGroup legendText={''}>
@@ -701,8 +705,8 @@ const AddQuestionModal: React.FC<AddQuestionModalProps> = ({
                   name="datePickerType"
                   legendText={t('datePickerType', 'The type of date picker to show ')}
                 >
-                  {/** Filters out the date picker types based on the selected concept's data type. 
-                       If no concept is selected, all date picker types are shown. 
+                  {/** Filters out the date picker types based on the selected concept's data type.
+                       If no concept is selected, all date picker types are shown.
                   */}
                   {selectedConcept && selectedConcept.datatype
                     ? datePickerTypeOptions[selectedConcept.datatype.name.toLowerCase()].map((type) => (

src/components/interactive-builder/delete-page.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface DeletePageModalProps {
   closeModal: () => void;
@@ -40,6 +41,7 @@ const DeletePageModal: React.FC<DeletePageModalProps> = ({ onSchemaChange, pageI
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         title={t('deletePageConfirmation', 'Are you sure you want to delete this page?')}
         closeModal={closeModal}
       />

src/components/interactive-builder/delete-question.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Question, Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface DeleteQuestionModal {
   closeModal: () => void;
@@ -68,6 +69,7 @@ const DeleteQuestionModal: React.FC<DeleteQuestionModal> = ({
   return (
     <div>
       <ModalHeader
+        className={styles.modalHeader}
         closeModal={closeModal}
         title={t('deleteQuestionConfirmation', 'Are you sure you want to delete this question? ')}
       />

src/components/interactive-builder/delete-section.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, ModalBody, ModalFooter, ModalHeader } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface DeleteSectionModal {
   closeModal: () => void;
@@ -47,6 +48,7 @@ const DeleteSectionModal: React.FC<DeleteSectionModal> = ({
   return (
     <>
       <ModalHeader
+        className={styles.modalHeader}
         title={t('deleteSectionConfirmation', 'Are you sure you want to delete this section?')}
         closeModal={closeModal}
       />

src/components/interactive-builder/edit-question.modal.tsx

@@ -52,8 +52,8 @@ import { usePersonAttributeLookup } from '../../hooks/usePersonAttributeLookup';
 import { usePersonAttributeName } from '../../hooks/usePersonAttributeName';
 import { usePersonAttributeTypes } from '../../hooks/usePersonAttributeTypes';
 import { usePrograms, useProgramWorkStates } from '../../hooks/useProgramStates';
-import styles from './question-modal.scss';
 import { getDatePickerType } from './add-question.modal';
+import styles from './question-modal.scss';
 
 interface EditQuestionModalProps {
   closeModal: () => void;
@@ -357,7 +357,7 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('editQuestion', 'Edit question')} />
+      <ModalHeader className={styles.modalHeader} closeModal={closeModal} title={t('editQuestion', 'Edit question')} />
       <Form className={styles.form} onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody hasScrollingContent>
           <Stack gap={5}>
@@ -832,8 +832,8 @@ const EditQuestionModal: React.FC<EditQuestionModalProps> = ({
                 name="datePickerType"
                 legendText={t('datePickerType', 'The type of date picker to show')}
               >
-                {/** Filters out the date picker types based on the selected concept's data type. 
-                     If no concept is selected, all date picker types are shown. 
+                {/** Filters out the date picker types based on the selected concept's data type.
+                     If no concept is selected, all date picker types are shown.
                 */}
                 {selectedConcept && selectedConcept.datatype
                   ? datePickerTypeOptions[selectedConcept.datatype.name.toLowerCase()].map((type) => (

src/components/interactive-builder/new-form.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, Stack, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface NewFormModalProps {
   schema: Schema;
@@ -50,7 +51,11 @@ const NewFormModal: React.FC<NewFormModalProps> = ({ schema, onSchemaChange, clo
 
   return (
     <>
-      <ModalHeader closeModal={closeModal} title={t('createNewForm', 'Create a new form')} />
+      <ModalHeader
+        className={styles.modalHeader}
+        closeModal={closeModal}
+        title={t('createNewForm', 'Create a new form')}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <Stack gap={5}>

src/components/interactive-builder/page.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface PageModalProps {
   closeModal: () => void;
@@ -49,7 +50,11 @@ const PageModal: React.FC<PageModalProps> = ({ closeModal, schema, onSchemaChang
 
   return (
     <>
-      <ModalHeader title={t('createNewPage', 'Create a new page')} closeModal={closeModal} />
+      <ModalHeader
+        className={styles.modalHeader}
+        title={t('createNewPage', 'Create a new page')}
+        closeModal={closeModal}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <FormGroup legendText={''}>

src/components/interactive-builder/question-modal.scss

@@ -1,4 +1,5 @@
 @use '@carbon/colors';
+@use '@carbon/layout';
 @use "@carbon/type";
 
 .label {
@@ -126,3 +127,31 @@
   color: colors.$red-60;
   margin-left: 0.125rem;
 }
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}

src/components/interactive-builder/section.modal.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, FormGroup, ModalBody, ModalFooter, ModalHeader, TextInput } from '@carbon/react';
 import { showSnackbar } from '@openmrs/esm-framework';
 import type { Schema } from '../../types';
+import styles from '../modals.scss';
 
 interface SectionModalProps {
   closeModal: () => void;
@@ -49,7 +50,11 @@ const SectionModal: React.FC<SectionModalProps> = ({ closeModal, schema, onSchem
 
   return (
     <>
-      <ModalHeader title={t('createNewSection', 'Create a new section')} closeModal={closeModal} />
+      <ModalHeader
+        className={styles.modalHeader}
+        title={t('createNewSection', 'Create a new section')}
+        closeModal={closeModal}
+      />
       <Form onSubmit={(event: React.SyntheticEvent) => event.preventDefault()}>
         <ModalBody>
           <FormGroup legendText={''}>

src/components/modals.scss

@@ -0,0 +1,29 @@
+@use '@carbon/layout';
+
+.modalHeader {
+  :global {
+    .cds--modal-close-button {
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline-end: 0;
+      margin: 0;
+      margin-top: calc(-1 * #{layout.$spacing-05});
+    }
+
+    .cds--modal-close {
+      background-color: rgba(0, 0, 0, 0);
+
+      &:hover {
+        background-color: var(--cds-layer-hover);
+      }
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-content {
+      transform: translate(-4rem, 0.85rem);
+    }
+
+    .cds--popover--left > .cds--popover > .cds--popover-caret {
+      transform: translate(-3.75rem, 1.25rem);
+    }
+  }
+}