Fixed #4143: Added JSON-Schema Form missing controls (#4205)

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

@@ -12,11 +12,16 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Form, { FormProps } from '@rjsf/core';
+import Form, {
+  ArrayFieldTemplateProps,
+  FormProps,
+  ObjectFieldTemplateProps,
+} from '@rjsf/core';
 import classNames from 'classnames';
 import { LoadingState } from 'Models';
-import React, { FunctionComponent } from 'react';
+import React, { Fragment, FunctionComponent } from 'react';
 import { ConfigData } from '../../../interface/service.interface';
+import SVGIcons, { Icons } from '../../../utils/SvgUtils';
 import { Button } from '../../buttons/Button/Button';
 import Loader from '../../Loader/Loader';
 
@@ -26,6 +31,73 @@ interface Props extends FormProps<ConfigData> {
   onCancel?: () => void;
 }
 
+function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
+  return (
+    <>
+      <label className="control-label">{props.title}</label>
+      <p className="field-description">{props.schema.description}</p>
+      {props.items.map((element, index) => (
+        <div className="tw-flex tw-items-center tw-w-full" key={index}>
+          <div className="tw-flex-1">{element.children}</div>
+          {element.hasRemove && (
+            <button
+              className="focus:tw-outline-none tw-w-1/12"
+              type="button"
+              onClick={(event) => {
+                element.onDropIndexClick(element.index)(event);
+              }}>
+              <SVGIcons
+                alt="delete"
+                icon={Icons.DELETE}
+                title="Delete"
+                width="16px"
+              />
+            </button>
+          )}
+        </div>
+      ))}
+      {props.canAdd && (
+        <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>
+      <p className="field-description">{props.description}</p>
+      {props.properties.map((element) => (
+        <div className="property-wrapper" key={element.content.key}>
+          {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> = ({
   showFormHeader = false,
   status = 'initial',
@@ -49,6 +121,8 @@ const FormBuilder: FunctionComponent<Props> = ({
 
   return (
     <Form
+      ArrayFieldTemplate={ArrayFieldTemplate}
+      ObjectFieldTemplate={ObjectFieldTemplate}
       className={classNames('rjsf', props.className, {
         'no-header': !showFormHeader,
       })}

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

@@ -378,6 +378,34 @@
     focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
   }
 
+  .rjsf .btn {
+    @apply tw-align-bottom tw-inline-flex tw-items-center tw-justify-center tw-cursor-pointer tw-leading-5 
+    tw-transition-colors tw-duration-150 tw-font-medium focus:tw-outline-none tw-rounded-lg 
+    tw-text-sm tw-text-white tw-border tw-border-transparent;
+  }
+
+  .rjsf .btn.btn-block {
+    @apply tw-w-full;
+  }
+
+  .rjsf .btn.array-item-remove {
+    @apply tw-mt-4 tw-p-4;
+    background: url(../assets/svg/ic-delete.svg) center center no-repeat;
+    background-size: 35%;
+  }
+
+  .rjsf .row {
+    @apply tw-flex tw-items-center tw-w-full tw--m-1;
+  }
+
+  .rjsf .col-xs-5 {
+    @apply tw-flex-1 tw-p-1;
+  }
+
+  .rjsf .col-xs-2 {
+    @apply tw-w-1/12 tw-p-1;
+  }
+
   @keyframes highlight {
     0% {
       @apply tw-bg-warning-lite;

openmetadata-ui/src/main/resources/ui/tailwind.config.js

@@ -60,7 +60,11 @@ const textDark = '#000000';
 const textMutedLite = '#6B728026'; // 'rgba(107, 114, 128, 0.15)'
 
 module.exports = {
-  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  purge: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './src/styles/tailwind.css',
+    './public/index.html',
+  ],
   darkMode: false,
   prefix: 'tw-',
   theme: {