scroll form when the error happens (DP) (#25760)

* scroll when the error happens

* description editor update

* fix errors

* locate

---------

Co-authored-by: Siddhant <siddhant@MacBook-Pro.local>

Author: 2 people

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/AddDataQualityTest/components/TestCaseFormV1.less

@@ -95,11 +95,13 @@
         font-weight: @font-semibold;
         margin-bottom: 0px;
       }
+
       .card-title-description {
         color: @grey-600;
         margin-bottom: @margin-mlg;
       }
     }
+
     .schedule-interval-v1 {
       .cron-expression-card {
         .ant-card-body {
@@ -174,6 +176,7 @@
 
     .bar-menu-wrapper {
       padding: @size-xxs;
+
       .bar-menu-wrapper--format--button--icon {
         width: @size-mlg;
         height: @size-mlg;

openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/AddDomainForm.component.tsx

@@ -43,7 +43,6 @@ import {
 } from '../../common/IconPicker';
 import '../domain.less';
 import { DomainFormType } from '../DomainPage.interface';
-import './add-domain-form.less';
 import { AddDomainFormProps } from './AddDomainForm.interface';
 
 const AddDomainForm = ({
@@ -173,7 +172,7 @@ const AddDomainForm = ({
           'data-testid': 'description',
           initialValue: '',
           height: 'auto',
-          className: 'add-domain-form-description',
+          className: 'add-domain-form-description new-form-style',
         },
       },
       {

openmetadata-ui/src/main/resources/ui/src/components/Domain/AddDomainForm/add-domain-form.less

@@ -19,6 +19,7 @@ export interface DrawerBodyConfig {
   loading?: boolean;
   loadingMessage?: string;
   padding?: number | string;
+  className?: string;
   sx?: any;
 }
 
@@ -53,7 +54,14 @@ export interface DrawerBodyConfig {
  * ```
  */
 export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
-  const { children, loading, loadingMessage, padding = 6, sx = {} } = config;
+  const {
+    children,
+    loading,
+    loadingMessage,
+    padding = 6,
+    className,
+    sx = {},
+  } = config;
 
   const drawerBody = useMemo(
     () => (
@@ -88,6 +96,7 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
           </Box>
         )}
         <Box
+          className={className}
           sx={{
             overflow: 'auto',
             height: '100%',
@@ -97,7 +106,7 @@ export const useDrawerBody = (config: DrawerBodyConfig = {}) => {
         </Box>
       </Box>
     ),
-    [children, loading, loadingMessage, padding, sx]
+    [children, loading, loadingMessage, padding, className, sx]
   );
 
   return {

openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useDrawerBody.tsx

@@ -11,8 +11,10 @@
  *  limitations under the License.
  */
 
-import React, { ReactNode, useCallback, useState } from 'react';
+import classNames from 'classnames';
+import React, { ReactNode, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { createScrollToErrorHandler } from '../../../../utils/formUtils';
 import {
   CompositeDrawerConfig,
   useCompositeDrawer,
@@ -108,9 +110,10 @@ export const useFormDrawer = <T,>(config: FormDrawerConfig<T>) => {
       ...header,
     },
     body: {
+      ...body,
       children: form,
       loading: loading || isSubmitting,
-      ...body,
+      className: classNames('drawer-form-content', body?.className),
     },
     footer: {
       align: footerAlign,
@@ -183,11 +186,18 @@ export const useFormDrawerWithRef = <T,>(
 ) => {
   const { formRef, onSubmit, ...restConfig } = config;
 
+  const scrollToError = useMemo(() => createScrollToErrorHandler(), []);
+
   const handleSubmit = useCallback(async () => {
     if (formRef?.validateFields) {
-      // Validate first
-      const values = await formRef.validateFields();
-      // If validation passes, submit the form
+      let values: T;
+      try {
+        values = await formRef.validateFields();
+      } catch {
+        scrollToError();
+
+        return;
+      }
       if (formRef?.submit) {
         formRef.submit();
       } else {
@@ -198,7 +208,7 @@ export const useFormDrawerWithRef = <T,>(
     } else {
       await onSubmit({} as T);
     }
-  }, [formRef, onSubmit]);
+  }, [formRef, onSubmit, scrollToError]);
 
   const drawer = useFormDrawer({
     ...restConfig,

openmetadata-ui/src/main/resources/ui/src/components/common/atoms/drawer/useFormDrawer.tsx

@@ -25,20 +25,23 @@
 .form-item-horizontal {
   .ant-form-item-row {
     flex-direction: row;
+
     .ant-form-item-label {
       display: block;
       flex: 0 0 40%;
       max-width: 40%;
       padding: 0px;
       align-self: center;
     }
+
     .ant-form-item-control {
       display: block;
       flex: 0 0 60%;
       max-width: 60%;
     }
   }
 }
+
 .form-item-vertical {
   .ant-form-item-row {
     flex-direction: column;
@@ -82,12 +85,14 @@
       border-color: @primary-5;
     }
   }
+
   .block-editor-wrapper.block-editor-wrapper--bar-menu {
     .bar-menu-wrapper {
       border-top-left-radius: @border-rad-xs;
       border-top-right-radius: @border-rad-xs;
       border-color: @grey-300;
     }
+
     .om-block-editor {
       border-bottom-left-radius: @border-rad-xs;
       border-bottom-right-radius: @border-rad-xs;
@@ -103,10 +108,12 @@
   .ant-switch-checked {
     background-color: @primary-6;
   }
+
   .ant-switch-checked .ant-switch-handle::before,
   .ant-switch-handle::before {
     background-color: @white;
   }
+
   .form-switch-container .ant-typography,
   .ant-form-item-label > label,
   .form-label-title {
@@ -119,6 +126,7 @@
   .ant-form-item-label > label.ant-form-item-required::before {
     display: none;
   }
+
   .ant-form-item-label > label.ant-form-item-required::after {
     display: inline-block;
     margin-left: 4px;
@@ -128,4 +136,25 @@
     line-height: 1;
     content: '*';
   }
+
+  .block-editor-wrapper {
+    .om-block-editor {
+      background-color: @white;
+      max-height: 120px;
+      padding: @size-sm;
+
+      p:last-child {
+        padding-bottom: 75px;
+      }
+    }
+
+    .bar-menu-wrapper {
+      padding: @size-xxs;
+
+      .bar-menu-wrapper--format--button--icon {
+        width: @size-mlg;
+        height: @size-mlg;
+      }
+    }
+  }
 }