feat: Anvil: Add closeOnSubmit property to modal widgets (#33801)

## Description
- Creates a new property control for Modal widgets. `closeOnSubmit`. 
- This property (default `true`) configures if the modal must close on
the submit button click.


Fixes #33240 

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9299980305>
> Commit: 59fc2957f0b4ff3c47788480b0d82adf99596265
> Cypress dashboard url: <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9299980305&attempt=1"
target="_blank">Click here!</a>

<!-- end of auto-generated comment: Cypress test results  -->








## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No

app/client/packages/design-system/widgets/src/components/Modal/src/ModalFooter.tsx

@@ -7,6 +7,7 @@ import type { ModalFooterProps } from "./types";
 
 export const ModalFooter = (props: ModalFooterProps) => {
   const {
+    closeOnSubmit = true,
     closeText = "Close",
     excludeFromTabOrder = false,
     onSubmit,
@@ -20,7 +21,7 @@ export const ModalFooter = (props: ModalFooterProps) => {
       setIsLoading(true);
       await onSubmit();
       setIsLoading(false);
-      setOpen(false);
+      if (closeOnSubmit) setOpen(false);
     }
   };
 

app/client/packages/design-system/widgets/src/components/Modal/src/types.ts

@@ -49,6 +49,8 @@ export interface ModalFooterProps {
   /** The event that is triggered when the submit button is clicked. */
   onSubmit?: () => void;
   excludeFromTabOrder?: boolean;
+  /** Defines if the modal should close when submit button is pressed */
+  closeOnSubmit?: boolean;
 }
 
 export interface ModalBodyProps {

app/client/src/widgets/wds/WDSModalWidget/config/defaultsConfig.ts

@@ -20,6 +20,7 @@ export const defaultsConfig = {
   size: "medium",
   title: "Modal Title",
   showSubmitButton: true,
+  closeOnSubmit: true,
   submitButtonText: "Save Changes",
   cancelButtonText: "Cancel",
   blueprint: {

app/client/src/widgets/wds/WDSModalWidget/config/propertyPaneConfig/contentConfig.ts

@@ -1,4 +1,5 @@
 import { ValidationTypes } from "constants/WidgetValidation";
+import type { ModalWidgetProps } from "../../widget/types";
 
 export const propertyPaneContentConfig = [
   {
@@ -49,7 +50,7 @@ export const propertyPaneContentConfig = [
         label: "Title",
         helpText: "Title of the modal",
         controlType: "INPUT_TEXT",
-        hidden: (props: any) => !props.showHeader,
+        hidden: (props: ModalWidgetProps) => !props.showHeader,
         dependencies: ["showHeader"],
         isBindProperty: false,
         isTriggerProperty: false,
@@ -73,7 +74,7 @@ export const propertyPaneContentConfig = [
         label: "Submit",
         helpText: "Show or hide the submit button",
         controlType: "SWITCH",
-        hidden: (props: any) => !props.showFooter,
+        hidden: (props: ModalWidgetProps) => !props.showFooter,
         dependencies: ["showFooter"],
         isBindProperty: false,
         isTriggerProperty: false,
@@ -83,18 +84,20 @@ export const propertyPaneContentConfig = [
         label: "Submit Button Text",
         helpText: "Label for the Submit Button",
         controlType: "INPUT_TEXT",
-        hidden: (props: any) => !props.showSubmitButton || !props.showFooter,
+        hidden: (props: ModalWidgetProps) =>
+          !props.showSubmitButton || !props.showFooter,
         dependencies: ["showSubmitButton", "showFooter"],
         isBindProperty: false,
         isTriggerProperty: false,
         placeholderText: "Submit",
       },
+
       {
         propertyName: "cancelButtonText",
         label: "Cancel Button Text",
         helpText: "Label for the Cancel Button",
         controlType: "INPUT_TEXT",
-        hidden: (props: any) => !props.showFooter,
+        hidden: (props: ModalWidgetProps) => !props.showFooter,
         dependencies: ["showCancelButton", "showFooter"],
         isBindProperty: false,
         isTriggerProperty: false,
@@ -114,9 +117,24 @@ export const propertyPaneContentConfig = [
         isBindProperty: true,
         isTriggerProperty: true,
       },
+      {
+        propertyName: "closeOnSubmit",
+        label: "Close on submit",
+        helpText:
+          "Set the modal to automatically close on submit button click. Note: If an action is configured for the onSubmit action, it would be ideal to toggle this off and configure a 'Close Modal' action in the onSuccess and/or onFailure callback of the onSubmit action",
+        controlType: "SWITCH",
+        hidden: (props: ModalWidgetProps) =>
+          !props.showFooter || !props.showSubmitButton,
+        dependencies: ["showFooter", "showSubmitButton"],
+        isBindProperty: false,
+        isTriggerProperty: false,
+      },
       {
         helpText: "Trigger an action when the submit button is pressed",
         propertyName: "onSubmit",
+        hidden: (props: ModalWidgetProps) =>
+          !props.showFooter || !props.showSubmitButton,
+        dependencies: ["showSubmitButton", "showFooter"],
         label: "onSubmit",
         controlType: "ACTION_SELECTOR",
         isJSConvertible: true,

app/client/src/widgets/wds/WDSModalWidget/widget/index.tsx

@@ -100,7 +100,7 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
   };
 
   onSubmitClick = () => {
-    if (this.props.onSubmit) {
+    if (this.props.onSubmit && this.props.showSubmitButton) {
       super.executeAction({
         triggerPropertyName: "onSubmit",
         dynamicString: this.props.onSubmit,
@@ -150,6 +150,7 @@ class WDSModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
             </ModalBody>
             {this.props.showFooter && (
               <ModalFooter
+                closeOnSubmit={this.props.closeOnSubmit}
                 closeText={closeText}
                 excludeFromTabOrder={!this.props.allowWidgetInteraction}
                 onSubmit={submitText ? this.onSubmitClick : undefined}

app/client/src/widgets/wds/WDSModalWidget/widget/types.ts

@@ -8,4 +8,5 @@ export interface ModalWidgetProps extends WidgetProps {
   submitButtonText: string;
   cancelButtonText: string;
   className: string;
+  closeOnSubmit: boolean;
 }