Feature/modal updates rebased to main (ToolJet#3465)

* modal docs

* modal enhancement , added more properties

* widget properties updates

* revert unwanted change

* bugfix close

* renaming as "hideTitleBar"

* migration

* revert unwanted code

* temp stash

* updates

* migration tested

Co-authored-by: stepinfwd <[email protected]>

Author: sherfin94

docs/docs/widgets/modal.md

@@ -26,6 +26,14 @@ Title that should be shown on the header of the modal.
 
 Size of the modal. Options are `medium`, `small` and `large`. The default is `small`. You can also programmatically configure the value by clicking on the `Fx` and set the value to `sm`, `md` or `lg`.
 
+### Hide title bar
+To hide modal header , default is false.
+### Hide close button
+To hide modal close button , default is false.
+
+### Hide on escape
+To disable modal hide on pressing escape key  , default is true.
+
 ## Layout
 
 ### Show on desktop

frontend/src/Editor/Components/Modal.jsx

@@ -17,6 +17,7 @@ export const Modal = function Modal({
   setExposedVariable,
 }) {
   const [showModal, setShowModal] = useState(false);
+  const { hideOnEsc, hideCloseButton, hideTitleBar } = properties;
   const parentRef = useRef(null);
 
   const title = properties.title ?? '';
@@ -46,19 +47,23 @@ export const Modal = function Modal({
         keyboard={true}
         enforceFocus={false}
         animation={false}
-        onEscapeKeyDown={() => hideModal()}
+        onEscapeKeyDown={() => hideOnEsc && hideModal()}
       >
         {containerProps.mode === 'edit' && (
           <ConfigHandle id={id} component={component} setSelectedComponent={containerProps.onComponentClick} />
         )}
-        <BootstrapModal.Header>
-          <BootstrapModal.Title>{title}</BootstrapModal.Title>
-          <div>
-            <Button variant={darkMode ? 'secondary' : 'light'} size="sm" onClick={hideModal}>
-              x
-            </Button>
-          </div>
-        </BootstrapModal.Header>
+        {!hideTitleBar && (
+          <BootstrapModal.Header>
+            <BootstrapModal.Title>{title}</BootstrapModal.Title>
+            {!hideCloseButton && (
+              <div>
+                <Button variant={darkMode ? 'secondary' : 'light'} size="sm" onClick={() => hideModal()}>
+                  x
+                </Button>
+              </div>
+            )}
+          </BootstrapModal.Header>
+        )}
 
         <BootstrapModal.Body style={{ height }} ref={parentRef} id={id}>
           <SubContainer parent={id} {...containerProps} parentRef={parentRef} />

frontend/src/Editor/WidgetManager/widgetConfig.js

@@ -291,6 +291,10 @@ export const widgets = [
     },
     properties: {
       title: { type: 'code', displayName: 'Title' },
+      hideTitleBar: { type: 'toggle', displayName: 'Hide title bar' },
+      hideCloseButton: { type: 'toggle', displayName: 'Hide close button' },
+      hideOnEsc: { type: 'toggle', displayName: 'Hide on escape' },
+
       size: {
         type: 'select',
         displayName: 'Modal size',
@@ -316,6 +320,9 @@ export const widgets = [
       properties: {
         title: { value: 'This title can be changed' },
         size: { value: 'md' },
+        hideTitleBar: { value: '{{false}}' },
+        hideCloseButton: { value: '{{false}}' },
+        hideOnEsc: { value: '{{true}}' },
       },
       events: [],
       styles: {

server/migrations/1656061763136-modal-properties.ts

@@ -0,0 +1,43 @@
+import { AppVersion } from '../src/entities/app_version.entity';
+import { MigrationInterface, QueryRunner } from 'typeorm';
+
+export class modalProperties1656061763136 implements MigrationInterface {
+  public async up(queryRunner: QueryRunner): Promise<void> {
+    const entityManager = queryRunner.manager;
+    const appVersions = await entityManager.find(AppVersion);
+
+    for (const version of appVersions) {
+      const definition = version['definition'];
+
+      if (definition) {
+        const components = definition['components'];
+
+        for (const componentId of Object.keys(components)) {
+          const component = components[componentId];
+
+          if (component.component.component === 'Modal') {
+            component.component.definition.properties.hideTitleBar = { value: false };
+            component.component.definition.properties.hideCloseButton = { value: false };
+            component.component.definition.properties.hideOnEsc = { value: true };
+            components[componentId] = {
+              ...component,
+              component: {
+                ...component.component,
+                definition: {
+                  ...component.component.definition,
+                },
+              },
+            };
+          }
+        }
+
+        definition['components'] = components;
+        version.definition = definition;
+
+        await entityManager.update(AppVersion, { id: version.id }, { definition });
+      }
+    }
+  }
+
+  public async down(queryRunner: QueryRunner): Promise<void> {}
+}