From f015e851f6a79ea9abf935c1049c2647c6c67a4c Mon Sep 17 00:00:00 2001
From: Alex Thomson <80762652+Dioltas95@users.noreply.github.com>
Date: Wed, 15 Nov 2023 19:52:24 +0000
Subject: [PATCH] Adding dialog to Multi Expression Editor (#4602)

* Adding dialog to Multi Expression Editor

* Adding Max width as a property for the Dialog, defaults to old value in css
---
 src/designer/elsa-workflows-studio/src/components.d.ts     | 2 ++
 .../elsa-multi-expression-editor.tsx                       | 3 ++-
 .../elsa-workflow-definition-editor-screen.tsx             | 4 ++--
 .../shared/elsa-modal-dialog/elsa-modal-dialog.tsx         | 7 ++++---
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts
index 95336be095..3e64f65da9 100644
--- a/src/designer/elsa-workflows-studio/src/components.d.ts
+++ b/src/designer/elsa-workflows-studio/src/components.d.ts
@@ -145,6 +145,7 @@ export namespace Components {
         "propertyModel": ActivityDefinitionProperty;
     }
     interface ElsaModalDialog {
+        "dialogWidth": string;
         "hide": (animate?: boolean) => Promise<void>;
         "show": (animate?: boolean) => Promise<void>;
     }
@@ -1065,6 +1066,7 @@ declare namespace LocalJSX {
         "propertyModel"?: ActivityDefinitionProperty;
     }
     interface ElsaModalDialog {
+        "dialogWidth"?: string;
         "onHidden"?: (event: CustomEvent<any>) => void;
         "onShown"?: (event: CustomEvent<any>) => void;
     }
diff --git a/src/designer/elsa-workflows-studio/src/components/editors/elsa-multi-expression-editor/elsa-multi-expression-editor.tsx b/src/designer/elsa-workflows-studio/src/components/editors/elsa-multi-expression-editor/elsa-multi-expression-editor.tsx
index 586d80d858..294ff72e86 100644
--- a/src/designer/elsa-workflows-studio/src/components/editors/elsa-multi-expression-editor/elsa-multi-expression-editor.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/editors/elsa-multi-expression-editor/elsa-multi-expression-editor.tsx
@@ -181,7 +181,8 @@ export class ElsaMultiExpressionEditor {
                                   language={monacoLanguage}
                                   editorHeight={this.editorHeight}
                                   singleLineMode={this.singleLineMode}
-                                  context={this.context}/>
+                                  context={this.context}
+                                  opensModal/>
         </div>
         <div class={defaultEditorClass}>
           <slot/>
diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx
index 12bfec5153..b5b41d709a 100644
--- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-definition-editor/elsa-workflow-definition-editor-screen/elsa-workflow-definition-editor-screen.tsx
@@ -680,12 +680,12 @@ export class ElsaWorkflowDefinitionEditorScreen {
     return (
       <elsa-modal-dialog ref={el => {
           monacoEditorDialogService.monacoEditorDialog = el;
-        }}>
+        }} dialogWidth='80vw'>
           <div slot="content" class="elsa-py-8 elsa-px-4">
             <elsa-monaco
               value=""
               language="javascript"
-              editor-height="400px"
+              editor-height="80vh"
               single-line={false}
               onValueChanged={e => {
                 monacoEditorDialogService.currentValue = e.detail.value;
diff --git a/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx b/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx
index 29ff7af155..57c8c478b3 100644
--- a/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx
+++ b/src/designer/elsa-workflows-studio/src/components/shared/elsa-modal-dialog/elsa-modal-dialog.tsx
@@ -1,4 +1,4 @@
-import {Component, Host, h, State, Listen, Method, Event, EventEmitter} from '@stencil/core';
+import {Component, Host, h, State, Listen, Method, Event, EventEmitter, Prop} from '@stencil/core';
 import {enter, leave} from 'el-transition'
 import {eventBus} from "../../../services";
 import {EventTypes} from "../../../models";
@@ -13,6 +13,7 @@ export class ElsaModalDialog {
   @State() isVisible: boolean;
   overlay: HTMLElement
   modal: HTMLElement
+  @Prop({attribute : 'dialog-width', reflect: true}) dialogWidth: string = '56em'
 
   render() {
     return this.renderModal();
@@ -87,8 +88,8 @@ export class ElsaModalDialog {
                  data-transition-leave="elsa-ease-in elsa-duration-200"
                  data-transition-leave-start="elsa-opacity-0 elsa-translate-y-0 sm:elsa-scale-100"
                  data-transition-leave-end="elsa-opacity-0 elsa-translate-y-4 sm:elsa-translate-y-0 sm:elsa-scale-95"
-                 class="hidden elsa-inline-block sm:elsa-align-top elsa-bg-white elsa-rounded-lg elsa-text-left elsa-overflow-visible elsa-shadow-xl elsa-transform elsa-transition-all sm:elsa-my-8 sm:elsa-align-top sm:elsa-max-w-4xl sm:elsa-w-full"
-                 role="dialog" aria-modal="true" aria-labelledby="modal-headline">
+                 class="hidden elsa-inline-block sm:elsa-align-top elsa-bg-white elsa-rounded-lg elsa-text-left elsa-overflow-visible elsa-shadow-xl elsa-transform elsa-transition-all sm:elsa-my-8 sm:elsa-align-top sm:elsa-w-full"
+                 role="dialog" aria-modal="true" aria-labelledby="modal-headline" style={{'max-width' : this.dialogWidth}}>
               <div class="modal-content">
                 <slot name="content"/>
               </div>