Modal: fix external styling classes on modal/drawer not working

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx

@@ -219,7 +219,6 @@ function UIView(props: {
   viewFn: any;
 }) {
   const comp = props.comp;
-
   const childrenProps = childrenToProps(comp.children);
   const parentDisabled = useContext(DisabledContext);
   const disabled = childrenProps["disabled"];
@@ -236,6 +235,17 @@ function UIView(props: {
   }
   //END ADD BY FRED
 
+  if (comp.children.hasOwnProperty('showMask') && comp.children.hasOwnProperty('maskClosable')) {
+    return (
+      <HidableView hidden={childrenProps.hidden as boolean}>
+        {props.viewFn(
+          childrenProps,
+          comp.dispatch
+        )}
+      </HidableView>
+    );
+  }
+
   return (
     <div
       ref={props.innerRef}

client/packages/lowcoder/src/comps/hooks/drawerComp.tsx

@@ -167,6 +167,8 @@ let TmpDrawerComp = (function () {
               zIndex={Layers.drawer}
               maskClosable={props.maskClosable}
               mask={props.showMask}
+              className={props.className as string}
+              data-testid={props.dataTestId as string}
             >
               <ButtonStyle
                 $closePosition={props.closePosition}

client/packages/lowcoder/src/comps/hooks/hookComp.tsx

@@ -26,7 +26,7 @@ import { trans } from "i18n";
 import _ from "lodash";
 import dayjs from "dayjs";
 import { ConstructorToComp } from "lowcoder-core";
-import { Section, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, sectionNames } from "lowcoder-design";
 import React, { useContext, useEffect, useMemo } from "react";
 import { useInterval, useTitle, useWindowSize } from "react-use";
 import { useCurrentUser } from "util/currentUser";
@@ -204,7 +204,9 @@ export class HookComp extends HookTmpComp {
     return (
       <>
         <CompName name={this.children.name.getView()} />
-        {this.children.comp.getPropertyView()}
+        <ScrollBar>
+          {this.children.comp.getPropertyView()}
+        </ScrollBar>
       </>
     );
   }

client/packages/lowcoder/src/comps/hooks/modalComp.tsx

@@ -155,6 +155,8 @@ let TmpModalComp = (function () {
               zIndex={Layers.modal}
               modalRender={(node) => <ModalStyled $style={props.style}>{node}</ModalStyled>}
               mask={props.showMask}
+              className={props.className as string}
+              data-testid={props.dataTestId as string}
             >
               <InnerGrid
                 {...otherContainerProps}