feat: show title for array & descriptions as tippy

Author: Elessar1802

src/Common/RJSF/common/FieldRow.tsx

@@ -15,15 +15,18 @@
  */
 
 import React from 'react'
+import { ConditionalWrap } from '../../Helper'
 import { FieldRowProps } from './types'
 import { DEFAULT_FIELD_TITLE } from '../constants'
+import { getTippyWrapperWithContent } from '../utils'
 
 export const FieldRowWithLabel = ({
     showLabel,
     label,
     required,
     children,
     id,
+    rawDescription,
     shouldAlignCenter = true,
 }: FieldRowProps) => (
     <div
@@ -34,8 +37,12 @@ export const FieldRowWithLabel = ({
         }
     >
         {showLabel && (
-            <label className="cn-7 fs-13 lh-32 fw-4 flexbox mb-0" htmlFor={id}>
-                <span className="dc__ellipsis-right">{label || DEFAULT_FIELD_TITLE}</span>
+            <label className="cn-7 fs-13 lh-20 fw-4 flexbox mb-0" htmlFor={id}>
+                <ConditionalWrap condition={!!rawDescription} wrap={getTippyWrapperWithContent(rawDescription, 'top')}>
+                    <span className={`dc__ellipsis-right ${rawDescription ? 'text-underline-dashed-300' : ''}`}>
+                        {label || DEFAULT_FIELD_TITLE}
+                    </span>
+                </ConditionalWrap>
                 {required && <span className="cr-5">&nbsp;*</span>}
             </label>
         )}

src/Common/RJSF/common/types.ts

@@ -16,7 +16,8 @@
 
 import { FieldTemplateProps } from '@rjsf/utils'
 
-export interface FieldRowProps extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id'> {
+export interface FieldRowProps
+    extends Pick<FieldTemplateProps, 'children' | 'label' | 'required' | 'id' | 'rawDescription'> {
     showLabel?: boolean
     /**
      * @default true

src/Common/RJSF/config.ts

@@ -22,7 +22,6 @@ import {
     ArrayFieldItemTemplate,
     ArrayFieldTemplate,
     BaseInputTemplate,
-    DescriptionFieldTemplate,
     FieldTemplate,
     FieldErrorTemplate,
     ObjectFieldTemplate,
@@ -44,7 +43,6 @@ export const templates: FormProps['templates'] = {
     ArrayFieldTemplate,
     BaseInputTemplate,
     ButtonTemplates: { AddButton, RemoveButton, SubmitButton },
-    DescriptionFieldTemplate,
     FieldTemplate,
     FieldErrorTemplate,
     ObjectFieldTemplate,

src/Common/RJSF/templates/Description.tsx

@@ -17,6 +17,7 @@
 import React from 'react'
 import { FieldTemplateProps, getUiOptions, getTemplate, ADDITIONAL_PROPERTY_FLAG } from '@rjsf/utils'
 import { FieldRowWithLabel } from '../common/FieldRow'
+import { TitleField } from './TitleField'
 
 export const Field = (props: FieldTemplateProps) => {
     const {
@@ -31,7 +32,7 @@ export const Field = (props: FieldTemplateProps) => {
         uiSchema,
         classNames,
         schema,
-        description,
+        rawDescription,
     } = props
     const uiOptions = getUiOptions(uiSchema)
     const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate'>(
@@ -43,15 +44,32 @@ export const Field = (props: FieldTemplateProps) => {
     const hasAdditionalProperties = ADDITIONAL_PROPERTY_FLAG in schema
     // Label is not displayed for boolean fields by default and hide for object type fields
     const showLabel = (displayLabel || schema.type === 'boolean') && !hasAdditionalProperties
+    const showTitle = schema.type === 'array'
 
     return hidden ? (
         <div className="hidden">{children}</div>
     ) : (
         <div className={`${classNames} mb-12`}>
-            <FieldRowWithLabel label={label} showLabel={showLabel} id={id} required={required}>
+            {showTitle && (
+                <TitleField
+                    id={id}
+                    title={label}
+                    required={required}
+                    registry={registry}
+                    uiSchema={uiSchema}
+                    schema={schema}
+                    description={rawDescription}
+                />
+            )}
+            <FieldRowWithLabel
+                label={label}
+                showLabel={showLabel}
+                id={id}
+                required={required}
+                rawDescription={rawDescription}
+            >
                 <WrapIfAdditionalTemplate {...props}>{children}</WrapIfAdditionalTemplate>
             </FieldRowWithLabel>
-            {description}
             {errors}
         </div>
     )

src/Common/RJSF/templates/Field.tsx

@@ -24,6 +24,7 @@ import {
     titleId,
 } from '@rjsf/utils'
 import { FieldRowWithLabel } from '../common/FieldRow'
+import { TitleField } from './TitleField'
 
 const Field = ({
     disabled,
@@ -87,22 +88,22 @@ const Field = ({
 }
 
 export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
-    const { idSchema, registry, required, schema, title, uiSchema } = props
+    const { idSchema, registry, required, schema, title, uiSchema, description } = props
     const options = getUiOptions(uiSchema)
-    const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options)
     const hasAdditionalProperties = !!schema.additionalProperties
     const showTitle = title && !hasAdditionalProperties
 
     return (
         <fieldset id={idSchema.$id}>
             {showTitle && (
-                <TitleFieldTemplate
+                <TitleField
                     id={titleId(idSchema)}
                     title={title}
                     required={required}
                     schema={schema}
                     uiSchema={uiSchema}
                     registry={registry}
+                    description={description}
                 />
             )}
             {/* Not adding the border and padding for non-objects and root schema */}

src/Common/RJSF/templates/ObjectFieldTemplate.tsx

@@ -15,11 +15,15 @@
  */
 
 import React from 'react'
+import { ConditionalWrap } from '../../Helper'
 import { TitleFieldProps } from '@rjsf/utils'
+import { getTippyWrapperWithContent } from '../utils'
 
-export const TitleField = ({ id, title, required }: TitleFieldProps) => (
+export const TitleField = ({ id, title, required, description }: TitleFieldProps & Record<'description', string>) => (
     <legend className="fs-13 fw-6 cn-9 lh-20 dc__no-border py-9 mb-0" id={id}>
-        <span>{title}</span>
+        <ConditionalWrap condition={!!description} wrap={getTippyWrapperWithContent(description, 'top')}>
+            <span className={`${description ? 'text-underline-dashed-300' : ''}`}>{title}</span>
+        </ConditionalWrap>
         {required && <span className="cr-5">&nbsp;*</span>}
     </legend>
 )

src/Common/RJSF/templates/TitleField.tsx

@@ -18,7 +18,6 @@ export { ArrayFieldTemplate } from './ArrayFieldTemplate'
 export { ArrayFieldItemTemplate } from './ArrayFieldItemTemplate'
 export { BaseInput as BaseInputTemplate } from './BaseInput'
 export * from './ButtonTemplates'
-export { Description as DescriptionFieldTemplate } from './Description'
 export { Field as FieldTemplate } from './Field'
 export { FieldErrorTemplate } from './FieldErrorTemplate'
 export { ObjectFieldTemplate } from './ObjectFieldTemplate'

src/Common/RJSF/templates/index.ts

@@ -137,8 +137,9 @@ export const getInferredTypeFromValueType = (value) => {
     }
 }
 
-export const getTippyWrapperWithContent = (content) => (children) => (
-    <Tippy className="default-tt dc__word-break" arrow={false} placement="right" content={content}>
-        {children}
-    </Tippy>
-)
+export const getTippyWrapperWithContent =
+    (content, placement?: React.ComponentProps<typeof Tippy>['placement']) => (children) => (
+        <Tippy className="default-tt dc__word-break" arrow={false} placement={placement || 'right'} content={content}>
+            {children}
+        </Tippy>
+    )