Fixed error list for JSON-schema form, and adressed other comments (#4242)

openmetadata-ui/src/main/resources/ui/src/components/AddService/AddService.component.tsx

@@ -195,6 +195,7 @@ const AddService = ({
 
           {activeStepperStep === 3 && (
             <ConnectionConfigForm
+              cancelText="Back"
               data={
                 (serviceCategory !== ServiceCategory.PIPELINE_SERVICES
                   ? {

openmetadata-ui/src/main/resources/ui/src/components/ServiceConfig/ConnectionConfigForm.tsx

@@ -38,6 +38,8 @@ import FormBuilder from '../common/FormBuilder/FormBuilder';
 
 interface Props {
   data: DatabaseService | MessagingService | DashboardService | PipelineService;
+  okText?: string;
+  cancelText?: string;
   serviceCategory: ServiceCategory;
   status: LoadingState;
   onCancel?: () => void;
@@ -46,6 +48,8 @@ interface Props {
 
 const ConnectionConfigForm: FunctionComponent<Props> = ({
   data,
+  okText = 'Save',
+  cancelText = 'Discard',
   serviceCategory,
   status,
   onCancel,
@@ -103,7 +107,9 @@ const ConnectionConfigForm: FunctionComponent<Props> = ({
 
     return (
       <FormBuilder
+        cancelText={cancelText}
         formData={validConfig}
+        okText={okText}
         schema={connSch.schema}
         status={status}
         uiSchema={connSch.uiSchema}

openmetadata-ui/src/main/resources/ui/src/components/common/FormBuilder/FormBuilder.tsx

@@ -26,6 +26,8 @@ import { Button } from '../../buttons/Button/Button';
 import Loader from '../../Loader/Loader';
 
 interface Props extends FormProps<ConfigData> {
+  okText: string;
+  cancelText: string;
   showFormHeader?: boolean;
   status?: LoadingState;
   onCancel?: () => void;
@@ -33,15 +35,34 @@ interface Props extends FormProps<ConfigData> {
 
 function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
   return (
-    <>
+    <Fragment>
-      <label className="control-label">{props.title}</label>
+      <div className="tw-flex tw-justify-between tw-items-center">
-      <p className="field-description">{props.schema.description}</p>
+        <div>
+          <label className="control-label">{props.title}</label>
+          <p className="field-description">{props.schema.description}</p>
+        </div>
+        {props.canAdd && (
+          <Button
+            className="tw-h-7 tw-w-7 tw-px-2"
+            data-testid={`add-item-${props.title}`}
+            size="small"
+            theme="primary"
+            variant="contained"
+            onClick={props.onAddClick}>
+            <FontAwesomeIcon icon="plus" />
+          </Button>
+        )}
+      </div>
       {props.items.map((element, index) => (
-        <div className="tw-flex tw-items-center tw-w-full" key={index}>
+        <div
-          <div className="tw-flex-1">{element.children}</div>
+          className={classNames('tw-flex tw-items-center tw-w-full', {
+            'tw-mt-2': index > 0,
+          })}
+          key={`${element.key}-${index}`}>
+          <div className="tw-flex-1 array-fields">{element.children}</div>
           {element.hasRemove && (
             <button
-              className="focus:tw-outline-none tw-w-1/12"
+              className="focus:tw-outline-none tw-w-7 tw-ml-3"
               type="button"
               onClick={(event) => {
                 element.onDropIndexClick(element.index)(event);
@@ -50,55 +71,61 @@ function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
                 alt="delete"
                 icon={Icons.DELETE}
                 title="Delete"
-                width="16px"
+                width="14px"
               />
             </button>
           )}
         </div>
       ))}
-      {props.canAdd && (
+    </Fragment>
-        <Button
-          className="tw-h-7 tw-px-2 tw-mb-3"
-          data-testid={`add-item-${props.title}`}
-          size="small"
-          theme="primary"
-          variant="contained"
-          onClick={props.onAddClick}>
-          <FontAwesomeIcon icon="plus" />
-        </Button>
-      )}
-    </>
   );
 }
 
 function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
   return (
     <Fragment>
-      <label className="control-label">{props.title}</label>
+      <div className="tw-flex tw-justify-between tw-items-center">
-      <p className="field-description">{props.description}</p>
+        <div>
-      {props.properties.map((element) => (
+          <label className="control-label" id={`${props.idSchema.$id}__title`}>
-        <div className="property-wrapper" key={element.content.key}>
+            {props.title}
+          </label>
+          <p
+            className="field-description"
+            id={`${props.idSchema.$id}__description`}>
+            {props.description}
+          </p>
+        </div>
+        {props.schema.additionalProperties && (
+          <Button
+            className="tw-h-7 tw-w-7 tw-px-2"
+            data-testid={`add-item-${props.title}`}
+            id={`${props.idSchema.$id}__add`}
+            size="small"
+            theme="primary"
+            variant="contained"
+            onClick={() => {
+              props.onAddClick(props.schema)();
+            }}>
+            <FontAwesomeIcon icon="plus" />
+          </Button>
+        )}
+      </div>
+      {props.properties.map((element, index) => (
+        <div
+          className={classNames('property-wrapper', {
+            'additional-fields': props.schema.additionalProperties,
+          })}
+          key={`${element.content.key}-${index}`}>
           {element.content}
         </div>
       ))}
-      {props.schema.additionalProperties && (
-        <Button
-          className="tw-h-7 tw-px-2 tw-mb-3"
-          data-testid={`add-item-${props.title}`}
-          size="small"
-          theme="primary"
-          variant="contained"
-          onClick={() => {
-            props.onAddClick(props.schema)();
-          }}>
-          <FontAwesomeIcon icon="plus" />
-        </Button>
-      )}
     </Fragment>
   );
 }
 
 const FormBuilder: FunctionComponent<Props> = ({
+  okText,
+  cancelText,
   showFormHeader = false,
   status = 'initial',
   onCancel,
@@ -137,7 +164,7 @@ const FormBuilder: FunctionComponent<Props> = ({
           theme="primary"
           variant="text"
           onClick={handleCancel}>
-          Discard
+          {cancelText}
         </Button>
         {status === 'waiting' ? (
           <Button
@@ -165,7 +192,7 @@ const FormBuilder: FunctionComponent<Props> = ({
             theme="primary"
             variant="contained"
             onClick={handleSubmit}>
-            Save
+            {okText}
           </Button>
         )}
       </div>

openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css

@@ -354,7 +354,9 @@
   }
 
   .rjsf.no-header #root__title,
-  .rjsf.no-header #root__description {
+  .rjsf.no-header #root__description,
+  .rjsf .form-additional .control-label,
+  .rjsf .panel.panel-danger.errors .panel-heading {
     @apply tw-hidden;
   }
 
@@ -362,6 +364,15 @@
     @apply tw-my-3;
   }
 
+  .rjsf .additional-fields .form-group.field,
+  .rjsf .array-fields .form-group.field {
+    @apply tw-my-0;
+  }
+
+  .rjsf .property-wrapper.additional-fields ~ .button-comp {
+    @apply tw-mt-1.5;
+  }
+
   .rjsf .control-label {
     @apply tw-capitalize;
   }
@@ -389,21 +400,37 @@
   }
 
   .rjsf .btn.array-item-remove {
-    @apply tw-mt-4 tw-p-4;
+    @apply tw-p-3.5;
     background: url(../assets/svg/ic-delete.svg) center center no-repeat;
-    background-size: 35%;
+    background-size: 50%;
   }
 
   .rjsf .row {
-    @apply tw-flex tw-items-center tw-w-full tw--m-1;
+    @apply tw-flex tw-items-center tw-w-full tw--m-1.5;
   }
 
   .rjsf .col-xs-5 {
-    @apply tw-flex-1 tw-p-1;
+    @apply tw-flex-1 tw-p-1.5;
   }
 
   .rjsf .col-xs-2 {
-    @apply tw-w-1/12 tw-p-1;
+    @apply tw-w-7 tw-p-1.5;
+  }
+
+  .rjsf .errors .list-group > .list-group-item {
+    list-style-type: disc;
+  }
+
+  .rjsf .panel-danger.errors {
+    @apply tw-mb-0 tw-mt-2;
+  }
+
+  .rjsf .list-group {
+    @apply tw-px-5;
+  }
+
+  .rjsf .list-group-item {
+    @apply tw-list-disc;
   }
 
   @keyframes highlight {